{% extends '@InstallBois/index.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        h2 {
            margin: 1rem;
        }
        h3 {
            font-weight: bold;
            margin-left: 2rem;
        }
        .training-container {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 2rem;
            padding: 1rem;
            flex-wrap: wrap;
        }
        .training-card {
            border-radius: 10px;
            border: 1px solid #ededed;
            background-color: #f4f4f4;
            box-shadow: 0 0 5px grey;
            padding: 1rem;
            width: 350px;
            height: 225px;
            display: flex;
            flex-shrink: 0;
            flex-direction: column;
            transition: width 300ms ease-in-out;
        }
        .training-card h4 {
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .training-card div.btn-container {
            margin-top: auto;
            display: flex;
            justify-content: center;
            gap: 2rem;
            padding-top: 1rem;
            background-color: #f4f4f4;
        }
        .training-card .description-wrapper {
            flex-grow: 1;
            overflow: hidden;
            position: relative;
            margin-bottom: 1rem;
        }
        .training-card:not(.expanded) .description-wrapper::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background: linear-gradient(transparent, #f4f4f4);
        }
        .training-card a, .see-more {
            padding: .4rem .6rem;
            border: 3px solid #0097B2;
            border-radius: 25px;
            box-shadow: 0 0 5px #0097B2;
            color: #0097B2;
            text-align: center;
            background: transparent;
            cursor: pointer;
        }
        .training-card a:hover, .see-more:hover {
            font-weight: bold;
            transform: scale(1.02);
            transition: 300ms;
        }
        .training-card:has(a:hover, .see-more:hover) h4 {
            color: #0097B2;
        }
        .training-card:has(a:hover, .see-more:hover) {
            box-shadow: 0 0 5px #0097B2;
            transition: 300ms;
        }
        .training-card.expanded {
            width: 450px;
            height: auto;
        }
        .training-card.expanded .description-wrapper {
            max-height: none;
            overflow: visible;
        }
    </style>
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <h2>Nos formations</h2>
{% endblock %}

{% block page_content %}
    <main style="padding: 0 1rem">
        {% if categories is not empty %}
            {% for category in categories %}
                {% set publishedTrainings = category.trainings|filter(t => t.status.value == 'PUBLISHED') %}
                <section style="margin-bottom: 2rem">
                    <h3>{{ category.title }}</h3>
                    <p style="margin-bottom: 2rem">{{ category.description }}</p>
                    {% if publishedTrainings is not empty %}
                        <div class="training-container">
                            {% for training in publishedTrainings %}
                                {% if training.status.value == 'PUBLISHED' %}
                                    <div class="training-card">
                                        <h4>{{ training.title }}</h4>
                                        <div class="description-wrapper">{{ training.description|raw }}</div>
                                        <div class="btn-container">
                                            {% if training.filename is not empty %}
                                                <a href="{{ path('app_training_download', {id: training.id}) }}">Voir le catalogue</a>
                                            {% endif %}
                                            {% if training.link is not empty %}
                                                <a href="{{ training.link }}" target="_blank" rel="noopener noreferrer">{{ training.linkLabel }}</a>
                                            {% endif %}
                                            <button class="see-more">Voir plus</button>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    {% else %}
                        <p style="text-align: center; color: grey; margin: 1rem">Aucune formation publiée</p>
                    {% endif %}
                </section>
            {% endfor %}
        {% else %}
            <p style="text-align: center; color: grey; margin: 1rem">Aucune formation publiée</p>
        {% endif %}
    </main>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            $('.see-more').on('click', function(e) {
                e.preventDefault();
                let $currentCard = $(this).closest('.training-card');
                
                let $otherCards = $('.training-card').not($currentCard);
                $otherCards.removeClass('expanded');
                $otherCards.find('.see-more').text('Voir plus');

                $currentCard.toggleClass('expanded');

                if ($currentCard.hasClass('expanded')) {
                    $(this).text('Voir moins');
                } else {
                    $(this).text('Voir plus');
                }
            });
        });
    </script>
{% endblock %}