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

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

{% block content %}
<div class="page-wrapper">
    <!-- Simple Header -->
    <div class="page-header">
        <div class="container">
            <a href="{% url 'kaauh_career' %}" class="back-link">
                <i data-lucide="arrow-left" class="icon-sm"></i>
                <span>{% trans "All Positions" %}</span>
            </a>
        </div>
    </div>

    <div class="container">
        <div class="content-wrapper">
            <!-- Main Content -->
            <main class="main-content">
                <!-- Job Header -->
                <div class="job-header">
                    <h1 class="job-title">{{ job.title }}</h1>
                    <div class="job-meta">
                        <span class="meta-item">
                            <i data-lucide="building-2" class="icon-sm"></i>
                            {{ job.department }}
                        </span>
                        <span class="meta-item">
                            <i data-lucide="map-pin" class="icon-sm"></i>
                            {{ job.get_location_display }}
                        </span>
                        <span class="meta-item">
                            <i data-lucide="briefcase" class="icon-sm"></i>
                            {{ job.get_job_type_display }}
                        </span>
                    </div>
                </div>

                <!-- Job Details Grid -->
                <div class="details-grid">
                    {% if job.salary_range %}
                    <div class="detail-item">
                        <div class="detail-label">{% trans "Salary" %}</div>
                        <div class="detail-value">{{ job.salary_range }}</div>
                    </div>
                    {% endif %}
                    
                    <div class="detail-item">
                        <div class="detail-label">{% trans "Deadline" %}</div>
                        <div class="detail-value">
                            {% if job.application_deadline %}
                                {{ job.application_deadline|date:"M d, Y" }}
                            {% else %}
                                {% trans "Open" %}
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">{% trans "Work Mode" %}</div>
                        <div class="detail-value">{{ job.workplace_type|default:"On-site" }}</div>
                    </div>
                </div>

                <!-- Content Sections -->
                {% if job.has_description_content %}
                <section class="content-section">
                    <h2 class="section-heading">{% trans "About the Role" %}</h2>
                    <div class="section-content">
                        {{ job.description|safe }}
                    </div>
                </section>
                {% endif %}

                {% if job.has_qualifications_content %}
                <section class="content-section">
                    <h2 class="section-heading">{% trans "What We're Looking For" %}</h2>
                    <div class="section-content">
                        {{ job.qualifications|safe }}
                    </div>
                </section>
                {% endif %}
            </main>

            <!-- Sidebar -->
            <aside class="sidebar">
                <div class="apply-card">
                    {% if job.form_template %}
                        {% if user.is_authenticated and already_applied %}
                            <div class="applied-badge">
                                <i data-lucide="check-circle" class="icon-md"></i>
                                <span>{% trans "Applied" %}</span>
                            </div>
                            <p class="apply-text">{% trans "Your application has been submitted" %}</p>
                        {% else %}
                            <a href="{% url 'application_submit_form' job.slug %}" class="apply-button">
                                {% trans "Apply for this Position" %}
                                <i data-lucide="arrow-right" class="icon-sm"></i>
                            </a>
                            {% if job.application_deadline %}
                            <p class="apply-deadline">
                                {% trans "Apply before" %} {{ job.application_deadline|date:"M d, Y" }}
                            </p>
                            {% endif %}
                        {% endif %}
                    {% endif %}
                </div>

                <!-- Quick Info -->
                <div class="info-card">
                    <h3 class="info-title">{% trans "Quick Info" %}</h3>
                    <div class="info-list">
                        {% if job.internal_job_id %}
                        <div class="info-item">
                            <span class="info-label">{% trans "Job ID" %}</span>
                            <span class="info-value">{{ job.internal_job_id }}</span>
                        </div>
                        {% endif %}
                        <div class="info-item">
                            <span class="info-label">{% trans "Posted" %}</span>
                            <span class="info-value">{{ job.created_at|date:"M d, Y" }}</span>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</div>

<!-- Mobile Apply -->
{% if job.form_template and not already_applied %}
<div class="mobile-apply">
    <a href="{% url 'application_submit_form' job.slug %}" class="mobile-apply-btn">
        {% trans "Apply Now" %}
    </a>
</div>
{% endif %}

