{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %}Clients in {{ company.name }}{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">Clients in {{ company.name }}</h2>
        <a href="{% url 'client_create' %}" class="btn btn-primary">Add New Client</a>
    </div>

    {% if clients %}
    <div class="card shadow-lg border-0 rounded-lg">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Client Name</th>
                            <th>Job Ref Prefix</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for client_obj in clients %}
                        <tr>
                            <td>{{ client_obj.name }}</td>
                            <td>{{ client_obj.client_job_ref_prefix|default:"N/A" }}</td>
                            <td>
                                <a href="{% url 'client_update' pk=client_obj.pk %}" class="btn btn-info btn-sm">Edit</a>
                                <a href="{% url 'client_delete' pk=client_obj.pk %}" class="btn btn-danger btn-sm">Delete</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% else %}
    <div class="alert alert-info">No clients found in your company yet.</div>
    {% endif %}

    <div class="mt-4">
        <a href="{% url 'settings' %}" class="btn btn-secondary">Back to Settings</a>
    </div>
</div>
{% endblock %}