{% extends "base.html" %}

{% block title %}{{ ctx.entry_name }} - {{ ctx.site_title }}{% endblock %}
{% block og_title %}{{ ctx.entry_name }} - {{ ctx.site_title }}{% endblock %}

{% block extra_scripts %}
    <!-- https://cdnjs.com/libraries/jszip -->
    <script defer
        src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"
        integrity="sha512-XMVd28F1oH/O71fzwBnV7HucLxVwtxf26XV8P4wPk26EDxuGZ91N8bsOttmnomcCD3CS5ZMRL50H0GgOHvegtg=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
{% endblock %}

{% block content %}
<div id="divbodyholder">
<div id="divbody" class="entry_main_wrap">
<main class="no-js">
<!-- content begin -->
    <h1 class="entry_title">{{ ctx.entry_name }}</h1>

    <input type="radio" name="subext" id="ext_all" class="filter_by_type_input" checked>
    <input type="radio" name="subext" id="ext_ass" class="filter_by_type_input">
    <input type="radio" name="subext" id="ext_srt" class="filter_by_type_input">

    <div class="button_row_container">
        <span class="tabs_title">Subtitle format:</span>
        <label for="ext_all" title="Show all">All</label>
        <label for="ext_srt" title="Show only .srt">SRT</label>
        <label for="ext_ass" title="Show only .ass">ASS</label>
    </div>

    {% for group in ctx.file_ext_groups %}
    <section class="group_{{ group.type }}" data-entry-name="{{ ctx.entry_name }}">
        {% if group.files %}
            <div class="cmd_wrap">
                <div class="cmdlabel">wget</div>
                <div class="pre-wrap"><pre><code>{{ group.wget_command }}</code></pre></div>
            </div>

            <div class="cmd_wrap no-js-msg">
                Enable JavaScript for bulk downloads. Individual files can be downloaded directly from the links below.
            </div>

            <div class="button_row_container download_bar">
                <button type="button" class="select-all-btn">Select all</button>
                <button type="button" class="download-selected-btn" disabled>Download selected (<span class="selected-count">0</span>)</button>
            </div>

            <table class="entries_table file_list_table">
                <thead>
                <tr>
                    <th scope="col" class="entry_number">#</th>
                    <th scope="col" class="entry_name">Name</th>
                    <th scope="col" class="file_size">Size</th>
                    <th scope="col" class="last_modified">Last modified (UTC)</th>
                </tr>
                </thead>
                <tbody>
                {% for file in group.files %}
                    <tr data-timestamp="{{ file.last_modified | timestamp_int }}" data-file-size="{{ file.st_size }}">
                        <td data-cell="#" class="entry_number"><span class="font-mono">{{ loop.index }}</span></td>
                        <td data-cell="Name" class="entry_name">
                            <input type="checkbox" class="file-checkbox" data-download-url="{{ file.path | as_subtitle_download_url }}" data-filename="{{ file.name }}">
                            <a href="{{ file.path | as_subtitle_download_url }}" download="{{ file.name }}">{{ file.path.relative_to(ctx.entry.path_to_dir) }}</a>
                        </td>
                        <td data-cell="Size" class="file_size"><span class="font-mono">{{ file.st_size | size_bytes_to_human }}</span></td>
                        <td data-cell="Last modified" class="last_modified"><span class="font-mono">{{ file.last_modified | strftime("%d %b %Y %H:%M:%S") }}</span></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <p>Nothing to show.</p>
        {% endif %}
    </section>
    {% endfor %}

    <div id="all_posts">
        <a href="{{ ctx.entry.path_to_dir | as_subtitle_git_url }}" target="_blank">Upload new files</a> &mdash;
        <a href="{{ ctx.search_link.url }}" target="_blank">{{ ctx.search_link.text }}</a> &mdash;
        <a href="{{ paths.index_file_path | as_relative_to(ctx.output_file_path) }}" class="logo">Back to Index</a>
    </div>

<!-- content end -->
</main>
</div>
</div>
{% endblock %}