{% load static %}
<!doctype html>

<html lang="en">
<head>
    <title>Analytics</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link href='https://fonts.googleapis.com/css?family=Work+Sans'
      rel='stylesheet' type='text/css'>
    <link href="{% static 'track/track.css' %}" rel="stylesheet" type='text/css'>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

<body>
    <header>
        <a href="?day={{ yesterday.year }}-{{ yesterday.month }}-{{ yesterday.day }}">&#8592;</a>
        <div class="header-text">{{ date|date:"j F, Y" }}</div>
        <a href="?day={{ tomorrow.year }}-{{ tomorrow.month }}-{{ tomorrow.day }}">&#8594;</a>
    </header>

    <div class="dateholder"><div id="datepicker"></div></div>

    <main>

        <section class="hit-count"></section>

        <section class="histograms">
        </section>

        <section>
            <div id="visits-chart"></div>
            <div class="controls">
                <select id="chartIntervalSelector">
                    <option value="15">15 minutes</option>
                    <option value="20">20 minutes</option>
                    <option value="30" selected>30 minutes</option>
                    <option value="60">1 hour</option>
                </select>
                <button id="clearSecondSeries" class="invisible">Clear Selection</button>
            </div>
        </section>

        <section class="all-hits">
            <table id="allHitsTable">
                <tr>
                    <th>Time</th>
                    <th>Path</th>
                    <th>City</th>
                    <th>Source</th>
                </tr>
            </table>
        </section>
    </main>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="{% static 'track/track.js' %}"></script>
    <script>var visits = {{ data|safe }}; var today = "{{ date }}"</script>

</body>

</html>
