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

{% block form %}

<div class="row widget-wrapper">
    <div class="form-group">
        <label class="control-label widget-input-label" for="" data-bind="text:label"></label>
        <!-- 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 class="">
                        <h2>{% trans 'Upload Photographs' %}</h2>
                        <h4>{% trans 'Drag & Dop your photos onto this panel' %}</h4>
                    </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>{% trans "Select Photos" %}</span>
                    </button>
                    <br>
                    <p>{% trans 'Adding photos to this Site Visit record is ' %}<span><strong>{% trans 'optional' %}</strong></span>.
                    <br><span>{% trans 'You may upload as many photos as you wish, but the maximum size of any single photo must be 8MB or less.' %}</span></p>
                </div>
                <div class="file-upload-footer">
                    <span>{% trans 'Images formatted as .jpg, .png, .tiff files may be uploaded. Other formats will be ignored.' %}</span>
                </div>
            </div>

            <div class="dz-previews" data-bind="css: uniqueidClass">
                <!--ko if: filesJSON().length > 0 && selectedPhoto() -->
                <div class="gallery" style="position: relative" data-bind="event: { 'mouseover': toggleHoveredOverImage, 'mouseleave': toggleHoveredOverImage }">
                    <div class="preview">
                        <img class="dz-img" data-bind="attr: {src: ko.unwrap(selectedPhoto().url) ? selectedPhoto().url : selectedPhoto().content}">
                    </div>
                    <!--ko if: hoveredOverImage() === true -->
                    <!-- <div class="thumbnail-container" style="width: 100%; display: flex; justify-content: space-between; position: absolute; bottom: 0px" data-bind="visible: true"> -->
                    <div class="thumbnail-container" data-bind="gallery: pan, duration: 400, scrolldistance: 100, thumbnailclass: 'gallery-thumbnails'">
                        <div class="thumbnail-gallery-controls left" data-bind="click: function(){updatePan('left')}"><i class="fa fa-angle-left"></i></div>
                        <div class="gallery-thumbnails">
                            <!-- ko foreach: filesJSON -->
                            <div style='position: relative'>
                                <div data-bind="click: $parent.removeFile, visible: ko.unwrap(selected)">
                                    <button class="btn btn-xs dz-cancel"><i class="ion ion-close"></i></button>
                                </div>
                                <img class="dz-img" data-bind="attr: {src: ko.unwrap(url) ? url : content }, click: $parent.selectPhoto">
                            </div>
                            <!-- /ko -->
                        </div>
                        <div class="thumbnail-gallery-controls right" data-bind="click: function(){updatePan('right')}"><i class="fa fa-angle-right"></i></div>
                    </div>
                    <!-- /ko -->
                </div>
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>

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

{% block config_form %}
<div class="control-label">
    {% trans "Accepted Files" %}
</div>
<div class="col-xs-12 pad-no crud-widget-container">
    <input type="" placeholder="{% trans "Accepted Files" %}" id="" class="form-control input-md widget-input" data-bind="value: acceptedFiles, valueUpdate: 'keyup'">
</div>

<div class="control-label">
    {% trans "Max File Size (mb)" %}
</div>
<div class="col-xs-12 pad-no crud-widget-container">
    <input type="number" placeholder="{% trans "Max File Size (mb)" %}" id="" class="form-control input-md widget-input" data-bind="value: maxFilesize">
</div>
{% endblock config_form %}

{% block report %}
<dt data-bind="text: label"></dt>

<!-- ko if: uploadedFiles().length === 0 -->
<dd>{% trans "None" %}</dd>
<!-- /ko -->

<!-- ko foreach: reportFiles() -->
<dd>
    <a class="" data-bind="attr: {href: url}">
        <i class="ion ion-forward"></i>
        <span data-bind="text: name"></span>
    </a>
</dd>
<!-- /ko -->

<!-- ko if: reportImages().length > 0 -->
<dd>
    <div id="report-image-grid" class="report-image-grid">
        <!-- ko foreach: reportImages() -->
        <div class="rp-image-grid-item">
            <a id="" class="" target="_blank" data-bind="attr: {href: url}">
                <img class="img-responsive" data-bind="attr: {src: url, alt: name}">
            </a>
        </div>
        <!-- /ko -->
    </div>
</dd>
<!-- /ko -->
{% endblock report %}

{% block display_value %}
<span data-bind="text: displayValue() + ' {% trans "files uploaded" %}'"></span>
{% endblock display_value %}
