{% 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_start(form) }}

          <ul class="navbar-nav">
            <li class="nav-item">
              {{ form_label(form.date, 'Vyberte datum') }}
              {{
                form_widget(form.date,
                {
                  'type' : 'date',
                  'id' : 'date',
                  'attr' : {
                    'class' : 'form-control',                 
                    'onChange' : 'checkDataSetsAvailability("' ~ path('available') ~ '")'
                  }
                })
              }}
            </li>

            <li class="nav-item">
              {{ form_label(form.date, 'Vyberte čas') }}
              {{
                form_widget(form.time, {
                  'attr' : {
                    'class' : "custom-select"
                  }
                })
              }}             
            </li>

            <li class="nav-item">
              {{ form_label(form.date, 'Vybrané datové sady') }}
              {{
                form_widget(form.type, {
                  'id' : 'types',
                  'attr' : {
                    'class' : "custom-select"                 
                  }
                })
              }}  
            </li>

            <li class="nav-item">
              {{
                form_widget(form.submit,
                {
                  'label' : 'Potvrdit výběr',
                  'type' : 'submit',
                  'attr' : {
                    'class': 'btn btn-secondary'
                  }
                })
              }}
            </li>

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

      </div>

      <a href="{{ path('home') }}" class="navbar-button">
        <h2>
          O&nbsp;projektu
        </h2>
      </a>
    </nav>
  </header>

  <div class="map-locations">
    <a class="menu" data-toggle="collapse" href="#mapLocations" role="button" aria-expanded="false" aria-controls="mapLocations">
      Prohlédněte si jednotlivé oblasti
      <div class="circle"></div>
    </a>
    <div class="locations collapse show" id="mapLocations">
      <ul>
        <li onclick="setMapView()">Kampus ZČU</li>
        <li onclick="setMapView(49.7489485, 13.3757721, 19)">FF &ndash; Filozofická fakulta</li>
        <li onclick="setMapView(49.7367263, 13.3709177, 19)">FPE &ndash; Pedagogická fakulta</li>
        <li onclick="setMapView(49.7471633, 13.3739511, 19)">FPR &ndash; Právnická fakulta</li>
        <li onclick="setMapView(49.7450169, 13.3702668, 19)">FZS &ndash; Fakulta zdravotnických studií</li>
        <li onclick="setMapView(49.7236785, 13.3353118, 18)">NTC &ndash; výzkumné centrum</li>
        <li onclick="setMapView(49.7345564, 13.3585038, 19)">Koleje Borská</li>
        <li onclick="setMapView(49.7250373, 13.3696772, 19)">Koleje Bory</li>
        <li onclick="setMapView(49.7600000, 13.3723463, 19)">Koleje Lochotín</li>
      </ul>
    </div>
  </div>

  <div class="player">
    <div class="prev" onclick="changeTime('prev')"></div>
    <div class="play" onclick="animateTimeline()"></div>
    <div class="next" onclick="changeTime('next')"></div>

    <div class="timeline">
      <div class="time hour-0" id="time">0:00</div>

      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="hour"></div>
      <div class="end-dot"></div>
    </div>
  </div>

  <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 %}