{% extends 'base.html' %}
{% load i18n widget_tweaks %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <!-- Header -->
    <div class="flex justify-between items-center gap-4 mb-6">
        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 flex items-center gap-3">
            <div class="bg-temple-red/10 p-3 rounded-xl">
                <i data-lucide="map-pin" class="w-6 h-6 text-temple-red"></i>
            </div>
            {% trans "Set Interview Location" %}
        </h1>
        <a href="{% url 'list_meetings' %}" 
           class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium border-2 border-gray-300 text-gray-700 hover:bg-gray-50 transition-all duration-200">
            <i data-lucide="x" class="w-4 h-4"></i> {% trans "Close" %}
        </a>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <form method="post" action="{% url 'confirm_schedule_interviews_view' job.slug %}" enctype="multipart/form-data" class="space-y-6">
            {% csrf_token %}

            {% for field in form %}
                <div>
                    <label for="{{ field.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                        {% if field.name == 'physical_address' %}
                            <i data-lucide="map-pin" class="w-4 h-4 inline mr-1 text-temple-red"></i>
                        {% elif field.name == 'room_number' %}
                            <i data-lucide="door-open" class="w-4 h-4 inline mr-1 text-temple-red"></i>
                        {% elif field.name == 'location' %}
                            <i data-lucide="building" class="w-4 h-4 inline mr-1 text-temple-red"></i>
                        {% endif %}
                        {{ field.label }}
                    </label>
                    {{ field|attr:"class: w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition" }}
                    {% if field.errors %}
                        <div class="mt-1 text-sm text-red-600">{{ field.errors }}</div>
                    {% endif %}
                    {% if field.help_text %}
                        <p class="mt-1 text-sm text-gray-500">{{ field.help_text }}</p>
                    {% endif %}
                </div>
            {% endfor %}

            <div class="flex gap-3 pt-4">
                <button type="submit" 
                        class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl font-medium text-white transition-all duration-200 bg-temple-red hover:bg-[#7a1a29] shadow-sm hover:shadow-md">
                    <i data-lucide="save" class="w-5 h-5"></i> {% trans "Save Location" %}
                </button>
            </div>
        </form>
    </div>
</div>

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