{% extends 'layouts/base.html' %}
{% load i18n static %}

{% block title %}{% if presentation %}{% trans "Edit Presentation" %}{% else %}{% trans "New Presentation" %}{% endif %} — PX360{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <nav class="flex items-center gap-2 text-sm text-gray-400 mb-6">
        <a href="{% url 'presentations:list' %}" class="hover:text-navy transition">{% trans "Presentations" %}</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="text-gray-700">{% if presentation %}{% trans "Edit" %}{% else %}{% trans "New" %}{% endif %}</span>
    </nav>

    <div class="bg-white rounded-2xl border-2 border-gray-200 p-8">
        <h1 class="text-xl font-bold text-gray-800 mb-6">
            {% if presentation %}{% trans "Edit Presentation" %}{% else %}{% trans "Create Presentation" %}{% endif %}
        </h1>

        <form method="post">
            {% csrf_token %}

            <div class="space-y-5">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Title" %} *</label>
                    <input type="text" name="title" value="{% if presentation %}{{ presentation.title }}{% endif %}"
                           class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition"
                           required placeholder="{% trans 'e.g., Q1 2026 Complaints Report' %}">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Subtitle" %}</label>
                    <input type="text" name="subtitle" value="{% if presentation %}{{ presentation.subtitle }}{% endif %}"
                           class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition"
                           placeholder="{% trans 'e.g., Al Hammadi Hospital — Patient Experience' %}">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Description" %}</label>
                    <textarea name="description" rows="3"
                              class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition"
                              placeholder="{% trans 'Brief description of this presentation' %}">{% if presentation %}{{ presentation.description }}{% endif %}</textarea>
                </div>

                <div class="grid grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Theme" %}</label>
                        <select name="theme" class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
                            {% for value, label in theme_choices %}
                            <option value="{{ value }}" {% if presentation and presentation.theme == value %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Report Type" %}</label>
                        <input type="text" name="presentation_type" value="{% if presentation %}{{ presentation.presentation_type }}{% endif %}"
                               class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition"
                               placeholder="{% trans 'e.g., quarterly, monthly' %}">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Date" %}</label>
                        <input type="date" name="presentation_date" value="{% if presentation and presentation.presentation_date %}{{ presentation.presentation_date|date:'Y-m-d' }}{% endif %}"
                               class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
                    </div>

                    {% if presentation %}
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Status" %}</label>
                        <select name="status" class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
                            {% for value, label in status_choices %}
                            <option value="{{ value }}" {% if presentation.status == value %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}
                </div>

                {% if presentation %}
                <div class="flex items-center gap-3">
                    <input type="checkbox" name="is_shared" id="is_shared" {% if presentation.is_shared %}checked{% endif %}
                           class="w-4 h-4 rounded border-gray-300 text-navy focus:ring-navy">
                    <label for="is_shared" class="text-sm text-gray-700">{% trans "Share with other users in the same hospital" %}</label>
                </div>
                {% endif %}
            </div>

            <div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-gray-100">
                <a href="{% url 'presentations:list' %}" class="px-5 py-2.5 text-sm font-medium text-gray-600 hover:text-gray-800 transition">{% trans "Cancel" %}</a>
                <button type="submit" class="bg-navy text-white px-6 py-2.5 rounded-xl hover:bg-navy/90 transition font-medium text-sm">
                    {% if presentation %}{% trans "Save Changes" %}{% else %}{% trans "Create Presentation" %}{% endif %}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}