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

{% block stylesheets %}
    {{ parent() }}
    <style>
        h2 {
            text-align: center;
        }

        .docsContainer {
            width: 90%;
            max-width: 100vw;
            padding: 1rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin: 0 auto;
            overflow-y: scroll;
            max-height: 70vh;
        }
        .docCard {
            border: solid 1px grey;
            border-radius: 10px;
            box-shadow: 0 0 5px grey;
            padding: 1rem;
            display: flex;
            flex-direction: column;
        }

        .docCard h3 {
            color: #FC971F;
            font-weight: bold;
        }

        .date-container {
            display: flex;
            justify-content: space-between;
            margin-top: auto;
        }

        .date-container span {
            color: grey;
        }

        .docCard:hover {
            box-shadow: 0 0 5px #FC971F;
            border: solid 1px #FC971F;
            transform: scale(1.02);
        }

        .docCard:hover p {
            color: black;
        }

        @media (max-width: 1092px) {
            .docsContainer {
                grid-template-columns: 1fr;
            }
        }
    </style>
{% endblock %}

{% block page_content %}
    <main>
        <h2>Documents techniques</h2>

        {% if technicalDocs is not empty %}
            <section class="docsContainer">
                {% for doc in technicalDocs %}
                    <a href="{{ path('app_technical_doc_show', {id: doc.id}) }}" target="_blank" class="docCard">
                        <h3 style="margin: 0">{{ doc.title }}</h3>
                        <p>{{ doc.description }}</p>
                        <div class="date-container">
                            <span style="color: #FC971F; text-decoration: underline; font-size: 1.5rem">Voir le doc</span>
                            <span>
                                {% if doc.createdAt < doc.updatedAt %}
                                    Mis à jour le : {{ doc.updatedAt | date("d/m/Y") }}
                                {% else %}
                                    Mis en ligne le : {{ doc.createdAt | date("d/m/Y") }}
                                {% endif %}
                            </span>
                        </div>
                    </a>
                {% endfor %}
            </section>
        {% else %}
            <div style="text-align: center; margin-top: 5rem;">
                Aucun document
            </div>
        {% endif %}
    </main>
{% endblock %}