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

{% block title %}{% trans "Edit Slide" %} — PX360{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/presentations/slide-theme.css' %}">
{% endblock %}

{% block content %}
<div class="max-w-4xl 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>
        <a href="{% url 'presentations:detail' pk=presentation.pk %}" class="hover:text-navy transition">{{ presentation.title }}</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="text-gray-700">{% if slide %}{% trans "Edit Slide" %}{% else %}{% trans "Add Slide" %}{% 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 slide %}{% trans "Edit Slide" %} #{{ slide.order }}{% else %}{% trans "Add New Slide" %}{% endif %}
        </h1>

        <form method="post" id="slide-form">
            {% csrf_token %}

            <div class="space-y-5">
                <div class="grid grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Layout" %} *</label>
                        <select name="layout" id="layout-select" 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 layout_choices %}
                            <option value="{{ value }}" {% if slide and slide.layout == value %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Background Color" %}</label>
                        <input type="color" name="background_color" value="{% if slide and slide.background_color %}{{ slide.background_color }}{% else %}#ffffff{% endif %}"
                               class="w-full h-12 border-2 border-gray-200 rounded-xl cursor-pointer">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Title" %}</label>
                    <input type="text" name="title" value="{% if slide %}{{ slide.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"
                           placeholder="{% trans 'Slide title' %}">
                </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 slide %}{{ slide.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 'Slide subtitle' %}">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Content" %} <span class="font-normal text-gray-400">({% trans "JSON" %})</span></label>
                    <textarea name="content" id="content-editor" rows="15"
                              class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm font-mono focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition"
                              placeholder='{ "metrics": [ { "label": "Total", "value": "1,234", "icon": "bar-chart-3" } ] }'>{% if slide and slide.content %}{{ slide.content|safe }}{% endif %}</textarea>
                    <p class="text-xs text-gray-400 mt-1">{% trans "Enter JSON content matching the selected layout type" %}</p>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Speaker Notes" %}</label>
                    <textarea name="speaker_notes" rows="4"
                              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 'Notes for the presenter (not shown on slide)' %}">{% if slide %}{{ slide.speaker_notes }}{% endif %}</textarea>
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-gray-100">
                <a href="{% url 'presentations:detail' pk=presentation.pk %}" 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 slide %}{% trans "Save Slide" %}{% else %}{% trans "Add Slide" %}{% endif %}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}