{% load flatblocks %}
<!DOCTYPE html>
<html data-ng-app="adaptivePractice" data-ng-controller="AppCtrl" lang="cs">
  <head>
    <meta charset="utf-8">
    <title ng-bind="title" ng-init="initTitle('{{ title }}')">{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{% flatblock "meta_description" using "inline.html" %}"/>
    <meta name="keywords" content="{% flatblock "meta_keywords" using "inline.html" %}" />
    <link rel="shortcut icon" type="image/png" href="/favicon.ico"/>

    <!-- Le styles -->
    <style>
        {% include "above-fold-bootstrap.css" %}
        {% include above_fold_styles %}
    </style>

    <base href="/">
  </head>

  <body data-spy="scroll" data-target=".bs-docs-sidebar">
  <div class="row">
  <div id="wrap" class="material-whiteframe-z5">
    <!-- Navbar
    ================================================== -->
    <div class="left-bar">
      <md-toolbar class="material-theme-dark">
          <span class="pull-left ng-cloak">
            <span ng-if="isHomepage">
              <span ng-show="false" dynamic-title='{% flatblock "title" using "inline.html" %}'></span>
            </span>
            <span ng-show="isHomepage" class="dropdown">
              <a href="" id="dropdownMenu1">
                <i class="glyphicon glyphicon-th-list dropdown-toggle"> </i>
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li class="visible-xs-block">
                  <a href="#/how-it-works" >Jak to funguje</a>
                </li>
              </ul>
            </span>
            <a href="" onclick="history.back()" ng-hide="isHomepage">
              <i class="glyphicon glyphicon-chevron-left ng-cloak"></i>
            </a>
          </span>
          <span class="pull-right ng-cloak">
            <i class="dropdown pull-right" ng-if="!user.username" >
              <a href=""
                 class="atooltip drop-login"
                 title="Přihlašte se jednoduše přes Google nebo Facebook, aby si systém váše znalosti pamatoval i příště."
                 login-button
                 container="body">
                 <i class="glyphicon glyphicon-log-in"></i>
              </a>
            </i>
            <i class="dropdown pull-right" ng-show="user.username"
                ng-init='initUser({{userJson | safe }})'>
              <a id="drop1" href="" role="button" class="dropdown-toggle" >
                 <i class="glyphicon glyphicon-user"></i>
               </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                <li class="dropdown-header">
                  <span ng-bind="user.username"></span>
                </li>
                <li class="forgot-pwd"><a href="#/" ng-click="logout()"><i class="glyphicon glyphicon-log-out"></i> Odhlásit se</a></li>
              </ul>
            </i>
          </span>
          <a class="navbar-brand visible-xs ng-cloak" href="#" dynamic-title ></a>
          <a class="navbar-brand hidden-xs ng-cloak" href="#"> {% flatblock "title" using "inline.html" %}</a>
      </md-toolbar>
        <div>
          <a href="#/practice/" class="btn btn-default btn-menu" >
            Procvičovat
          </a>
          <a href="#/test/" class="btn btn-default btn-menu">
            Test
          </a>
        </div>
      <ul class="main-nav">
        <li>
          <a class="menu-item"
            href="#/view/">
           {% flatblock "main_category" %}
          </a>
        </li>
        {% for category in categories %}
        <li>
          <a class="menu-item submenu-item"
            ng-class="{{category.id}}|isActive"
            title="{{category.name}}"
            href="#/view/{{category.id}}">
              {{category.name}}
          </a>
        </li>
        {% endfor %}
      </ul>
    </div>

    <div id="footer">
      <a href="https://vpsfree.cz/" title="vpsFree hostuje tento web">
        <img id="imgVPS" alt="vpsFree" src="/static/img/vpsfree-logo.png" style="height: 30px">
      </a>
<!--
      <a href="#/about">O projektu</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
      <span class="email contact">autoskolachytre{zavinac}googlegroups.com</span>
    -->
      <a class="contact-google" href="{% flatblock "google_plus_page_url" using "inline.html" %}">Google+</a>
      <a class="contact-facebook" href="{% flatblock "facebook_page_url" using "inline.html" %}">Facebook</a>
    </div>
  </div>

    <div class="homepage hidden-xs">
      <!--[if lte IE 8]>
      <div class="alert alert-danger old-browser">
        Používáte <b>zastaralou verzi prohlížeče</b>, ve které aplikace
        <b>nemusí fungovat správně</b>.
        Pro optimální fungování aplikace doporučujeme nainstalovat
        aktuální verzi některého z běžně používaných prohlížečů.
        Například:
        <a href="https://www.google.com/intl/cs/chrome/browser/">Google Chrome</a>,
        <a href="http://www.mozilla.org/cs/firefox/new/">Firefox</a>,
        <a href="http://windows.microsoft.com/cs-CZ/internet-explorer/download-ie">
            Internet explorer
        </a>
      </div>
      <![endif]-->
      <div class="welcome-page jumbotron">
          <h1 > {% flatblock "title" %} </h1>
          <div class="flatblock block-welcome_page col-md-offset-1 col-md-10 col-lg-offset-3 col-lg-6">
           {% flatblock "subtitle" %}
            <div class="col-centered">
              <a href="#/practice/" class="btn btn-default btn-lg btn-huge" >
                Začít procvičovat
              </a>
            </div>
            <!--
            <div class="plugins-social">
              <div class="g-plusone" data-size="medium"></div>
              <div class="fb-like" data-href="https://www.facebook.com/slepemapy" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
            </div>
        -->
          </div>
      </div>
      <div  ng-show="isHomepage">
        {% include "how-it-works.html" %}
      </div>
    </div>
  </div>

    <div feedback id="feedback">
      <a href="" class="btn btn-primary" ng-click="openFeedback()"> Napište nám </a>
    </div>

    <div data-ng-view id="ng-view" class="card ng-cloak {{pageClass}}">
    </div>

    <script type="text/ng-template" id="loading.html">
      <div class="loading-indicator"></div>
    </script>
    <script type="text/ng-template" id="how-it-works.html">
        {% include "how-it-works.html" %}
    </script>
    <script type="text/ng-template" id="test_description.html">
        {% flatblock "test_description" %}
    </script>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    {% for file in js_files %}
    <script src="{{ file }}"></script>
    {% endfor %}

    {% for file in css_files %}
    <link href="{{ file }}" rel="stylesheet">
    {% endfor %}

    {% if isProduction  %}
        <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

          ga('create', '{%spaceless %}
            {% flatblock "google_analytics_id" using "inline.html" %}
            {% endspaceless %}', 'auto');


        </script>
    {% endif %}
  </body>
</html>

