{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1>Leads</h1>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createLeadModal">
            Create Lead
        </button>
    </div>

    <div class="modal fade" id="createLeadModal" tabindex="-1" aria-labelledby="createLeadModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createLeadModalLabel">Create New Lead</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="post">
                        {% csrf_token %}
                        {{ form.as_p }}
                        <button type="submit" class="btn btn-primary">Save Lead</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Company</th>
                <th>Contact Name</th>
                <th>Phone</th>
                <th>Created At</th>
                <th>Last Contacted</th>
                <th>Status</th>
                <th>Notes</th>
            </tr>
        </thead>
        <tbody>
            {% for lead in leads %}
            <tr>
                <td><a href="{% url 'lead_detail' lead.id %}">{{ lead.company }}</a></td>
                <td>{{ lead.contact_name }}</td>
                <td>{{ lead.phone }}</td>
                <td>{{ lead.created_at|date:"Y-m-d H:i" }}</td>
                <td>{{ lead.last_contacted_at|date:"Y-m-d H:i" }}</td>
                <td>{{ lead.status }}</td>
                <td>{{ lead.notes }}</td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="7" class="text-center">No leads found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}
