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

{% block title %}{% trans "Create Report Template" %} — PX360{% endblock %}

{% block extra_css %}
<style>
    .ds-option {
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .ds-option:hover, .ds-option.selected {
        border-color: #005696;
        background: rgba(0,86,150,0.04);
    }
    .ds-option.selected {
        box-shadow: 0 0 0 3px rgba(0,86,150,0.15);
    }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-6 py-8 max-w-3xl">
    <div class="mb-8">
        <a href="{% url 'presentations:template_list' %}" class="text-blue-900 hover:underline text-sm">&larr; Back to Templates</a>
        <h1 class="text-3xl font-bold text-gray-800 mt-4">{% trans "Create Report Template" %}</h1>
        <p class="text-gray-500 mt-1">{% trans "Upload a reference PDF and select a data source to auto-generate a slide template." %}</p>
    </div>

    <form method="post" enctype="multipart/form-data" id="template-form">
        {% csrf_token %}

        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-6 space-y-5">
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Template Name *</label>
                <input type="text" name="name" required class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:border-blue-900 focus:ring-1 focus:ring-blue-900" placeholder="e.g., Doctor Ratings Report">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Slug *</label>
                <input type="text" name="slug" required class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:border-blue-900 focus:ring-1 focus:ring-blue-900" placeholder="e.g., doctor-ratings" id="slug-input">
                <p class="text-xs text-gray-400 mt-1">URL-friendly identifier (auto-generated from name)</p>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Description</label>
                <textarea name="description" rows="2" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:border-blue-900 focus:ring-1 focus:ring-blue-900" placeholder="Brief description of this report template"></textarea>
            </div>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-6">
            <label class="block text-sm font-semibold text-gray-700 mb-3">Data Source *</label>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="ds-options">
                {% for key, info in data_sources.items %}
                <div class="ds-option" data-source="{{ key }}" onclick="selectSource(this, '{{ key }}')">
                    <div class="font-semibold text-gray-800 mb-1">{{ info.label }}</div>
                    <div class="text-sm text-gray-500">{{ info.description }}</div>
                    <div class="text-xs text-gray-400 mt-2">{{ info.data_keys|length }} data keys available</div>
                </div>
                {% endfor %}
            </div>
            <input type="hidden" name="data_source" id="data-source-input" required>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-6">
            <label class="block text-sm font-semibold text-gray-700 mb-1">Reference PDF</label>
            <input type="file" name="reference_pdf" accept=".pdf" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 file:mr-4 file:py-1 file:px-4 file:rounded file:border-0 file:bg-blue-900 file:text-white file:font-semibold file:cursor-pointer">
            <p class="text-xs text-gray-400 mt-1">Upload a reference report PDF. The AI will analyze its structure and auto-create slide definitions.</p>
        </div>

        <div class="flex items-center justify-between">
            <a href="{% url 'presentations:template_list' %}" class="text-gray-500 hover:text-gray-700">{% trans "Cancel" %}</a>
            <button type="submit" class="px-8 py-3 bg-blue-900 text-white rounded-lg hover:bg-blue-800 font-semibold">
                {% trans "Create Template" %}
            </button>
        </div>
    </form>
</div>

<script>
function selectSource(el, key) {
    document.querySelectorAll('.ds-option').forEach(o => o.classList.remove('selected'));
    el.classList.add('selected');
    document.getElementById('data-source-input').value = key;
}

document.querySelector('[name="name"]').addEventListener('input', function(e) {
    const slug = e.target.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
    document.getElementById('slug-input').value = slug;
});
</script>
{% endblock %}