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

{% block title %}Sciences | UPVM3{% endblock %}

{% block body %}
<style>
    .cart {
        background-color: white;
        width: 20rem;
        height: 16rem; /* Fixed height */
        box-shadow: 0 4px 8px 1px rgba(0, 0, 0.2, 0.1);
        border-radius: 0;
        margin: 1rem;
        transition: opacity 400ms, transform 0.3s;
        overflow: hidden; /* Prevent overflow of content */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Ensure elements are spaced evenly */
    }

    .cart:hover {
        box-shadow: 0 5px 35px 0px rgba(0, 0, 0, .1);
        transform: translateY(-5px); /* Slightly raise on hover */
        opacity: 0.9;
    }

    .titreActu {
        padding: 0.5rem;
        font-size: 0.9rem;
        font-weight: bold;
        color: black;
        height: 3rem; /* Fixed height for the title */
        overflow: hidden; /* Hide overflow text */
    }

    .img-container {
        width: 100%;
        height: 8rem; /* Fixed height for the image */
        overflow: hidden; /* Hide overflow image */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .img2 {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensure the image covers the container */
    }

    .text-dark {

        font-size: 0.8rem;
        color: black;
    }

    .fa-calendar, .fa-tags {
        margin-right: 0.5rem;
    }

    .dateN {
        font-size: 0.8rem;
        color: black;
        text-align: center;
    }
</style>

<div class="container mt-5 px-3">
    <section>
        <div class="row d-flex justify-content-evenly pt-4 mx-3">
            <div class="col-md-auto">
                <a href="{{ path('flux_rss') }}" class="h3 head {{ app.request.get('_route') == 'flux_rss' ? 'active' }}">
                    PaulVa data
                </a>
            </div>
            <div class="col-md-auto">
                <a href="{{ path('science_realiser') }}" class=" h3 head {{ app.request.get('_route') == 'science_realiser' ? 'active' }}">
                    PaulVa Réalisations
                </a>
            </div>
            <div class="col-md-auto">
                <a href="{{ path('entrepot') }}" class=" h3 head {{ app.request.get('_route') == 'entrepot' ? 'active' }}">
                    Entrepôt
                </a>
            </div>
            <div class="col-md-auto">
                <a href="{{ path('science_rss') }}" class=" h3 head {{ app.request.get('_route') == 'science_rss' ? 'active' }}">
                    Vielle
                </a>
            </div>
        </div>
        <hr>
    </section>

    <div class="text-center">
        <section>
            <div class="row">
                {% for item in rss.channel.item|slice(0, 30) %}
                    <div class="col d-flex justify-content-center align-items-reverse">
                        <a href="{{ item.link|default('') }}" target="_blank">
                            <div class="cart">
                                <p class="titreActu">{{ item.title }}</p>
                                <div class="text-dark pb-0 mb-0">
                                    <small>
                                        <i class="fa-solid fa-calendar" style="color: #007778;"></i>
                                        {{ item.pubDate|date("d/m/Y") }}
                                    </small>
                                </div>
                                <div class="text-dark">
                                    <small>
                                        <i class="fa-solid fa-tags" style="color: #007778;"></i>
                                        {{ item.category }}
                                    </small>
                                </div>
                                <div class="img-container">
                                    {% if item.enclosure and item.enclosure.attributes().url %}
                                        <img class="img2" src="{{ item.enclosure.attributes().url }}" alt="image">
                                    {% else %}
                                        <img class="img2" src="" alt="">
                                    {% endif %}
                                </div>
                            </div>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </section>
    </div>

    <br>
</div>
{% endblock %}