{% macro render_series_timeline(series) %}
  {% for day, grouped_series in series|groupby_attrs('added_on_date') %}
      <h2 class="text-regular text-uppercase font-weight-black mb-3">{{day|to_date|timeline_date}}</h2>
      <div class="carousel">
          <div class="carousel__items py-2">
              {% for s in grouped_series %}
                  <div class="carousel-item">
                      {% set episode_hash = 'e' ~ s.episode.id %}
                      <div class="card-episode mb-2">
                          <a href="{{ url_for('main.series_detail', series_id=s.id, view='list', _anchor=episode_hash) }}">
                              <img class="card-episode__image w-100 img-fluid rounded" loading="lazy" src="{{ s.episode.thumbnail }}" width="300" height="170"
                              alt="Still for episode {{s.episode.season_episode_id}}" />
                          </a>           
                          <a href="{{ url_for('main.series_detail', series_id=s.id) }}">
                              <img class="card-episode__poster img-fluid rounded" loading="lazy" src="{{ s.poster }}" width="340" height="500" alt="Poster for {{ s.name }}" />                                            
                          </a>
                      </div>
                      <div>
                          <h2 class="text-sm text-muted text-uppercase mb-2">{{s.episode.season_episode_id}}</h2>
                          <h3 class="text-regular mb-1">
                              <a class="" href="{{ url_for('main.series_detail', series_id=s.id, view='list', _anchor=episode_hash) }}">
                                  {{ s.episode.name }} 
                              </a>
                          </h3>                        
                          <p class="text-muted text-sm">{{ "{:,}".format(s.release_count)}} new torrents</p>                        
                      </div>
                  </div>
              {% endfor %}
          </div>
      </div>
      {% if not loop.last %}
          <hr class="my-5">
      {% endif %}
  {% endfor %}
{% endmacro %}

{% macro render_series_card(series) %}
    <div class="card-series">        
        <a href="{{ url_for( 'main.series_detail', series_id=series.id) }}">
            <img class="card-series__image rounded img-fluid" src="{{ series.poster }}" width="500" height="750"
                loading="lazy" alt="Poster for {{series.name}}" />
            <h3 class="card-series__name my-1 font-weight-normal text-sm text-center">{{series.name}}</h3>
        </a>
    </div>
{% endmacro %}

{% macro air_date(value, today) %}
    {% if value %}
        {% if value <= today %}
            {{value | human_date}}
        {% else %}
            Will air {{value | human_date}}
        {% endif %} 
    {% else %}
        &nbsp;
    {% endif %}
{% endmacro %}

{% macro torrent_download_status(release, status) %}
    {% if status == 'D' %}
        <div class="d-flex justify-content-center align-items-center">
            {{icon("#icon-check-bold", width=16, height=16, class="text-success mr-1")}}<span class="text-sm">Downloaded</span>
        </div>
    {% elif status == 'A' or status == 'd' %}
        <span class="anim-progress text-accent text-sm">&hellip;</span>
    {% else %}
        {% set request_url = url_for('main.download_torrent', release_id=release.id) %}
        <button onclick="Videobox.downloadTorrent('{{request_url}}', '_download-button', event);" class="btn-icon" aria-label="Download now" data-balloon-pos="up">{{icon('#icon-download', width=20, height=20)}}
        </button>
    {% endif %}
{% endmacro %}

{% macro torrent_download_progress(release) %}
    <div class="download-progress flex-grow-1" id="download-progress-{{release.info_hash}}">
        <div class="download-progress__stats text-sm">Checking download status&hellip;</div>
        <progress class="w-100" value="0" max="100"></progress>
    </div>
{% endmacro %}

{% macro torrent_files(torrent) %}
    <div class="torrent-files">
        <ul>
            {% for f in torrent.file_storage %}
                <li class="d-flex align-items-start">
                    {{icon("#icon-file", width=20, height=20, class="mr-1")}}{{f.file_path}} ({{f.file_size | filesizeformat}} bytes)
                </li>
            {% endfor %}
        </ul>
    </div>
{% endmacro %}

{% macro icon(id, width=30, height=30, class="") %}
    <svg aria-hidden="true" class="{{class}}" xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}"><use href="{{id}}" /></svg>
{% endmacro %}

{% macro tracker_status_icon(value) %}
    {% if value == 'K' %}
      {{icon("#icon-check-bold", width=16, height=16, class="text-success")}}
    {% elif value == 'N' %}        
      {{icon("#icon-hourglass-bold", width=16, height=16, class="text-info")}}
    {% else %}
      {{icon("#icon-warning-bold", width=16, height=16, class="text-warning")}}
    {% endif %}
{% endmacro %}

{% macro tracker_status_description(value) %}
    {% if value == 'K' %}   
    {% elif value == 'N' %}
      (not contacted yet)
    {% elif value == 'T' %}  
      (timed out)
    {% elif value == 'P' %}  
      (protocol error) 
    {% elif value == 'D' %}  
      (DNS error)       
    {% else %}
      (error)
    {% endif %}
{% endmacro %}
