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

{% block title %}{% trans "Create Zoom Meeting" %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    
    <!-- Breadcrumb -->
    <nav class="mb-6" aria-label="breadcrumb">
        <ol class="flex items-center gap-2 text-sm flex-wrap">
            <li><a href="{% url 'list_meetings' %}" class="text-gray-500 hover:underline transition flex items-center gap-1">
                <i data-lucide="calendar" class="w-4 h-4"></i> {% trans "Meetings" %}
            </a></li>
            <li class="text-gray-400">/</li>
            <li class="font-semibold" style="color: #9d2235;">{% trans "Create Zoom Meeting" %}</li>
        </ol>
    </nav>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <!-- Header -->
        <div class="px-6 py-4 border-b border-gray-100" style="background-color: #f8f9fa;">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <h1 class="text-xl font-bold flex items-center gap-2" style="color: #9d2235;">
                    <i data-lucide="video" class="w-6 h-6"></i>
                    {% trans "Create New Zoom Meeting" %}
                </h1>
                <a href="{% url 'list_meetings' %}"
                   class="inline-flex items-center gap-2 px-4 py-2 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="arrow-left" class="w-4 h-4"></i>
                    {% trans "Back to Meetings" %}
                </a>
            </div>
        </div>

        <!-- Form -->
        <div class="p-6">
            {% if form.non_field_errors %}
                <div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200" role="alert">
                    <div class="flex items-start gap-3">
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i>
                        <div>
                            <h5 class="font-semibold text-red-800 mb-1">{% trans "Error" %}</h5>
                            {% for error in form.non_field_errors %}
                                <p class="text-red-700 mb-0">{{ error }}</p>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}

            <form method="post" class="space-y-6">
                {% csrf_token %}

                <!-- Topic -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.topic.id_for_label }}">
                        {% trans "Topic" %} <span class="text-red-500">*</span>
                    </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" }}
                    {% if form.topic.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ form.topic.errors.0 }}</div>
                    {% endif %}
                </div>

                <!-- Start Time -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.start_time.id_for_label }}">
                        {% trans "Start Time" %} <span class="text-red-500">*</span>
                    </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" }}
                    {% if form.start_time.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ form.start_time.errors.0 }}</div>
                    {% endif %}
                </div>

                <!-- Duration -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2" for="{{ form.duration.id_for_label }}">
                        {% trans "Duration (minutes)" %} <span class="text-red-500">*</span>
                    </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" }}
                    {% if form.duration.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ form.duration.errors.0 }}</div>
                    {% endif %}
                </div>

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-4 border-t border-gray-200">
                    <a href="{% url 'list_meetings' %}" 
                       class="inline-flex items-center gap-2 px-8 py-3 rounded-lg 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 "Cancel" %}
                    </a>
                    <button type="submit"
                            class="inline-flex items-center gap-2 px-8 py-3 rounded-lg 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="plus" class="w-4 h-4"></i>
                        {% trans "Create Meeting" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

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

    // Form validation
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const topic = document.getElementById('id_topic').value.trim();
            const startTime = document.getElementById('id_start_time').value.trim();
            const duration = document.getElementById('id_duration').value.trim();

            if (!topic) {
                e.preventDefault();
                alert("{% trans 'Please enter a topic.' %}");
                document.getElementById('id_topic').focus();
                return false;
            }

            if (!startTime) {
                e.preventDefault();
                alert("{% trans 'Please enter a start time.' %}");
                document.getElementById('id_start_time').focus();
                return false;
            }

            if (!duration) {
                e.preventDefault();
                alert("{% trans 'Please enter a duration.' %}");
                document.getElementById('id_duration').focus();
                return false;
            }
        });
    }
});
</script>
{% endblock %}