{% include "partials/head.html" %}
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>

<div class="container mt-5">
    <h1 class="mb-4">{{ file.name }}</h1>
    <p class="text-muted">Path: {{ file.path }}</p>

    <!-- Информация о контейнере -->
    <div class="card mb-4">
        <div class="card-header">
            <h2 class="h5 mb-0">Container Information</h2>
        </div>
        <div class="card-body">
            <p><strong>Bitrate:</strong> {{ file.info.container.bitrate }}</p>
            <p><strong>Duration:</strong> {{ file.info.container.duration }}</p>
            <p><strong>Size:</strong> {{ file.info.container.size }}</p>
            <div class="control-btns">
                <button class="btn btn-success show-transcodate-form">Transcodate</button>
            </div>

            <div class="transcodate-form-container" style="display: none">
                <div class="form-control">
                    <input type="hidden" name="path" value="{{ file.path }}">
                    <strong>{{ file.info.video[0].codec }}</strong>
                    <span class="arrow-to"> >> </span>
                    <select id="codec" name="codec" class="form-select">
                      <option value="libx265" selected>h.265 (HEVC)</option>
                      <option value="libx264">h.264 (AVC)</option>
                      <option value="libaom-av1">AV1</option>
                      <option value="libvpx-vp9">VP9</option>
                    </select>
                </div>
                <div class="form-control">
                    <strong>{{ file.info.video[0].resolution }}</strong>
                    <span class="arrow-to"> >> </span>
                    <select id="resolution" name="resolution" class="form-select" data-max-resolution="{{ file.info.video[0].resolution.split('x')[0] }}">
                      <option value="3840">UHD (2160p)</option>
                      <option value="2560">QHD (1440p)</option>
                      <option value="1920">FHD (1080p)</option>
                      <option value="1280">HD (720p)</option>
                      <option value="640">SD (480p)</option>
                    </select>
                </div>

                <div class="form-control">
                    <strong>Preset</strong>
                    <select id="preset-libx" name="preset-libx" class="form-select">
                      <option value="ultrafast">Ultrafast</option>
                      <option value="superfast">Superfast</option>
                      <option value="veryfast">Veryfast</option>
                      <option value="faster">Faster</option>
                      <option value="fast" selected>Fast</option>
                      <option value="medium">Medium</option>
                      <option value="slow">Slow</option>
                      <option value="slower">Slower</option>
                      <option value="veryslow">Veryslow</option>
                    </select>

                    <select id="preset-vp9" name="preset-vp9" class="form-select" style="display: none">
                      <option value="0">cpu-used 0</option>
                      <option value="1" selected>cpu-used 1</option>
                      <option value="2">cpu-used 2</option>
                      <option value="3">cpu-used 3</option>
                      <option value="4">cpu-used 4</option>
                      <option value="5">cpu-used 5</option>
                    </select>

                    <select id="preset-av1" name="preset-av1" class="form-select" style="display: none">
                      <option value="0">cpu-used 0</option>
                      <option value="1">cpu-used 1</option>
                      <option value="2">cpu-used 2</option>
                      <option value="3" selected>cpu-used 3</option>
                      <option value="4">cpu-used 4</option>
                      <option value="5">cpu-used 5</option>
                      <option value="6">cpu-used 6</option>
                      <option value="7">cpu-used 7</option>
                      <option value="8">cpu-used 8</option>
                    </select>
                </div>

                <div class="form-control">
                    <strong>{{ file.info.video[0].bitrate }}</strong>
                    <span class="arrow-to"> >> </span>
                    <div class="input-group">
                        <input type="number" id="crf" step="1" name="crf" class="form-control" placeholder="23" value="23" max="51" min="1">
                        <span class="input-group-text">CRF <span class="crf-range">0-51</span></span>
                    </div>
                </div>

                <div class="btns">
                    <button class="btn btn-warning run-transcodate">Run</button>
                    <button class="btn close-transcodate-form-container">Cancel</button>
                </div>

            </div>

            <div id="progress" class="alert alert-dark"></div>
        </div>
    </div>

    <!-- Видео -->
    <div class="card mb-4">
        <div class="card-header">
            <h2 class="h5 mb-0">Video Streams</h2>
        </div>
        <div class="card-body">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Codec</th>
                        <th>Resolution</th>
                        <th>Bitrate</th>
                    </tr>
                </thead>
                <tbody>
                    {% for video in file.info.video %}
                    <tr>
                        <td>{{ video.codec }}</td>
                        <td>{{ video.resolution }}</td>
                        <td>{{ video.bitrate }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Аудио -->
    <div class="card mb-4">
        <div class="card-header">
            <h2 class="h5 mb-0">Audio Streams</h2>
        </div>
        <div class="card-body">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Bitrate</th>
                        <th>Channels</th>
                        <th>Codec</th>
                        <th>Language</th>
                        <th>Layout</th>
                    </tr>
                </thead>
                <tbody>
                    {% for audio in file.info.audio %}
                    <tr>
                        <td>{{ audio.bitrate }}</td>
                        <td>{{ audio.channels }}</td>
                        <td>{{ audio.codec }}</td>
                        <td>{{ audio.language }}</td>
                        <td>{{ audio.layout }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Общая информация -->
    <div class="card">
        <div class="card-header">
            <h2 class="h5 mb-0">File Information</h2>
        </div>
        <div class="card-body">
            <p><strong>Size:</strong> {{ file.size }} {{ file.size_unit }}</p>
            <p><strong>Size in Bytes:</strong> {{ file.size_bytes }}</p>
        </div>
    </div>
</div>

{% include "partials/footer.html" %}