{# Widget Cards - Affiche une grille de cartes polyvalentes #}
{% if cards is defined and cards|length > 0 %}
<div class="cards-widget cards-style-{{ cardStyle }} cards-image-{{ imagePosition }} cards-hover-{{ hoverEffect }}" style="text-align: {{ contentAlign }};">
    <div class="cards-grid cards-columns-{{ columns }}" style="gap: {{ gap }}px;">
        {% for card in cards %}
            {% set imageType = card.imageType|default('image') %}
            {% set showImage = (imageType == 'image' or imageType == 'both') and card.image is defined and card.image %}
            {% set showIcon = (imageType == 'icon' or imageType == 'both') and card.icon is defined and card.icon %}

            {% if imagePosition == 'left' and showImage %}
                {# Image à gauche - Layout horizontal #}
                <div class="card-item card-horizontal {% if equalHeight %}card-equal-height{% endif %}">
                    <div class="card-image-wrapper" style="height: {{ imageHeight }}px;">
                        <img src="{{ card.image }}" alt="{{ card.title|default('') }}" loading="lazy">
                    </div>
                    <div class="card-content">
                        {% if showIcon %}
                            <div class="card-icon" style="color: {{ card.iconColor|default('var(--primary-color)') }};">
                                <i class="fa-solid {{ card.icon|default('fa-star') }}"></i>
                            </div>
                        {% endif %}

                        {% if card.title is defined and card.title %}
                            <h3 class="card-title">{{ card.title }}</h3>
                        {% endif %}

                        {% if card.subtitle is defined and card.subtitle %}
                            <p class="card-subtitle">{{ card.subtitle }}</p>
                        {% endif %}

                        {% if card.description is defined and card.description %}
                            <div class="card-description">{{ card.description|raw }}</div>
                        {% endif %}

                        {% if card.buttonEnabled|default(false) and card.buttonText is defined %}
                            <a href="{{ card.buttonUrl|default('#') }}"
                               class="card-button card-button-{{ card.buttonStyle|default('primary') }}"
                               {% if card.buttonNewTab|default(false) %}target="_blank" rel="noopener"{% endif %}>
                                {{ card.buttonText }}
                            </a>
                        {% endif %}
                    </div>
                </div>

            {% elseif imagePosition == 'background' and showImage %}
                {# Image en arrière-plan #}
                <div class="card-item card-background {% if equalHeight %}card-equal-height{% endif %}" style="min-height: {{ imageHeight }}px;">
                    <img src="{{ card.image }}" alt="{{ card.title|default('') }}" class="card-bg-image" loading="lazy">
                    <div class="card-overlay"></div>
                    <div class="card-content card-content-overlay">
                        {% if showIcon %}
                            <div class="card-icon">
                                <i class="fa-solid {{ card.icon|default('fa-star') }}"></i>
                            </div>
                        {% endif %}

                        {% if card.title is defined and card.title %}
                            <h3 class="card-title">{{ card.title }}</h3>
                        {% endif %}

                        {% if card.subtitle is defined and card.subtitle %}
                            <p class="card-subtitle">{{ card.subtitle }}</p>
                        {% endif %}

                        {% if card.description is defined and card.description %}
                            <div class="card-description">{{ card.description|raw }}</div>
                        {% endif %}

                        {% if card.buttonEnabled|default(false) and card.buttonText is defined %}
                            <a href="{{ card.buttonUrl|default('#') }}"
                               class="card-button card-button-overlay"
                               {% if card.buttonNewTab|default(false) %}target="_blank" rel="noopener"{% endif %}>
                                {{ card.buttonText }}
                            </a>
                        {% endif %}
                    </div>
                </div>

            {% else %}
                {# Image en haut ou sans image #}
                <div class="card-item {% if equalHeight %}card-equal-height{% endif %}">
                    {% if showImage %}
                        <div class="card-image-wrapper" style="height: {{ imageHeight }}px;">
                            <img src="{{ card.image }}" alt="{{ card.title|default('') }}" loading="lazy">
                        </div>
                    {% endif %}

                    <div class="card-content">
                        {% if showIcon %}
                            <div class="card-icon" style="color: {{ card.iconColor|default('var(--primary-color)') }};">
                                <i class="fa-solid {{ card.icon|default('fa-star') }}"></i>
                            </div>
                        {% endif %}

                        {% if card.title is defined and card.title %}
                            <h3 class="card-title">{{ card.title }}</h3>
                        {% endif %}

                        {% if card.subtitle is defined and card.subtitle %}
                            <p class="card-subtitle">{{ card.subtitle }}</p>
                        {% endif %}

                        {% if card.description is defined and card.description %}
                            <div class="card-description">{{ card.description|raw }}</div>
                        {% endif %}

                        {% if card.buttonEnabled|default(false) and card.buttonText is defined %}
                            <a href="{{ card.buttonUrl|default('#') }}"
                               class="card-button card-button-{{ card.buttonStyle|default('primary') }}"
                               {% if card.buttonNewTab|default(false) %}target="_blank" rel="noopener"{% endif %}>
                                {{ card.buttonText }}
                            </a>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

<style>
    .cards-widget {
        padding: 20px 0;
    }

    .cards-grid {
        display: grid;
        margin: 0 auto;
        max-width: 1200px;
    }

    /* Colonnes responsives */
    .cards-columns-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
    .cards-columns-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .cards-columns-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .cards-columns-6 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

    .card-item {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.3s ease;
        position: relative;
    }

    .card-equal-height {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Styles de cartes */
    .cards-style-modern .card-item {
        background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
        border: 2px solid #e2e8f0;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    }

    .cards-style-classic .card-item {
        background: #ffffff;
        border: 1px solid #d1d5db;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

    .cards-style-minimal .card-item {
        background: transparent;
        border: 1px solid #e5e7eb;
        box-shadow: none;
    }

    .cards-style-bordered .card-item {
        background: #ffffff;
        border: 2px solid var(--primary-color);
    }

    .cards-style-shadow .card-item {
        background: #ffffff;
        border: none;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

    /* Effets de survol */
    .cards-hover-lift .card-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    }

    .cards-hover-shadow .card-item:hover {
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    }

    .cards-hover-scale .card-item:hover {
        transform: scale(1.03);
    }

    /* Layout horizontal (image à gauche) */
    .card-horizontal {
        display: flex !important;
        flex-direction: row;
    }

    .card-horizontal .card-image-wrapper {
        flex-shrink: 0;
        width: 40%;
        height: auto !important;
    }

    .card-horizontal .card-content {
        flex: 1;
    }

    /* Image de fond */
    .card-background {
        position: relative;
        display: flex;
        align-items: flex-end;
    }

    .card-bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
        z-index: 1;
    }

    .card-content-overlay {
        position: relative;
        z-index: 2;
        color: white;
    }

    .card-content-overlay .card-title {
        color: white;
    }

    .card-content-overlay .card-subtitle {
        color: rgba(255,255,255,0.9);
    }

    .card-content-overlay .card-description {
        color: rgba(255,255,255,0.85);
    }

    /* Image wrapper */
    .card-image-wrapper {
        width: 100%;
        overflow: hidden;
        background: #f0f0f0;
    }

    .card-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .card-item:hover .card-image-wrapper img {
        transform: scale(1.05);
    }

    /* Contenu de la carte */
    .card-content {
        padding: 24px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .card-icon {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .card-title {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0 0 8px 0;
        color: #1e293b;
    }

    .card-subtitle {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--primary-color);
        margin: 0 0 12px 0;
    }

    .card-description {
        font-size: 0.95rem;
        color: #64748b;
        line-height: 1.6;
        margin: 0 0 16px 0;
        flex: 1;
    }

    /* Quill content styles */
    .card-description h3 {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 12px 0 8px 0;
        color: #1e293b;
    }

    .card-description h4 {
        font-size: 1rem;
        font-weight: 600;
        margin: 10px 0 6px 0;
        color: #1e293b;
    }

    .card-description p {
        margin: 0;
    }

    .card-description ul,
    .card-description ol {
        margin: 8px 0 12px 20px;
        padding-left: 0;
    }

    .card-description li {
        margin-bottom: 4px;
    }

    .card-description a {
        color: var(--primary-color);
        text-decoration: underline;
    }

    .card-description a:hover {
        color: var(--primary-hover);
    }

    .card-description strong {
        font-weight: 600;
        color: #1e293b;
    }

    .card-description iframe {
        max-width: 100%;
        border: none;
        border-radius: 8px;
        margin: 12px 0;
    }

    .card-description video {
        max-width: 100%;
        border-radius: 8px;
        margin: 12px 0;
    }

    /* Boutons */
    .card-button {
        display: inline-block;
        padding: 10px 24px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        text-align: center;
        margin-top: auto;
    }

    .card-button-primary {
        background: var(--primary-color);
        color: var(--primary-contrast);
        border: none;
    }

    .card-button-primary:hover {
        background: var(--primary-hover);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .card-button-secondary {
        background: #64748b;
        color: white;
        border: none;
    }

    .card-button-secondary:hover {
        background: #475569;
    }

    .card-button-outline {
        background: transparent;
        color: var(--primary-color);
        border: 2px solid var(--primary-color);
    }

    .card-button-outline:hover {
        background: var(--primary-color);
        color: var(--primary-contrast);
    }

    .card-button-ghost {
        background: transparent;
        color: var(--primary-color);
        border: none;
        text-decoration: underline;
        padding: 0;
    }

    .card-button-ghost:hover {
        color: var(--primary-hover);
    }

    .card-button-overlay {
        background: white;
        color: #1e293b;
        border: none;
    }

    .card-button-overlay:hover {
        background: #f8fafc;
        transform: translateY(-2px);
    }

    /* Responsive */
    @media (max-width: 992px) {
        .cards-grid {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        }

        .card-horizontal {
            flex-direction: column;
        }

        .card-horizontal .card-image-wrapper {
            width: 100%;
            height: 240px !important;
        }
    }

    @media (max-width: 576px) {
        .cards-grid {
            grid-template-columns: 1fr !important;
        }

        .card-content {
            padding: 20px;
        }

        .card-title {
            font-size: 1.125rem;
        }
    }
</style>
{% else %}
<div style="text-align: center; padding: 60px 20px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;">
    <i class="fas fa-id-card" style="font-size: 48px; color: #cbd5e1; margin-bottom: 16px;"></i>
    <p style="color: #64748b; font-size: 16px; margin: 0;">Aucune carte configurée.</p>
</div>
{% endif %}