<style>
    .progress.loop {
        position: relative;
        background-color: transparent;
        border-radius: 0;
        font-size: inherit;
        height: 2em;
        margin: 0.35em 0;
        max-height: .583333rem;
        min-height: .166667rem;
        overflow: hidden;
        display: block;
    }

    .progress.loop::after {
        -webkit-animation: 2s ease-in-out infinite progress-looper;
        animation: 2s ease-in-out infinite progress-looper;
        content: " ";
        top: 0;
        bottom: 0;
        left: 0;
        position: absolute;
        display: block;
        background-color: #007cbb;
        width: 75%;
    }

    body.dark-theme #evaluate-loader {
        color: black;
    }

    body.dark-theme #evaluate-loader h3 {
        color: black;
    }

    @keyframes progress-looper{0%{left:-100%}to{left:100%}}
</style>

<script id="report-evaluate-loader" type="text/x-mustache-template">
    <div id="evaluate-loader">
        <div class="msg-tile msg-tile-primary">
            <div class="msg-tile-header">
                <c:url var="uploadUrl" value="/assets/core/images/facelift/msgs_msg-uploading.svg"/>
                <img alt="" src="${uploadUrl}">
            </div>
            <div class="msg-tile-content">
                <h3><mvc:message code="report.data"/></h3>
            </div>
            <div class="progress-wrapper form-group">
                <div class="progress loop col-sm-8"></div>
                <div class="value col-sm-4 text-right"><strong>0 bytes</strong></div>
            </div>
        </div>
    </div>
</script>

<script>
    AGN.Lib.Action.new({'click': '#reportEvaluateBtn'}, function() {
        const el = this.el;
        const url = el.prop('href');
        const params = el.is('[data-form-target]') ? AGN.Lib.Form.get($(el.data('form-target'))).params() : '';
        const d = $.Deferred();

        $.ajax({
            beforeSend: function() {
                var $mainContent = $("#main-content");
                const $evaluateLoader = AGN.Lib.Template.dom('report-evaluate-loader');

                $("nav.sub-navigation").hide();
                $mainContent.hide();
                $evaluateLoader.insertAfter($mainContent);
            },
            xhr: function() {
                var xhr = new window.XMLHttpRequest();

                xhr.onprogress = function(event) {
                    $("#evaluate-loader .progress-wrapper .value").html("<strong>" + event.loaded + " bytes </strong>");
                };

                return xhr;
            },

            url: url,
            type: 'POST',
            data: params
        }).done(function(data) {
            d.resolve();
            return AGN.Lib.Page.render(data);
        }).fail(function(data) {
            d.reject();
            return AGN.Lib.Page.render(data);
        });

        return d.promise()
    });
</script>
