<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  {% block title %}
    <title>Videobox</title>
  {% endblock %}
  {% include "_meta.html" %}
</head>

{% block body %}
<body>
  <header class="header">
      <div class="header__branding"><a class="btn-icon" aria-label="Home"  data-balloon-pos="right" href="{{ url_for('main.home') }}"><img width="30" height="30" class="btn-logo img-fluid" aria-hidden="true" src="/static/logo.svg" alt=""></a></div>
      <button class="btn-icon" aria-label="Search" data-balloon-pos="right" type="button" onclick="Videobox.openSearchDialog(event)">
        <img width="30" height="30" aria-hidden="true" src="/static/icon-search.svg" alt="">
      </button>
      <a class="btn-icon text-decoration-none" aria-label="Tags" data-balloon-pos="right" href="{{ url_for('main.tag') }}"><img width="30" height="30" aria-hidden="true" src="/static/icon-tag.svg" alt=""></a>
      <a class="btn-icon text-decoration-none" aria-label="Series Updates" data-balloon-pos="right" href="{{ url_for('main.following') }}"><img width="30" height="30" aria-hidden="true" src="/static/icon-heartbeat.svg" alt=""></a>
  </header>
  {% block content %}{% endblock %}
  <dialog id="search-dialog">
    <form class="search-query" action="/search" oninput="Videobox.suggest()" method="GET">
      <label class="sr-only" for="search-query">Search Series</label>
      <input list="search-suggestions" required autocomplete="off" spellcheck="false" id="search-query" type="text" size="20" maxlength="100" name="query" value="{{search_query}}" placeholder="Type a series name, keyword, or torrent info hash" />
      <button type="submit"><img class="icon" src="/static/icon-search.svg" alt=""></button>
    </form>
    <datalist id="search-suggestions"></datalist>
  </dialog>
  <dialog id="release-dialog"></dialog>  
</body>
{% endblock %}
</html>