{% load css_tags %}{% block_css 'enap_designsystem/blocks/feature_with_links_block.css' %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}

<div class="feature-list-full layout-{{ value.layout_style|default:'side_by_side' }}">
    {% if value.layout_style == 'stacked' %}
        <!-- Layout stacked: Imagem acima, cards abaixo -->
        <div class="feature-full-stacked">
            <!-- Featured item (top) -->
            <div class="feature-full-main feature-full-main--stacked">
                <div class="feature-full-main__inner">
                    {% if value.featured_link_url %}
                        <a href="{{ value.featured_link_url }}" class="feature-full-main__link">
                    {% endif %}
                    
                    {% if value.featured_image %}
                        {% image value.featured_image original class="feature-full-main__image" alt="{{ value.featured_title }}" %}
                    {% endif %}
                    
                    <div class="feature-full-main__overlay">
                        <div class="feature-full-main__content">
                            <h2 class="feature-full-main__title">{{ value.featured_title }}</h2>
                            {% if value.featured_description %}
                                <div class="feature-full-main__description">
                                    {{ value.featured_description|richtext }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    {% if value.featured_link_url %}
                        </a>
                    {% endif %}
                </div>
            </div>

            <!-- Grid items (below) -->
            <div class="feature-full-grid feature-full-grid--stacked">
                {% if value.list_items %}
                    {% for item in value.list_items %}
                        <div class="feature-full-item-wrapper">
                            {% if item.link %}
                                <a href="{{ item.link }}" class="feature-full-item">
                            {% else %}
                                <div class="feature-full-item">
                            {% endif %}
                            
                                <div class="feature-full-item__media">
                                    {% if item.image %}
                                        {% image item.image original class="feature-full-item__image" alt="{{ item.title }}" %}
                                    {% else %}
                                        <div class="feature-full-item__placeholder"></div>
                                    {% endif %}
                                </div>
                                
                                <div class="feature-full-item__content">
                                    <h3 class="feature-full-item__title">{{ item.title }}</h3>
                                    {% if item.description %}
                                        <div class="feature-full-item__description">
                                            {{ item.description|richtext }}
                                        </div>
                                    {% endif %}
                                </div>
                            
                            {% if item.link %}
                                </a>
                            {% else %}
                                </div>
                            {% endif %}
                        </div>
                    {% endfor %}
                {% else %}
                    <!-- Fallback para quando não há itens -->
                    <div class="feature-full-item-wrapper">
                        <div class="feature-full-item feature-full-item--placeholder">
                            <div class="feature-full-item__media">
                                <div class="feature-full-item__placeholder"></div>
                            </div>
                            <div class="feature-full-item__content">
                                <h3 class="feature-full-item__title">Item de exemplo</h3>
                                <div class="feature-full-item__description">
                                    <p>Este é um item de exemplo. Adicione itens no painel de administração.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>

    {% elif value.layout_style == 'reversed' %}
        <!-- Layout reversed: Cards à esquerda, imagem à direita -->
        <!-- Grid items (left side) -->
        <div class="feature-full-grid">
            {% if value.list_items %}
                {% for item in value.list_items %}
                    <div class="feature-full-item-wrapper">
                        {% if item.link %}
                            <a href="{{ item.link }}" class="feature-full-item">
                        {% else %}
                            <div class="feature-full-item">
                        {% endif %}
                        
                            <div class="feature-full-item__media">
                                {% if item.image %}
                                    {% image item.image original class="feature-full-item__image" alt="{{ item.title }}" %}
                                {% else %}
                                    <div class="feature-full-item__placeholder"></div>
                                {% endif %}
                            </div>
                            
                            <div class="feature-full-item__content">
                                <h3 class="feature-full-item__title">{{ item.title }}</h3>
                                {% if item.description %}
                                    <div class="feature-full-item__description">
                                        {{ item.description|richtext }}
                                    </div>
                                {% endif %}
                            </div>
                        
                        {% if item.link %}
                            </a>
                        {% else %}
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            {% else %}
                <!-- Fallback para quando não há itens -->
                <div class="feature-full-item-wrapper">
                    <div class="feature-full-item feature-full-item--placeholder">
                        <div class="feature-full-item__media">
                            <div class="feature-full-item__placeholder"></div>
                        </div>
                        <div class="feature-full-item__content">
                            <h3 class="feature-full-item__title">Item de exemplo</h3>
                            <div class="feature-full-item__description">
                                <p>Este é um item de exemplo. Adicione itens no painel de administração.</p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- Featured item (right side) -->
        <div class="feature-full-main">
            <div class="feature-full-main__inner">
                {% if value.featured_link_url %}
                    <a href="{{ value.featured_link_url }}" class="feature-full-main__link">
                {% endif %}
                
                {% if value.featured_image %}
                    {% image value.featured_image original class="feature-full-main__image" alt="{{ value.featured_title }}" %}
                {% endif %}
                
                <div class="feature-full-main__overlay">
                    <div class="feature-full-main__content">
                        <h2 class="feature-full-main__title">{{ value.featured_title }}</h2>
                        {% if value.featured_description %}
                            <div class="feature-full-main__description">
                                {{ value.featured_description|richtext }}
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                {% if value.featured_link_url %}
                    </a>
                {% endif %}
            </div>
        </div>

    {% elif value.layout_style == 'centered' %}
        <!-- Layout centered: Similar ao layout da notícia central destacada -->
        <div class="feature-full-news-grid">
            <!-- Lista de todos os items -->
            {% if value.list_items %}
                {% for item in value.list_items %}
                    <div class="feature-full-news-item">
                        {% if item.link %}
                            <a href="{{ item.link }}" class="service-card-two">
                        {% else %}
                            <div class="service-card-two">
                        {% endif %}
                        
                            <div class="service-card-two__image-container">
                                {% if item.image %}
                                    {% image item.image original class="service-card-two__image" alt="{{ item.title }}" %}
                                {% else %}
                                    <div class="feature-full-news-card__placeholder"></div>
                                {% endif %}
                            </div>
                            
                            <div class="feature-full-news-card__content">
                                <h3 class="service-card-two__title">{{ item.title }}</h3>
                                {% if item.description %}
                                    <div class="service-card-two__description">
                                        {{ item.description|richtext }}
                                    </div>
                                {% endif %}
                            </div>
                        
                        {% if item.link %}
                            </a>
                        {% else %}
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            {% endif %}
            
            <!-- Featured item (center/main) -->
            <div class="feature-full-news-main">
                {% if value.featured_link_url %}
                    <a href="{{ value.featured_link_url }}" class="feature-full-news-main__link">
                {% endif %}
                
                {% if value.featured_image %}
                    {% image value.featured_image fill-800x600 class="feature-full-news-main__image" alt="{{ value.featured_title }}" %}
                {% endif %}
                
                <div class="feature-full-news-main__overlay">
                    <div class="feature-full-news-main__content">
                        <h2 class="feature-full-news-main__title">{{ value.featured_title }}</h2>
                        {% if value.featured_description %}
                            <div class="feature-full-news-main__description">
                                {{ value.featured_description|richtext }}
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                {% if value.featured_link_url %}
                    </a>
                {% endif %}
            </div>
        </div>

    {% else %}
        <!-- Default/side_by_side layout: Imagem à esquerda, cards à direita -->
        <!-- Featured item (left side) -->
        <div class="feature-full-main">
            <div class="feature-full-main__inner">
                {% if value.featured_link_url %}
                    <a href="{{ value.featured_link_url }}" class="feature-full-main__link">
                {% endif %}
                
                {% if value.featured_image %}
                    {% image value.featured_image original class="feature-full-main__image" alt="{{ value.featured_title }}" %}
                {% endif %}
                
                <div class="feature-full-main__overlay">
                    <div class="feature-full-main__content">
                        <h2 class="feature-full-main__title">{{ value.featured_title }}</h2>
                        {% if value.featured_description %}
                            <div class="feature-full-main__description">
                                {{ value.featured_description|richtext }}
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                {% if value.featured_link_url %}
                    </a>
                {% endif %}
            </div>
        </div>

        <!-- Grid items (right side) -->
        <div class="feature-full-grid">
            {% if value.list_items %}
                {% for item in value.list_items %}
                    <div class="feature-full-item-wrapper">
                        {% if item.link %}
                            <a href="{{ item.link }}" class="feature-full-item">
                        {% else %}
                            <div class="feature-full-item">
                        {% endif %}
                        
                            <div class="feature-full-item__media">
                                {% if item.image %}
                                    {% image item.image original class="feature-full-item__image" alt="{{ item.title }}" %}
                                {% else %}
                                    <div class="feature-full-item__placeholder"></div>
                                {% endif %}
                            </div>
                            
                            <div class="feature-full-item__content">
                                <h3 class="feature-full-item__title">{{ item.title }}</h3>
                                {% if item.description %}
                                    <div class="feature-full-item__description">
                                        {{ item.description|richtext }}
                                    </div>
                                {% endif %}
                            </div>
                        
                        {% if item.link %}
                            </a>
                        {% else %}
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            {% else %}
                <!-- Fallback para quando não há itens -->
                <div class="feature-full-item-wrapper">
                    <div class="feature-full-item feature-full-item--placeholder">
                        <div class="feature-full-item__media">
                            <div class="feature-full-item__placeholder"></div>
                        </div>
                        <div class="feature-full-item__content">
                            <h3 class="feature-full-item__title">Item de exemplo</h3>
                            <div class="feature-full-item__description">
                                <p>Este é um item de exemplo. Adicione itens no painel de administração.</p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    {% endif %}
</div>

<!-- CSS para os layouts -->
<style>
    
    /* ==========================
       LAYOUT SIDE BY SIDE
       ========================== */
    
    /* Layout side_by_side (default) */
    .layout-side_by_side {
        flex-direction: row;
    }
    
    .layout-side_by_side .feature-full-main {
        flex: 0 0 calc(40% - 0.75rem);
    }
    
    .layout-side_by_side .feature-full-grid {
        flex: 0 0 calc(60% - 0.75rem);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Feature main */
    .feature-full-main {
        position: relative;
    }
    
    .feature-full-main__link {
        display: block;
        height: 100%;
        color: inherit;
        text-decoration: none;
    }
    
    .feature-full-main__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    
    .feature-full-main__title {
        margin: 0 0 0.5rem;
        font-size: 1.5rem;
        font-weight: 600;
    }
    
    .feature-full-main__description {
        font-size: 1rem;
        margin: 0;
    }

    
    /* ==========================
       LAYOUT REVERSED
       ========================== */
    
    /* Layout reversed */
    .layout-reversed {
        flex-direction: row;
        gap: 20px;
        padding: 0;
    }
    
    .layout-reversed .feature-full-main {
        flex: 0 0 calc(40% - 0.75rem);
    }
    
    /* ==========================
       LAYOUT STACKED
       ========================== */
    
    /* Layout stacked */
    .layout-stacked {
        flex-direction: column;
    }
    
    .layout-stacked .feature-full-stacked {
        width: 100%;
    }
    
    .layout-stacked .feature-full-main--stacked {
        margin-bottom: 1.5rem;
        width: 100%;
        min-width: 100%;
    }
    
    .layout-stacked .feature-full-grid--stacked {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        width: 100%;
        min-width: 100%;
        align-items: baseline;
    }
    
    .layout-stacked .feature-full-item-wrapper {
        height: 100%;
        border: none;
        margin: 0;
    }
    
    .layout-stacked .feature-full-item {
        flex-direction: column;
    }
    
    .layout-stacked .feature-full-item__media {
        flex: none;
        width: 100%;
        margin-bottom: 0.75rem;
        height: 200px;
        width: 100%;
        min-width: 100%;
    }
    
    /* ==========================
       LAYOUT CENTERED (NEWS STYLE)
       ========================== */
    
    /* Layout centered (news style) */
    .feature-full-news-grid {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto auto;
        grid-gap: 1.5rem;
        grid-template-areas:
            "s1 s1 s1 m m m m m m s2 s2 s2"
            "s3 s3 s3 m m m m m m s4 s4 s4"
            "s5 s5 s5 s6 s6 s6 s7 s7 s7 s8 s8 s8";
    }
    
    .feature-full-news-main {
        grid-area: m;
        position: relative;
        height: 100%;
        overflow: hidden;
        border-radius: 20px;
    }
    
    .feature-full-news-main__link {
        display: block;
        height: 100%;
        color: inherit;
        text-decoration: none;
    }
    
    .feature-full-news-main__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 20px;
    }
    
    .feature-full-news-main__overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1.5rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3) 60%, transparent);
        color: #fff;
        height: 100%;
        display: flex;
        align-items: end;
    }
    
    .feature-full-news-main__title {
        margin: 0 0 0.5rem;
        font-size: 1.75rem;
        font-weight: 600;
        color: white;
    }
    
    .feature-full-news-main__description {
        font-size: 1.125rem;
        margin: 0;
    }
    
    /* News items */
    .feature-full-news-item:nth-child(1) {
        grid-area: s1;
    }
    
    .feature-full-news-item:nth-child(2) {
        grid-area: s2;
    }
    
    .feature-full-news-item:nth-child(3) {
        grid-area: s3;
    }
    
    .feature-full-news-item:nth-child(4) {
        grid-area: s4;
    }
    
    .feature-full-news-item:nth-child(5) {
        grid-area: s5;
    }
    
    .feature-full-news-item:nth-child(6) {
        grid-area: s6;
    }
    
    .feature-full-news-item:nth-child(7) {
        grid-area: s7;
    }
    
    .feature-full-news-item:nth-child(8) {
        grid-area: s8;
    }
    
    /* Esconder os itens extras */
    .feature-full-news-item:nth-child(n+9) {
        display: none;
    }
    
    .feature-full-news-card {
        display: block;
        height: 100%;
        position: relative;
        color: inherit;
    }
    
    a.feature-full-news-card:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .feature-full-news-card__media {
        position: relative;
    }
    
    .feature-full-news-card__image {
        width: 100%;
        height: auto;
        display: block;
    }
    
    .feature-full-news-card__placeholder {
        width: 100%;
        padding-bottom: 66.67%;
        background-color: #e9ecef;
    }
    
    /* ==========================
       RESPONSIVE ADJUSTMENTS
       ========================== */
    
    /* Tablets */
    @media (max-width: 1024px) {
        /* Ajustes para layout stacked */
        .layout-stacked .feature-full-grid--stacked {
            grid-template-columns: repeat(3, 1fr);
        }
        
        /* Ajustes para layout de notícias */
        .feature-full-news-grid {
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
                "m m m m m m"
                "s1 s1 s2 s2 s3 s3"
                "s4 s4 s5 s5 s6 s6";
        }
        
        /* Esconder o restante dos itens */
        .feature-full-news-item:nth-child(n+7) {
            display: none;
        }
    }
    
    /* Mobile */
    @media (max-width: 768px) {
        /* Layout base */
        .feature-list-full {
            flex-direction: column;
            padding: 0 20px;
        }

        .feature-full-news-main {
            height: 90vh;
        }
        
        /* Layout stacked */
        .layout-stacked .feature-full-grid--stacked {
            grid-template-columns: repeat(2, 1fr);
        }
        
        /* Layout de notícias */
        .feature-full-news-grid {
            grid-template-columns: 1fr;
            grid-template-areas:
                "m"
                "s1"
                "s2"
                "s3"
                "s4";
        }
        
        /* Esconder o restante dos itens */
        .feature-full-news-item:nth-child(n+5) {
            display: none;
        }
    }
    
    /* Mobile pequeno */
    @media (max-width: 480px) {
        /* Layout stacked */
        .layout-stacked .feature-full-grid--stacked {
            grid-template-columns: 1fr;
        }
        
        /* Items em cards */
        .feature-full-item {
            flex-direction: column;
        }
        
        .feature-full-item__media {
            flex: none;
            width: 100%;
            margin-bottom: 0.75rem;
        }
    }
</style>

{% endblock %}