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

{% macro tracker_status_icon(value) %}
    {% if value == 'K' %}
      {{macros.icon("#icon-check-bold", width=16, height=16, class="text-success")}}
    {% elif value == 'N' %}        
      {{macros.icon("#icon-hourglass-bold", width=16, height=16, class="text-info")}}
    {% else %}
      {{macros.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 %}

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

{% block content %}
<main id="main">
    <h1 class="text-xlg font-weight-black mb-5">System status</h1>         
    {% if torrent_running %}
      <h2 id="downloads" class="text-lg font-weight-black mb-1">Downloads</h2> 
      <p class="text-muted text-sm mb-3">BitTorrent is running and listening to port {{torrent_port}}</p>
      {% if torrents %}
      <section>
          {% for t in torrents %}
            <div class="torrent-download" id="r{{t.release.info_hash}}" data-status="{{t.status}}">
                {% set series = t.release.episode.series %}
                {% set episode = t.release.episode %}
                {% set episode_hash = 'e' ~ t.release.episode.id %}
                {% set release_hash = 'r' ~ t.release.info_hash %}
                <div class="download-progress d-flex align-items-center" style="gap: .75rem">
                  <a href="{{ url_for( 'main.series_detail', series_id=series.id,  view='list', _anchor=episode_hash) }}">
                    <img class="card-episode__image card-episode__image--small img-fluid rounded-sm" loading="lazy" src="{{ episode.thumbnail }}" width="300" height="170" alt="" />
                  </a>                                 
                  <div class="flex-grow-1">
                    {% if t.status == 'D' %}
                        <h3 class="mb-1">
                          <button class="btn-text text-regular text-muted font-weight-semibold" onclick="Videobox.loadReleaseInfo(event, {{t.release.id}});">{{t.release.name}}</button>
                          </h3>
                        <div class="d-flex align-items-center">    
                          {{macros.icon("#icon-check-bold", width=16, height=1, class="mr-1")}}<span class="text-sm text-muted">Downloaded {% if t.downloaded_on %}{{t.downloaded_on | datetime_since(utc_now)}}{% endif %}</span>
                        </div>                     
                    {% else %}
                        {# Download still in progress #}
                        <h3 class="mb-1">
                          <button class="btn-text text-regular font-weight-semibold" onclick="Videobox.loadReleaseInfo(event, {{t.release.id}});">{{t.release.name}}</button>                                  
                        </h3>
                        <div class="download-progress__stats text-sm text-muted">Checking download status&hellip;</div>
                        <progress class="w-100" value="0" max="100"></progress>
                    {% endif %}
                  </div>
                  {% set request_url = url_for('main.remove_torrent', info_hash=t.release.info_hash) %}
                  <button type="ml-auto button" class="btn btn-small" onclick="Videobox.removeTorrent('{{request_url}}', event)">Remove</button>
                </div>
            </div>
          {% endfor %}
          <script>
            window.addEventListener("DOMContentLoaded", () => {
              Videobox.trackDownloadProgress(Videobox.updateStatusPage)
            })
          </script>
        </section>
      {% else %}
        <p class="text-muted m-0"><em>No active downloads.</em></p>
      {% endif %}
    {% else %}
      <div class="d-flex align-items-center">
        {{macros.icon("#icon-warning-bold", width=16, height=16, class="mr-2 text-warning")}}
        <span>Built-in BitTorrent client is not running. Please review <button type="button"  onclick="Videobox.loadSettings(event)" class="btn-text text-decoration-underline">configuration settings.</button></span>
      </div>       
    {% endif %}
        
      <hr class="my-4">      
      {% if log_rows %}          

        <section>
          <h2 id="library" class="text-lg font-weight-black mb-1">Library</h2>       
          <p class="text-muted text-sm mb-3">Last {{max_log_rows}} update operations</p>       
          
          <div class="d-flex align-items-start justify-content-between" style="gap: 2rem">
            <table class="report">
                <tbody>
                    {% for row in log_rows %}
                    <tr>
                        <td class="pr-4">{{row.timestamp|human_date_time}} <span class="font-small-caps">UTC</span></td>
                        <td class="d-flex align-items-center" style="gap: .5rem">{{row_status(row.status)}}{{row.description}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div>
              {% include '_chart.html' %}      
              <p class="text-muted text-sm">New torrents fetched by server in the last {{max_chart_days}} days</p>
            </div>     
          </div>


        </section>
      {% endif %}

      {% if trackers %}
        <hr class="my-4">        
        <section>
          <h2 id="trackers" class="text-lg font-weight-black mb-1">Trackers</h2>
          <p class="text-muted text-sm mb-3">Servers periodically queried for torrent swarm information. {% if max_last_scraped_on %} Last checked on {{max_last_scraped_on|human_date_time}} <span class="font-small-caps">UTC</span>{% endif %}</p>
          <table class="report">
              <tbody>
                  {% for tracker in trackers %}
                  <tr>
                      <td class="d-flex align-items-center" style="gap: .5rem">{{tracker_status_icon(tracker.status)}}{{tracker.url|nice_url}}<small class="text-muted">{{tracker_status_description(tracker.status)}}</small></td>
                  </tr>
                  {% endfor %}
              </tbody>
          </table>
        </section>          
      {% endif %}
</main>
{% endblock %}