{% extends "base.html" %}
{% load static i18n %}

{% block title %}{% trans "Edit Job Posting" %} - {{ block.super }}{% endblock %}

{% block customCSS %}
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
    body { font-family: 'Inter', sans-serif; }

    /* CKEditor 5 base styling for container */
    .ck-editor__editable_inline {
        min-height: 200px;
        border-radius: 0 0 0.75rem 0.75rem;
        border: 1px solid #ced4da;
    }

    /* Override min-height for specific fields using ID */
    #id_description .ck-editor__editable_inline { min-height: 300px; }
    #id_qualifications .ck-editor__editable_inline { min-height: 200px; }
    #id_benefits .ck-editor__editable_inline,
    #id_application_instructions .ck-editor__editable_inline { min-height: 150px; }

    .ck-toolbar {
        border-radius: 0.75rem 0.75rem 0 0 !important;
    }

    /* Form Input Styling */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    select,
    textarea {
        width: 100%;
        padding: 0.625rem 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        font-size: 0.875rem;
        background-color: #ffffff;
        transition: all 0.2s;
    }

    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: #9d2235;
        box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
    }

    select {
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }
</style>
{{form.media.css}}
{% endblock %}

{% block content %}
<div class="container-fluid py-6">
    
    <!-- Breadcrumb -->
    <nav class="mb-6" aria-label="breadcrumb">
        <ol class="flex items-center gap-2 text-sm flex-wrap">
            <li><a href="{% url 'dashboard' %}" class="text-gray-500 hover:text-temple-red transition flex items-center gap-1">
                <i data-lucide="home" class="w-4 h-4"></i> {% trans "Home" %}
            </a></li>
            <li class="text-gray-400">/</li>
            <li><a href="{% url 'job_list' %}" class="text-gray-500 hover:text-temple-red transition">{% trans "Jobs" %}</a></li>
            <li class="text-gray-400">/</li>
            <li class="text-temple-red font-semibold">{% trans "Edit Job Posting" %}</li>
        </ol>
    </nav>

    <h1 class="text-3xl font-bold text-gray-900 mb-6 flex items-center gap-3">
        <div class="bg-temple-red/10 p-3 rounded-xl">
            <i data-lucide="edit-3" class="w-8 h-8 text-temple-red"></i>
        </div>
        {% trans "Edit Job Posting" %}
    </h1>

    <form method="post" id="jobForm" class="mb-5" enctype="multipart/form-data">
        {% csrf_token %}

        <!-- SECTION 1: CORE POSITION DETAILS -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-4 overflow-hidden">
            <div class="bg-gradient-to-br from-temple-red to-[#7a1a29] text-white p-4">
                <h5 class="text-lg font-bold flex items-center gap-2">
                    <i data-lucide="info" class="w-5 h-5"></i>
                    {% trans "Core Position Details" %}
                </h5>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label for="{{ form.title.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Job Title" %} <span class="text-red-600">*</span>
                        </label>
                        {{ form.title }}
                        {% if form.title.errors %}<div class="mt-1 text-xs text-red-600">{{ form.title.errors }}</div>{% endif %}
                    </div>
                    <div>
                        <label for="{{ form.job_type.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Job Type" %} <span class="text-red-600">*</span>
                        </label>
                        {{ form.job_type }}
                        {% if form.job_type.errors %}<div class="mt-1 text-xs text-red-600">{{ form.job_type.errors }}</div>{% endif %}
                    </div>
                    
                    <div>
                        <label for="{{ form.workplace_type.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Workplace Type" %} <span class="text-red-600">*</span>
                        </label>
                        {{ form.workplace_type }}
                        {% if form.workplace_type.errors %}<div class="mt-1 text-xs text-red-600">{{ form.workplace_type.errors }}</div>{% endif %}
                    </div>
                    <div>
                        <label for="{{ form.application_deadline.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Application Deadline" %}<span class="text-red-600">*</span>
                        </label>
                        {{ form.application_deadline }}
                        {% if form.application_deadline.errors %}<div class="mt-1 text-xs text-red-600">{{ form.application_deadline.errors }}</div>{% endif %}
                    </div>
                    <div>
                        <label for="{{ form.department.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Department" %}
                        </label>
                        {{ form.department }}
                        {% if form.department.errors %}<div class="mt-1 text-xs text-red-600">{{ form.department.errors }}</div>{% endif %}
                    </div>
                    <div>
                        <label for="{{ form.open_positions.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Open Positions" %}<span class="text-red-600">*</span>
                        </label>
                        {{ form.open_positions }}
                        {% if form.open_positions.errors %}<div class="mt-1 text-xs text-red-600">{{ form.open_positions.errors }}</div>{% endif %}
                    </div>
                    <div>
                        <label for="{{ form.max_applications.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Max Applications" %}
                        </label>
                        {{ form.max_applications }}
                        {% if form.max_applications.errors %}<div class="mt-1 text-xs text-red-600">{{ form.max_applications.errors }}</div>{% endif %}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- SECTION 2: JOB CONTENT (CKEDITOR 5 Fields) -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-4 overflow-hidden">
            <div class="bg-gradient-to-br from-temple-red to-[#7a1a29] text-white p-4">
                <h5 class="text-lg font-bold flex items-center gap-2">
                    <i data-lucide="file-text" class="w-5 h-5"></i>
                    {% trans "Job Content" %}
                </h5>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <label for="{{ form.description.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Job Description" %} <span class="text-red-600">*</span>
                        </label>
                        {{ form.description}}
                        {% if form.description.errors %}<div class="mt-1 text-xs text-red-600">{{ form.description.errors }}</div>{% endif %}
                    </div>

                    <div>
                        <label for="{{ form.qualifications.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Qualifications and Requirements" %}
                        </label>
                        {{ form.qualifications}}
                        {% if form.qualifications.errors %}<div class="mt-1 text-xs text-red-600">{{ form.qualifications.errors }}</div>{% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- SECTION 3: APPLICATION INSTRUCTIONS -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-4 overflow-hidden">
            <div class="bg-gradient-to-br from-temple-red to-[#7a1a29] text-white p-4">
                <h5 class="text-lg font-bold flex items-center gap-2">
                    <i data-lucide="gift" class="w-5 h-5"></i>
                    {% trans "Benefits & Application Instructions" %}
                </h5>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <label for="{{ form.benefits.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Benefits" %}
                        </label>
                        {{ form.benefits }}
                        {% if form.benefits.errors %}<div class="mt-1 text-xs text-red-600">{{ form.benefits.errors }}</div>{% endif %}
                    </div>

                    <div>
                        <label for="{{ form.application_instructions.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Application Instructions" %}
                        </label>
                        {{ form.application_instructions }}
                        {% if form.application_instructions.errors %}<div class="mt-1 text-xs text-red-600">{{ form.application_instructions.errors }}</div>{% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- SECTION 4: INTERNAL AND PROMOTION -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-4 overflow-hidden">
            <div class="bg-gradient-to-br from-temple-red to-[#7a1a29] text-white p-4">
                <h5 class="text-lg font-bold flex items-center gap-2">
                    <i data-lucide="tag" class="w-5 h-5"></i>
                    {% trans "Internal & Promotion" %}
                </h5>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="{{ form.position_number.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Position Number" %}
                        </label>
                        {{ form.position_number }}
                        {% if form.position_number.errors %}<div class="mt-1 text-xs text-red-600">{{ form.position_number.errors }}</div>{% endif %}
                    </div>
                    <div>
                        <label for="{{ form.reporting_to.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Reports To" %}
                        </label>
                        {{ form.reporting_to }}
                        {% if form.reporting_to.errors %}<div class="mt-1 text-xs text-red-600">{{ form.reporting_to.errors }}</div>{% endif %}
                    </div>
                    
                    <div class="md:col-span-2">
                        <label for="{{ form.hash_tags.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Hashtags (For Promotion/Search on Linkedin)" %}
                        </label>
                        {{ form.hash_tags }}
                        {% if form.hash_tags.errors %}<div class="mt-1 text-xs text-red-600">{{ form.hash_tags.errors }}</div>{% endif %}
                        <div class="text-xs text-gray-500 mt-1">{% trans "Comma-separated list of hashtags, e.g., #hiring, #professor" %}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- SECTION 5: LOCATION AND SALARY -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-4 overflow-hidden">
            <div class="bg-gradient-to-br from-temple-red to-[#7a1a29] text-white p-4">
                <h5 class="text-lg font-bold flex items-center gap-2">
                    <i data-lucide="map-pin" class="w-5 h-5"></i>
                    {% trans "Location & Salary" %}
                </h5>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="{{ form.location_city.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "City" %}
                        </label>
                        {{ form.location_city }}
                        {% if form.location_city.errors %}<div class="mt-1 text-xs text-red-600">{{ form.location_city.errors }}</div>{% endif %}
                    </div>
                    <div>
                        <label for="{{ form.location_state.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "State/Province" %}
                        </label>
                        {{ form.location_state }}
                        {% if form.location_state.errors %}<div class="mt-1 text-xs text-red-600">{{ form.location_state.errors }}</div>{% endif %}
                    </div>
                    <div>
                        <label for="{{ form.location_country.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Country" %}
                        </label>
                        {{ form.location_country }}
                        {% if form.location_country.errors %}<div class="mt-1 text-xs text-red-600">{{ form.location_country.errors }}</div>{% endif %}
                    </div>
                    
                    <div class="md:col-span-3">
                        <label for="{{ form.salary_range.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Salary Range" %}
                        </label>
                        {{ form.salary_range }}
                        {% if form.salary_range.errors %}<div class="mt-1 text-xs text-red-600">{{ form.salary_range.errors }}</div>{% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- ACTION BUTTONS -->
        <div class="flex items-center justify-between pt-2">
            <a href="{% url 'job_detail' job.slug %}" class="inline-flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-4 py-2.5 rounded-xl text-sm transition">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                {% trans "Cancel" %}
            </a>
            <button type="submit" class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-medium px-6 py-2.5 rounded-xl text-sm transition shadow-sm hover:shadow-md">
                <i data-lucide="save" class="w-5 h-5"></i>
                {% trans "Save Changes" %}
            </button>
        </div>
    </form>
</div>

{% endblock %}

{% block customJS %}
{{ form.media.js }}
<script>
    lucide.createIcons();
</script>
{% endblock %}