{% extends "base.html" %}
{% block title %}Branded PDF — {{ 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">BRANDED PDF EXPORT</div>
        <h1 class="text-2xl font-bold text-white">تقرير PDF بعلامتك التجارية</h1>
    </div>
    <div class="glass p-6 rounded-xl border border-white/10 space-y-5">
        <div>
            <label class="text-xs text-slate-400 block mb-1">رابط شعار الشركة (URL)</label>
            <input id="logo_url" type="url" placeholder="https://example.com/logo.png" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
        </div>
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="text-xs text-slate-400 block mb-1">اللون الأساسي</label>
                <input id="primary_color" type="color" value="#D2AF20" class="w-full h-10 bg-transparent border border-white/10 rounded-lg cursor-pointer">
            </div>
            <div>
                <label class="text-xs text-slate-400 block mb-1">اسم الشركة على الغلاف</label>
                <input id="company_name" placeholder="اسم شركتك" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
            </div>
        </div>
        <div class="bg-amber-500/10 border border-amber-500/20 p-4 rounded-lg">
            <p class="text-amber-300 text-sm">هذه الميزة متاحة لخطة Enterprise. سيتم إضافة الشعار واللون على غلاف تقرير PDF تلقائياً.</p>
        </div>
        <a href="{{ url_for('study.pdf', report_id=report.id) }}" class="block w-full text-center bg-gold-500/20 border border-gold-500/30 text-gold-400 px-6 py-3 rounded-lg text-sm font-medium hover:bg-gold-500/30 transition">تصدير PDF (بدون علامة تجارية)</a>
    </div>
</div>
{% endblock %}