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

{% block title %}{% trans "Schedule Remote Meeting" %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-xl-7">
            
            <div class="d-flex align-items-center mb-4">
                <a href="{% url 'list_meetings' %}" class="btn btn-outline-secondary me-3">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 style="color: var(--kaauh-teal-dark); font-weight: 700;">
                    <i class="fas fa-globe me-2"></i> {% trans "Create Remote Interview" %}
                </h1>
            </div>

            <div class="card shadow-lg">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-muted">{% trans "Remote Meeting Details" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post" novalidate>
                        {% csrf_token %}

                        {# --- Non-Field Errors --- #}
                        {% if form.non_field_errors %}
                            <div class="alert alert-danger" role="alert">
                                {% for error in form.non_field_errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}

                        {# --- Core Meeting Details (BaseMeetingForm fields) --- #}
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">{{ form.application.label }}</label>
                                {% render_field form.application class="form-select" %}
                                <div class="form-text text-muted">{{ form.application.help_text }}</div>
                                {% for error in form.application.errors %}
                                    <div class="text-danger small">{{ error }}</div>
                                {% endfor %}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">{{ form.job.label }}</label>
                                {% render_field form.job class="form-select" %}
                                <div class="form-text text-muted">{{ form.job.help_text }}</div>
                                {% for error in form.job.errors %}
                                    <div class="text-danger small">{{ error }}</div>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-12">
                                <label class="form-label fw-bold">{{ form.topic.label }}</label>
                                {% render_field form.topic class="form-control" placeholder=form.topic.label %}
                                <div class="form-text text-muted">{{ form.topic.help_text }}</div>
                                {% for error in form.topic.errors %}
                                    <div class="text-danger small">{{ error }}</div>
                                {% endfor %}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">{{ form.start_time.label }}</label>
                                {# Note: input type='datetime-local' is set in the form definition (forms.py) #}
                                {% render_field form.start_time class="form-control" %}
                                <div class="form-text text-muted">{{ form.start_time.help_text }}</div>
                                {% for error in form.start_time.errors %}
                                    <div class="text-danger small">{{ error }}</div>
                                {% endfor %}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">{{ form.duration.label }}</label>
                                {% render_field form.duration class="form-control" placeholder="30" %}
                                <div class="form-text text-muted">{{ form.duration.help_text }}</div>
                                {% for error in form.duration.errors %}
                                    <div class="text-danger small">{{ error }}</div>
                                {% endfor %}
                            </div>
                        </div>
                        
                        <hr class="mt-4 mb-4">
                        
                        {# --- Remote Specific Details (SimpleRemoteMeetingForm fields) --- #}
                        <h6 class="mb-3 text-primary-theme fw-bold">{% trans "Remote Configuration" %}</h6>
                        
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">{{ form.host_email.label }}</label>
                                {% render_field form.host_email class="form-control" %}
                                <div class="form-text text-muted">{{ form.host_email.help_text }}</div>
                                {% for error in form.host_email.errors %}
                                    <div class="text-danger small">{{ error }}</div>
                                {% endfor %}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">{{ form.password.label }}</label>
                                {% render_field form.password class="form-control" %}
                                <div class="form-text text-muted">{{ form.password.help_text }}</div>
                                {% for error in form.password.errors %}
                                    <div class="text-danger small">{{ error }}</div>
                                {% endfor %}
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                {% render_field form.participant_video class="form-check-input" %}
                                <label class="form-check-label fw-bold" for="{{ form.participant_video.id_for_label }}">
                                    {{ form.participant_video.label }}
                                </label>
                            </div>
                            <div class="form-text text-muted">{{ form.participant_video.help_text }}</div>
                            {% for error in form.participant_video.errors %}
                                <div class="text-danger small">{{ error }}</div>
                            {% endfor %}
                        </div>

                        {# Hidden status field #}
                        {% render_field form.status type="hidden" %}

                        <div class="mt-4 border-top pt-3 text-end">
                            <button type="submit" class="btn btn-lg btn-main-action">
                                <i class="fas fa-video me-2"></i> {% trans "Create Remote Interview" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}