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

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

{% block styles %}
    {% if user_settings.backgroundUpload is defined and user_settings.backgroundUpload is not empty %}
        <style>
            #background {
                background-image: url('{{ asset('images/' ~ user_settings.backgroundUpload) }}');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                background-attachment: fixed;
            }
        </style>
    {% endif %}
{% 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 id="form-area" class="h-100-sm">
        <div id="output_email_empty" class="text-danger mb-sm-3"></div>
        <div class="container h-100-sm">
            <div class="row">
                <div class="col-12 col-lg-6 p-xs-0 h-100-sm">
                    <div class="p-3 shared-file-form ml-mr-auto h-100-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" class="d-none d-md-block" style="cursor: auto;"
                             fill="white" width="60" height="60" viewBox="0 0 640 512">
                            <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128l-368 0zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39L296 392c0 13.3 10.7 24 24 24s24-10.7 24-24l0-134.1 39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z"/>
                        </svg>


                        <div class="col-ml-0 form-upload-wrap">
                            <form name="upload" method="post"
                                  action="{{ path('app_guest_upload_exec', {'id': upload_id}) }}"
                                  enctype="multipart/form-data" class="dropzone rounded" id="docUpload">
                                <div id="the-progress-div" class="bg-primary my-2 rounded">
                                    <div class="the-progress-text mx-2"></div>
                                </div>
                            </form>
                            <!-- Кнопка для выбора папок -->
                            <input type="file" id="folderInput" webkitdirectory multiple hidden/>
                            <button class="button-no-style upload-folder d-flex ml-mr-auto mt-2 text-black" id="uploadFolderBtn"
                                    type="button">
                                {{ 'lang.uploadPrompt'|trans }}
                            </button>
                        </div>

                        <div class="mb-3"></div>
                        {{ form_start(form) }}
                        {{ form_row(form._token) }}
                        {{ include('guest/_form.html.twig') }}


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

                        <div class="row">
                            <div class="d-flex">
                                <button class="button button-gradient ml-mr-auto mt-3 mb-3" type="button"
                                        id="submitbutton">
                                    {{ 'cta_submit'|trans }}
                                </button>
                            </div>
                        </div>

                        <input type="hidden" id="aLXq676F8V6arDsukGLrsnKkdvc7Jv5TKu9F6aSWaVaVaujkmF"
                               value="{{ license|encode }}"> <input type="hidden" id="hasFile" value="0">

                        {{ form_end(form) }}

                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {{ encore_entry_script_tags('upload_free') }}
    {{ encore_entry_script_tags('dropzone_free') }}

{% endblock %}