<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Eco</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Header js-->
    <script src="inc/js/header.js?v=1"></script>
    <script src="inc/js/bluebird.min.js"></script>

    <!-- Jquery -->
    <script src="inc/js/jquery/jquery-latest.min.js"></script>
    <script src="inc/js/jquery/jquery-ui.js"></script>
    <link rel="stylesheet" href="inc/css/jquery/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="inc/css/range.css">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="inc/css/loader.css">
</head>

<body>

<!-- LOADING -->
<div id="loader">
    <div id="circleG">
        <div id="circleG_1" class="circleG"></div>
        <div id="circleG_2" class="circleG"></div>
        <div id="circleG_3" class="circleG"></div>
    </div>
</div>

<script>
    // Wait for window load
    $("#loader-text").fadeIn();
    
    $(window).load(function () {
        const isIE = /*@cc_on!@*/false || !!document.documentMode;

        if (isIE) {
            $("#wrapper").remove();
            $("#loader-text").html("Internet Explorer is not supported, please try another browser.");
        } else {
            $("#loader").fadeOut();
        }
    });
</script>

<div id="wrapper">
    <!-- HEADER -->
    <div id="header-scripts"></div>

    <script>
        var currentPage = 'profiling-results';

        // Global Header
        $.get("header.html", data => {
            $(data).prependTo("#header-scripts");
        });
    </script>

    <script src="inc/js/jsRender/jsrender.js"></script>
    <script>
        // Get auth information.
        const authtoken = localStorage.getItem("authtoken");
        const authtokentype = localStorage.getItem("authtokentype");
        
        // When document has been loaded, query for results using the auth data and render results.
        $(function() {
            $.ajax({
                url: APPIQUERYURL + '/api/v1/profiling-results?authtoken=' + authtoken+'&authtokentype='+authtokentype,
                type: 'GET',
                contentType: 'application/json',
                success: data => {
                    var html = $("#profiling-results-template").render(data.map(prepareProfilingResultForTemplate), { authtoken, authtokentype });
                    $('#profiling-results-data').html(html);
                },
                error: err => {
                    window.variables.showError(err)
                }
            });
        });
        
        // Adds encoded name to result entry.
        const prepareProfilingResultForTemplate = (result) => ({...result, EncodedName: encodeURIComponent(result.Name), CreatedAt: new Date(result.CreatedAt).toLocaleString()});
    </script>

    <!-- CONTENT -->
    <div id="page-wrapper">
        <canvas id="c"></canvas>
        <h4 id="status" class="error"></h4>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Profiling results</h1>
                    
                    <ul id="profiling-results-data"></ul>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- FOOTER -->
<div id="footer-scripts"></div>
<script>
    $(window).load(function () {

        // Global Footer
        $.get("footer.html", function (data) {
            $(data).prependTo("#footer-scripts");
        });
    });
</script>

<script id="profiling-results-template" type="text/x-jsrender">
    <li><a href="/api/v1/profiling-results/{{:EncodedName}}?authtoken={{:~authtoken}}&authtokentype={{:~authtokentype}}">{{:Name}} ({{:Size}} bytes)</a> Created at: {{:CreatedAt}}</li>
</script>

<script src="inc/bootstrap/js/popper.min.js"></script>
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });

    $('body').tooltip({selector: '[data-toggle=tooltip]'});
</script>
</body>
</html>