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

{% block content %}
    
    {# ------------------------------------------------ #}
    {# 🚀 TOP NAV BAR (Sticky and Themed) #}
    {# ------------------------------------------------ #}
    <nav id="bottomNavbar" class="navbar navbar-expand-lg sticky-top border-bottom" 
         style="background-color: var(--kaauh-teal); z-index: 1030; height: 50px;">
        <div class="container-fluid container-lg">
             <span class="navbar-text text-white fw-bold fs-6">{% trans "Job Overview" %}</span>
        </div>
    </nav>
    
    {# ------------------------------------------------ #}
    {# 🔔 DJANGO MESSAGES (Refined placement and styling) #}
    {# ------------------------------------------------ #}
    

    {# ------------------------------------------------ #}
    {# 💻 MAIN CONTENT CONTAINER #}
    {# ------------------------------------------------ #}
    <div class="container mt-4 mb-5">
        <div class="row g-4 main-content-area">
            
            {# 📌 RIGHT COLUMN: Sticky Apply Card (Desktop Only) #}
            <div class="col-lg-4 order-lg-2 d-none d-lg-block">
                <div class="card shadow-lg border-0" style="position: sticky; top: 70px;"> 
                    <div class="card-header bg-white border-bottom p-3">
                        <h5 class="mb-0 fw-bold text-kaauh-teal">
                            <i class="fas fa-file-signature me-2"></i>{% trans "Ready to Apply?" %}
                        </h5>
                    </div>
                    <div class="card-body text-center p-4">
                        <p class="text-muted small mb-3">{% trans "Review the full job details below before submitting your application." %}</p>
                        
                        {% if job.form_template %}
                            <a href="{% url 'application_submit_form' job.form_template.slug %}" class="btn btn-main-action btn-lg w-100 shadow-sm">
                                <i class="fas fa-paper-plane me-2"></i> {% trans "Apply for this Position" %}
                            </a>
                        {% elif not job.is_expired %}
                             <p class="text-danger fw-bold">{% trans "Application form is unavailable." %}</p>
                        {% endif %}
                    </div>
                </div>
            </div>

            {# 📝 LEFT COLUMN: Job Details #}
            <div class="col-lg-8 order-lg-1">
                <article class="card shadow-lg border-0">
                    
                    {# Job Title Header #}
                    <header class="card-header bg-white border-bottom p-4">
                        <h1 class="h2 mb-0 fw-bolder text-kaauh-teal">{{ job.title }}</h1>
                    </header>

                    <div class="card-body p-4">
                        
                        <h4 class="mb-4 fw-bold text-muted border-bottom pb-2">{% trans "Summary" %}</h4>
                        
                        {# Job Metadata/Overview Grid #}
                        <section class="row row-cols-1 row-cols-md-2 g-3 mb-5 small text-secondary p-3 rounded bg-light-subtle border">
                            
                            {# SALARY #}
                            {% if job.salary_range %}
                            <div class="col">
                                <i class="fas fa-money-bill-wave text-success me-2 fa-fw"></i>
                                <strong>{% trans "Salary:" %}</strong> 
                                <span class="fw-bold text-success">{{ job.salary_range }}</span>
                            </div>
                            {% endif %}
                            
                            {# DEADLINE #}
                            <div class="col">
                                <i class="fas fa-calendar-alt text-muted me-2 fa-fw"></i>
                                <strong>{% trans "Deadline:" %}</strong> 
                                {% if job.application_deadline %}
                                    <time datetime="{{ job.application_deadline|date:'Y-m-d' }}">
                                        {{ job.application_deadline|date:"M d, Y" }}
                                    </time>
                                    {% if job.is_expired %}
                                        <span class="badge bg-danger ms-2">{% trans "EXPIRED" %}</span>
                                    {% endif %}
                                {% else %}
                                    <span class="text-muted">{% trans "Ongoing" %}</span>
                                {% endif %}
                            </div>
                            
                            {# JOB TYPE #}
                            <div class="col"> 
                                <i class="fas fa-briefcase text-muted me-2 fa-fw"></i> 
                                <strong>{% trans "Job Type:" %}</strong> {{ job.get_job_type_display }} 
                            </div>
                            
                            {# LOCATION #}
                            <div class="col"> 
                                <i class="fas fa-map-marker-alt text-muted me-2 fa-fw"></i> 
                                <strong>{% trans "Location:" %}</strong> {{ job.get_location_display }} 
                            </div>
                            
                            {# DEPARTMENT #}
                            <div class="col"> 
                                <i class="fas fa-building text-muted me-2 fa-fw"></i> 
                                <strong>{% trans "Department:" %}</strong> {{ job.department|default:"N/A" }} 
                            </div>
                            
                            {# JOB ID #}
                            <div class="col"> 
                                <i class="fas fa-hashtag text-muted me-2 fa-fw"></i> 
                                <strong>{% trans "JOB ID:" %}</strong> {{ job.internal_job_id|default:"N/A" }} 
                            </div>
                            
                            {# WORKPLACE TYPE #}
                            <div class="col"> 
                                <i class="fas fa-laptop-house text-muted me-2 fa-fw"></i> 
                                <strong>{% trans "Workplace:" %}</strong> {{ job.get_workplace_type_display }} 
                            </div>
                            
                        </section>
                        
                        {# Detailed Accordion Section #}
                        <div class="accordion accordion-flush" id="jobDetailAccordion">
                            
                            {% with active_collapse="collapseOne" %}
                            
                            {# JOB DESCRIPTION #}
                            {% if job.has_description_content %}
                            <div class="accordion-item border-top border-bottom">
                                <h2 class="accordion-header" id="headingOne">
                                    <button class="accordion-button fw-bold fs-5 text-kaauh-teal-dark" type="button" 
                                            data-bs-toggle="collapse" data-bs-target="#{{ active_collapse }}" aria-expanded="true" 
                                            aria-controls="{{ active_collapse }}">
                                        <i class="fas fa-info-circle me-3 fa-fw"></i> {% trans "Job Description" %}
                                    </button>
                                </h2>
                                <div id="{{ active_collapse }}" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#jobDetailAccordion">
                                    <div class="accordion-body text-secondary p-4">
                                        <div class="wysiwyg-content">{{ job.description|safe }}</div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                            
                            {# QUALIFICATIONS #}
                            {% if job.has_qualifications_content %}
                            <div class="accordion-item border-bottom">
                                <h2 class="accordion-header" id="headingTwo">
                                    <button class="accordion-button collapsed fw-bold fs-5 text-kaauh-teal-dark" type="button" 
                                            data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        <i class="fas fa-graduation-cap me-3 fa-fw"></i> {% trans "Qualifications" %}
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#jobDetailAccordion">
                                    <div class="accordion-body text-secondary p-4">
                                        <div class="wysiwyg-content">{{ job.qualifications|safe }}</div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                            
                            {# BENEFITS #}
                            {% if job.has_benefits_content %}
                            <div class="accordion-item border-bottom">
                                <h2 class="accordion-header" id="headingThree">
                                    <button class="accordion-button collapsed fw-bold fs-5 text-kaauh-teal-dark" type="button" 
                                            data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        <i class="fas fa-hand-holding-usd me-3 fa-fw"></i> {% trans "Benefits" %}
                                    </button>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#jobDetailAccordion">
                                    <div class="accordion-body text-secondary p-4">
                                        <div class="wysiwyg-content">{{ job.benefits|safe }}</div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}

                            {# APPLICATION INSTRUCTIONS #}
                            {% if job.has_application_instructions_content %}
                            <div class="accordion-item border-bottom">
                                <h2 class="accordion-header" id="headingFour">
                                    <button class="accordion-button collapsed fw-bold fs-5 text-kaauh-teal-dark" type="button" 
                                            data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                        <i class="fas fa-file-alt me-3 fa-fw"></i> {% trans "Application Instructions" %}
                                    </button>
                                </h2>
                                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#jobDetailAccordion">
                                    <div class="accordion-body text-secondary p-4">
                                        <div class="wysiwyg-content">{{ job.application_instructions|safe }}</div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                            
                            {% endwith %}

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

    {# 📱 MOBILE FIXED APPLY BAR (Replaced inline style with utility classes) #}
    {% if job.form_template %}
    <footer class="fixed-bottom d-lg-none bg-white border-top shadow-lg p-3"> 
        <a href="{% url 'application_submit_form' job.form_template.slug %}" class="btn btn-main-action btn-lg w-100">
            <i class="fas fa-paper-plane me-2"></i> {% trans "Apply for this Position" %}
        </a>
    </footer>
    {% endif %}

    
{% endblock content%}