{% extends 'applicant/partials/candidate_facing_base.html' %}
{% load static i18n %}

{% block title %}{% trans "Application" %}-{{ job.title }}{% endblock %}

{% block content %}
<style>
    /* 1. LAYOUT & GRID */
    .page-container {
        max-width: 1200px;
        margin: 2rem auto 5rem;
        padding-inline: 1.5rem;
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 2rem;
        align-items: start;
    }

    @media (max-width: 992px) {
        .page-container { grid-template-columns: 1fr; }
        .desktop-sidebar { display: none; }
    }

    /* 2. STICKY TOP NAV */
    .job-nav {
        background-color: var(--kaauh-teal);
        color: white;
        padding: 0.75rem 1.5rem;
        position: sticky;
        top: 0;
        z-index: 100;
        font-weight: 700;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* 3. CARDS & SECTIONS */
    .content-card {
        background: white;
        border-radius: 1rem;
        border: 1px solid var(--border);
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        overflow: hidden;
    }

    .card-header {
        padding: 1.5rem;
        border-bottom: 1px solid var(--border);
        background: white;
    }

    .card-body { padding: 1.5rem; }

    /* 4. METADATA GRID */
    .meta-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.25rem;
        background: #f9fafb;
        border: 1px solid var(--border);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.9rem;
        color: var(--gray-text);
    }

    .meta-item svg {
        width: 1.25rem;
        height: 1.25rem;
        color: var(--kaauh-teal);
        flex-shrink: 0;
    }

    /* 5. PURE CSS ACCORDION */
    .accordion-item { border-bottom: 1px solid var(--border); }
    .accordion-toggle { display: none; }
    
    .accordion-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem;
        cursor: pointer;
        font-weight: 700;
        color: var(--kaauh-teal-dark);
        transition: background 0.2s;
    }

    .accordion-header:hover { background: #f8fafc; }
    
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        color: #4b5563;
    }

    .accordion-toggle:checked + .accordion-header + .accordion-content {
        max-height: 2000px; /* Large enough for content */
        padding: 1rem 1.25rem 2rem;
    }

    .accordion-icon {
        transition: transform 0.3s;
    }
    .accordion-toggle:checked + .accordion-header .accordion-icon {
        transform: rotate(180deg);
    }

    /* 6. SIDEBAR & BUTTONS */
    .sticky-sidebar {
        position: sticky;
        top: 80px;
    }

    .btn-apply {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background: var(--kaauh-teal);
        color: white;
        padding: 1rem;
        border-radius: 0.75rem;
        font-weight: 700;
        text-decoration: none;
        width: 100%;
        border: none;
        transition: 0.2s;
    }

    .btn-apply:disabled { background: #9ca3af; cursor: not-allowed; }
    .btn-apply:not(:disabled):hover { background: var(--kaauh-teal-dark); }

    /* 7. MOBILE FOOTER */
    .mobile-apply-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    @media (min-width: 993px) { .mobile-apply-bar { display: none; } }
</style>

<nav class="job-nav">
    <div style="max-width: 1200px; margin: 0 auto;">
        {% trans "Job Overview" %}
    </div>
</nav>

<div class="page-container">
    <main>
        <article class="content-card">
            <header class="card-header">
                <h1 style="font-size: 1.875rem; font-weight: 800; color: var(--kaauh-teal-dark); margin: 0;">
                    {{ job.title }}
                </h1>
            </header>

            <div class="card-body">
                <h4 style="font-size: 1.1rem; font-weight: 700; color: #6b7280; border-bottom: 2px solid #f3f4f6; padding-bottom: 0.5rem; margin-bottom: 1.5rem;">
                    {% trans "Summary" %}
                </h4>

                <section class="meta-section">
                    {% if job.salary_range %}
                    <div class="meta-item">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <strong>{% trans "Salary:" %}</strong> <span style="color: #059669; font-weight: 700;">{{ job.salary_range }}</span>
                    </div>
                    {% endif %}

                    <div class="meta-item">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        <strong>{% trans "Deadline:" %}</strong> 
                        {% if job.application_deadline %}
                            {{ job.application_deadline|date:"M d, Y" }}
                            {% if job.is_expired %}<span style="color: #dc2626; font-size: 0.7rem; font-weight: 800;">(EXPIRED)</span>{% endif %}
                        {% else %}{% trans "Ongoing" %}{% endif %}
                    </div>

                    <div class="meta-item">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                        <strong>{% trans "Type:" %}</strong> {{ job.get_job_type_display }}
                    </div>

                    <div class="meta-item">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                        <strong>{% trans "Location:" %}</strong> {{ job.get_location_display }}
                    </div>

                    <div class="meta-item">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                        <strong>{% trans "Department:" %}</strong> {{ job.department|default:"N/A" }}
                    </div>

                    <div class="meta-item">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path></svg>
                        <strong>{% trans "ID:" %}</strong> {{ job.internal_job_id|default:"N/A" }}
                    </div>
                </section>

                <div class="accordion-container">
                    
                    {% if job.has_description_content %}
                    <div class="accordion-item">
                        <input type="checkbox" id="acc1" class="accordion-toggle" checked>
                        <label for="acc1" class="accordion-header">
                            <span style="display: flex; align-items: center; gap: 0.75rem;">
                                <svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                {% trans "Job Description" %}
                            </span>
                            <svg class="accordion-icon heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </label>
                        <div class="accordion-content">
                            <div class="wysiwyg-content">{{ job.description|safe }}</div>
                        </div>
                    </div>
                    {% endif %}

                    {% if job.has_qualifications_content %}
                    <div class="accordion-item">
                        <input type="checkbox" id="acc2" class="accordion-toggle">
                        <label for="acc2" class="accordion-header">
                            <span style="display: flex; align-items: center; gap: 0.75rem;">
                                <svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path></svg>
                                {% trans "Qualifications" %}
                            </span>
                            <svg class="accordion-icon heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </label>
                        <div class="accordion-content">
                            <div class="wysiwyg-content">{{ job.qualifications|safe }}</div>
                        </div>
                    </div>
                    {% endif %}

                </div>
            </div>
        </article>
    </main>

    <aside class="desktop-sidebar">
        <div class="content-card sticky-sidebar">
            <header class="card-header">
                <h5 style="margin: 0; font-weight: 800; color: var(--kaauh-teal); display: flex; align-items: center; gap: 0.5rem;">
                    <svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                    {% trans "Ready to Apply?" %}
                </h5>
            </header>
            <div class="card-body" style="text-align: center;">
                <p style="color: #6b7280; font-size: 0.875rem; margin-bottom: 1.5rem;">
                    {% trans "Review the details before submitting your application." %}
                </p>

                {% if job.form_template %}
                    {% if user.is_authenticated and already_applied %}
                        <button class="btn-apply" disabled>
                            {% trans "Already Applied" %}
                        </button>
                    {% else %}
                        <a href="{% url 'application_submit_form' job.slug %}" class="btn-apply">
                            <svg class="heroicon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
                            {% trans "Apply Now" %}
                        </a>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </aside>
</div>

{% if job.form_template %}
<div class="mobile-apply-bar">
    {% if user.is_authenticated and already_applied %}
        <button class="btn-apply" disabled style="width: 100%;">{% trans "Already Applied" %}</button>
    {% else %}
        <a href="{% url 'application_submit_form' job.slug %}" class="btn-apply">{% trans "Apply for this Position" %}</a>
    {% endif %}
</div>
{% endif %}

{% endblock %}