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


{% block body %}

  <header>
    <div class="logo">
      <a href="{{ path('home') }}">
        <img src="{{ asset('img/logo.svg') }}" alt="Logo Západočeské univerzity v Plzni">
      </a>
    </div>

    <nav class="navbar navbar-expand-lg">
      <a href="{{ path('heatmap') }}" class="navbar-brand shifted">
        <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">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <h2>
              <a href="#" onclick="swiper.slideTo(1)" class="nav-link active" id="slide-nav-1" data-toggle="collapse" data-target=".navbar-collapse.show">Život na ZČU během dne</a>
            </h2>
          </li>
          <li class="nav-item">
            <h2>
              <a href="#" onclick="swiper.slideTo(2)" class="nav-link" id="slide-nav-2" data-toggle="collapse" data-target=".navbar-collapse.show">Hledání anomálií</a>
            </h2>
          </li>
          <li class="nav-item">
            <h2>
              <a href="#" onclick="swiper.slideTo(3)" class="nav-link" id="slide-nav-3" data-toggle="collapse" data-target=".navbar-collapse.show">O&nbsp;projektu</a>
            </h2>
          </li>
          <li class="nav-item button">
            <h2>
              <a href="{{ path('heatmap') }}" class="nav-link">Zobrazit heatmapu</a>
            </h2>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide-bg-1">
        <div class="container">
          <div class="slide-text">
            <span class="slide-index">01</span>
            <h3>Život na ZČU během dne</h3>
            <hr>
            <p>Zobrazte si heatmapu života univerzity hodinu po hodině během jednoho dne. Od ranního probouzení, kdy studenti a&nbsp;zaměstnanci přicházejí do laboratoří, po polední špičku v&nbsp;menze až do samotného večera, kdy končí poslední z&nbsp;přednášek a&nbsp;cvičení.</p>
            <a href="{{ path('heatmap') }}" class="btn btn-primary" role="button">Vyzkoušet heatmapu</a>

            <div class="map-point point-1">
              <div class="desc">
                <div class="circle"></div>
                <strong>Menza</strong>
                <p>Polední špička v menze.</p>
              </div>
            </div>

            <div class="map-point point-2">
              <div class="desc">
                <div class="circle"></div>
                <strong>Knihovna</strong>
                <p>Množství lidí v knihovně ukazuje, že se jedná o&nbsp;jedno z nejpopulárnějších míst na univerzitě.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="swiper-slide slide-bg-2">
        <div class="container">
          <div class="slide-text">
            <span class="slide-index">02</span>
            <h3>Hledání anomálií</h3>
            <hr>
            <p>Z&nbsp;heatmapy si může uživatel na základě vlastního prozkoumávání vyvodit i&nbsp;různé anomálie. Stačí si jen zvolit konkrétní datum a&nbsp;čas, pro který chcete data zobrazit. Můžete tak narazit například na pohyb po kampusu v&nbsp;nočních hodinách, návraty na studentské koleje v&nbsp;brzkých, ranních hodinách&hellip;</p>
            <a href="{{ path('heatmap') }}" class="btn btn-primary" role="button">Vyzkoušet heatmapu</a>

            <div class="map-point point-3">
              <div class="desc">
                <div class="circle"></div>
                <strong>Podivný pohyb studentů</strong>
                <p>Po středečním večeru bylo zaznamenáno relativně hodně vstupů na kolej kolem 4:00 ráno.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="swiper-slide slide-bg-3">
        <div class="container">
          <div class="slide-text">
            <span class="slide-index">03</span>
            <h3>O&nbsp;projektu</h3>
            <hr>
            <p>Západočeská univerzita v&nbsp;Plzni poskytuje sadu několika opendat (otevřených datových sad). Studenti se v&nbsp;rámci vlastního projektu rozhodli některé z&nbsp;těchto datových sad využít, zpracovat a&nbsp;data získaná z&nbsp;připojení k&nbsp;drátové a&nbsp;bezdrátové univezitní síti, snímačích JIS karet a&nbsp;data o&nbsp;zapůjčování univerzitních koloběžek vynést do mapového podkladu formou heatmapy.</p>
            <p>Uživatel si tak může na zveřejněné mapě zobrazit den po dni, hodinu po hodině a&nbsp;nahlédnout na univerzitní kampus jako na jeden velký organismus. Kromě kampusu jsou některá z&nbsp;dat k&nbsp;dispozici i&nbsp;u&nbsp;studentských kolejí.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="slide-background"></div>

    <div class="swiper-pagination"></div>

    <div class="swiper-pagination-buttons">
      <a href="#" onclick="swiper.slidePrev()" class="btn btn-secondary btn-prev"></a>
      <a href="#" onclick="swiper.slideNext()" class="btn btn-secondary btn-next"></a>
    </div>
  </div>

{% endblock %}
{% block javascripts %}

  <script src="{{ asset('js/swiper.min.js') }}"></script>
  <script>
    const swiper = new Swiper('.swiper-container', {
      calculateHeight: true,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
      },
      on: {
        slideChange: function() {
          let elms = document.querySelectorAll('.nav-link');

          for (let i = 1; i < elms.length; i++) {
            document.getElementById('slide-nav-' + i).className = 'nav-link' + ((this.realIndex === i - 1) ? ' active' : '');
          }
        }
      }
    });
  </script>
  <script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
  <script src="{{ asset('js/bootstrap.min.js') }}"></script>

{% endblock %}