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

{% block title %}Secure File Transfer{% endblock %}
{% block footer %} {% endblock %}

{% block styles %}
    {{ encore_entry_link_tags('download') }}
    {% if user_settings.backgroundDownload is defined and user_settings.backgroundDownload is not empty %}
        <style>
            #background {
                background-image: url('{{ asset('images/' ~ user_settings.backgroundDownload) }}');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                background-attachment: fixed;
            }
            .background-gradient, .back-circle {
                display: none;
            }
        </style>
    {% else %}
        <style>
            #background {
                background-image: url('{{ asset('images/car.png') }}');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                background-attachment: fixed;
            }
            .background-gradient, .back-circle {
                display: none;
            }
        </style>
    {% endif %}
{% endblock %}

{% block navigation %}
    {% include 'general/navigation.download.html.twig' %}
{% endblock %}

{% block body %}

    <div class="container p-0">
        <div class="row h-100-sm">
            <div class="col-12 col-md-10 col-lg-7 h-100-sm">
                <div class="p-5 m-md-5 background-trans-black text-white download-container h-100-sm">
                    <div class="row h-100-sm">
                        <div class="col-md-12 mb-3">
                            {% if user_settings %}
                                {% if user_settings.emailLogo %}
                                    <div class="display-flex-center">
                                        <img id="loginBackgroundPreview"
                                             src='{{ asset('images/' ~ user_settings.emailLogo) }}' alt="Loading..."/>
                                    </div>
                                {% else %}
                                    <div class="icon-circle m-auto mt-2 mb-2">
                                        <i class="icofont-cloud-download icofont-2x"></i>
                                    </div>
                                {% endif %}

                                {% if user_settings.companyName and data.title %}
                                    <h2 class="display-flex-center m-4">
                                        {{ user_settings.companyName }} {{ 'lang.hasSentYou' | trans }} {{ data.title }}
                                        .
                                    </h2>
                                {% endif %}
                                {% if data.message %}
                                    <h3>{{ data.message }}</h3>
                                {% endif %}
                            {% endif %}

                            <div class="row mt-5">
                                <div class="col-md-6">
                                    <h5>{{ 'lang.transferredFiles' | trans }}</h5>

                                    {% if data.validUntil %}
                                        {{ 'lang.validUntil' | trans }} {{ data.validUntil|date("d.m.Y") }} <br>
                                    {% endif %}

                                    {{ files|length }} {{ 'lang.files' | trans }},
                                    {{ filesize_total }}
                                </div>
                                
                                {% if files|length > 1 %}
                                    <div class="col-md-6">
                                        <div class="display-flex-end" id="downloadAll">
                                            <a href="#"
                                               class="button button-login f-14"
                                               style="cursor: pointer"
                                               id="downloadAllButton"
                                               data-id="{{ id }}">
                                                {{ 'lang.downloadAllFiles' | trans }}
                                                <img class="m-1" src="/images/Arhive_alt_add.svg" alt=""/>
                                            </a>
                                            <input id="app_download_all" type="hidden" value="{{ path('app_download_all', {'id': id}) }}" />
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-12 col-lg-9 button-download-container">
                            {% for document in files %}
                                {% set documentCompleteName = document.file|split('_') %}
                                {% set file = document.file|getFileData(upload_dir) %}
                                {% set extension = file['extension']|lower %}
                                {% set isImage = extension in ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'] %}

                                {% if file['filename'] is not empty %}
                                    {% set fileFullName = documentCompleteName[1]|default(file['filename']) %}
                                    {% set downloadUrl = path('app_download_file', {'id': document.uploadId, 'file': document.id}) %}
                                    {% set previewUrl = path('app_download_preview', {'id': document.uploadId, 'file': document.id}) %}
                                    {% set previewKind = 'none' %}
                                    {% if extension in ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'] %}
                                        {% set previewKind = 'image' %}
                                    {% elseif extension in ['mp4', 'webm', 'ogg', 'mov', 'm4v'] %}
                                        {% set previewKind = 'video' %}
                                    {% elseif extension in ['mp3', 'wav', 'm4a', 'aac', 'flac'] %}
                                        {% set previewKind = 'audio' %}
                                    {% elseif extension == 'pdf' %}
                                        {% set previewKind = 'pdf' %}
                                    {% elseif extension in ['txt', 'csv', 'json', 'xml', 'md', 'log', 'yml', 'yaml'] %}
                                        {% set previewKind = 'text' %}
                                    {% endif %}

                                    <div class="margin-20 button-download-wrapper"
                                         data-file-name="{{ fileFullName }}"
                                         data-preview-kind="{{ previewKind }}"
                                         data-preview-url="{{ previewUrl }}"
                                         data-download-url="{{ downloadUrl }}">
                                        {% if isImage %}
                                            <button type="button" class="download-preview-wrapper mb-3 js-file-preview p-0 border-0 bg-transparent">
                                                <img class="download-preview-thumb"
                                                     src="{{ previewUrl }}"
                                                     alt="{{ fileFullName }}"
                                                     loading="lazy"/>
                                            </button>
                                        {% endif %}
                                        <div class="col-12 button-download m-0">
                                            <button type="button"
                                                    class="col-9 text-start file-name-wrap js-file-preview"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-title="{{ 'lang.tooltipPreview'|trans({'%filename%': fileFullName}) }}">
                                                {{ file['filename'] }}
                                            </button>
                                            <a class="col-3 display-flex-center file-download-action"
                                               href="{{ downloadUrl }}"
                                               data-bs-toggle="tooltip"
                                               data-bs-title="{{ 'lang.tooltipDownload'|trans({'%filename%': fileFullName}) }}">
                                                <img class="m-1" src="/images/Arhive_alt_add.svg" alt="{{ 'lang.download'|trans }}">
                                            </a>
                                        </div>
                                    </div>


                                {% else %}
                                    <div class="col-6 button-download">
                                        <div class="col-12 text-center file-name-wrap">
                                            File no exist
                                        </div>
                                    </div>

                                    <input type="hidden" id="no_files" value="1">
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end download-file-preview-offcanvas"
         tabindex="-1"
         id="downloadFilePreview"
         aria-labelledby="downloadFilePreviewTitle">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="downloadFilePreviewTitle"></h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body download-file-preview-body" id="downloadFilePreviewBody"></div>
    </div>

{% endblock %}

{% block javascripts %}

    {{ parent() }}
    {{ encore_entry_script_tags('download') }}
{% endblock %}