{#
    Template affiché lorsqu'un widget n'est pas disponible selon l'offre du site
    Variables:
        - widgetType: string - Le type du widget (ex: 'blog', 'shop-catalog')
        - requiredPlan: string - L'offre requise ('essential' ou 'pro')
        - site: Site - Le site actuel
#}

{% set planName = requiredPlan == 'pro' ? 'Pro' : 'Essential' %}
{% set planColor = requiredPlan == 'pro' ? '#f59e0b' : '#3b82f6' %}
{% set planGradient = requiredPlan == 'pro' ? 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)' : 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)' %}

{% set widgetNames = {
    'blog': 'Liste d\'articles de blog',
    'gallery': 'Galerie d\'images',
    'contact-form': 'Formulaire de contact',
    'shop-catalog': 'Catalogue boutique',
    'shop': 'Boutique',
    'info-box': 'Boite d\'information',
    'cards': 'Cartes',
    'icon-boxes': 'Icones avec texte',
    'faq': 'FAQ / Accordeon',
    'timeline': 'Timeline',
    'counters': 'Compteurs animes',
    'team-members': 'Equipe / Membres',
    'testimonials': 'Temoignages',
    'trust-badges': 'Badges de confiance',
    'pricing': 'Tarifs',
    'google-reviews': 'Avis Google'
} %}

{% set widgetName = widgetNames[widgetType] ?? widgetType %}

<div class="widget-upgrade-required" style="
    padding: 60px 40px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    text-align: center;
    margin: 20px 0;
">
    <div style="
        width: 80px;
        height: 80px;
        margin: 0 auto 20px;
        background: {{ planGradient }};
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    ">
        <i class="fas fa-lock" style="font-size: 2rem; color: white;"></i>
    </div>

    <h3 style="
        margin: 0 0 10px;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1e293b;
    ">
        Widget "{{ widgetName }}" non disponible
    </h3>

    <p style="
        margin: 0 0 25px;
        color: #64748b;
        font-size: 1rem;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    ">
        Ce widget est disponible avec l'offre
        <span style="
            display: inline-block;
            padding: 2px 10px;
            background: {{ planGradient }};
            color: white;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.875rem;
        ">{{ planName }}</span>
    </p>

    {% if site %}
    <a href="{{ path('admin_site_subscription_change_plan', {siteId: site.id}) }}" style="
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        background: {{ planGradient }};
        color: white;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(0, 0, 0, 0.2)';"
       onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 8px rgba(0, 0, 0, 0.15)';">
        <i class="fas fa-arrow-up"></i>
        Upgrader vers {{ planName }}
    </a>
    {% endif %}
</div>