{#
    Info: this component is used for standrad page and dialog - both share the same view but a bit different logic
    so instead of duplicating logic I just reuse the main body template for all use cases
#}

{% if inputColSize is not defined %}
    {% set inputColSize = 3 %}
{% endif %}

{% if formSize is not defined %}
    {% set formSize = 4 %}
{% endif %}

<script type="text/template" id="qq-template">
    <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here" id="fineUploadBodyMainWrapper">

        {# File select and upload #}
        <div class="col-md-12 d-flex justify-content-center mt-1 fine-upload-body-file-select-and-upload-wrapper">
            <div class="col-md-{{ formSize }} align-self-center">
                <section class="d-flex">
                    <section id="file-upload-file-select" class="fine-upload-body-file-select btn btn-sm btn-primary d-flex mL-0">
                        <div class="custom-file d-flex justify-content-center flex-column align-items-center h-100 hoverable-pointer qq-upload-button-selector qq-upload-button">
                            <i class="far fa-folder-open position-absolute align-items-center fine-upload-body-folder-icon"></i>
                            <div class="custom-file-input h-100 hoverable-pointer"></div>
                        </div>
                    </section>
                    <button type="button"
                            class="btn btn-sm btn-primary clear-selection col-4 btn qq-upload-button-selector qq-upload-button trigger-manual-upload w-100 fine-upload-body-upload-submit">
                                {{ 'fineUpload.buttons.upload.label' | trans}}
                    </button>
                </section>
            </div>
        </div>

        {# Drag n Drop area #}
        <div class="qq-upload-drop-area-selector qq-upload-drop-area mT-5 fine-upload-body-drag-n-drop-area" qq-hide-dropzone>
            <span class="qq-upload-drop-area-text-selector"></span>
        </div>

        {# Handled files list #}
        <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
            <li>
                <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                <div class="qq-progress-bar-container-selector qq-progress-bar-container d-none">
                    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                </div>
                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>

                {# single uploaded file row content#}
                <div class="qq-file-info" id="test-stuff">

                    <div class="qq-file-name">

                        {#Edit file name - both must be present at lest invisible, it's used by the upload plugin internally, and by customizations to trigger showing file name#}
                        <span class="qq-upload-file-selector qq-upload-file d-none"></span>
                        <span class="qq-edit-filename-icon-selector d-none" aria-label="Edit filename"></span>

                        {#Filename edit input#}
                        <div class="col-{{ inputColSize }} d-inline-block">
                            <small class="d-block floating-label">{{ 'fineUpload.uploadedRow.filename.label' | trans }}</small>
                            <input class="qq-edit-filename-selector qq-edit-filename form-control d-inline-block" tabindex="0" type="text" name="filename">
                        </div>

                        {#Tags edit input#}
                        <div class="col-{{ inputColSize }} d-inline-block">
                            <small class="d-block floating-label">{{ 'fineUpload.uploadedRow.tags.label' | trans }}</small>
                            <input class="form-control tags" type="text" name="tags" data-inline-css="true">
                        </div>

                        {#Remove file from queue#}
                        <span class="qq-upload-cancel-selector qq-upload-cancel">
                                <span class="qq-upload-cancel-icon" data-toggle-popover="true" data-content="{{ 'fineUpload.tippy.actions.remove.label' | trans }}">
                                    <i class="fa fa-lg fa-trash"></i>
                                </span>
                            </span>

                        {#Retry upload on fail#}
                        <span class="qq-upload-retry-selector qq-upload-retry pointer">
                                <span class="qq-retry-icon" data-toggle-popover="true" data-content="{{ 'fineUpload.tippy.actions.retry.label' | trans }}">
                                    <i class="fas fa-sync-alt"></i>
                                </span>
                            </span>

                    </div>

                </div>

            </li>
        </ul>

        <dialog class="border-none qq-alert-dialog-selector" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="exampleModalLabel">
            <div class="qq-dialog-message-selector"></div>
            <button type="button" class="qq-cancel-button-selector btn btn-primary" data-dismiss="modal">{{ 'buttons.close' | trans }}</button>
        </dialog>
    </div>
</script>

<main class='main-content bgc-grey-100'>
    <div id='mainContent'>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="bgc-white bd bdrs-3 p-20 mB-20 d-flex flex-column">
                        <h4 class="c-grey-900 mB-20 align-self-center">{{ 'fineUpload.headers.uploadFiles' | trans }}</h4>

                        {# Information about the upload #}
                        <p class="text-center">
                            <i>
                                {{ 'fineUpload.texts.generalInfo' | trans }}
                            </i>
                        </p>

                        {# Information #}
                        <section class="d-flex flex-column justify-content-center mB-4 text-info">
                            <p id="maxUploadSizeWrapper" data-max-upload-size-bytes="{{ max_upload_size_bytes }}" class="align-self-center m-0">
                                {{ 'fineUpload.texts.information.maxUploadedFileSize' | trans }}
                                {{ max_upload_size_mb }}
                                {{ 'fineUpload.mb' | trans }}
                            </p>
                        </section>

                        {# Demo info #}
                        {% if isDemo() %}
                            <p class="text-center">
                                <i>
                                    {{ 'fineUpload.texts.demoText' | trans | raw }}
                                </i>
                            </p>
                        {% endif %}

                        {# Selects #}
                        <div class="col-md-{{ formSize }} justify-content-center align-self-center file-upload-form">
                            <section>
                                {{ form_widget(module_and_directory_select_form.upload_module_dir, {'attr': {
                                    'class'                                          : 'form-control upload-type listFilterer selectpicker',
                                    'data-append-classes-to-bootstrap-select-parent' : 'bootstrap-select-width-100',
                                    'data-append-classes-to-bootstrap-select-button' : 'm-0',
                                    'data-live-search'                               : "true"
                                }}) }}

                                {{ form_widget(module_and_directory_select_form.subdirectory, {'attr': {
                                    'class'                                          : 'form-control align-self-center selectpicker',
                                    'data-append-classes-to-bootstrap-select-parent' : 'bootstrap-select-width-100',
                                    'data-append-classes-to-bootstrap-select-button' : 'm-0',
                                    'data-live-search'                               : "true"
                                }}) }}
                            </section>
                        </div>

                        {# Wrapper for the FineUpload #}
                        <section
                                data-is-fine-upload
                                data-upload-endpoint-url="{{ path('upload_files_via_fine_upload_plugin') }}"
                        >
                        </section>

                    </div>
                </div>
            </div>
        </div>
    </div>
</main>