{% extends "views/components/widgets/base.htm" %}
{% load template_tags %}
{% load i18n %}

{% block form %}
<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
    <div class="form-group">
        <span class="control-label widget-input-label" for="" data-bind="text:label"></span>
        <!-- ko if: node -->
        <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
        <!-- /ko -->
        <div class="col-xs-12 dropzone" data-bind="dropzone: dropzoneOptions">
            <div class="file-select-window" data-bind="visible: filesJSON().length === 0">
                <div class="bord-top pad-ver file-select">
                    <div style="padding: 5px">
                        <div class="file-select-h2 h2">
                            <span data-bind="text: $root.translations.uploadDocuments"></span>
                        </div>
                        <div class="card-component-panel-h3 h3">
                            <span data-bind="text: $root.translations.dragAndDropFilesOnPanel"></span>
                        </div>
                    </div>
                    <button type="button" class="btn btn-lg btn-file-select fileinput-button dz-clickable" data-bind="css: uniqueidClass, disable: disabled">
                        <i class="fa fa-file"></i>
                        <span data-bind="text: $root.translations.selectFiles"></span>
                    </button>
                    <br>
                    <div style="padding: 10px">
                        <span data-bind="text: $root.translations.addingDocumentsOptional"></span>
                        <br>
                        <span data-bind="text: $root.translations.maxFileSizeWarning"></span>
                        <span data-bind="text: maxFilesize() + 'MB.'"></span>
                    </div>

                    <!-- <div class="btn-group pull-right">
                        <button id="dz-remove-btn" class="btn btn-danger cancel" type="reset" data-bind="click: reset">
                            <i class="ion ion-close"></i>
                        </button>
                    </div> -->
                </div>
                <div class="file-upload-footer">
                    <span>
                        <span data-bind="text: $root.translations.allowedDocumentFormats"></span>
                        <span data-bind="text: (acceptedFiles() || $root.translations.allFormatsAccepted) + '. '"></span>
                    </span>
                </div>
            </div>
            <div data-bind="visible: filesJSON().length > 0">
                <!-- note that data-bind=visible must be in place (instead of ko if:) as DZ instantiates only once;
                    elements with its class name must exist at time of init -->
                <div class="card-component-panel-h4 h4">
                    <span data-bind="text: $root.translations.uploadedFiles"></span>
                </div>
                <div class="file-upload-options">
                    <div class="file-upload-options-grow list-filter">
                    <!--ko if: filesJSON().length > 1-->

                        <input
                            data-bind="
                                attr: {placeholder: $root.translations.findAFile + '...', 'aria-label': $root.translations.findAFile},
                                textInput: filter
                            "
                            type="text"
                            class="file-upload-filter"
                        >
                        <!-- Clear Search -->
                        <span tabindex="0" aria-label="{% trans "Clear filter" %}" class="clear-node-search" data-bind="onEnterkeyClick, onSpaceClick, visible: filter().length > 0, click: function() { filter(''); }"><i class="fa fa-times-circle"></i></span>
                        <!-- /ko -->

                        <div style="margin-top: 7px;">
                            <!-- ko if: filter() -->
                            <span style="margin:0 35px;" data-bind="text: filteredList().length +' '+ $root.translations.outOf +' '+ filesJSON().length +' '+ $root.translations.filesMatchFilter"></span>
                            <!-- /ko -->
                            <!-- ko if: (!filter() || filter() == "") -->
                            <span style="margin:0 5px;" data-bind="text: filesJSON().length +' '+ $root.translations.filesUploaded"></span>
                            <!-- /ko -->
                        </div>
                    </div>
                    <div >
                        <button type="button" class="btn btn-file-upload-reset dropzone fileinput-button dz-clickable" data-bind="css: uniqueidClass">
                            <span data-bind="text: $root.translations.addMoreFiles"></span>
                        </button>
                        <button type="button" class="btn btn-file-upload-reset dropzone fileinput-button dz-clickable" data-bind="click: reset">
                            <span data-bind="text: $root.translations.deleteAllFiles"></span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="dz-previews" data-bind="css: uniqueidClass">
                <!-- ko foreach: pagedList(filter() ? filteredList() : filesJSON()) -->
                <div class="file-upload-card">
                    <div class="media-body">
                        <div class="media-block">
                            <div class="media-left">
                                <span><i class="fa fa-file fa-lg"></i></span>
                            </div>
                            <div class="media-body file-upload-card-detail">
                                <div class="media-left">
                                    <span class="text-main mar-no text-overflow" data-bind="text: name"></span>
                                    <!-- ko if: $data.error -->
                                    <span class="dz-error text-danger text-sm" data-bind="text: $root.translations.error"></span>
                                    <!-- /ko -->
                                    <span class="text-sm">
                                        <a data-bind="attr: {href: ko.unwrap(url) ? $parent.getFileUrl(url) : content, download: name, 'aria-label': ($root.translations.download).concat(' ', name)}, click: function(){return ko.unwrap(url) ? true : false}, clickBubble: false">
                                            <span data-bind="text: ko.unwrap(url) ? $root.translations.download : $root.translations.unsaved"></span>
                                        </a>
                                    </span>
                                </div>
                                <div class="file-upload-card-detail-right">
                                    <div class="media-right" data-bind="click: $parent.removeFile">
                                        <button class="btn btn-xs btn-danger btn-file-cancel" data-bind="attr: {'aria-label': ($root.translations.delete).concat(' ', name)}"><i class="ion ion-close"></i></button>
                                    </div>
                                    <div class="file-size-label">
                                        <span class="text-sm" data-bind="html: $parent.formatSize($data)"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% block file-metadata %}
                    <div class="row">
                        <div class="file-metadata">
                            <label data-bind="text: $root.translations.alternativeText"></label>
                            <a href="#" data-toggle="tooltip" data-bind="attr: {title: $root.translations.altTextHelp}">
                                <i class="fa fa-question-circle" aria-hidden="true" style="padding-left: 3px;"></i>
                            </a>
                            <input
                                type="text"
                                class="form-control"
                                data-bind="textInput: $data.altText[$parent.activeLanguage].value, attr: {'aria-label': $root.translations.alternativeText}"
                            />
                        </div>
                    </div>
                    <div class="row"
                        data-toggle="collapse"
                        style="cursor: pointer"
                        data-bind="attr: {'data-target': '.file-metadata-additional-' + $parent.unique_id + $index()},
                            click: $parent.toggleDropdown($index())"
                    >
                        <div class="file-metadata">
                            <i class="fa" aria-hidden="true" data-bind="class: $parent.metadataDrawerCollapsedStatus()[$index()] ? 'fa-chevron-right' : 'fa-chevron-down'"></i>
                            <span data-bind="text: $root.translations.additionalMetadata"></span>
                        </div>
                    </div>
                    <div class="row collapse" data-bind="class: 'file-metadata-additional-' + $parent.unique_id + $index()">
                        <div class="file-metadata col-sm-6">
                            <label data-bind="text: $root.translations.title"></label>
                            <input
                                type="text"
                                class="form-control"
                                data-bind="textInput: $data.title[$parent.activeLanguage].value, attr: {'aria-label': $root.translations.title}"
                            />
                        </div>
                        <div class="file-metadata col-sm-6">
                            <label data-bind="text: $root.translations.attribution"></label>
                            <input
                                type="text"
                                class="form-control"
                                data-bind="textInput: $data.attribution[$parent.activeLanguage].value, attr: {'aria-label': $root.translations.attribution}"
                            />
                        </div>
                        <div class="file-metadata">
                            <label data-bind="text: $root.translations.description"></label>
                            <input
                                type="text"
                                class="form-control"
                                data-bind="textInput: $data.description[$parent.activeLanguage].value, attr: {'aria-label': $root.translations.description}"
                                style="resize: vertical;"
                            />
                        </div>
                    </div>
                    {% endblock file-metadata %}
                </div>
                <!-- /ko -->
            </div>
            <div data-bind="style: {visibility: pageCtReached()}">
                <select type="button" class="btn btn-file-upload-limit" data-bind="value: pageCt" aria-label="{% trans 'Number of Files Shown' %}">
                    <option value="5" data-bind="text: $root.translations.showFirstFiveFiles"></option>
                    <option value="10" data-bind="text: $root.translations.showFirstTenFiles"></option>
                    <option value="25" data-bind="text: $root.translations.showFirstTwentyFiveFiles"></option>
                    <option value="100" data-bind="text: $root.translations.showAllFiles"></option>
                </select>
            </div>
        </div>
    </div>
