{% extends "template.twig" %}

{% block title %}Главная страница{% endblock %}
{% block head %}
    {{ parent() }}
    <style>
        #imageDrop {
            display: flex;
            align-content: center;
            justify-content: center;
            align-items: center;
            
            height: 5rem;
            border: 0.2rem dashed gray;
            border-radius: 1rem;
        }
    </style>
{% endblock %}

{% block content %}
    Привет, {{user.login}}! <a href="/logout">Выйти</a>
    <hr>
    <b>Меню:</b>
    {% if menu %}
    <ul>
    {% for item in menu %}
        <li><a href="{{item.url}}">{{item.name}}</a></li>
    {% endfor %}
    </ul>
    {% else %}
    <p>Пусто</p> 
    {% endif %}
    <hr>
    <div id="imageDrop">
    Загрузить изображение
    </div>
    <hr>
    <b>Действия:</b>
    <ul>
        <li><a href="/editMenu">Изменить меню</a></li>
        <li><a href="/lookupTables">Просмотреть данные таблиц</a></li>
        <li><a href="/gallery">Галерея</a></li>
        <li><a href="/search">Поиск</a></li>
        <hr>
        <li><a href="/import">Импортировать данные</a></li>
        <li><a href="/export" download>Экспортировать данные</a></li>
    </ul>
    <hr>
    <b>Общая галерея:</b>
    <div class="gallery">
    {% for image in gallery %}
        <a href="image/{{image.id}}">
            <img src="/images?filename={{image.filename}}" alt="{{image.filename}}">
        </a>
    {% else %}
        <p>Пусто</p>
    {% endfor %}
    </div>
</body>
<script>
// dom loaded listener
document.addEventListener("DOMContentLoaded", function() {
    // create a drop zone
    let dropZone = document.getElementById("imageDrop");
    // add event listeners
    dropZone.addEventListener("dragover", function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = "copy";
    }, false);
    dropZone.addEventListener("dragleave", function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = "copy";
    }, false);
    dropZone.addEventListener("drop", async function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = "copy";
        // get the file
        let file = e.dataTransfer.files[0];
        // create a form data
        let formData = new FormData();
        // append the file
        formData.append("file", file);
        try {
            // upload image with fetch
            const response = await fetch("/uploadImage", {
                method: "POST",
                body: formData
            });
            // get the response
            const data = await response.json();
            if (data.code == 200) {
                location.href = "/gallery";
            } else {
                alert(data.error);
            }
        } catch (e) {
            alert(e);
        }
    }, false);
});

</script>
{% endblock %}