{% load static i18n widget_tweaks %}

<div class="p-4 bg-white rounded-xl shadow-sm border border-gray-200" id="reschedule-onsite-meeting-form">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
        <div>
            <h5 class="text-lg font-bold flex items-center gap-2 mb-1" style="color: #9d2235;">
                <i data-lucide="refresh-ccw" class="w-5 h-5"></i>
                {% trans "Update Onsite Interview" %} for {{ candidate.name }}
            </h5>
            <p class="text-gray-600 text-sm mb-1">{% trans "Job" %}: {{ job.title }}</p>
            <p class="text-gray-600 text-sm mb-2">
                {% trans "Location Type" %}: 
                <span class="inline-block px-2.5 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">{% trans "Onsite" %}</span>
            </p>
        </div>
    </div>

    <!-- Form -->
    <form method="post" id="updateOnsiteMeeting"
          action="{% url 'reschedule_onsite_meeting' job.slug candidate.pk meeting.pk %}" class="space-y-4">
        {% csrf_token %}

        <hr class="border-gray-200 my-4">

        <!-- Status Field -->
        <div>
            <label for="{{ form.status.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                <i data-lucide="info" class="w-4 h-4 inline mr-1"></i> {% trans "Meeting Status" %}
            </label>
            {{ form.status|add_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 bg-white" }}
            {% for error in form.status.errors %}
                <div class="text-red-600 text-sm mt-1">{{ error }}</div>
            {% endfor %}
        </div>

        <div class="grid grid-cols-1 md:grid-cols-7 gap-4">
            <!-- Topic Field -->
            <div class="md:col-span-4">
                <div>
                    <label for="{{ form.topic.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i data-lucide="tag" class="w-4 h-4 inline mr-1"></i> {% trans "Meeting Topic" %}
                    </label>
                    {{ form.topic|add_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" }}
                    {% for error in form.topic.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                    {% endfor %}
                </div>
            </div>

            <!-- Room Number Field -->
            <div class="md:col-span-3">
                <div>
                    <label for="{{ form.room_number.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i data-lucide="door-open" class="w-4 h-4 inline mr-1"></i> {% trans "Room Number/Name" %}
                    </label>
                    {{ form.room_number|add_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" }}
                    {% for error in form.room_number.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Physical Address Field -->
        <div>
            <label for="{{ form.physical_address.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                <i data-lucide="map-pin" class="w-4 h-4 inline mr-1"></i> {% trans "Physical Address" %}
            </label>
            {{ form.physical_address|add_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" }}
            {% for error in form.physical_address.errors %}
                <div class="text-red-600 text-sm mt-1">{{ error }}</div>
            {% endfor %}
        </div>

        <hr class="border-gray-200 my-4">

        <div class="grid grid-cols-1 md:grid-cols-7 gap-4">
            <!-- Start Time Field -->
            <div class="md:col-span-4">
                <div>
                    <label for="{{ form.start_time.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i data-lucide="clock" class="w-4 h-4 inline mr-1"></i> {% trans "Start Time" %} ({% trans "Date & Time" %})
                    </label>
                    {{ form.start_time|add_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" }}
                    {% for error in form.start_time.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                    {% endfor %}
                </div>
            </div>

            <!-- Duration Field -->
            <div class="md:col-span-3">
                <div>
                    <label for="{{ form.duration.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i data-lucide="timer" class="w-4 h-4 inline mr-1"></i> {% trans "Duration (minutes)" %}
                    </label>
                    {{ form.duration|add_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" }}
                    {% for error in form.duration.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ error }}</div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Action Button -->
        <div class="flex justify-end">
            <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-medium text-white transition-all duration-200"
                    style="background-color: #9d2235;"
                    onmouseover="this.style.backgroundColor='#7a1a29'"
                    onmouseout="this.style.backgroundColor='#9d2235'">
                <i data-lucide="save" class="w-4 h-4"></i>
                {% trans "Update Meeting" %}
            </button>
        </div>
    </form>
</div>

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