<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

    :root {
        --red: #9d2235;
        --red-dark: #7a1a29;
        --gray-50: #fafafa;
        --gray-100: #f5f5f5;
        --gray-200: #e5e5e5;
        --gray-400: #a3a3a3;
        --gray-600: #525252;
        --gray-900: #171717;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Inter', -apple-system, sans-serif;
        color: var(--gray-900);
        background: #ffffff;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
    }

    /* Layout */
    .page-wrapper {
        min-height: 100vh;
    }

    .page-header {
        border-bottom: 1px solid var(--gray-200);
        padding: 1.5rem 0;
        background: #ffffff;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .container {
        max-width: 75rem;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .content-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 3rem 0;
    }

    @media (min-width: 1024px) {
        .content-wrapper {
            grid-template-columns: 1fr 22rem;
            gap: 4rem;
        }
    }

    /* Back Link */
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--gray-600);
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.2s;
    }

    .back-link:hover {
        color: var(--red);
    }

    /* Job Header */
    .job-header {
        margin-bottom: 2rem;
    }

    .job-title {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 1rem;
        letter-spacing: -0.02em;
    }

    .job-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        color: var(--gray-600);
        font-size: 0.9375rem;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Details Grid */
    .details-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        padding: 2rem;
        background: var(--gray-50);
        border-radius: 0.75rem;
        margin-bottom: 3rem;
    }

    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .detail-label {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--gray-600);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .detail-value {
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-900);
    }

    /* Content Sections */
    .content-section {
        margin-bottom: 3rem;
    }

    .section-heading {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        letter-spacing: -0.01em;
    }

    .section-content {
        font-size: 1rem;
        line-height: 1.75;
        color: var(--gray-600);
    }

    .section-content h1,
    .section-content h2,
    .section-content h3,
    .section-content h4 {
        font-weight: 600;
        color: var(--gray-900);
        margin: 2rem 0 1rem;
    }

    .section-content h2 { font-size: 1.25rem; }
    .section-content h3 { font-size: 1.125rem; }

    .section-content p {
        margin-bottom: 1rem;
    }

    .section-content ul,
    .section-content ol {
        margin: 1rem 0;
        padding-left: 1.5rem;
    }

    .section-content li {
        margin-bottom: 0.5rem;
    }

    .section-content strong {
        font-weight: 600;
        color: var(--gray-900);
    }

    .section-content a {
        color: var(--red);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* Sidebar */
    .sidebar {
        position: sticky;
        top: 7rem;
        align-self: start;
    }

    .apply-card,
    .info-card {
        background: #ffffff;
        border: 1px solid var(--gray-200);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* Apply Button */
    .apply-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 1rem 1.5rem;
        background: var(--red);
        color: #ffffff;
        font-weight: 600;
        font-size: 1rem;
        border-radius: 0.5rem;
        text-decoration: none;
        transition: background 0.2s;
    }

    .apply-button:hover {
        background: var(--red-dark);
    }

    .apply-text {
        font-size: 0.875rem;
        color: var(--gray-600);
        margin-top: 1rem;
        text-align: center;
    }

    .apply-deadline {
        font-size: 0.8125rem;
        color: var(--gray-600);
        margin-top: 0.75rem;
        text-align: center;
    }

    /* Applied Badge */
    .applied-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1rem;
        background: var(--gray-50);
        border-radius: 0.5rem;
        font-weight: 600;
        color: var(--gray-600);
    }

    /* Info Card */
    .info-title {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--gray-900);
    }

    .info-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.875rem;
    }

    .info-label {
        color: var(--gray-600);
    }

    .info-value {
        font-weight: 500;
        color: var(--gray-900);
    }

    /* Mobile Apply */
    .mobile-apply {
        display: none;
    }

    @media (max-width: 1023px) {
        .mobile-apply {
            display: block;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1rem;
            background: #ffffff;
            border-top: 1px solid var(--gray-200);
            z-index: 100;
        }

        .mobile-apply-btn {
            display: block;
            width: 100%;
            padding: 1rem;
            background: var(--red);
            color: #ffffff;
            font-weight: 600;
            text-align: center;
            border-radius: 0.5rem;
            text-decoration: none;
        }

        .sidebar {
            position: static;
        }

        body {
            padding-bottom: 5rem;
        }
    }

    /* Icons */
    .icon-sm {
        width: 1.125rem;
        height: 1.125rem;
    }

    .icon-md {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .job-title {
            font-size: 2rem;
        }

        .details-grid {
            grid-template-columns: 1fr;
            padding: 1.5rem;
            gap: 1.25rem;
        }

        .content-wrapper {
            padding: 2rem 0;
        }
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});
</script>
{% endblock %}