{% load static %}{% load sass_tags %}<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      html{
        visibility: hidden;
        opacity: 0;
      }
    </style>
    <link type="text/css" rel="stylesheet" href="{% sass_src 'styles/tubesync.scss' %}" media="screen,projection"/>
    <link rel="icon" href="{% static 'images/favicon.ico' %}" sizes="21x21" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>TubeSync - {% block headtitle %}Synchronize YouTube to your local media server{% endblock %}</title>
  </head>

  <body>

    <header>
      <div class="container">
        <a href="{% url 'sync:dashboard' %}">
          {% include 'tubesync.svg' with width='3rem' height='3rem' %}
          <h1>TubeSync</h1>
        </a>
      </div>
    </header>

    <nav>
      <div class="container">
        <ul>
          <li><a href="{% url 'sync:dashboard' %}"><i class="fas fa-fw fa-th-large"></i><span class="hide-on-med-and-down"> Dashboard</span></a></li>
          <li><a href="{% url 'sync:sources' %}"><i class="fas fa-fw fa-play"></i><span class="hide-on-med-and-down"> Sources</span></a></li>
          <li><a href="{% url 'sync:media' %}"><i class="fas fa-fw fa-film"></i><span class="hide-on-med-and-down"> Media</span></a></li>
          <li><a href="{% url 'sync:tasks' %}"><i class="fas fa-fw fa-clock"></i><span class="hide-on-med-and-down"> Tasks</span></a></li>
          <li><a href="{% url 'sync:logs' %}"><i class="fas fa-fw fa-list"></i><span class="hide-on-med-and-down"> Logs</span></a></li>
        </ul>
      </div>
    </nav>

    <main>
      <div class="container">
        {% block content %}{% endblock %}
      </div>
    </main>

    <footer>
      <div class="container">
        <p>
          <a href="{% url 'sync:dashboard' %}" class="nowrap">{% include 'tubesync.svg' with width='0.8rem' height='0.8rem' %} TubeSync</a>
          is an open source synchronisation tool to automatically download videos from online video platforms. The
          original code under a GPLv3 licence is available at
          <a href="https://github.com/meeb/tubesync" class="nowrap" target="_blank"><i class="fab fa-github"></i> https://github.com/meeb/tubesync</a>.
        </p>
        <p>
          <a href="https://github.com/meeb/tubesync" class="nowrap" target="_blank"><i class="fab fa-github"></i> TubeSync</a> version <strong>{{ app_version }}</strong> with
          <a href="https://yt-dl.org/" class="nowrap" target="_blank"><i class="fas fa-link"></i> youtube-dl</a> version <strong>{{ youtube_dl_version }}</strong> and 
          <a href="https://ffmpeg.org/" class="nowrap" target="_blank"><i class="fas fa-link"></i> FFmpeg</a> version <strong>{{ ffmpeg_version }}</strong>. 
        </p>
      </div>
    </footer>

  </body>

</html>