{% extends 'admin/base.html.twig' %}

{% block title %}Genel Ayarlar{% endblock %}
{% block page_title %}Genel Ayarlar{% endblock %}

{% block body %}
    {% set initialTab = app.request.query.get('tab', 'genel') %}
    <div x-data="{ activeTab: '{{ initialTab }}' }">

        {# Tab Navigation #}
        <div class="border-b border-gray-200 mb-6">
            <nav class="-mb-px flex space-x-6 overflow-x-auto" aria-label="Tabs">
                <button type="button" @click="activeTab = 'genel'"
                        :class="activeTab === 'genel' ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium transition-colors">
                    <i class="fas fa-cog mr-1.5"></i> Genel
                </button>
                <button type="button" @click="activeTab = 'haber'"
                        :class="activeTab === 'haber' ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium transition-colors">
                    <i class="fas fa-newspaper mr-1.5"></i> Haber
                </button>
                <button type="button" @click="activeTab = 'seo'"
                        :class="activeTab === 'seo' ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium transition-colors">
                    <i class="fas fa-search mr-1.5"></i> SEO
                </button>
                <button type="button" @click="activeTab = 'sosyal_medya'"
                        :class="activeTab === 'sosyal_medya' ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium transition-colors">
                    <i class="fas fa-share-alt mr-1.5"></i> Sosyal Medya
                </button>
                <button type="button" @click="activeTab = 'email'"
                        :class="activeTab === 'email' ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium transition-colors">
                    <i class="fas fa-envelope mr-1.5"></i> E-posta
                </button>
                <button type="button" @click="activeTab = 'guvenlik'"
                        :class="activeTab === 'guvenlik' ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium transition-colors">
                    <i class="fas fa-shield-alt mr-1.5"></i> Guvenlik
                </button>
                <button type="button" @click="activeTab = 'lisans'"
                        :class="activeTab === 'lisans' ? 'border-primary-500 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium transition-colors">
                    <i class="fas fa-key mr-1.5"></i> Lisans & Paket
                </button>
            </nav>
        </div>

        {# ============================================================ #}
        {# SETTINGS FORM (all tabs except lisans)                        #}
        {# ============================================================ #}
        <form method="post" action="{{ path('admin_settings') }}">
            <input type="hidden" name="_token" value="{{ csrf_token('site_settings') }}">

            {# Genel Tab #}
            <div x-show="activeTab === 'genel'" class="space-y-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Genel Ayarlar</h3>
                    </div>
                    <div class="card-body space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="site_title" class="form-label">Site Basligi</label>
                                <input type="text" id="site_title" name="site_title"
                                       value="{{ settings.site_title|default('') }}"
                                       class="form-input w-full" placeholder="Site basligi">
                            </div>
                            <div>
                                <label for="admin_email" class="form-label">Yonetici E-posta</label>
                                <input type="email" id="admin_email" name="admin_email"
                                       value="{{ settings.admin_email|default('') }}"
                                       class="form-input w-full" placeholder="admin@ornek.com">
                            </div>
                        </div>
                        <div>
                            <label for="site_description" class="form-label">Site Aciklamasi</label>
                            <textarea id="site_description" name="site_description" rows="3"
                                      class="form-input w-full" placeholder="Site aciklamasi">{{ settings.site_description|default('') }}</textarea>
                        </div>
                        <div>
                            <label for="site_keywords" class="form-label">Anahtar Kelimeler</label>
                            <textarea id="site_keywords" name="site_keywords" rows="2"
                                      class="form-input w-full" placeholder="haber, gundem, spor">{{ settings.site_keywords|default('') }}</textarea>
                        </div>
                        <div>
                            <label for="contact_phone" class="form-label">İletişim Telefonu (WhatsApp)</label>
                            <div class="flex gap-2">
                                <input type="text" id="contact_phone" name="contact_phone"
                                       value="{{ settings.contact_phone|default('') }}"
                                       class="form-input w-full" placeholder="905xxxxxxxxx">
                            </div>
                            <p class="text-xs text-gray-500 mt-1">
                                <i class="fab fa-whatsapp text-green-500 mr-1"></i>
                                Reklam alanlarındaki "İletişime Geç" butonu bu numaraya yönlendirir. Başında 0 olmadan ülke koduyla yazın (örn: 905xxxxxxxxx).
                            </p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="timezone" class="form-label">Saat Dilimi</label>
                                <select id="timezone" name="timezone" class="form-input w-full">
                                    {% set tzVal = settings.timezone|default('Europe/Istanbul') %}
                                    <option value="Europe/Istanbul" {{ tzVal == 'Europe/Istanbul' ? 'selected' : '' }}>Europe/Istanbul</option>
                                    <option value="Europe/London" {{ tzVal == 'Europe/London' ? 'selected' : '' }}>Europe/London</option>
                                    <option value="America/New_York" {{ tzVal == 'America/New_York' ? 'selected' : '' }}>America/New_York</option>
                                    <option value="UTC" {{ tzVal == 'UTC' ? 'selected' : '' }}>UTC</option>
                                </select>
                            </div>
                            <div>
                                <label for="language" class="form-label">Dil</label>
                                <select id="language" name="language" class="form-input w-full">
                                    {% set langVal = settings.language|default('tr') %}
                                    <option value="tr" {{ langVal == 'tr' ? 'selected' : '' }}>Turkce</option>
                                    <option value="en" {{ langVal == 'en' ? 'selected' : '' }}>English</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Haber Tab #}
            <div x-show="activeTab === 'haber'" x-cloak class="space-y-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Haber Ayarlari</h3>
                    </div>
                    <div class="card-body space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="news_per_page" class="form-label">Sayfa Basina Haber</label>
                                <input type="number" id="news_per_page" name="news_per_page"
                                       value="{{ settings.news_per_page|default('20') }}"
                                       class="form-input w-full" min="1" max="100">
                            </div>
                            <div>
                                <label for="default_news_status" class="form-label">Varsayilan Haber Durumu</label>
                                <select id="default_news_status" name="default_news_status" class="form-input w-full">
                                    {% set statusVal = settings.default_news_status|default('draft') %}
                                    <option value="draft" {{ statusVal == 'draft' ? 'selected' : '' }}>Taslak</option>
                                    <option value="published" {{ statusVal == 'published' ? 'selected' : '' }}>Yayinda</option>
                                </select>
                            </div>
                        </div>
                        <div class="space-y-3">
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input type="checkbox" name="auto_publish_agency" value="1"
                                       {{ settings.auto_publish_agency|default('0') == '1' ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="form-label mb-0">Ajans haberlerini otomatik yayinla</span>
                            </label>
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input type="checkbox" name="allow_comments_default" value="1"
                                       {{ settings.allow_comments_default|default('1') == '1' ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="form-label mb-0">Varsayilan olarak yorumlara izin ver</span>
                            </label>
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input type="checkbox" name="comment_moderation" value="1"
                                       {{ settings.comment_moderation|default('1') == '1' ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="form-label mb-0">Yorum moderasyonu</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            {# SEO Tab #}
            <div x-show="activeTab === 'seo'" x-cloak class="space-y-6">
                <div class="card">
                    <div class="card-header"><h3 class="card-title">SEO Ayarlari</h3></div>
                    <div class="card-body space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="google_analytics_id" class="form-label">Google Analytics ID</label>
                                <input type="text" id="google_analytics_id" name="google_analytics_id" value="{{ settings.google_analytics_id|default('') }}" class="form-input w-full" placeholder="UA-XXXXXXX-X veya G-XXXXXXXXXX">
                            </div>
                            <div>
                                <label for="google_tag_manager" class="form-label">Google Tag Manager</label>
                                <input type="text" id="google_tag_manager" name="google_tag_manager" value="{{ settings.google_tag_manager|default('') }}" class="form-input w-full" placeholder="GTM-XXXXXXX">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="meta_robots_default" class="form-label">Varsayilan Meta Robots</label>
                                <select id="meta_robots_default" name="meta_robots_default" class="form-input w-full">
                                    {% set robotsVal = settings.meta_robots_default|default('index,follow') %}
                                    <option value="index,follow" {{ robotsVal == 'index,follow' ? 'selected' : '' }}>index, follow</option>
                                    <option value="noindex,follow" {{ robotsVal == 'noindex,follow' ? 'selected' : '' }}>noindex, follow</option>
                                    <option value="index,nofollow" {{ robotsVal == 'index,nofollow' ? 'selected' : '' }}>index, nofollow</option>
                                    <option value="noindex,nofollow" {{ robotsVal == 'noindex,nofollow' ? 'selected' : '' }}>noindex, nofollow</option>
                                </select>
                            </div>
                            <div>
                                <label for="canonical_base_url" class="form-label">Canonical Temel URL</label>
                                <input type="url" id="canonical_base_url" name="canonical_base_url" value="{{ settings.canonical_base_url|default('') }}" class="form-input w-full" placeholder="https://ornek.com">
                            </div>
                        </div>
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="sitemap_enabled" value="1" {{ settings.sitemap_enabled|default('1') == '1' ? 'checked' : '' }} class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <span class="form-label mb-0">Sitemap aktif</span>
                        </label>
                    </div>
                </div>
            </div>

            {# Sosyal Medya Tab #}
            <div x-show="activeTab === 'sosyal_medya'" x-cloak class="space-y-6">
                <div class="card">
                    <div class="card-header"><h3 class="card-title">Sosyal Medya Ayarlari</h3></div>
                    <div class="card-body space-y-4">
                        <div>
                            <label for="og_default_image" class="form-label">Varsayilan OG Gorsel</label>
                            <input type="text" id="og_default_image" name="og_default_image" value="{{ settings.og_default_image|default('') }}" class="form-input w-full" placeholder="https://ornek.com/og-image.jpg">
                            <p class="text-xs text-gray-500 mt-1">Haberlerde paylasilacak varsayilan Open Graph gorseli.</p>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="twitter_card_type" class="form-label">Twitter Card Tipi</label>
                                <select id="twitter_card_type" name="twitter_card_type" class="form-input w-full">
                                    {% set twitterCardVal = settings.twitter_card_type|default('summary_large_image') %}
                                    <option value="summary" {{ twitterCardVal == 'summary' ? 'selected' : '' }}>Summary</option>
                                    <option value="summary_large_image" {{ twitterCardVal == 'summary_large_image' ? 'selected' : '' }}>Summary Large Image</option>
                                </select>
                            </div>
                            <div>
                                <label for="facebook_app_id" class="form-label">Facebook App ID</label>
                                <input type="text" id="facebook_app_id" name="facebook_app_id" value="{{ settings.facebook_app_id|default('') }}" class="form-input w-full" placeholder="Facebook uygulama ID">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Email Tab #}
            <div x-show="activeTab === 'email'" x-cloak class="space-y-6">
                <div class="card">
                    <div class="card-header"><h3 class="card-title">E-posta Ayarlari</h3></div>
                    <div class="card-body space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="smtp_host" class="form-label">SMTP Sunucu</label>
                                <input type="text" id="smtp_host" name="smtp_host" value="{{ settings.smtp_host|default('') }}" class="form-input w-full" placeholder="smtp.ornek.com">
                            </div>
                            <div>
                                <label for="smtp_port" class="form-label">SMTP Port</label>
                                <input type="number" id="smtp_port" name="smtp_port" value="{{ settings.smtp_port|default('587') }}" class="form-input w-full" placeholder="587">
                            </div>
                        </div>
                        <div>
                            <label for="smtp_username" class="form-label">SMTP Kullanici Adi</label>
                            <input type="text" id="smtp_username" name="smtp_username" value="{{ settings.smtp_username|default('') }}" class="form-input w-full" placeholder="kullanici@ornek.com">
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="from_email" class="form-label">Gonderici E-posta</label>
                                <input type="email" id="from_email" name="from_email" value="{{ settings.from_email|default('') }}" class="form-input w-full" placeholder="noreply@ornek.com">
                            </div>
                            <div>
                                <label for="from_name" class="form-label">Gonderici Adi</label>
                                <input type="text" id="from_name" name="from_name" value="{{ settings.from_name|default('') }}" class="form-input w-full" placeholder="Site Adi">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Guvenlik Tab #}
            <div x-show="activeTab === 'guvenlik'" x-cloak class="space-y-6">
                <div class="card">
                    <div class="card-header"><h3 class="card-title">Guvenlik Ayarlari</h3></div>
                    <div class="card-body space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="max_login_attempts" class="form-label">Maks. Giris Denemesi</label>
                                <input type="number" id="max_login_attempts" name="max_login_attempts" value="{{ settings.max_login_attempts|default('5') }}" class="form-input w-full" min="1" max="20">
                            </div>
                            <div>
                                <label for="session_lifetime" class="form-label">Oturum Suresi (dakika)</label>
                                <input type="number" id="session_lifetime" name="session_lifetime" value="{{ settings.session_lifetime|default('120') }}" class="form-input w-full" min="5" max="1440">
                            </div>
                        </div>
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="maintenance_mode" value="1" {{ settings.maintenance_mode|default('0') == '1' ? 'checked' : '' }} class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <div>
                                <span class="form-label mb-0">Bakim Modu</span>
                                <p class="text-xs text-gray-500">Aktifken site ziyaretcilere kapali olur.</p>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            {# Submit (visible for all tabs except lisans) #}
            <div x-show="activeTab !== 'lisans'" class="flex justify-end mt-6">
                <button type="submit" class="btn-primary">
                    <i class="fas fa-save mr-2"></i> Ayarlari Kaydet
                </button>
            </div>
        </form>

        {# ============================================================ #}
        {# LISANS & PAKET TAB (separate from the settings form)         #}
        {# ============================================================ #}
        <div x-show="activeTab === 'lisans'" x-cloak class="space-y-6">

            {% set ld = licenseData %}

            {# Plan Badge Header #}
            {% set planColorMap = {
                starter: { gradient: 'from-emerald-500 to-emerald-700', bg: 'bg-emerald-50', text: 'text-emerald-700', border: 'border-emerald-200', icon: 'fa-seedling' },
                professional: { gradient: 'from-blue-500 to-blue-700', bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200', icon: 'fa-briefcase' },
                enterprise: { gradient: 'from-purple-500 to-purple-700', bg: 'bg-purple-50', text: 'text-purple-700', border: 'border-purple-200', icon: 'fa-building' }
            } %}
            {% set pc = planColorMap[ld.plan] ?? planColorMap.starter %}

            <div class="bg-gradient-to-r {{ pc.gradient }} rounded-xl px-6 py-5 shadow-sm">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="flex items-center gap-4">
                        <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-white/20">
                            <i class="fas {{ pc.icon }} text-xl text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-white">{{ ld.planDisplayName }} Plan</h3>
                            {% if ld.hasLicense %}
                                <p class="text-sm text-white/70">
                                    {{ ld.type == 'monthly' ? 'Aylık' : (ld.type == 'yearly' ? 'Yıllık' : 'Ömür Boyu') }} lisans
                                    {% if ld.daysUntilExpiry is not null %}
                                        &middot; {{ ld.daysUntilExpiry }} gün kaldı
                                    {% else %}
                                        &middot; Süresiz
                                    {% endif %}
                                </p>
                            {% else %}
                                <p class="text-sm text-white/70">Aktif lisans bulunamadı</p>
                            {% endif %}
                        </div>
                    </div>
                    {% if ld.hasLicense %}
                        <div class="flex items-center gap-2">
                            <span class="inline-flex items-center rounded-full {{ ld.isActive ? 'bg-green-400/20 text-green-100' : 'bg-red-400/20 text-red-100' }} px-3 py-1 text-xs font-semibold">
                                <i class="fas {{ ld.isActive ? 'fa-check-circle' : 'fa-times-circle' }} mr-1.5"></i>
                                {{ ld.isActive ? 'Aktif' : 'Pasif' }}
                            </span>
                        </div>
                    {% endif %}
                </div>
            </div>

            {# License Key Activation Form #}
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-key mr-2 text-amber-500"></i>Lisans Anahtarı</h3>
                </div>
                <div class="card-body">
                    {% if ld.hasLicense %}
                        <div class="flex items-center gap-3 mb-4 p-3 rounded-lg {{ pc.bg }} {{ pc.border }} border">
                            <i class="fas fa-check-circle {{ pc.text }}"></i>
                            <div>
                                <p class="text-sm font-semibold {{ pc.text }}">Aktif Lisans Anahtarı</p>
                                <p class="text-sm font-mono text-gray-600 mt-0.5">{{ ld.licenseKey }}</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                            <div class="p-3 bg-gray-50 rounded-lg">
                                <p class="text-xs text-gray-400">Plan</p>
                                <p class="font-semibold text-gray-700">{{ ld.planDisplayName }}</p>
                            </div>
                            <div class="p-3 bg-gray-50 rounded-lg">
                                <p class="text-xs text-gray-400">Tür</p>
                                <p class="font-semibold text-gray-700">{{ ld.type == 'monthly' ? 'Aylık' : (ld.type == 'yearly' ? 'Yıllık' : 'Ömür Boyu') }}</p>
                            </div>
                            <div class="p-3 bg-gray-50 rounded-lg">
                                <p class="text-xs text-gray-400">Başlangıç</p>
                                <p class="font-semibold text-gray-700">{{ ld.startsAt ? ld.startsAt|date('d.m.Y') : '-' }}</p>
                            </div>
                            <div class="p-3 bg-gray-50 rounded-lg">
                                <p class="text-xs text-gray-400">Bitiş</p>
                                <p class="font-semibold {{ ld.daysUntilExpiry is not null and ld.daysUntilExpiry <= 7 ? 'text-red-600' : 'text-gray-700' }}">
                                    {{ ld.expiresAt ? ld.expiresAt|date('d.m.Y') : 'Süresiz' }}
                                </p>
                            </div>
                        </div>
                    {% endif %}

                    <div class="{{ ld.hasLicense ? 'mt-5 pt-5 border-t border-gray-200' : '' }}">
                        <p class="text-sm text-gray-500 mb-3">
                            {% if ld.hasLicense %}
                                Farklı bir lisans anahtarı girerek planınızı değiştirebilirsiniz:
                            {% else %}
                                Lisans anahtarınızı girerek paketinizi aktive edin:
                            {% endif %}
                        </p>
                        <form method="post" action="{{ path('admin_settings_activate_license') }}" class="flex gap-3">
                            <input type="hidden" name="_token" value="{{ csrf_token('activate_license') }}">
                            <input type="text" name="license_key" placeholder="NH-XXXX-XXXX-XXXX-XXXX"
                                   class="form-input flex-1 font-mono uppercase tracking-wider" required
                                   pattern="[A-Za-z0-9\-]+" title="Lisans anahtarını girin (ör: NH-XXXX-XXXX-XXXX-XXXX)">
                            <button type="submit" class="btn-primary whitespace-nowrap">
                                <i class="fas fa-unlock mr-2"></i> Aktive Et
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            {# Usage & Limits #}
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-chart-bar mr-2 text-blue-500"></i>Kullanım & Limitler</h3>
                </div>
                <div class="card-body">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                        {# Users #}
                        {% set uMax = ld.usage.users.max %}
                        {% set uCur = ld.usage.users.current %}
                        {% set uPct = ld.usage.users.percentUsed %}
                        <div class="p-4 rounded-xl border {{ uPct >= 100 ? 'bg-red-50 border-red-200' : (uPct >= 80 ? 'bg-amber-50 border-amber-200' : 'bg-blue-50 border-blue-200') }}">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-semibold text-gray-700"><i class="fas fa-users mr-1.5 text-blue-500"></i>Kullanıcılar</span>
                                <span class="text-xs font-medium {{ uPct >= 100 ? 'text-red-600' : 'text-gray-500' }}">{{ uCur }}/{{ uMax == 0 ? '∞' : uMax }}</span>
                            </div>
                            <div class="w-full bg-white/60 rounded-full h-2 overflow-hidden">
                                <div class="h-2 rounded-full {{ uPct >= 100 ? 'bg-red-500' : (uPct >= 80 ? 'bg-amber-500' : 'bg-blue-500') }}" style="width: {{ uMax > 0 ? (uPct > 100 ? 100 : uPct) : 0 }}%"></div>
                            </div>
                            <p class="text-xs text-gray-500 mt-1.5">Limit: {{ uMax == 0 ? 'Sınırsız' : uMax ~ ' kullanıcı' }}</p>
                        </div>

                        {# News #}
                        {% set nMax = ld.usage.news.max %}
                        {% set nCur = ld.usage.news.current %}
                        {% set nPct = ld.usage.news.percentUsed %}
                        <div class="p-4 rounded-xl border {{ nPct >= 100 ? 'bg-red-50 border-red-200' : (nPct >= 80 ? 'bg-amber-50 border-amber-200' : 'bg-emerald-50 border-emerald-200') }}">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-semibold text-gray-700"><i class="fas fa-newspaper mr-1.5 text-emerald-500"></i>Haberler</span>
                                <span class="text-xs font-medium {{ nPct >= 100 ? 'text-red-600' : 'text-gray-500' }}">{{ nCur }}/{{ nMax == 0 ? '∞' : nMax|number_format(0, ',', '.') }}</span>
                            </div>
                            <div class="w-full bg-white/60 rounded-full h-2 overflow-hidden">
                                <div class="h-2 rounded-full {{ nPct >= 100 ? 'bg-red-500' : (nPct >= 80 ? 'bg-amber-500' : 'bg-emerald-500') }}" style="width: {{ nMax > 0 ? (nPct > 100 ? 100 : nPct) : 0 }}%"></div>
                            </div>
                            <p class="text-xs text-gray-500 mt-1.5">Limit: {{ nMax == 0 ? 'Sınırsız' : nMax|number_format(0, ',', '.') ~ ' haber' }}</p>
                        </div>

                        {# Storage #}
                        {% set sMax = ld.usage.storage.max %}
                        {% set sCur = ld.usage.storage.current %}
                        {% set sPct = ld.usage.storage.percentUsed %}
                        <div class="p-4 rounded-xl border {{ sPct >= 100 ? 'bg-red-50 border-red-200' : (sPct >= 80 ? 'bg-amber-50 border-amber-200' : 'bg-purple-50 border-purple-200') }}">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-semibold text-gray-700"><i class="fas fa-database mr-1.5 text-purple-500"></i>Depolama</span>
                                <span class="text-xs font-medium {{ sPct >= 100 ? 'text-red-600' : 'text-gray-500' }}">
                                    {{ sCur >= 1024 ? (sCur / 1024)|round(1) ~ ' GB' : sCur ~ ' MB' }}
                                    /
                                    {{ sMax == 0 ? '∞' : (sMax >= 1024 ? (sMax / 1024)|round(0) ~ ' GB' : sMax ~ ' MB') }}
                                </span>
                            </div>
                            <div class="w-full bg-white/60 rounded-full h-2 overflow-hidden">
                                <div class="h-2 rounded-full {{ sPct >= 100 ? 'bg-red-500' : (sPct >= 80 ? 'bg-amber-500' : 'bg-purple-500') }}" style="width: {{ sMax > 0 ? (sPct > 100 ? 100 : sPct) : 0 }}%"></div>
                            </div>
                            <p class="text-xs text-gray-500 mt-1.5">Limit: {{ sMax == 0 ? 'Sınırsız' : (sMax >= 1024 ? (sMax / 1024)|round(0) ~ ' GB' : sMax ~ ' MB') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            {# Plan Features & Modules #}
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {# Features #}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-star mr-2 text-amber-500"></i>Plan Özellikleri</h3>
                    </div>
                    <div class="card-body">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                            {% for key, label in ld.featureLabels %}
                                {% set enabled = ld.features[key] is defined and ld.features[key] %}
                                <div class="flex items-center gap-2 px-3 py-2.5 rounded-lg {{ enabled ? pc.bg : 'bg-gray-50' }}">
                                    {% if enabled %}
                                        <i class="fas fa-check-circle text-green-500 text-sm"></i>
                                        <span class="text-sm font-medium {{ pc.text }}">{{ label }}</span>
                                    {% else %}
                                        <i class="fas fa-lock text-gray-300 text-sm"></i>
                                        <span class="text-sm text-gray-400">{{ label }}</span>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                {# Modules #}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-puzzle-piece mr-2 text-indigo-500"></i>Modül Erişimi</h3>
                    </div>
                    <div class="card-body">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                            {% set allModules = ['menu', 'comment', 'seo', 'widget', 'advertisement', 'poll', 'theme', 'amp', 'agency', 'horoscope'] %}
                            {% for modSlug in allModules %}
                                {% set allowed = modSlug in ld.allowedModules %}
                                <div class="flex items-center gap-2 px-3 py-2.5 rounded-lg {{ allowed ? pc.bg : 'bg-gray-50' }}">
                                    {% if allowed %}
                                        <i class="fas fa-check-circle text-green-500 text-sm"></i>
                                        <span class="text-sm font-medium {{ pc.text }}">{{ ld.moduleLabels[modSlug]|default(modSlug) }}</span>
                                    {% else %}
                                        <i class="fas fa-lock text-gray-300 text-sm"></i>
                                        <span class="text-sm text-gray-400">{{ ld.moduleLabels[modSlug]|default(modSlug) }}</span>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            {# Upgrade Notice #}
            {% if ld.plan != 'enterprise' %}
                <div class="rounded-xl border border-indigo-200 bg-indigo-50 p-5">
                    <div class="flex items-start gap-3">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-100">
                            <i class="fas fa-arrow-up text-indigo-600"></i>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-indigo-800">Paketinizi Yükseltin</h4>
                            <p class="text-sm text-indigo-600 mt-1">
                                Daha fazla kullanıcı, haber ve depolama alanı ile gelişmiş özellikler için paketinizi yükseltin.
                                Yöneticinizle iletişime geçerek yeni bir lisans anahtarı talep edebilirsiniz.
                            </p>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}
