{% extends "base.html" %}
{% import "macros.html" as macros %}

{% block title %}
<title>{{series.name}} • Videobox</title>
{% endblock %}

{% block content %}
<main id="main">
  <section class="d-md-flex align-items-center fanart border-bottom mb-5" style="gap: 3.5rem; background-image: url({{series.fanart_url}})">
    <aside class="d-none d-md-block">
      <!-- Desktop only -->
      <div class="series-poster">
        <img class="series-poster__image img-fluid rounded" loading="lazy"
          src="{{ series.poster }}" width="680" height="1000"
          alt="Poster for {{ series.name }}" />
      </div>
    </aside>
    <div class="main-column">
      <h2 class="text-sm text-muted text-uppercase mb-2">{{series.network|networks}}</h2>
      <div class="mb-4">
        <h1 class="text-xlg font-weight-black">{{series.name}}
        </h1>
        {% if series.original_name != series.name %}
          <div class="text-muted font-style-italic">{{series.original_name}}</div>
        {% endif %}
      </div>
      <div class="d-flex align-items-top mb-4" style="gap: 1rem">
        {% if series.vote_average|int > 0 %}
        <div class="pr-3 border-right">
          <h3 class="text-sm text-muted font-weight-semibold text-uppercase mb-2">Score</h3>
          <span style="font-size: 1.5rem"
            class="font-weight-black line-height-1">{{(series.vote_average*10)|int}}</span>%
        </div>
        {% endif %}
        <!-- Languages  -->
        <div class="pr-3 border-right">
          <h3 class="text-sm text-muted font-weight-semibold text-uppercase mb-2">Language</h3>
          <a class="badge--outline text-sm" href="{{ url_for( 'main.language_detail', code=series.language) }}">{{
            series.language|lang }}</a>
        </div>
        <!-- Genres -->
        {% if series_tags %}
        <div>
          <h3 class="text-sm text-muted font-weight-semibold text-uppercase mb-2">Genres</h3>
            {% for tag in series_tags %}
            <a class="badge--outline text-sm mr-1" href="{{ url_for( 'main.tag_detail', slug=tag.slug) }}">{{tag.name}}</a>
            {% endfor %}
        </div>
        {% endif %}
      </div>

      <!-- Mobile only -->
      <div class="series-poster d-md-none mr-3" style="float: left">
        <img class="series-poster__image img-fluid rounded" loading="lazy"
          src="{{ series.poster }}" width="120"
          height="250" alt="Poster for {{ series.name }}" />
      </div>

      <p class="series-overview mb-4">
        {% if series.overview %}
          {{series.overview}}<br>
        {% endif%}   
        <a target="_blank" title="Find out more on The Movie DB" rel="noreferrer"
          href="{{series.tmdb_url}}">&#x2197;&nbsp;TMDB</a>
        {% if series.imdb_id %}
        &ensp;<a target="_blank" title="Find out more on IMDb" rel="noreferrer"
          href="{{series.imdb_url}}">&#x2197;&nbsp;IMDb</a>
        {% endif%}        
      </p>

      <!-- Toggle follow -->
      <div class="">
        {% include "_follow-button.html" %}
      </div>      
    </div> <!-- /main-column -->
  </section>

  <form id="form-filters" class="filters-bar d-flex align-items-end pb-2 mb-2" onchange="Videobox.filterSeries(this, event)" action="{{ url_for('main.series_detail', series_id=series.id) }}" method="GET">
    <fieldset class="pr-3">
      <legend class="mb-2">Video Resolution</legend>
      <select id="resolution" name="resolution">
        {% for key, label in resolution_options.items() %}
        <option value="{{key}}" {{ "selected" if resolution==key else "" }}>{{label}}</option>
        {% endfor %}
      </select>
    </fieldset>
    <fieldset>
      <legend class="mb-2">File Size</legend>
      <select id="size" name="size">
        {% for key, label in size_options.items() %}
        <option value="{{key}}" {{ "selected" if size==key else "" }}>{{label}}</option>
        {% endfor %}
      </select>
    </fieldset>    
    <fieldset class="ml-auto">
      <legend class="mb-2">Sort by</legend>
      <div class="radio-button-group">
        <label class="radio-button-group__label" title="Episode number, ascending">{{macros.icon("#icon-sort-asc", width=20, height=20)}}
          <input class="radio-button-group__input" type="radio" {{ 'checked' if episode_sorting=='asc' else '' }}
            name="episode" value="asc">
        </label>
        <label class="radio-button-group__label" title="Episode number, descending">{{macros.icon("#icon-sort-desc", width=20, height=20)}}
          <input class="radio-button-group__input" type="radio" {{ 'checked' if episode_sorting=='desc' else '' }}
            name="episode" value="desc">
        </label>
      </div>
    </fieldset>    
    <fieldset>
      <legend class="mb-2">View</legend>
      <div class="radio-button-group">
        <label class="radio-button-group__label" title="View episodes as grid">{{macros.icon("#icon-grid", width=20, height=20)}}
          <input class="radio-button-group__input" type="radio" {{ 'checked' if view_layout=='grid' else '' }}
            name="view" value="grid">
        </label>
        <label class="radio-button-group__label" title="View episodes as list">{{macros.icon("#icon-list", width=20, height=20)}}
          <input class="radio-button-group__input" type="radio" {{ 'checked' if view_layout=='list' else '' }}
            name="view" value="list">
        </label>
      </div>
    </fieldset>
  </form>    


  <div class="episode-wrapper">
    {% include "_episodes.html" %}
  </div>
</main>
{% if torrent_running %}
  <script>
    window.addEventListener("DOMContentLoaded", () => {
      Videobox.trackDownloadProgress(Videobox.updateSeriesPage)
    })
  </script>
{% endif %}
{% endblock %}