{% extends "base.html" %}

{% 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>
      <h1 class="text-xlg font-weight-black mb-4">{{series.name}}
      </h1>
      <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 %}
        <!-- Languges  -->
        <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>
          <!-- <div class="d-flex" style="gap: .5rem"> -->
            {% 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> -->
        </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="filter" class="d-flex align-items-end mb-5" onchange="this.submit()" action="{{ url_for('main.series_detail', series_id=series.id) }}" style="gap: 1rem" 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">
      <div class="radio-button-group">
        <label class="radio-button-group__label"><img aria-hidden="true" class="icon" src="/static/icon-sort-asc.svg"
            width="20" height="20" alt="">
          <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"><img aria-hidden="true" class="icon" src="/static/icon-sort-desc.svg"
          width="20" height="20" alt="">
          <input class="radio-button-group__input" type="radio" {{ 'checked' if episode_sorting=='desc' else '' }}
            name="episode" value="desc">
        </label>
      </div>
    </fieldset>    
    <fieldset class="">
      <div class="radio-button-group">
        <label class="radio-button-group__label"><img aria-hidden="true" class="icon" src="/static/icon-grid.svg"
            width="20" height="20" alt="">
          <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"><img aria-hidden="true" class="icon" src="/static/icon-list.svg"
          width="20" height="20" alt="">
          <input class="radio-button-group__input" type="radio" {{ 'checked' if view_layout=='list' else '' }}
            name="view" value="list">
        </label>
      </div>
    </fieldset>
  </form>
  
  {% if view_layout == 'list' %}
    {% include "_episodes-list.html" %}
  {% else %}
    {% include "_episodes-grid.html" %}
  {% endif %}
</main>
{% endblock %}