{% load static i18n %}
{% load widget_tweaks %}

<div class="p-3" id="create-onsite-meeting-form">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h5 class="mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
                <i class="fas fa-calendar-plus me-1"></i>
                {% trans "Schedule New Onsite Interview" %} for **{{ candidate.name }}**
            </h5>
            <p class="text-muted mb-0 small">{% trans "Job" %}: {{ job.title }}</p>
            <p class="text-muted mb-0 small">{% trans "Location Type" %}: <span class="badge bg-info">{% trans "Onsite" %}</span></p>
        </div>
    </div>

    <div>
        {# The action_url is passed from the view and points back to the POST handler #}
        <form method="post" id="createOnsiteMeetingForm" action="{{ action_url }}">
            {% csrf_token %}

            {# --- HIDDEN FIELDS (application, job, status) --- #}
            {# These fields are crucial for creating the ScheduledInterview record #}
            {{ form.application }}
            {{ form.job }}
            {{ form.status }} 

            {# --- TOPIC FIELD --- #}
            <div class="mb-3">
                <label for="{{ form.topic.id_for_label }}" class="form-label small">
                    <i class="fas fa-tag me-1"></i> {% trans "Meeting Topic" %} <span class="text-danger">*</span>
                </label>
                {{ form.topic|add_class:"form-control"|attr:"required" }}
                {% for error in form.topic.errors %}
                    <div class="text-danger small mt-1">{{ error }}</div>
                {% endfor %}
            </div>

            {# --- ADDRESS FIELD --- #}
            <div class="mb-3">
                <label for="{{ form.physical_address.id_for_label }}" class="form-label small">
                    <i class="fas fa-map-marker-alt me-1"></i> {% trans "Physical Address" %} <span class="text-danger">*</span>
                </label>
                {{ form.physical_address|add_class:"form-control"|attr:"required" }}
                {% for error in form.physical_address.errors %}
                    <div class="text-danger small mt-1">{{ error }}</div>
                {% endfor %}
            </div>

            {# --- ROOM NUMBER FIELD --- #}
            <div class="mb-3">
                <label for="{{ form.room_number.id_for_label }}" class="form-label small">
                    <i class="fas fa-door-open me-1"></i> {% trans "Room Number/Name" %}
                </label>
                {{ form.room_number|add_class:"form-control" }}
                {% for error in form.room_number.errors %}
                    <div class="text-danger small mt-1">{{ error }}</div>
                {% endfor %}
            </div>
            
            <hr style="border-top: 1px solid var(--kaauh-border); margin-top: 1.5rem; margin-bottom: 1.5rem;">

            <div class="row">
                {# --- START TIME FIELD --- #}
                <div class="col-md-7">
                    <div class="mb-3">
                        <label for="{{ form.start_time.id_for_label }}" class="form-label small">
                            <i class="fas fa-clock me-1"></i> {% trans "Start Time" %} (Date & Time) <span class="text-danger">*</span>
                        </label>
                        {# Assumes start_time widget is DateTimeInput with type='datetime-local' #}
                        {{ form.start_time|add_class:"form-control"|attr:"required" }}
                        {% for error in form.start_time.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>
                </div>

                {# --- DURATION FIELD --- #}
                <div class="col-md-5">
                    <div class="mb-3">
                        <label for="{{ form.duration.id_for_label }}" class="form-label small">
                            <i class="fas fa-hourglass-half me-1"></i> {% trans "Duration (minutes)" %} <span class="text-danger">*</span>
                        </label>
                        {{ form.duration|add_class:"form-control"|attr:"required" }}
                        {% for error in form.duration.errors %}
                            <div class="text-danger small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-2">
                <button type="submit" class="btn btn-main-action btn-sm">
                    <i class="fas fa-save me-1"></i> {% trans "Schedule Meeting" %}
                </button>
            </div>
        </form>
    </div>
</div>