{% load sekizai_tags static humanize i18n %}

{% for download in downloads %}
    <div class="download-container" id="download-{{ download.download_key }}" data-url="{{ download.url }}" data-filepath="{{ download.filepath }}"
        {% if download.errors %}data-toggle="tooltip" data-placement="bottom" title="{{ download.errors }}"{% endif %}>
        <div class="download-content {{ download.css_class }}">
            <div class="download">
                <span class="download-name">{{ download.name }}</span>
                <span class="download-timestamp" value="{{ download.timestamp }}">{{ download.timestamp|naturaltime }}</span>
            </div>
            <span class="download-clear"><i class="fa fa-times-circle"></i></span>

            <div class="progress" style="height: 4px;">
                <div class="progress-bar progress-bar-striped
                    {% if download.errors %}bg-danger{% elif download.complete %}bg-success{% else %}bg-info progress-bar-animated{% endif %}" role="progressbar"
                    style="width: {{ download.percentage }}%" aria-valuenow="{{ download.percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
{% empty %}
    <a class="dropdown-item" href="">{% trans "No downloads" %}</a>
{% endfor %}

{% block js %}
    <script>
        $(".download-name").on("click", function () {
            let $dl = $(this).closest(".download-container");
            if ($dl.find(".progress-bar").hasClass("bg-success")) {
                window.location.href = $dl.data("url");
            }
        });
        $("#async-downloads [data-toggle='tooltip']").tooltip();
    </script>
{% endblock %}
