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

{% block title %}Generate: {{ template.name }} — PX360{% endblock %}

{% block content %}
<div class="container mx-auto px-6 py-8 max-w-2xl">
    <div class="mb-8">
        <a href="{% url 'presentations:template_detail' template.pk %}" class="text-blue-900 hover:underline text-sm">&larr; Back to Template</a>
        <h1 class="text-3xl font-bold text-gray-800 mt-4">Generate: {{ template.name }}</h1>
        <p class="text-gray-500 mt-1">Generate a report from this template using live data.</p>
    </div>

    <form method="post">
        {% 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">Hospital *</label>
                <select name="hospital" required class="w-full border border-gray-300 rounded-lg px-4 py-2.5">
                    <option value="">Select hospital...</option>
                    {% for h in hospitals %}
                    <option value="{{ h.id }}" {% if selected_hospital == h.id|stringformat:"s" %}selected{% endif %}>{{ h.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Year *</label>
                    <select name="year" required class="w-full border border-gray-300 rounded-lg px-4 py-2.5">
                        {% for y in years %}
                        <option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>{{ y }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Quarter</label>
                    <select name="quarter" class="w-full border border-gray-300 rounded-lg px-4 py-2.5">
                        <option value="">Full Year</option>
                        <option value="1">Q1 (Jan–Mar)</option>
                        <option value="2">Q2 (Apr–Jun)</option>
                        <option value="3">Q3 (Jul–Sep)</option>
                        <option value="4">Q4 (Oct–Dec)</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="bg-blue-50 rounded-xl p-5 mb-6">
            <h3 class="text-sm font-semibold text-blue-900 mb-2">Template Info</h3>
            <div class="text-sm text-blue-700 space-y-1">
                <p><strong>Data Source:</strong> {{ template.data_source }}</p>
                <p><strong>Slides:</strong> {{ template.slide_count }} template slides</p>
                <p><strong>Description:</strong> {{ template.description|default:"—" }}</p>
            </div>
        </div>

        <div class="flex items-center justify-between">
            <a href="{% url 'presentations:template_detail' template.pk %}" class="text-gray-500 hover:text-gray-700">Cancel</a>
            <button type="submit" class="px-8 py-3 bg-blue-900 text-white rounded-lg hover:bg-blue-800 font-semibold inline-flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                Generate Report
            </button>
        </div>
    </form>
</div>
{% endblock %}