{% extends 'base.html.twig' %}
  
{% block title %} Heatmap.ZČU {% endblock %}
{% block stylesheets %}
  <link rel="stylesheet" href="{{ asset('css/leaflet.css') }}" />
  <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
  <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
{% endblock %}


{% block body %}

  <header class="map">
    <nav class="navbar navbar-expand-lg">
      <a href="{{ path('heatmap') }}" class="navbar-brand">
        <h1>Heatmap.ZČU</h1>
      </a>

      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navigation">
        <form method="get" class="ml-auto">
          <ul class="navbar-nav">
            <li class="nav-item">
              <label for="date">Vyberte datum</label>
              <input type="date" name="date" id="date" class="form-control" required>
            </li>

            <li class="nav-item">
              <label for="hour">Vyberte čas</label>
              <select name="hour" id="hour" class="custom-select">
                <option value="0">0:00&ndash;1:00</option>
                <option value="1">1:00&ndash;2:00</option>
                <option value="2">2:00&ndash;3:00</option>
                <option value="3">3:00&ndash;4:00</option>
                <option value="4">4:00&ndash;5:00</option>
                <option value="5">5:00&ndash;6:00</option>
                <option value="6">6:00&ndash;7:00</option>
                <option value="7">7:00&ndash;8:00</option>
                <option value="8">8:00&ndash;9:00</option>
                <option value="9">9:00&ndash;10:00</option>
                <option value="10">10:00&ndash;11:00</option>
                <option value="11">11:00&ndash;12:00</option>
                <option value="12">12:00&ndash;13:00</option>
                <option value="13">13:00&ndash;14:00</option>
                <option value="14">14:00&ndash;15:00</option>
                <option value="15">15:00&ndash;16:00</option>
                <option value="16">16:00&ndash;17:00</option>
                <option value="17">17:00&ndash;18:00</option>
                <option value="18">18:00&ndash;19:00</option>
                <option value="19">19:00&ndash;20:00</option>
                <option value="20">20:00&ndash;21:00</option>
                <option value="21">21:00&ndash;22:00</option>
                <option value="22">22:00&ndash;23:00</option>
                <option value="23">23:00&ndash;0:00</option>
              </select>
            </li>

            <li class="nav-item">
              <label for="dataset">Vybrané datové sady</label>
              <select name="dataset" id="dataset" class="custom-select">
                <option value="scoobikes">koloběžky</option>
              </select>
            </li>

            <li class="nav-item">
              <button class="btn btn-secondary" type="submit">
                Potvrdit výběr
              </button>
            </li>

            <li class="nav-item button">
              <h2>
                <a href="{{ path('home') }}" class="nav-link">O&nbsp;projektu</a>
              </h2>
            </li>
          </ul>
        </form>
      </div>
    </nav>
  </header>

  <div id="heatmap"></div>
  
{% endblock %}

{% block javascripts %}

    <script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/leaflet.js') }}"></script>
    <script src="{{ asset('js/leaflet-heat.js') }}"></script>
    <script src="{{ asset('js/zcu-heatmap.js') }}"></script>
    <script>

       initMap();
       showHeatmap("{{ path('opendata', {'collectionName':'open-data-db.KOLOBEZKY31102018'}) }}");

    </script>

{% endblock %}