{% extends "webgateway/core_html.html" %}



{% block title %}
Download files
{% endblock %}


{% block script %}
    {% include "webgateway/base/includes/script_src_jquery.html" %}
{% endblock %}


{% block link %}
    {{ block.super }}
    <style>
        .center {
            margin-right: auto;
            margin-left: auto;
            position: relative;
            top: 50px;
            width: 550px;
            background-color: #fafafa;
            /*text-align: center;*/
            padding: 15px;
        }
        h1 {
            /*text-align: center;*/
        }
        p {
            font-size: 14px;
        }
        a {
            text-decoration: underline;
        }
        .downloading {
            display: none;
        }
        table {
            width: 90%;
            margin-left: 20px
        }
        tbody:hover tr {
            background-color: #ededff;
        }
        td {
            padding: 0;
            font-size: 12px;
        }
        td div {
            width:100%;
            padding: 5px;
        }
        td:hover {
            background-color: hsl(215,20%,75%);
        }
        td .download {
            visibility: hidden;
            float:right;
            margin-right: 20px;
        }
        td:hover .download {
            visibility: visible;
        }
    </style>
{% endblock %}


{% block body %}

<div class="center">
<h1 style="font-size: 24px;">
    <!-- This dialog is used for exporting original files OR 'export as jpeg/png' etc -->
    {% if fileLists %} Download Original Files
    {% else %} Export Images
    {% endif %}
</h1>

<form id="downloadForm">

    <div style="padding: 15px; float: right">
        <button id="reset" type="reset" value="Reset">Cancel</button>
    </div>

    <h2>
    {% if fileLists %}
        You have chosen to download {{ fileCount }} files.
    {% else %}
        You have chosen to export {{ fileCount }} images.
    {% endif %}
    </h2>

    <!-- If we have a list of original files, allow option of downloading 1 at a time -->
    {% if fileLists %}
    <p>You have 2 options:</p>
    {% endif %}

    <div style="clear:both"></div>
    <hr>
    <p>Create and download a zip file which will contain these
        {% if fileLists %} files{% else %} images{% endif %}:</p>

    {% if downloadTooLarge %}

    <p class="error">
        Not available:
        Total size of files {{ filesTotalSize|filesizeformat }}
        is larger than {{ downloadTooLarge|filesizeformat }}.
    </p>

    {% else %}

    <div style="padding: 15px; float: right">
        <input type="submit" value="Create Zip"/>
    </div>

    <p>
        Zip file name:
        <input id="zipName" value="{{ defaultName }}.zip"/>
    </p>
    {% endif %}

    <div style="clear:both"></div>

    {% if fileLists %}
    <hr>

    <p>Download individual files:</p>
    <p>Click on files below to download</p>

    <table>
    {% for fs in fileLists %}
    <tbody>
        {% for f in fs %}
        <tr>
            <td>
                <a href="{% url 'download_original_file' f.id %}">
                    <div>
                        {{ f.name }}
                        <span style="margin-left:20px; text-decoration:none"> {{ f.size|filesizeformat }}</span>
                        <span class="download">Download</span>
                    </div>
                </a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
    {% endfor %}
</table>
    {% endif %}

</form>

<h1 class="downloading">Preparing zip for download...</h1>
<h1 class="downloading">Please <a href="#" onClick="window.close()">close this window</a> once the download is complete.</h1>
</div>
    

<script>


    $("#downloadForm").on('submit', function(event){
        event.preventDefault();

        var zipName = $("#zipName").val();
        if (zipName && zipName.length > 0) {

            $("#downloadForm").hide();
            $(".downloading").show();
            window.location.href = "{{ url }}&zipname=" + zipName;
        }

        return false;
    });

    $("#zipName").trigger('focus').trigger('select');

    $("#reset").on('click', function(){
        window.close();
    });

</script>

{% endblock %}