</div>

<template id="file-widget-dz-preview"><span></span></template>
{% endblock form %}

{% block config_form %}
<div class="control-label">
    <span data-bind="text: node.config.imagesOnly
        ? $root.translations.acceptedFileTypesImagesOnly : $root.translations.acceptedFileTypes"></span>
</div>
<div class="col-xs-12 pad-no crud-widget-container">
    <input
        class="form-control input-md widget-input"
        data-bind="
            attr: {placeholder: node.config.imagesOnly
                ? $root.translations.exampleImageTypes : $root.translations.exampleFileTypes,
            'aria-label': node.config.imagesOnly
                ? $root.translations.acceptedFileTypesImagesOnly : $root.translations.acceptedFileTypes},
            textInput: acceptedFiles
        "
    >
</div>

<div class="control-label">
    <span data-bind="text: $root.translations.maxFileSize"></span>
</div>
<div class="col-xs-12 pad-no crud-widget-container">
    <input
        type="number"
        class="form-control input-md widget-input"
        data-bind="
            attr: {placeholder: $root.translations.maxFileSize, 'aria-label': $root.translations.maxFileSize},
            value: maxFilesize
        "
    >
</div>

{% endblock config_form %}

{% block report %}

<!-- ko if: uploadedFiles().length === 0 -->
<dt data-bind="text: label"></dt>
<dd data-bind="class: nodeCssClasses">
    <span data-bind="text: $root.translations.none"></span>
