{% extends "base.html" %}

{% block title %}{{ info.file.name }} - transbeam{% endblock %}

{% block og_title %}{{ info.file.name }}{% endblock %}
{% block og_description -%}
  {% let formatted_total_size = info.file.formatted_size() -%}
  {% match info.file.contents -%}
    {% when Some with (files) -%}
      {{ files.files.len() }} files, {{ formatted_total_size }} total
    {%- else -%}
      {{ formatted_total_size }}
    {%- endmatch %}, expires {{ info.file.expiry.format(DATE_DISPLAY_FORMAT).unwrap() }}
{%- endblock %}

{% block relative_path %}download?code={{ info.code }}{% endblock %}

{% block head %}
  <script src="js/util.js?{{ cachebuster }}"></script>
  <script type="text/javascript">
    const CODE = "{{ info.code }}";
  </script>
  <script src="js/download.js?{{ cachebuster }}"></script>
{% endblock %}

{% block body %}
  <div id="download_toplevel" class="section">
    <div class="file_name">{{ info.file.name }}</div>
    <div class="file_size">{{ info.file.formatted_size() }}</div>
    <div class="file_download"><a class="download_button" href="download?code={{ info.code }}&download=all"></a></div>
    <div class="file_expiry">Expires {{ info.file.expiry.format(DATE_DISPLAY_FORMAT).unwrap() }}</div>
  </div>
  {% match info.file.contents %}
    {% when Some with (files) %}
      <div id="download_contents" class="section">
        <details>
          <summary>Show file list</summary>
          <table><tbody>
            {% let offsets = info.offsets.as_ref().unwrap() %}
            {% for f in files.files %}
              <tr class="{% if offsets.get(loop.index0.clone()).unwrap().clone() > info.available %}unavailable{% endif %}">
                <td class="file_size">{{ f.formatted_size() }}</td>
                <td class="file_name">{{ f.name }}</td>
                <td class="file_download"><a class="download_button" href="download?code={{ info.code }}&download={{ loop.index0 }}"></a></td>
                <td class="file_unavailable"></td>
              </tr>
            {% endfor %}
          </tbody></table>
        </details>
      </div>
    {% else %}
  {% endmatch %}
{% endblock %}