{% extends 'layouts/base.twig' %}
{% block content %}
<div class="page-portada">

    {# Sección noticias #}
    {% if lasts_posts_news %}

    <section class="recent-posts">
        <div class="row g-4 mt-3">
            {# Columna izquierda - Artículo principal #}
            <div class="col-md-8">
                {% set main_article = lasts_posts_news[0] %}
                {% set imagen = main_article.thumbnail.src | default('/wp-content/uploads/2025/10/Imagen_por_defecto_300.jpg') %}
                {% set alt = main_article.thumbnail.alt | default('Imagen por defecto') %}

                <div class="card main-article h-100">
                    <a href="{{ main_article.link }}">
                    <img src="{{ imagen }}" 
                                    alt="{{ alt }}" 
                                    class="card-img img-noticias" />
                    <div class="card-img-overlay">
                        <h3 class="card-title text-wrap">
                            <a href="{{ main_article.link }}">{{ main_article.title }}</a>
                        </h3>
                    </div>
                </div>

            </div>

            {# Columna derecha - Dos artículos secundarios #}
            <div class="col-md-4">
                <div class="d-flex flex-column h-100 justify-content-between">
                    {% for article in lasts_posts_news[1:2] %}
                    {% set imagen = article.thumbnail.src | default('/wp-content/uploads/2025/10/Imagen_por_defecto_300.jpg') %}
                    {% set alt = article.thumbnail.alt | default('Imagen por defecto') %}

                        <div class="card secondary-article {% if loop.first %}media-mb mb-1{% endif %}">
                            <a href="{{ article.link }}">
                            <img src="{{ imagen}}" 
                                            alt="{{ alt }}" 
                                            class="card-img img-noticias"/>
                            <div class="card-img-overlay">
                                <h3 class="card-title text-wrap">
                                    <a href="{{ article.link }}">{{ article.title }}</a>
                                </h3>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>
    {% else %}
        <p>{{ __('No hay artículos', 'Sindikatua') }}</p>
    {% endif %}

    {# Sección vídeos / Opinión #}
    <section class="py-4 margin-50">
        {% include 'partials/section-videos&opinion.twig' %}
    </section>

    {# Sección Enlaces #}
    <section class="custom-buttons-section margin-50">
        <h1 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Enlaces', 'Sindikatua')|upper }}</h1>

        <div class="row g-3">
            {% if botones_imagen %}
                {% for boton in botones_imagen %}
                    <div class="col-6 col-sm-6 col-md-3 btn-hover">
                        <a href="{{ boton.enlace }}" class="btn-image-only d-block" target="_blank" rel="noopener noreferrer">
                            <img src="{{ boton.imagen.sizes.medium }}" 
                                alt="{{ boton.imagen.alt }}" 
                                class="img-fluid rounded">
                        </a>
                    </div>
                {% endfor %}
            {% endif %}
        </div>
    </section>

    {# Sección Campañas / conflictos #}
    <section class="recent-posts py-4 section-campana-conflictos">
        <div class="row align-items-stretch">

            {# Campañas #}
            <div class="col-12 col-sm-12 col-md-6">
                <h1 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Campañas', 'Sindikatua')|upper }}</h1>

                {% if posts_campana and posts_campana|length > 0 %}
                    {% set main_article = posts_campana[0] %}
                    <div class="card main-article">
                        <a href="{{ main_article.link }}">
                        <img src="{{ main_article.thumbnail.src('medium') }}" 
                                        alt="{{ main_article.thumbnail.alt }}" 
                                        class="card-img card-img-fixed img-noticias" />
                        <div class="card-img-overlay">
                            <h3 class="card-title text-wrap">
                                <a href="{{ main_article.link }}">{{ main_article.title }}</a>
                            </h3>
                        </div>
                    </div>
                {% else %}
                    <p>{{ __('No hay artículos', 'Sindikatua') }}</p>
                {% endif %}
            </div>

            {# conflictos #}
            <div class="col-12 col-sm-12 col-md-6 mt-5 mt-md-0">
                <h1 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Conflictos Laborales', 'Sindikatua')|upper }}</h1>

                {% if posts_conflicts and posts_conflicts|length > 0 %}
                {% set main_article = posts_conflicts[0] %}

                {% set imagen = main_article.thumbnail.src('medium') | default('/wp-content/uploads/2025/10/Imagen_por_defecto.png') %}
                {% set alt = main_article.thumbnail.alt | default('Imagen por defecto') %}

                    <div class="card main-article">
                        <a href="{{ main_article.link }}">
                        <img src="{{ imagen }}" 
                                        alt="{{ alt }}" 
                                        class="card-img card-img-fixed img-noticias" />
                        <div class="card-img-overlay">
                            <h3 class="card-title text-wrap">
                                <a href="{{ main_article.link }}">{{ main_article.title }}</a>
                            </h3>
                        </div>
                    </div>
                {% else %}
                    <p>{{ __('No hay artículos', 'Sindikatua') }}</p>
                {% endif %}
            </div>

        </div>
    </section>

</div>
{% endblock %}