{% extends 'base.html' %}
{% load static i18n %}

{% block title %}{% trans "Agency Assignments" %} - ATS{% endblock %}

{% block customCSS %}
<style>
    /* KAAT-S UI Variables */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #eaeff3;
        --kaauh-primary-text: #343a40;
        --kaauh-success: #28a745;
        --kaauh-info: #17a2b8;
        --kaauh-danger: #dc3545;
        --kaauh-warning: #ffc107;
    }

    .kaauh-card {
        border: 1px solid var(--kaauh-border);
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        background-color: white;
    }

    .btn-main-action {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        color: white;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    .btn-main-action:hover {
        background-color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal-dark);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .status-badge {
        font-size: 0.75rem;
        padding: 0.3em 0.7em;
        border-radius: 0.35rem;
        font-weight: 700;
    }
    {% comment %} .status-ACTIVE { background-color: var(--kaauh-success); color: white; }
    .status-EXPIRED { background-color: var(--kaauh-danger); color: white; }
    .status-COMPLETED { background-color: var(--kaauh-info); color: white; }
    .status-CANCELLED { background-color: var(--kaauh-warning); color: #856404; } {% endcomment %}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
                <i class="fas fa-tasks me-2"></i>
                {% trans "Agency Assignments" %}
            </h1>
            <h2 class="h5 text-muted mb-0">
                {% trans "Total Assignments:" %} <span class="fw-bold">{{ total_assignments }}</span>
            </h2>
        </div>
        <div>
            <a href="{% url 'agency_assignment_create' %}" class="btn btn-main-action">
                <i class="fas fa-plus me-1"></i> {% trans "New Assignment" %}
            </a>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="kaauh-card p-3 mb-4">
        <form method="get" class="row g-3 align-items-end">
            <div class="col-md-4 me-5">
                <label for="search" class="form-label">{% trans "Search by name and job" %}</label>
                <div class="input-group flex-grow-1">
                    
                    <input type="text" class="form-control border-start-0 w-50" id="search" name="q"
                           value="{{ search_query }}" placeholder="{% trans 'Search....' %}">
                    <button class="btn btn-outline-primary" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                    
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="form-group-sm">
                    <label for="status" class="form-label">{% trans "Status" %}</label>
                    <select class="form-select form-select-sm" id="status" name="status">
                        <option value="">{% trans "All Statuses" %}</option>
                        <option value="ACTIVE" {% if status_filter == 'ACTIVE' %}selected{% endif %}>{% trans "Active" %}</option>
                        <option value="EXPIRED" {% if status_filter == 'EXPIRED' %}selected{% endif %}>{% trans "Expired" %}</option>
                        <option value="COMPLETED" {% if status_filter == 'COMPLETED' %}selected{% endif %}>{% trans "Completed" %}</option>
                        <option value="CANCELLED" {% if status_filter == 'CANCELLED' %}selected{% endif %}>{% trans "Cancelled" %}</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                            <div class="filter-buttons">
                                <button type="submit" class="btn btn-main-action btn-sm">
                                    <i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
                                </button>
                                {% if status_filter or search_query %}
                                    <a href="{% url 'agency_assignment_list' %}" class="btn btn-outline-secondary btn-sm">
                                        <i class="fas fa-times me-1"></i> {% trans "Clear Filter" %}
                                    </a>
                                {% endif %}
                            </div>
              </div>
            
        </form>
        
    </div>

    <!-- Assignments List -->
    <div class="kaauh-card">
        {% if page_obj %}
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th><i class="fas fa-building me-1"></i> {% trans "Agency" %}</th>
                            <th><i class="fas fa-briefcase me-1"></i> {% trans "Job" %}</th>
                            <th><i class="fas fa-users me-1"></i> {% trans "Candidates" %}</th>
                            <th><i class="fas fa-clock me-1"></i> {% trans "Deadline" %}</th>
                            <th><i class="fas fa-info-circle me-1"></i> {% trans "Status" %}</th>
                            <th><i class="fas fa-cog me-1"></i> {% trans "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for assignment in page_obj %}
                        <tr>
                            <td>
                                <div class="fw-bold">{{ assignment.agency.name }}</div>
                                <div class="text-muted small">{{ assignment.agency.contact_person }}</div>
                            </td>
                            <td>
                                <div class="fw-bold">{{ assignment.job.title }}</div>
                                <div class="text-muted small">{{ assignment.job.department }}</div>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-primary-theme text-white me-2">{{ assignment.applications_submited_count}}</span>
                                    <span class="text-muted">/ {{ assignment.max_candidates }}</span>
                                </div>
                                <div class="progress mt-1" style="height: 4px;">
                                    {% widthratio assignment.submitted_count assignment.max_candidates 100 as progress %}
                                    <div class="progress-bar" style="width: {{ progress }}%"></div>
                                </div>
                            </td>
                            <td>
                                <div class="{% if assignment.is_expired %}text-danger{% else %}text-muted{% endif %}">
                                    <i class="fas fa-calendar-alt me-1"></i>
                                    {{ assignment.deadline_date|date:"Y-m-d H:i" }}
                                </div>
                                {% if assignment.is_expired %}
                                    <small class="text-danger">
                                        <i class="fas fa-exclamation-triangle me-1"></i>{% trans "Expired" %}
                                    </small>
                                {% endif %}
                            </td>
                            <td>
                                <span class="status-badge bg-primary-theme text-white">
                                    {{ assignment.get_status_display }}
                                </span>
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{% url 'agency_assignment_detail' assignment.slug %}"
                                       class="btn btn-sm btn-outline-primary" title="{% trans 'View Details' %}">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{% url 'agency_assignment_update' assignment.slug %}"
                                       class="btn btn-sm btn-outline-secondary" title="{% trans 'Edit' %}">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    {% if assignment.access_link %}
                                        <a href="{% url 'agency_access_link_detail' assignment.access_link.slug %}"
                                           class="btn btn-sm btn-outline-info" title="{% trans 'View Access Link' %}">
                                            <i class="fas fa-link"></i>
                                        </a>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            {% if page_obj.has_other_pages %}
                <nav aria-label="{% trans 'Assignments pagination' %}">
                    <ul class="pagination justify-content-center mt-4">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if search_query %}&q={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="fas fa-angle-double-left"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="fas fa-angle-left"></i>
                                </a>
                            </li>
                        {% endif %}

                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                                <li class="page-item active">
                                    <span class="page-link">{{ num }}</span>
                                </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ num }}{% if search_query %}&q={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">{{ num }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&q={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                                    <i class="fas fa-angle-double-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        {% else %}
            <div class="text-center py-5">
                <i class="fas fa-tasks fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">{% trans "No assignments found" %}</h5>
                <p class="text-muted">{% trans "Create your first agency assignment to get started." %}</p>
                <a href="{% url 'agency_assignment_create' %}" class="btn btn-main-action">
                    <i class="fas fa-plus me-1"></i> {% trans "Create Assignment" %}
                </a>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}