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

{% block title %}{% trans "Create Remote Interview" %}{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <div>
            <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="video" class="w-6 h-6 text-temple-red"></i>
                </div>
                {% trans "Create Remote Interview" %}
            </h1>
            <p class="text-gray-600 mt-1">{% trans "for" %} {{ application.name }} - {{ job.title }}</p>
        </div>
        <a href="{% url 'applications_interview_view' job.slug %}" 
           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="arrow-left" class="w-4 h-4"></i> {% trans "Back to application interview list" %}
        </a>
        
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <p class="text-gray-600 mb-6">
            {% trans "Schedule a remote interview for" %} <strong>{{ application.name }}</strong>
            {% trans "for the position of" %} <strong>{{ job.title }}</strong>.
        </p>

        {% if messages %}
            <div class="space-y-3 mb-6">
                {% for message in messages %}
                    <div class="{% if message.tags == 'error' %}bg-red-50 border-red-200 text-red-800
                        {% elif message.tags == 'success' %}bg-green-50 border-green-200 text-green-800
                        {% elif message.tags == 'warning' %}bg-yellow-50 border-yellow-200 text-yellow-800
                        {% else %}bg-blue-50 border-blue-200 text-blue-800{% endif %}
                        border rounded-xl p-4 flex items-start gap-3">
                        {% if message.tags == 'error' %}
                            <i data-lucide="alert-circle" class="w-5 h-5 flex-shrink-0"></i>
                        {% elif message.tags == 'success' %}
                            <i data-lucide="check-circle" class="w-5 h-5 flex-shrink-0"></i>
                        {% elif message.tags == 'warning' %}
                            <i data-lucide="alert-triangle" class="w-5 h-5 flex-shrink-0"></i>
                        {% else %}
                            <i data-lucide="info" class="w-5 h-5 flex-shrink-0"></i>
                        {% endif %}
                        <span class="text-sm">{{ message }}</span>
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        <form method="post" action="{% url 'interview_create_remote' application.slug %}" class="space-y-6">
            {% csrf_token %}

            <div class="space-y-4">
                {% 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 == 'topic' %}
                                <i data-lucide="tag" class="w-4 h-4 inline mr-1 text-temple-red"></i>
                            {% elif field.name == 'interview_date' %}
                                <i data-lucide="calendar" class="w-4 h-4 inline mr-1 text-temple-red"></i>
                            {% elif field.name == 'interview_time' %}
                                <i data-lucide="clock" class="w-4 h-4 inline mr-1 text-temple-red"></i>
                            {% elif field.name == 'duration' %}
                                <i data-lucide="timer" class="w-4 h-4 inline mr-1 text-temple-red"></i>
                            {% elif field.name == 'meeting_id' %}
                                <i data-lucide="hash" class="w-4 h-4 inline mr-1 text-temple-red"></i>
                            {% elif field.name == 'password' %}
                                <i data-lucide="lock" class="w-4 h-4 inline mr-1 text-temple-red"></i>
                            {% elif field.name == 'join_url' %}
                                <i data-lucide="link" class="w-4 h-4 inline mr-1 text-temple-red"></i>
                            {% endif %}
                            {{ field.label }}
                        </label>
                        {{ field|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 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>

            <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 "Schedule Remote Interview" %}
                </button>
            </div>
        </form>
    </div>
</div>

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

    // Add form validation for future dates
    const dateInput = document.querySelector('input[type="date"]');
    const today = new Date().toISOString().split('T')[0];

    if (dateInput) {
        dateInput.min = today;

        dateInput.addEventListener('change', function() {
            if (this.value < today) {
                this.setCustomValidity('{% trans "Interview date must be in future" %}');
            } else {
                this.setCustomValidity('');
            }
        });
    }
});
</script>
{% endblock %}