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

{% block stylesheets %}
    {{ parent() }}
    <style>
        .table td {
            vertical-align: middle !important;
        }
    </style>
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h3 class="page-title-h4">
            Gestion des vidéos
        </h3>
    </div>
{% endblock %}

{% block page_content %}
    <section style="max-width: 90%; margin: 0 auto; padding-bottom: 5rem">

        <h3>Liste des catégories : </h3>
        <div style="text-align: center">
            <a href="{{ path('app_video_category_new') }}"
               style="display: inline-block; background-color: #00B5E6; color: white; padding: .5rem 1rem; border-radius: 3px; text-decoration: none;">
                Créer une nouvelle catégorie
            </a>
        </div>

        <table class="table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Nom</th>
                    <th style="width: 30%;">Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for category in videoCategories %}
                <tr>
                    <td>{{ category.id }}</td>
                    <td>{{ category.name }}</td>
                    <td style="width: 30%;">
                        <a href="{{ path('app_video_category_edit', {'id': category.id}) }}" class="boutonAction" style="padding: .5rem 1rem">Modifier</a>
                        <form method="post" action="{{ path('app_video_category_delete', {'id': category.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer la catégorie : {{ category.name }} ?');" style="display:inline;">
                            <input type="hidden" name="_token" value="{{ csrf_token('delete_' ~ category.id) }}">
                            <button style="padding: .5rem 1rem; color: red; border: none; font-weight: bolder; border-radius: 5px">Supprimer</button>
                        </form>
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="3">Aucune catégorie trouvée.</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

        <h3>Liste des vidéos : </h3>
        <div style="text-align: center">
            <a href="{{ path('app_video_new') }}"
               style="display: inline-block; background-color: #00B5E6; color: white; padding: .5rem 1rem; border-radius: 3px; text-decoration: none;">
                Upload une vidéo
            </a>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th style="width: 10%;">ID</th>
                    <th style="width: 20%;">Titre</th>
                    <th style="width: 15%;">Catégorie</th>
                    <th style="width: 15%;">Sous-catégorie</th>
                    <th style="width: 30%;">Description</th>
                    <th style="width: 5%;">RdvIB</th>
                    <th style="width: 15%;">Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for video in videos %}
                <tr>
                    <td style="width: 10%;">{{ video.id }}</td>
                    <td style="width: 20%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ video.title }}</td>
                    <td style="width: 15%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ video.category ? video.category.name : 'N/A' }}</td>
                    <td style="width: 15%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ video.subcategory ?: 'N/A' }}</td>
                    <td style="width: 30%; white-space: normal; overflow-wrap: break-word;">
                        {% if video.description %}
                            {{ video.description|slice(0, 80) ~ (video.description|length > 80 ? '...' : '') }}
                        {% endif %}
                    </td>
                    <td style="width: 5%; text-align: center;">{{ video.isRdvIB ? 'Oui' : 'Non' }}</td>
                    <td style="width: 15%;">
                        <div style="display: flex; gap: .5rem; align-items: center; justify-content: center; flex-wrap: wrap">
                            <a href="{{ path('app_video_show', {'id': video.id}) }}" class="boutonAction" style="padding: .5rem 1rem;">Voir</a>
                            <a href="{{ path('app_video_edit', {'id': video.id}) }}" class="boutonAction" style="padding: .5rem 1rem;">Modifier</a>
                            <form method="post" action="{{ path('app_video_delete', {'id': video.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette vidéo : {{ video.title }} ?');" style="display:inline;">
                                <input type="hidden" name="_token" value="{{ csrf_token('delete_video' ~ video.id) }}">
                                <button style="padding: .5rem 1rem; color: red; border: none; font-weight: bolder; border-radius: 5px">Supprimer</button>
                            </form>
                        </div>

                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="7">Aucune vidéo trouvée.</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </section>
{% endblock %}