{% extends 'base.html' %}

{% block headtitle %}Media - {{ media.key }}{% endblock %}

{% block content %}
<div class="row">
  <div class="col s12">
    <h1 class="truncate">Media <strong>{{ media.key }}</strong></h1>
    <p class="truncate"><strong><a href="{{ media.url }}" target="_blank"><i class="fas fa-link"></i> {{ media.url }}</a></strong></p>
    <p class="truncate">Saving to: <strong>{{ media.source.directory_path }}</strong></p>
  </div>
</div>
<div class="row">
  <div class="col s12">
    <table class="striped">
      <tr title="The media source">
        <td class="hide-on-small-only">Source</td>
        <td><span class="hide-on-med-and-up">Source<br></span><strong><a href="{% url 'sync:source' pk=media.source.pk %}">{{ media.source }}</a></strong></td>
      </tr>
      <tr title="The media title">
        <td class="hide-on-small-only">Title</td>
        <td><span class="hide-on-med-and-up">Title<br></span><strong>{{ media.title }}</strong></td>
      </tr>
      <tr title="The media duration">
        <td class="hide-on-small-only">Duration</td>
        <td><span class="hide-on-med-and-up">Duration<br></span><strong>{{ media.duration_formatted }}</strong></td>
      </tr>
      <tr title="The filename the media will be downloaded as">
        <td class="hide-on-small-only">Filename</td>
        <td><span class="hide-on-med-and-up">Filename<br></span><strong>{{ media.filename }}</strong></td>
      </tr>
      <tr title="The desired format">
        <td class="hide-on-small-only">Desired format</td>
        <td><span class="hide-on-med-and-up">Desired format<br></span><strong>{{ media.source.format_summary }}</strong></td>
      </tr>
      <tr title="Fallback setting on the source">
        <td class="hide-on-small-only">Fallback</td>
        <td><span class="hide-on-med-and-up">Fallback<br></span><strong>{{ media.source.get_fallback_display }}</strong></td>
      </tr>
      <tr title="Has the media been downloaded">
        <td class="hide-on-small-only">Downloaded</td>
        <td><span class="hide-on-med-and-up">Downloaded<br></span><strong>{% if media.downloaded %}<i class="fas fa-check"></i>{% else %}<i class="fas fa-times"></i>{% endif %}</strong></td>
      </tr>
      <tr title="The available media formats">
        <td class="hide-on-small-only">Available formats</td>
        <td><span class="hide-on-med-and-up">Available formats<br></span>
          {% for format in media.formats %}
          <span class="truncate">ID: <strong>{{ format.format_id }}</strong>{% if format.vcodec|lower != 'none' %}, <strong>{{ format.format_note }} ({{ format.width }}x{{ format.height }})</strong>, fps:<strong>{{ format.fps|lower }}</strong>, video:<strong>{{ format.vcodec }} @{{ format.tbr }}k</strong>{% endif %}{% if format.acodec|lower != 'none' %}, audio:<strong>{{ format.acodec }} @{{ format.abr }}k / {{ format.asr }}Hz</strong>{% endif %}</span>
          {% empty %}
          Media has no indexed available formats
          {% endfor %}
        </td>
      </tr>
      <tr title="Best available format for source requirements">
        <td class="hide-on-small-only">Matched formats</td>
        <td><span class="hide-on-med-and-up">Matched formats<br></span>
          Combined: <strong>{% if combined_format %}{{ combined_format }} {% if combined_exact %}(exact match){% else %}(fallback){% endif %}{% else %}No match{% endif %}</strong><br>
          Audio: <strong>{% if audio_format %}{{ audio_format }} {% if audio_exact %}(exact match){% else %}(fallback){% endif %}{% else %}No match{% endif %}</strong><br>
          Video: <strong>{% if video_format %}{{ video_format }} {% if video_exact %}(exact match){% else %}(fallback){% endif %}{% else %}No match{% endif %}
        </strong></td>
      </tr>
    </table>
  </div>
</div>
{% endblock %}