<!DOCTYPE html>
{% trans_default_domain 'history' %}
<html lang="{{ app.request.locale }}" dir="{{ app.request.locale == 'ar' ? 'rtl' : 'ltr' }}">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
        <title>{{ 'title_history'|trans }} — {{ 'title_home'|trans }}</title>

        <link rel="stylesheet" href="{{ asset('assets/vendor/font-awesome@6.7.2/css/all.min.css') }}">
        <link rel="stylesheet" href="{{ asset('assets/css/frontend.css') }}">
        
        <link rel="stylesheet" href="{{ asset('assets/vendor/bootstrap@5.3.8/css/bootstrap.min.css') }}">
        {% if app.request.locale == 'ar' %}
            <link rel="stylesheet" href="{{ asset('assets/vendor/bootstrap@5.3.8/css/bootstrap.rtl.min.css') }}">
        {% endif %}

        <link rel="stylesheet" href="{{ asset('assets/css/history.css') }}">
    </head>

    <body>

        <!-- ── TOP HEADER BAR ── -->
        <header class="top-header-bar">
            <div class="top-bar-container">
                <div class="static-lang">
                    <a href="/change-language?lang=ar">🇸🇦</a>
                    <a href="/change-language?lang=fr">🇫🇷</a>
                    <a href="/change-language?lang=en">🇬🇧</a>
                </div>

                {% if is_granted('ROLE_USER') %}
                    <div class="d-flex align-items-center gap-3">

                        <a href="{{ path('app_frontend_home') }}">
                            <button class="btn btn-light border menu-btn">
                                <i class="fa-solid fa-house"></i>
                                {{ "btn_home"|trans }}
                            </button>
                        </a>

                        <a href="{{ path('security_logout') }}">
                            <button class="btn btn-danger menu-btn">
                                <i class="fa-solid fa-arrow-right-to-bracket"></i>
                                {{ "btn_decnx"|trans }}
                            </button>
                        </a>

                        <div class="d-flex align-items-center gap-2">
                            <span class="username">{{ app.user.pseudo|e }}</span>
                            <i class="fa-solid fa-circle-user fa-2xl"></i>
                        </div>

                    </div>
                {% else %}
                    <a href="{{ path('security_login') }}">
                        <button class="btn btn-success menu-btn">
                            <i class="fa-solid fa-right-to-bracket"></i>
                            {{ "btn_cnx"|trans }}
                        </button>
                    </a>
                {% endif %}
            </div>
        </header>

        <!-- ── MAIN CONTENT ── -->
        <main class="main-container">

            <!-- Page header -->
            <div class="history-page-header">
                <h1 class="history-page-title">
                    <i class="fa-solid fa-clock-rotate-left"></i>
                    {{ "history_title"|trans }}
                    <span class="history-badge">{{ videos|length }}</span>
                </h1>
            </div>

            {% if videos|length > 0 %}

                <!-- Toolbar -->
                <div class="history-toolbar">
                    <div class="history-search">
                        <i class="fa-solid fa-magnifying-glass search-icon"></i>
                        <input
                            type="text"
                            id="searchInput"
                            placeholder="{{ 'history_search_placeholder'|trans }}"
                            autocomplete="off"
                        >
                    </div>
                    <select class="history-sort-select" id="sortSelect">
                        <option value="date_desc">{{ "sort_date_desc"|trans }}</option>
                        <option value="date_asc">{{ "sort_date_asc"|trans }}</option>
                        <option value="name_asc">{{ "sort_name_asc"|trans }}</option>
                        <option value="size_desc">{{ "sort_size_desc"|trans }}</option>
                    </select>
                </div>

                <!-- Table -->
                <div class="history-table-wrapper">
                    <table class="history-table" id="historyTable">
                        <thead>
                            <tr>
                                <th>{{ "col_name"|trans }}</th>
                                <th>{{ "col_date"|trans }}</th>
                                <th>{{ "col_size"|trans }}</th>
                                <th>{{ "col_actions"|trans }}</th>
                            </tr>
                        </thead>
                        <tbody id="historyTbody">
                            {% for video in videos %}
                            <tr
                                data-id="{{ video.getId() }}"
                                data-name="{{ video.getName()|lower }}"
                                data-date="{{ video.getDateAdd()|date('U') }}"
                                {#data-size="{{ video.filesize }}"#}
                            >
                                <!-- Name -->
                                <td>
                                    <div class="video-name-cell">
                                        <div class="video-thumb-icon">
                                            <i class="fa-solid fa-film"></i>
                                        </div>
                                        <div>
                                            <div class="video-title-text" title="{{ video.getName()|e }}">
                                                {{ video.getName()|e }}
                                            </div>
                                            <span class="video-ext-badge">{{ video.getName()|split('.')|last }}</span>
                                        </div>
                                    </div>
                                </td>

                                <!-- Date -->
                                <td class="date-cell">
                                    {{ video.getDateAdd()|date("d/m/Y")  }}
                                    <span class="time-sub">
                                        {{ video.getDateAdd()|date("H:i")  }}
                                    </span>
                                </td>

                                <!-- Size -->
                                <td class="size-cell">
                                    {% set sizeMb = video.getSizeFile() %}
                                    {% if sizeMb >= 1024 %}
                                        {{ (sizeMb / 1024)|round(2) }} <span class="size-unit">GB</span>
                                    {% else %}
                                        {{ sizeMb }} <span class="size-unit">MB</span>
                                    {% endif %}
                                </td>

                                <!-- Actions -->
                                <td class="actions-cell">
                                    <div class="d-flex gap-2 flex-wrap">
                                        <a
                                            href="{{ path('app_frontend_download_user', {id: video.getId()}) }}"
                                            class="btn-action-dl"
                                            title="{{ 'action_download'|trans }}"
                                        >
                                            <i class="fa-solid fa-download"></i>
                                            <span>{{ "action_download"|trans }}</span>
                                        </a>
                                        <button
                                            class="btn-action-del"
                                            title="{{ 'action_delete'|trans }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#deleteModal"
                                            data-video-id="{{ video.getId() }}"
                                            data-video-name="{{ video.getName()|e }}"
                                        >
                                            <i class="fa-solid fa-trash-can"></i>
                                            <span>{{ "action_delete"|trans }}</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination info -->
                <div class="history-pagination">
                    <span class="pagination-info" id="paginationInfo">
                        {{ "pagination_showing"|trans({
                            '%count%': videos|length,
                            '%total%': videos|length
                        }) }}
                    </span>
                </div>

            {% else %}

                <!-- Empty state -->
                <div class="history-empty">
                    <i class="fa-solid fa-photo-film"></i>
                    <p>{{ "history_empty_title"|trans }}</p>
                    <span>{{ "history_empty_subtitle"|trans }}</span>
                    <div class="mt-3">
                        <a href="{{ path('app_frontend_home') }}" class="btn-action-dl text-decoration-none d-inline-flex">
                            <i class="fa-solid fa-plus"></i>
                            <span>{{ "btn_new_download"|trans }}</span>
                        </a>
                    </div>
                </div>

            {% endif %}

        </main>

        <!-- ── DELETE CONFIRM MODAL ── -->
        <div
            class="modal fade modal-confirm"
            id="deleteModal"
            tabindex="-1"
            aria-labelledby="deleteModalLabel"
            aria-hidden="true"
        >
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">
                            <i class="fa-solid fa-triangle-exclamation me-2"></i>
                            {{ "modal_delete_title"|trans }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body py-3">
                        <p class="mb-1 text-secondary" id="deleteModalBody">
                            {{ "modal_delete_body"|trans }}
                        </p>
                        <p class="fw-bold text-danger mb-0" id="deleteModalFileName"></p>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">
                            {{ "modal_cancel"|trans }}
                        </button>
                        <form id="deleteForm" method="POST" action="" class="d-inline">
                            <input type="hidden" name="_token" value="{{ csrf_token('delete_video') }}">
                            <button type="submit" class="btn btn-danger rounded-pill px-4 fw-bold">
                                <i class="fa-solid fa-trash-can me-1"></i>
                                {{ "modal_confirm_delete"|trans }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scripts -->
        <script src="{{ asset('assets/vendor/jquery@4.0.0/jquery.min.js') }}"></script>
        <script src="{{ asset('assets/vendor/bootstrap@5.3.8/js/bootstrap.min.js') }}"></script>
        <script src="{{ asset('assets/js/history.js') }}"></script>

    </body>
</html>
