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

    <div class="app">

      <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="far fa-fw fa-clock"></i><span class="hide-on-med-and-down"> Tasks</span></a></li>
            <li><a href="{% url 'sync:mediaservers' %}"><i class="fas fa-fw fa-stream"></i><span class="hide-on-med-and-down"> Media Servers</span></a></li>
          </ul>
        </div>
      </nav>

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

    </div>

    <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. &copy; {% now 'Y' %} TubeSync developers.
          The original code under a <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank">GPLv3 licence</a> 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://github.com/yt-dlp/yt-dlp" class="nowrap" target="_blank"><i class="fas fa-link"></i> yt-dlp</a> version <strong>{{ yt_dlp_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>
