{% extends "jobs/base_public.html" %}
{% load i18n static %}

{% block customCSS %}
<style>
    /* Custom style for the job list table */
    .job-listing-section {
        padding: 3rem 0;
        background-color: white;
    }
    .job-table {
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        width: 100%;
    }
    .job-table thead th {
        background-color: var(--kaauh-teal-dark);
        color: white;
        font-weight: 600;
        padding: 1rem 1.5rem;
        text-align: start;
        border-bottom: 2px solid var(--kaauh-teal);
    }
    .job-table tbody td {
        padding: 1rem 1.5rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--kaauh-border);
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--kaauh-primary-text);
    }
    .job-table tbody tr:hover {
        background-color: var(--kaauh-light-bg);
    }
    .job-link-cell {
        font-size: 0.85rem;
        text-align: center; /* Center the button in its cell */
    }
    .job-link-cell i {
        color: var(--kaauh-teal);
    }

    /* Apply Button */
    .btn-apply {
        background-color: var(--kaauh-teal);
        color: white;
        font-weight: 600;
        padding: 0.4rem 1.2rem;
        border-radius: 5px;
        transition: background-color 0.2s;
        min-width: 80px;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        border: 1px solid var(--kaauh-teal);
    }
    .btn-apply:hover {
        background-color: var(--kaauh-teal-dark);
        color: white;
    }
    .hero-section{
        background-image: url("{% static 'image/kaauh_banner.png' %}");
        background-size: cover;
        background-position: center;
    }

    /* Hero Text Positioning */
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .arabic-title {
        font-size: 4rem;
        font-weight: 900;
        line-height: 1;
        margin-top: 0.5rem;
    }

    /* RTL specific table alignment */
    html[dir="rtl"] .job-table thead th {
        text-align: right;
    }
    html[dir="rtl"] .job-link-cell {
        text-align: center; /* Ensure button remains centered in RTL */
    }
</style>
{% endblock %}

{% block content %}


    <div class="hero-section">
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <p class="text-uppercase small fw-bold mb-1">
                {% trans "Home Page" %}
            </p>
            <h1 class="arabic-title">
                {% if LANGUAGE_CODE == 'ar' %}التوظيف{% else %}Careers{% endif %}
            </h1>
        </div>
    </div>

    <div class="job-listing-section">
        <div class="max-width-container">
            <h2 class="h3 mb-4 text-center" style="color: var(--kaauh-teal-dark); font-weight: 700;">
                {% trans "Open Positions" %}
            </h2>

            <div class="table-responsive">
                <table class="job-table">
                    <thead>
                        <tr>
                            <th scope="col" style="width: 10%;">{% trans "Job ID" %}</th>
                            <th scope="col">{% trans "Job Title" %}</th>
                            <th scope="col" style="width: 10%;">{% trans "Hiring" %}</th>
                            <th scope="col" style="width: 15%;">{% trans "Posting Date" %}</th>
                            <th scope="col" style="width: 15%;">{% trans "Apply Before" %}</th>
                            <th scope="col" style="width: 10%;">{% trans "Apply" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% comment %} Django loop would typically go here: {% for job in jobs %} {% endcomment %}
                        {% for job in active_jobs %}
                        <tr>
                            <td class="text-nowrap">{{job.internal_job_id}}</td>
                            <td class="text-nowrap">{{job.title}}</td>
                            <td>{{job.open_positions}}</td>
                            <td>{{job.application_start_date}}</td>
                            <td>{{job.application_deadline}}</td>
                            <td class="job-link-cell">
                                <a href="{% url 'job_detail_candidate' job.slug %}" class="btn-apply">{% trans "Apply" %}</a>
                            </td>
                        </tr>
                        {% endfor %}
                        
                    </tbody>
                </table>
            </div>

            <div class="text-center mt-5">
                <a href="#" class="btn btn-lg btn-secondary">
                    <i class="fas fa-list-alt me-2"></i> {% trans "View All Openings" %}
                </a>
            </div>
        </div>
    </div>

{% endblock %}