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

{% block title %}{{ agency.name }} - {% trans "Agency Details" %} - 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;
    }

    /* Primary Color Overrides */
    .text-primary-theme { color: var(--kaauh-teal) !important; }
    .bg-primary-theme { background-color: var(--kaauh-teal) !important; }

    /* Main Container & Card Styling */
    .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;
    }

    /* Agency Header */
    .agency-header {
        background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
        color: white;
        padding: 2rem;
        border-radius: 0.75rem 0.75rem 0 0;
        position: relative;
        overflow: hidden;
    }

    .agency-header::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        transform: translate(50%, -50%);
    }

    /* Info Section */
    .info-section {
        background-color: #f8f9fa;
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--kaauh-border);
    }

    .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }

    .info-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .info-icon {
        width: 40px;
        height: 40px;
        background-color: var(--kaauh-teal);
        color: white;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .info-content {
        flex: 1;
    }

    .info-label {
        font-weight: 600;
        color: var(--kaauh-primary-text);
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-value {
        color: #6c757d;
        font-size: 1rem;
    }

    /* Stats Cards */
    .stat-card {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 0.75rem;
        padding: 1.5rem;
        text-align: center;
        border: 1px solid var(--kaauh-border);
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    }

    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: var(--kaauh-teal);
        margin-bottom: 0.5rem;
    }

    .stat-label {
        color: #6c757d;
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Button Styling */
    .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);
    }

    /* Candidate List */
    .candidate-item {
        background-color: white;
        border: 1px solid var(--kaauh-border);
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 0.75rem;
        transition: all 0.2s ease;
    }

    .candidate-item:hover {
        background-color: #f8f9fa;
        border-color: var(--kaauh-teal);
    }

    .candidate-name {
        font-weight: 600;
        color: var(--kaauh-primary-text);
        margin-bottom: 0.25rem;
    }

    .candidate-details {
        font-size: 0.875rem;
        color: #6c757d;
    }

    /* Stage Badge */
    .stage-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
        border-radius: 0.3rem;
        font-weight: 600;
        display: inline-block;
    }

    .stage-Applied { background-color: #e9ecef; color: #495057; }
    .stage-Screening { background-color: var(--kaauh-info); color: white; }
    .stage-Exam { background-color: var(--kaauh-warning); color: #856404; }
    .stage-Interview { background-color: #17a2b8; color: white; }
    .stage-Offer { background-color: var(--kaauh-success); color: white; }
    .stage-Hired { background-color: #28a745; color: white; }
    .stage-Rejected { background-color: var(--kaauh-danger); color: white; }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 2rem;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Header Section -->
    <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-building me-2"></i>
                {{ agency.name }}
            </h1>
            <p class="text-muted mb-0">
                {% trans "Hiring Agency Details and Candidate Management" %}
            </p>
        </div>
        <div>
            <a href="{% url 'agency_assignment_create' agency.slug %}" class="btn btn-main-action me-2">
                <i class="fas fa-edit me-1"></i> {% trans "Assign job" %}
            </a>
            <a href="{% url 'agency_update' agency.slug %}" class="btn btn-main-action me-2">
                <i class="fas fa-edit me-1"></i> {% trans "Edit Agency" %}
            </a>
            <a href="{% url 'agency_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Agencies" %}
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Agency Information -->
        <div class="col-lg-8">
            <!-- Agency Header Card -->
            <div class="card kaauh-card mb-4">
                <div class="agency-header">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2 class="h4 mb-2">{{ agency.name }}</h2>
                            {% if agency.contact_person %}
                                <p class="mb-1">
                                    <i class="fas fa-user me-2"></i>
                                    {% trans "Contact:" %} {{ agency.contact_person }}
                                </p>
                            {% endif %}
                            {% if agency.email %}
                                <p class="mb-0">
                                    <i class="fas fa-envelope me-2"></i>
                                    {{ agency.email }}
                                </p>
                            {% endif %}
                        </div>
                        <div class="col-md-4 text-end">
                            {% if agency.website %}
                                <a href="{{ agency.website }}" target="_blank" class="btn btn-light btn-sm me-2">
                                    <i class="fas fa-external-link-alt me-1"></i> {% trans "Website" %}
                                </a>
                            {% endif %}
                            {% if agency.email %}
                                <a href="mailto:{{ agency.email }}" class="btn btn-light btn-sm">
                                    <i class="fas fa-envelope me-1"></i> {% trans "Email" %}
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="card-body p-4">
                    <!-- Contact Information -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-section">
                                <h5 class="mb-3">
                                    <i class="fas fa-address-book me-2" style="color: var(--kaauh-teal);"></i>
                                    {% trans "Contact Information" %}
                                </h5>

                                {% if agency.phone %}
                                <div class="info-item">
                                    <div class="info-icon">
                                        <i class="fas fa-phone"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{% trans "Phone" %}</div>
                                        <div class="info-value">{{ agency.phone }}</div>
                                    </div>
                                </div>
                                {% endif %}

                                {% if agency.email %}
                                <div class="info-item">
                                    <div class="info-icon">
                                        <i class="fas fa-envelope"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{% trans "Email" %}</div>
                                        <div class="info-value">{{ agency.email }}</div>
                                    </div>
                                </div>
                                {% endif %}

                                {% if agency.website %}
                                <div class="info-item">
                                    <div class="info-icon">
                                        <i class="fas fa-globe"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{% trans "Website" %}</div>
                                        <div class="info-value">
                                            <a href="{{ agency.website }}" target="_blank" class="text-decoration-none text-secondary">
                                                {{ agency.website }}
                                                <i class="fas fa-external-link-alt ms-1 small"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="info-section">
                                <h5 class="mb-3">
                                    <i class="fas fa-map-marker-alt me-2" style="color: var(--kaauh-teal);"></i>
                                    {% trans "Location Information" %}
                                </h5>

                                {% if agency.address %}
                                <div class="info-item">
                                    <div class="info-icon">
                                        <i class="fas fa-home"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{% trans "Address" %}</div>
                                        <div class="info-value">{{ agency.address }}</div>
                                    </div>
                                </div>
                                {% endif %}

                                {% if agency.city %}
                                <div class="info-item">
                                    <div class="info-icon">
                                        <i class="fas fa-city"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{% trans "City" %}</div>
                                        <div class="info-value">{{ agency.city }}</div>
                                    </div>
                                </div>
                                {% endif %}

                                {% if agency.country %}
                                <div class="info-item">
                                    <div class="info-icon">
                                        <i class="fas fa-flag"></i>
                                    </div>
                                    <div class="info-content">
                                        <div class="info-label">{% trans "Country" %}</div>
                                        <div class="info-value">{{ agency.get_country_display }}</div>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    {% if agency.description %}
                    <div class="info-section mt-3">
                        <h5 class="mb-3">
                            <i class="fas fa-comment-dots me-2" style="color: var(--kaauh-teal);"></i>
                            {% trans "Description" %}
                        </h5>
                        <p class="mb-0">{{ agency.description|linebreaks }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Recent Candidates -->
            <div class="card kaauh-card">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0" style="color: var(--kaauh-teal-dark);">
                            <i class="fas fa-users me-2"></i>
                            {% trans "Recent Candidates" %}
                        </h5>
                        <a href="{% url 'agency_candidates' agency.slug %}" class="btn btn-main-action btn-sm">
                            {% trans "View All Candidates" %}
                            <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    {% if candidates %}
                        {% for candidate in candidates %}
                            <div class="candidate-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="candidate-name">{{ candidate.name }}</div>
                                        <div class="candidate-details">
                                            <i class="fas fa-envelope me-1"></i> {{ candidate.email }}
                                            {% if candidate.phone %}
                                                <span class="ms-3"><i class="fas fa-phone me-1"></i> {{ candidate.phone }}</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="text-end">
                                        <span class="stage-badge stage-{{ candidate.stage }}">
                                            {{ candidate.get_stage_display }}
                                        </span>
                                        <div class="small text-muted mt-1">
                                            {{ candidate.created_at|date:"M d, Y" }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="empty-state">
                            <i class="fas fa-user-slash"></i>
                            <h6>{% trans "No candidates yet" %}</h6>
                            <p class="mb-0">{% trans "This agency hasn't submitted any candidates yet." %}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Statistics -->
            <div class="card kaauh-card mb-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0" style="color: var(--kaauh-teal-dark);">
                        <i class="fas fa-chart-bar me-2"></i>
                        {% trans "Candidate Statistics" %}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="stat-card">
                                <div class="stat-number">{{ total_candidates }}</div>
                                <div class="stat-label">{% trans "Total" %}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="stat-card">
                                <div class="stat-number">{{ active_candidates }}</div>
                                <div class="stat-label">{% trans "Active" %}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="stat-card">
                                <div class="stat-number">{{ hired_candidates }}</div>
                                <div class="stat-label">{% trans "Hired" %}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="stat-card">
                                <div class="stat-number">{{ rejected_candidates }}</div>
                                <div class="stat-label">{% trans "Rejected" %}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            {% comment %} <div class="card kaauh-card mb-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0" style="color: var(--kaauh-teal-dark);">
                        <i class="fas fa-bolt me-2"></i>
                        {% trans "Quick Actions" %}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'agency_update' agency.slug %}" class="btn btn-main-action">
                            <i class="fas fa-edit me-2"></i> {% trans "Edit Agency" %}
                        </a>
                        <a href="{% url 'agency_candidates' agency.slug %}" class="btn btn-outline-info">
                            <i class="fas fa-users me-2"></i> {% trans "View All Candidates" %}
                        </a>
                        <a href="#" class="btn btn-main-action">
                            <i class="fas fa-paper-plane me-2"></i> {% trans "Send Message" %}
                        </a>
                        {% if agency.website %}
                            <a href="{{ agency.website }}" target="_blank" class="btn btn-outline-secondary">
                                <i class="fas fa-external-link-alt me-2"></i> {% trans "Visit Website" %}
                            </a>
                        {% endif %}
                        {% if agency.email %}
                            <a href="mailto:{{ agency.email }}" class="btn btn-outline-success">
                                <i class="fas fa-envelope me-2"></i> {% trans "Send Email" %}
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div> {% endcomment %}

            <!-- Agency Information -->
            <div class="card kaauh-card">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0" style="color: var(--kaauh-teal-dark);">
                        <i class="fas fa-info-circle me-2"></i>
                        {% trans "Agency Information" %}
                    </h5>
                </div>
                <div class="card-body">
                    <p class="mb-2">
                        <strong>{% trans "Created:" %}</strong><br>
                        {{ agency.created_at|date:"F d, Y" }}
                    </p>
                    <p class="mb-2">
                        <strong>{% trans "Last Updated:" %}</strong><br>
                        {{ agency.updated_at|date:"F d, Y" }}
                    </p>
                    <p class="mb-0">
                        <strong>{% trans "Agency ID:" %}</strong><br>
                        <code>{{ agency.slug }}</code>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}