{% extends 'base.html' %}

{% block content %}
<div class="px-4 py-5 my-5 text-center">
    <h1 class="display-5 fw-bold">Contacts & Deals Manager</h1>
    <div class="col-lg-6 mx-auto">
        <p class="lead mb-4">A lightweight back office to track contacts and deals. Add and edit records, filter and sort lists, and see simple status counters.</p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <a href="{% url 'contact_new' %}" class="btn btn-primary btn-lg px-4 gap-3">Add New Contact</a>
        </div>
    </div>
</div>

<div class="container">
    <h2 class="mb-4">Contacts</h2>
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Company</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for contact in contacts %}
            <tr>
                <td>{{ contact.first_name }} {{ contact.last_name }}</td>
                <td>{{ contact.email }}</td>
                <td>{{ contact.phone }}</td>
                <td>{{ contact.company }}</td>
                <td><span class="badge bg-secondary">{{ contact.status }}</span></td>
                <td>
                    <a href="{% url 'contact_edit' contact.pk %}" class="btn btn-sm btn-outline-primary">Edit</a>
                    <a href="{% url 'contact_delete' contact.pk %}" class="btn btn-sm btn-outline-danger">Delete</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" class="text-center">No contacts found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}
