{% extends 'base.html.twig' %}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block title %}
    {{ 'lang.upload'|trans }}
{% endblock %}

{% block footer %}
{% endblock %}

{% block styles %}
    {% set upload_bg = (user_settings.backgroundUpload is defined and user_settings.backgroundUpload is not empty)
        ? user_settings.backgroundUpload
        : 'Sicher-Daten-versenden-6a6d7b3dc5ec4.jpg' %}
    <style>
        #background {
            background-image: url('{{ asset('images/' ~ upload_bg) }}');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .background-gradient, .back-circle {
            display: none;
        }
    </style>

    {{ encore_entry_link_tags('upload') }}
    <link rel="stylesheet" href="{{ asset('build/upload_new.css') }}">
{% endblock %}

{% set block_to_render = 'body' %}
{% block body %}
    <div class="col text-center" id="spinner">
        <img src="/images/spinner.gif" alt="spinner" style="width:70%;">
    </div>

    <div class="container mt-3">
        <div id="form-area" class="upload-modern-page">
            <div class="upload-modern-main">
                <div class="upload-modern-card">
                    <div id="output_email_empty" class="text-danger mb-2"></div>

                    <div class="upload-add-grid">
                        <button type="button" class="upload-add-btn" id="uploadFilesBtn"
                                data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ 'lang.tooltipUploadFiles'|trans }}">
                            <span class="upload-add-btn__icon" aria-hidden="true">
                                <i class="icofont-plus"></i>
                            </span>
                            <span>{{ 'lang.addFiles'|trans }}</span>
                        </button>
                        <button type="button" class="upload-add-btn" id="uploadFolderBtn"
                                data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-title="{{ 'lang.tooltipUploadFolder'|trans }}">
                            <span class="upload-add-btn__icon upload-add-btn__icon--folder" aria-hidden="true">
                                <i class="icofont-folder"></i>
                            </span>
                            <span>{{ 'lang.addFolders'|trans }}</span>
                        </button>
                    </div>

                    <input
                        type="file"
                        id="folderInput"
                        webkitdirectory
                        multiple
                        hidden
                        data-upload-finished-message="{{ 'lang.uploadFinished'|trans }}"
                    />

                    {% if license == 'free' %}
                    <p class="upload-upgrade-hint">
                        {{ 'lang.uploadUpgradeHint'|trans }}
                        <a href="{{ path('app_price') }}">{{ 'lang.increaseLimit'|trans }}</a>
                    </p>
                    {% endif %}

                    <div id="upload-progress-circle" class="upload-progress-circle" aria-live="polite">
                        <div class="upload-progress-ring" id="upload-progress-ring">
                            <svg viewBox="0 0 96 96" aria-hidden="true">
                                <circle class="upload-progress-ring__track" cx="48" cy="48" r="40"></circle>
                                <circle class="upload-progress-ring__value" id="upload-progress-value" cx="48" cy="48" r="40"></circle>
                            </svg>
                            <div class="upload-progress-ring__label">
                                <span id="upload-progress-percent">0%</span>
                            </div>
                        </div>
                        <div class="upload-progress-status" id="upload-progress-status">{{ 'lang.uploading'|trans }}</div>
                    </div>

                    <form name="upload" method="post" action="{{ path('app_upload_exec', {'id': upload_id}) }}"
                          enctype="multipart/form-data" class="dropzone" id="docUpload">
                    </form>

                    {{ form_start(form) }}
                    {{ form_row(form._token) }}
                    {{ include('upload/_form.html.twig') }}

                    <div id="output_email_empty_bottom" class="text-danger mt-1"></div>

                    <button class="button button-blue" type="button" id="submitbutton">
                        {{ 'cta_submit'|trans }}
                    </button>

                    <input type="hidden" id="aLXq676F8V6arDsukGLrsnKkdvc7Jv5TKu9F6aSWaVaVaujkmF"
                           value="{{ license|encode }}">
                    <input type="hidden" id="maxFilesizeMb" value="{{ max_filesize }}">
                    <input type="hidden" id="hasFile" value="0">
                    {{ form_end(form, {'render_rest': false}) }}
                </div>
            </div>

            {% if license == 'free' %}
                <div class="upload-modern-side">
                    {% include 'pro_version/_versions.html.twig' %}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('toggle_price') }}

    {% if license == 'pro' or license == 'business' %}
        {{ encore_entry_script_tags('upload') }}
        {{ encore_entry_script_tags('dropzone') }}
    {% endif %}

    {% if license == 'free' %}
        {{ encore_entry_script_tags('upload_free') }}
        {{ encore_entry_script_tags('dropzone_free') }}
    {% endif %}
{% endblock %}