maher
255 lines
12 KiB
Twig
Executable File
255 lines
12 KiB
Twig
Executable File
<!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>
|