{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1>{{ opportunity.name }}</h1>
        <div>
            <a href="{% url 'opportunities:opportunity_update' opportunity.pk %}" class="btn btn-warning">Edit</a>
            <a href="{% url 'opportunities:opportunity_delete' opportunity.pk %}" class="btn btn-danger">Delete</a>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Opportunity Details</h5>
            <table class="table">
                <tr>
                    <th>Lead</th>
                    <td>{{ opportunity.lead.customer.name }}</td>
                </tr>
                <tr>
                    <th>Stage</th>
                    <td>{{ opportunity.get_stage_display }}</td>
                </tr>
                <tr>
                    <th>Value</th>
                    <td>${{ opportunity.value|default:0 }}</td>
                </tr>
                <tr>
                    <th>Probability</th>
                    <td>{{ opportunity.probability|default:0 }}%</td>
                </tr>
                <tr>
                    <th>Close Date</th>
                    <td>{{ opportunity.close_date|date:"Y-m-d" }}</td>
                </tr>
                <tr>
                    <th>Created By</th>
                    <td>{{ opportunity.created_by.email }}</td>
                </tr>
                <tr>
                    <th>Created At</th>
                    <td>{{ opportunity.created_at|date:"Y-m-d H:i" }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
{% endblock %}
