{# This template based on Jinja markup language: http://jinja.pocoo.org/docs/dev/templates/ #}
<!DOCTYPE html>
<html>

<head>
    <title>{{ title }}</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">google.charts.load('current', {'packages': ['corechart']});</script>
    <style type="text/css">
    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #FFFFFF;
        z-index: 99;
    }
    #status {
        width: 300px;
        height: 150px;
        position: absolute;
        left: 50%;
        top: 50%;
        background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
        background-repeat: no-repeat;
        background-position: left;
        margin: -100px 0 0 -100px;
        font-family: "Segoe UI", "Frutiger", "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", "Arial", sans-serif;
        font-size: 14px;
    }
    pre {
        font-family: "Lucida Console", sans-serif;
        font-size: 11px;
        padding: 0;
        border-width: 0 0 0 0;
    }
    table {
        font-family: "Segoe UI", "Frutiger", "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", "Arial", sans-serif;
        font-size: 12px;
        border-spacing: 0;
        text-align: left;
        background: white;
        width: 100%;
    }
    th {
        border-radius: 10px 10px 10px 10px;
        border-style: solid;
        border-width: 0 1px 1px 0;
        border-color: white;
        padding: 6px;
        vertical-align: middle;
        padding-left: 1em;
        background: #E6E6E6;
        height: 50px;
    }
    td {
        border-radius: 10px 10px 10px 10px;
        border-style: solid;
        border-width: 0 1px 1px 0;
        border-color: white;
        padding: 6px;
        vertical-align: top;
        padding-left: 1em;
        background: white;
    }
    </style>
    <script>
    function drawChartCandlesticks(candlesData) {
        var chartOptions = {
            legend: "none",
            titlePosition: "in",
            chartArea: {width: "100%", height: "100%"},
            fontSize: 11,
            candlestick: {
                fallingColor: {stroke: "#000000", strokeWidth: 1, fill: "#999999"},
                risingColor: {stroke: "#000000",  strokeWidth: 1, fill: "#FFFFFF"},
            },
            colors: ["#000000"],
            hAxis: {textPosition: "none"},
            vAxis: {textPosition: "in", textStyle: {fontSize: 12}},
        }
        if (typeof candlesData !== "undefined") {
            var data = google.visualization.arrayToDataTable(candlesData, true);
            var chart = new google.visualization.CandlestickChart(document.getElementById("candlestickChart"));
            chart.draw(data, chartOptions);
        }
    }
    </script>
</head>


<body onload="drawChartCandlesticks({{ candlesData }})">


<!-- Preloader -->
<script>
    $(window).on('load', function() {
        $('#status').fadeOut('slow');
        $('#preloader').fadeOut('slow');
    })
</script>
<div id="preloader">
    <div id="status">Wait...</div>
</div>


<!-- Chart part -->

<table id="chart">
    <tr>
        <th style="width: 75%;">
            <b>{{ title }}</b>
        </th>
        <th>
            <b>Info</b>
        </th>
    </tr>
    <tr>
        <td>
            <div id="candlestickChart" style="height: 800px; width: 100%;"></div>
        </td>
        <td>
            {% for line in info %}
                <pre>{{ line }}</pre>
            {% endfor %}
        </td>
    </tr>
</table>


<!-- Footer -->

<table>
    <tr>
        <th><b>Generated by <a href="https://github.com/Tim55667757/PriceGenerator">PriceGenerator</a></b></th>
    </tr>
</table>


</body>

</html>
