{% extends "base.html" %}
{% block title %}Custom Sections — {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto px-4 py-12">
    <a href="{{ url_for('study.view', report_id=report.id) }}" class="text-sm text-slate-400 hover:text-white transition mb-4 inline-block">&larr; العودة للتقرير</a>
    <div class="mb-8">
        <div class="text-xs text-gold-500 font-mono tracking-widest uppercase">CUSTOM REPORT SECTIONS</div>
        <h1 class="text-2xl font-bold text-white">تخصيص أقسام التقرير</h1>
    </div>
    <form method="POST" class="glass p-6 rounded-xl border border-white/10">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <p class="text-sm text-slate-400 mb-4">اختر الأقسام التي تريدها في التقرير. عند إعادة التوليد ستُستخدم هذه الأقسام فقط.</p>
        <div class="grid md:grid-cols-2 gap-3 mb-6">
            {% for key, name in sections %}
            <label class="flex items-center gap-3 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition cursor-pointer">
                <input type="checkbox" name="sections" value="{{ key }}" {{ 'checked' if key in current_sections or not current_sections }}
                       class="rounded border-white/20 bg-white/5 text-gold-500">
                <span class="text-sm text-slate-300">{{ name }}</span>
            </label>
            {% endfor %}
        </div>
        <button type="submit" class="w-full bg-gold-500/20 border border-gold-500/30 text-gold-400 px-6 py-2.5 rounded-lg text-sm font-medium hover:bg-gold-500/30 transition">حفظ الأقسام المختارة</button>
    </form>
</div>
{% endblock %}