{% extends 'base.html.twig' %}
{% block title %}Backend{% endblock %}
{% block header %}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<style>
</style>
{% endblock %}
{% block body %}
<!--- Mobile Navigation -->
<div class="container d-md-none">
<div class="d-flex flex-wrap bg-dark align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-secondary" onclick="backend.getEntries('new', event)">Neu</a></li>
<li><a href="#" class="nav-link px-2 text-white" onclick="backend.getEntries('read', event)">Gesichtet</a></li>
<li><a href="#" class="nav-link px-2 text-white" onclick="backend.getConversations('open', event)">Rückfragen</a></li>
</ul>
-->
</div>
</div>
<!--- Mobile Navigation -->
<aside id="sidebar" class="col-md-2 fixed-top fixed-left d-none d-md-block ">
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark vh-100 text-">
<a href="/" class="text-decoration-none h6 text-center">www.Segelparade.de</a>
</a>
<hr>
<div class="container d-flex flex-column align-items-center" id="asideCounter">
</div>
<hr>
<h4 style="font-size: 1rem;">Übersicht</h4>
<div class="d-flex flex-column">
<ul class="nav nav-pills flex-column mb-auto" style="flex:5">
<li class="nav-item">
<a href="#" class="nav-link text-white active" onclick="backend.getEntries('new', event)">
<svg class="bi me-2" width="16" height="16">
<use xlink:href="#home"></use>
</svg>
Neu
</a>
</li>
<li>
<a href="#" class="nav-link text-white" onclick="backend.getEntries('read', event)">
<svg class="bi me-2" width="16" height="16">
<use xlink:href="#speedometer2"></use>
</svg>
Gesichtet
</a>
</li>
<li>
<a href="#" class="nav-link text-white" onclick="backend.getConversations('open', event)">
<svg class="bi me-2" width="16" height="16">
<use xlink:href="#table"></use>
</svg>
Rückfragen
</a>
</li>
<li>
<a href="#" class="nav-link text-white" onclick="loadEntries(3)">
<svg class="bi me-2" width="16" height="16">
<use xlink:href="#grid"></use>
</svg>
Heruntergeladen
</a>
</li>
</ul>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link text-danger" aria-current="page" onclick="backend.getEntries('deleted', event)">
<svg class="bi me-2" width="16" height="16">
<use xlink:href="#home"></use>
</svg>
Papierkorb
</a>
</li>
</ul>
</div>
<hr>
<h4 style="font-size: 1rem;">Administration</h4>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="/backend/download/takeout" class="nav-link text-white">
<svg class="bi me-2" width="16" height="16">
<use xlink:href="#home"></use>
</svg>
Export "Gesichtet"
</a>
</li>
</ul>
</div>
</aside>
<main class="col-md-10">
<nav class="navbar bg-body-tertiary d-flex p-2">
<div class="col d-flex align-items-center">
{# filter-function insert here #}
{# <span class="material-symbols-outlined">filter_list</span> #}
</div>
<div class="col d-flex justify-content-end">
<div class="dropdown">
<button class="btn" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<span class="material-symbols-outlined">person</span>
</button>
<ul class="dropdown-menu dropdown-menu-end bg-dark custom-dropdown-hover-dark "
aria-labelledby="dropdownMenuButton1" style="min-width: 250px; min-height: 200px;">
{# <li><a class="dropdown-item " href="#">Account</a></li> #}
<li><a class="dropdown-item " href="/logout">Abmelden</a></li>
</ul>
</div>
</div>
</nav>
<nav class="d-flex bg-primary-subtle d-none align-items-center" id="toolbar">
<p class="mx-2 my-0 fw-bold">Auswahl: (<span id="selectAmount"></span>)</p>
<div class=" col d-flex mx-4 gap-4">
<button class="btn custom-backend-toolbar-btn my-1" id="tbDelete">Löschen</button>
{# <button class="btn custom-backend-toolbar-btn my-1" id="tbEdit">Bearbeiten</button> #}
<button class="btn custom-backend-toolbar-btn my-1" id="tbDownload">Herunterladen</button>
</div>
<div class="d-flex align-items-end">
<button class="btn-close" id="tbclose" aria-label="Close"></button>
</div>
</nav>
<!-- Thumbnails -->
<div class="container mt-4 d-flex justify-content-center" id="entries_container" style="min-height: 100vh;">
<!-- content from js -->
</div>
<div id="spinner" class="d-none">
<div class="spinner-border" role="status">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel"aria-hidden="true">
<div class="modal-dialog modal-xl customModal">
<div class="modal-content h-100 ">
<!-- content from js -->
</div>
</div>
</div>
</main>
<!--Popper needed for Bootstrap Dropdowns-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-sQXON5AQeNBcC2zE5kz0HvrlMub/oUKdZYKqc9tyZzXZhpZHCc+3go/Q5VfD5V6N"
crossorigin="anonymous"></script>
{# required for Bootstrap #}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/assets/js/backend/toolbar.js" defer ></script>
<script src="/assets/js/backend/fetch.js" defer ></script>
<script src="/assets/js/backend/imageEntry.js" defer ></script>
<script src="/assets/js/backend/backend.js" defer ></script>
<script src="/assets/js/backend/backendMain.js" defer ></script>
<script src="/assets/js/backend/conversations.js" defer ></script>
<script src="/assets/js/backend/aside.js" defer ></script>
<script src="/assets/js/backend/modalOOP.js" defer ></script>
{% if permalink is defined %}
<script>
//call the popup with picture id permalink.id
//call the corresponding page permalink.status
</script>
{% endif %}
{% endblock %}
{% block footer %} {% endblock %}