</dd>
<!-- /ko -->

<!-- ko foreach: reportFiles() -->
<dt class="first" data-bind="text: $parent.label, class: $parent.nodeCssClasses"></dt>
<dd class="first" data-bind="class: $parent.nodeCssClasses" style="border-top: 1px lightgray; border-top-style: solid;"></dt>
    <a data-bind="attr: {href: $parent.getFileUrl(url)}" target="_blank">
        <i class="ion ion-forward"></i>
        <span data-bind="text: name"></span>
        <img class="img-responsive" data-bind="attr: {src:$parent.getFileUrl(url)+'?thumbnail=true',
            alt: $data.altText[$parent.activeLanguage].value ?? name}">
    </a>
</dd>
<!-- ko if: title[$parent.activeLanguage].value -->
<dt data-bind="text: $root.translations.title"></dt>
<dd data-bind="text: title[$parent.activeLanguage].value"></dd>
<!-- /ko -->
<!-- ko if: attribution[$parent.activeLanguage].value -->
<dt data-bind="text: $root.translations.attribution"></dt>
<dd data-bind="text: attribution[$parent.activeLanguage].value"></dd>
<!-- /ko -->
<!-- ko if: description[$parent.activeLanguage].value -->
<dt data-bind="text: $root.translations.description"></dt>
<dd data-bind="text: description[$parent.activeLanguage].value"></dd>
<!-- /ko -->
<!-- /ko -->

<!-- ko foreach: reportImages() -->
<dt class="first" data-bind="text: $parent.label, class: $parent.nodeCssClasses"></dt>
<dd class="first" data-bind="class: $parent.nodeCssClasses">
    <div class="rp-image-grid-item">
        <a target="_blank" data-bind="attr: {href: $parent.getFileUrl(url)}">
            <img class="img-responsive" data-bind="attr: {src:$parent.getFileUrl(url)+'?thumbnail=true',
            alt: $data.altText[$parent.activeLanguage].value ?? name}">
        </a>
    </div>
</dd>
<!-- ko if: title[$parent.activeLanguage].value -->
<dt data-bind="text: $root.translations.title"></dt>
<dd data-bind="text: title[$parent.activeLanguage].value"></dd>
<!-- /ko -->
<!-- ko if: attribution[$parent.activeLanguage].value -->
<dt data-bind="text: $root.translations.attribution"></dt>
<dd data-bind="text: attribution[$parent.activeLanguage].value"></dd>
<!-- /ko -->
<!-- ko if: description[$parent.activeLanguage].value -->
<dt data-bind="text: $root.translations.description"></dt>
<dd data-bind="text: description[$parent.activeLanguage].value"></dd>
<!-- /ko -->
<!-- /ko -->
{% endblock report %}

{% block display_value %}
<span data-bind="text: Number.isInteger(displayValue()) ? displayValue() + $root.translations.filesUploaded : displayValue(), class: nodeCssClasses"></span>
{% endblock display_value %}
