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

{% block title %}{% trans "Career Opportunities" %}{% endblock %}

{% block content %}
<div class="main-content-area">
    <!-- Hero Section with Modern Design -->
    <header class="hero-section relative overflow-hidden">
        <div class="hero-bg absolute inset-0"></div>
        <div class="hero-pattern absolute inset-0 opacity-10"></div>
        
        <div class="container mx-auto px-6 relative z-10">
            <div class="hero-content text-center py-20 md:py-32">
                <div class="hero-badge inline-block px-6 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white/90 text-sm font-medium mb-6 animate-fade-in">
                    {% trans "We're Hiring" %}
                </div>
                <h1 class="hero-title text-4xl md:text-7xl font-bold mb-6 text-white animate-slide-up">
                    {% trans "Build Your Future" %}
                </h1>
                <p class="hero-subtitle text-lg md:text-2xl max-w-3xl mx-auto text-white/80 font-light leading-relaxed animate-slide-up-delay">
                    {% trans "Join a community of excellence and growth. Discover opportunities that match your passion and expertise." %}
                </p>
                
                <div class="hero-stats mt-12 flex flex-wrap justify-center gap-8 md:gap-16 animate-fade-in-delay">
                    <div class="stat-item">
                        <div class="text-3xl md:text-5xl font-bold text-white">{{ total_open_roles|default:"0" }}</div>
                        <div class="text-sm md:text-base text-white/70 mt-1">{% trans "Open Positions" %}</div>
                    </div>
                    <div class="stat-item">
                        <div class="text-3xl md:text-5xl font-bold text-white">50+</div>
                        <div class="text-sm md:text-base text-white/70 mt-1">{% trans "Departments" %}</div>
                    </div>
                    <div class="stat-item">
                        <div class="text-3xl md:text-5xl font-bold text-white">95%</div>
                        <div class="text-sm md:text-base text-white/70 mt-1">{% trans "Satisfaction Rate" %}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="hero-wave absolute bottom-0 left-0 w-full">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto">
                <path d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,58.7C960,64,1056,64,1152,58.7C1248,53,1344,43,1392,37.3L1440,32L1440,120L1392,120C1344,120,1248,120,1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z" fill="#ffffff"/>
            </svg>
        </div>
    </header>

    <div class="container mx-auto px-6 py-12 md:py-20">
        <!-- Mobile Filter Trigger -->
        <button onclick="toggleFilters()" 
                type="button"
                class="filter-trigger w-full md:hidden bg-gradient-to-r from-temple-red to-[#7a1a29] hover:shadow-xl text-white font-semibold py-4 px-6 rounded-2xl flex items-center justify-center gap-3 transition-all duration-300 mb-8 group">
            <i data-lucide="sliders-horizontal" class="w-5 h-5 group-hover:rotate-90 transition-transform duration-300"></i>
            <span>{% trans "Filter Jobs" %}</span>
        </button>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            <!-- Filter Sidebar -->
            <aside class="lg:col-span-4 xl:col-span-3">
                <div id="sidebar" class="filter-sidebar lg:static hidden lg:block">
                    <div class="filter-card bg-white rounded-3xl p-8 shadow-xl shadow-gray-200/50 border border-gray-100 relative">
                        <button onclick="toggleFilters()" 
                                type="button"
                                class="close-filters absolute top-6 right-6 w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 text-gray-600 transition-colors lg:hidden">
                            <i data-lucide="x" class="w-5 h-5"></i>
                        </button>
                        
                        <div class="filter-header mb-8">
                            <div class="flex items-center gap-3 mb-2">
                                <div class="w-10 h-10 bg-gradient-to-br from-temple-red to-[#7a1a29] rounded-xl flex items-center justify-center">
                                    <i data-lucide="filter" class="w-5 h-5 text-white"></i>
                                </div>
                                <h4 class="text-2xl font-bold text-gray-900">
                                    {% trans "Filters" %}
                                </h4>
                            </div>
                            <p class="text-sm text-gray-500">{% trans "Find your perfect role" %}</p>
                        </div>
                        
                        <form method="GET" class="space-y-6">
                            <!-- Search -->
                            <div class="form-group">
                                <label class="form-label">
                                    <i data-lucide="search" class="w-4 h-4"></i>
                                    {% trans "Keywords" %}
                                </label>
                                <div class="relative">
                                    <input type="text" 
                                           name="q" 
                                           placeholder="{% trans 'Search positions...' %}" 
                                           value="{{ request.GET.q|default:'' }}"
                                           class="form-input">
                                </div>
                            </div>

                            <!-- Employment Type -->
                            <div class="form-group">
                                <label class="form-label">
                                    <i data-lucide="briefcase" class="w-4 h-4"></i>
                                    {% trans "Employment Type" %}
                                </label>
                                <select class="form-select" name="employment_type">
                                    <option value="">{% trans "All Types" %}</option>
                                    {% for key in job_type_keys %}
                                        <option value="{{ key }}" {% if key == selected_job_type %}selected{% endif %}>{{ key }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <!-- Workplace Type -->
                            <div class="form-group">
                                <label class="form-label">
                                    <i data-lucide="home" class="w-4 h-4"></i>
                                    {% trans "Workplace" %}
                                </label>
                                <select class="form-select" name="workplace_type">
                                    <option value="">{% trans "All Locations" %}</option>
                                    {% for key in workplace_type_keys %}
                                        <option value="{{ key }}" {% if key == selected_workplace_type %}selected{% endif %}>{{ key }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <!-- Department -->
                            <div class="form-group">
                                <label class="form-label">
                                    <i data-lucide="building-2" class="w-4 h-4"></i>
                                    {% trans "Department" %}
                                </label>
                                <select class="form-select" name="department">
                                    <option value="">{% trans "All Departments" %}</option>
                                    {% for key in department_type_keys %}
                                        <option value="{{ key }}" {% if key == selected_department %}selected{% endif %}>{{ key }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <button type="submit" 
                                    class="submit-btn w-full bg-gradient-to-r from-temple-red to-[#7a1a29] hover:shadow-xl text-white font-semibold py-4 rounded-xl transition-all duration-300 transform hover:-translate-y-0.5">
                                {% trans "Apply Filters" %}
                            </button>
                        </form>
                    </div>
                </div>
            </aside>

            <!-- Main Content -->
            <main class="lg:col-span-8 xl:col-span-9">
                <!-- Active Filters Bar -->
                <div class="filters-bar bg-gradient-to-r from-gray-50 to-gray-100/50 backdrop-blur-sm p-6 rounded-2xl mb-8 border border-gray-200/50">
                    <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
                        <div class="results-count">
                            <span class="text-3xl font-bold text-temple-red">{{ total_open_roles|default:"0" }}</span>
                            <span class="text-gray-600 ml-2 text-lg">{% trans "opportunities available" %}</span>
                        </div>

                        {% if selected_job_type or selected_workplace_type or selected_department %}
                        <div class="flex flex-wrap gap-2 items-center">
                            <span class="text-xs text-gray-500 font-medium">{% trans "Active filters:" %}</span>
                            
                            {% if selected_job_type %}
                                <span class="filter-tag">
                                    <span class="filter-tag-label">{{ selected_job_type }}</span>
                                    <a href="?{% for key, value in request.GET.items %}{% if key != 'employment_type' %}{{ key }}={{ value }}{% if not forloop.last %}&{% endif %}{% endif %}{% endfor %}" 
                                       title="{% trans 'Remove' %}"
                                       class="filter-tag-remove">
                                        <i data-lucide="x" class="w-3 h-3"></i>
                                    </a>
                                </span>
                            {% endif %}

                            {% if selected_workplace_type %}
                                <span class="filter-tag">
                                    <span class="filter-tag-label">{{ selected_workplace_type }}</span>
                                    <a href="?{% for key, value in request.GET.items %}{% if key != 'workplace_type' %}{{ key }}={{ value }}{% if not forloop.last %}&{% endif %}{% endif %}{% endfor %}" 
                                       title="{% trans 'Remove' %}"
                                       class="filter-tag-remove">
                                        <i data-lucide="x" class="w-3 h-3"></i>
                                    </a>
                                </span>
                            {% endif %}

                            {% if selected_department %}
                                <span class="filter-tag">
                                    <span class="filter-tag-label">{{ selected_department }}</span>
                                    <a href="?{% for key, value in request.GET.items %}{% if key != 'department' %}{{ key }}={{ value }}{% if not forloop.last %}&{% endif %}{% endif %}{% endfor %}" 
                                       title="{% trans 'Remove' %}"
                                       class="filter-tag-remove">
                                        <i data-lucide="x" class="w-3 h-3"></i>
                                    </a>
                                </span>
                            {% endif %}

                            <a href="?" class="clear-all-btn">
                                {% trans "Clear all" %}
                            </a>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Job List -->
                <div class="job-list space-y-5">
                    {% for job in active_jobs %}
                    <a href="{% url 'job_application_detail' job.slug %}" 
                       class="job-card group">
                        <div class="job-card-accent"></div>
                        
                        <div class="job-card-content">
                            <div class="flex flex-col md:flex-row md:justify-between md:items-start gap-3 mb-4">
                                <div class="flex-1">
                                    <h3 class="job-title">
                                        {{ job.title }}
                                        <i data-lucide="arrow-up-right" class="job-arrow"></i>
                                    </h3>
                                    <p class="job-department">{{ job.department }}</p>
                                </div>
                                <div class="job-deadline">
                                    <i data-lucide="clock" class="w-4 h-4"></i>
                                    <span>{{ job.application_deadline }}</span>
                                </div>
                            </div>
                            
                            <div class="job-meta">
                                <div class="job-meta-item">
                                    <i data-lucide="map-pin" class="w-4 h-4"></i>
                                    <span>{{ job.location_city|default:"Riyadh" }}</span>
                                </div>
                                <div class="job-meta-item">
                                    <i data-lucide="briefcase" class="w-4 h-4"></i>
                                    <span>{{ job.workplace_type }}</span>
                                </div>
                            </div>
                        </div>
                    </a>
                    {% empty %}
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i data-lucide="inbox" class="w-16 h-16"></i>
                        </div>
                        <h3 class="empty-state-title">{% trans "No positions found" %}</h3>
                        <p class="empty-state-text">{% trans "Try adjusting your filters to see more opportunities" %}</p>
                        <a href="?" class="empty-state-btn">
                            {% trans "Clear Filters" %}
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </main>
        </div>
    </div>
</div>

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

    :root {
        --temple-red: #9d2235;
        --temple-red-dark: #7a1a29;
        --temple-red-light: #b92d42;
    }

    * {
        font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* Hero Section */
    .hero-section {
        background: linear-gradient(135deg, var(--temple-red) 0%, var(--temple-red-dark) 100%);
        position: relative;
    }

    .hero-bg {
        background: 
            radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    }

    .hero-pattern {
        background-image: 
            linear-gradient(30deg, rgba(255, 255, 255, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.03) 87.5%, rgba(255, 255, 255, 0.03)),
            linear-gradient(150deg, rgba(255, 255, 255, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.03) 87.5%, rgba(255, 255, 255, 0.03)),
            linear-gradient(30deg, rgba(255, 255, 255, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.03) 87.5%, rgba(255, 255, 255, 0.03)),
            linear-gradient(150deg, rgba(255, 255, 255, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.03) 87.5%, rgba(255, 255, 255, 0.03));
        background-size: 80px 140px;
        background-position: 0 0, 0 0, 40px 70px, 40px 70px;
    }

    .hero-title {
        font-family: 'Archivo', sans-serif;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-weight: 300;
    }

    .stat-item {
        text-align: center;
    }

    /* Animations */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from { 
            opacity: 0;
            transform: translateY(30px);
        }
        to { 
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in {
        animation: fadeIn 0.8s ease-out forwards;
    }

    .animate-fade-in-delay {
        animation: fadeIn 0.8s ease-out 0.4s forwards;
        opacity: 0;
    }

    .animate-slide-up {
        animation: slideUp 0.8s ease-out forwards;
    }

    .animate-slide-up-delay {
        animation: slideUp 0.8s ease-out 0.2s forwards;
        opacity: 0;
    }

    /* Filter Sidebar */
    .filter-sidebar {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 2000;
        padding: 1rem;
        animation: fadeIn 0.2s ease-out;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .filter-sidebar.lg\:static {
        position: static;
        background: none;
        backdrop-filter: none;
        padding: 0;
        animation: none;
        display: block;
    }

    .filter-card {
        width: 100%;
        max-width: 500px;
        animation: slideUp 0.3s ease-out;
        max-height: 90vh;
        overflow-y: auto;
    }

    .filter-sidebar.lg\:static .filter-card {
        max-width: none;
        animation: none;
        max-height: none;
    }

    /* Form Elements */
    .form-group {
        position: relative;
    }

    .form-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.75rem;
    }

    .form-input,
    .form-select {
        width: 100%;
        padding: 0.875rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 0.75rem;
        background: #f9fafb;
        font-size: 0.9375rem;
        color: #1f2937;
        transition: all 0.2s ease;
    }

    .form-input:focus,
    .form-select:focus {
        outline: none;
        border-color: var(--temple-red);
        background: white;
        box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
    }

    .form-select {
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1.25rem;
        padding-right: 2.5rem;
    }

    /* Filter Tags */
    .filter-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: white;
        border: 2px solid var(--temple-red);
        border-radius: 9999px;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--temple-red);
        transition: all 0.2s ease;
    }

    .filter-tag:hover {
        background: rgba(157, 34, 53, 0.05);
        transform: translateY(-1px);
    }

    .filter-tag-label {
        line-height: 1;
    }

    .filter-tag-remove {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background: var(--temple-red);
        color: white;
        transition: all 0.2s ease;
    }

    .filter-tag-remove:hover {
        background: var(--temple-red-dark);
        transform: rotate(90deg);
    }

    .clear-all-btn {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--temple-red);
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color 0.2s ease;
    }

    .clear-all-btn:hover {
        color: var(--temple-red-dark);
    }

    /* Job Cards */
    .job-card {
        position: relative;
        display: block;
        background: white;
        border-radius: 1.5rem;
        overflow: hidden;
        border: 2px solid #f3f4f6;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .job-card:hover {
        border-color: var(--temple-red);
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(157, 34, 53, 0.15);
    }

    .job-card-accent {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient(180deg, var(--temple-red) 0%, var(--temple-red-dark) 100%);
        transform: scaleY(0.3);
        transform-origin: top;
        transition: transform 0.3s ease;
    }

    .job-card:hover .job-card-accent {
        transform: scaleY(1);
    }

    .job-card-content {
        padding: 2rem;
        padding-left: 2.5rem;
    }

    .job-title {
        font-family: 'Archivo', sans-serif;
        font-size: 1.375rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: color 0.2s ease;
    }

    .job-card:hover .job-title {
        color: var(--temple-red);
    }

    .job-arrow {
        width: 1.25rem;
        height: 1.25rem;
        opacity: 0;
        transform: translate(-8px, 8px);
        transition: all 0.3s ease;
    }

    .job-card:hover .job-arrow {
        opacity: 1;
        transform: translate(0, 0);
    }

    .job-department {
        font-size: 0.9375rem;
        color: #6b7280;
        margin: 0.5rem 0 0 0;
        font-weight: 500;
    }

    .job-deadline {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        color: #6b7280;
        background: #f9fafb;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        white-space: nowrap;
    }

    .job-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin-top: 1rem;
    }

    .job-meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 500;
    }

    .job-meta-item i {
        color: var(--temple-red);
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        background: white;
        border-radius: 1.5rem;
        border: 2px dashed #e5e7eb;
    }

    .empty-state-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 5rem;
        height: 5rem;
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
        border-radius: 50%;
        color: #9ca3af;
        margin-bottom: 1.5rem;
    }

    .empty-state-title {
        font-family: 'Archivo', sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.75rem;
    }

    .empty-state-text {
        font-size: 1rem;
        color: #6b7280;
        margin-bottom: 1.5rem;
    }

    .empty-state-btn {
        display: inline-block;
        padding: 0.875rem 2rem;
        background: linear-gradient(135deg, var(--temple-red) 0%, var(--temple-red-dark) 100%);
        color: white;
        font-weight: 600;
        border-radius: 0.75rem;
        transition: all 0.3s ease;
    }

    .empty-state-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(157, 34, 53, 0.3);
    }

    /* Responsive */
    @media (min-width: 1024px) {
        .filter-sidebar {
            position: static !important;
            background: none !important;
            backdrop-filter: none !important;
            padding: 0 !important;
            animation: none !important;
        }
        
        .close-filters {
            display: none !important;
        }
    }

    @media (max-width: 768px) {
        .hero-title {
            font-size: 2rem;
        }

        .hero-subtitle {
            font-size: 1rem;
        }

        .job-title {
            font-size: 1.125rem;
        }

        .job-card-content {
            padding: 1.5rem;
        }
    }
</style>

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

function toggleFilters() {
    const sidebar = document.getElementById('sidebar');
    if (sidebar) {
        sidebar.classList.toggle('hidden');
        sidebar.classList.toggle('lg:block');
        document.body.style.overflow = sidebar.classList.contains('hidden') ? 'auto' : 'hidden';
    }
}

// Close sidebar when clicking the backdrop on mobile
document.addEventListener('click', function(e) {
    const sidebar = document.getElementById('sidebar');
    if (sidebar && !sidebar.classList.contains('hidden') && window.innerWidth < 1024) {
        if (e.target === sidebar) {
            toggleFilters();
        }
    }
});

// Stagger animation for job cards
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
            setTimeout(() => {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }, index * 100);
            observer.unobserve(entry.target);
        }
    });
}, observerOptions);

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.job-card').forEach((card) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(card);
    });
});
</script>
{% endblock %}