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

<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">
                    <strong>{{ file.info.video[0].codec }}</strong>
                    <span class="arrow-to"> >> </span>
                    <select id="codec" class="form-select">
                      <option value="h.265" selected>h.265 (HEVC)</option>
                      <option value="h.264">h.264 (AVC)</option>
                      <option value="av1">AV1</option>
                      <option value="vp9">VP9</option>
                    </select>
                </div>
                <div class="form-control">
                    <strong>{{ file.info.video[0].resolution }}</strong>
                    <span class="arrow-to"> >> </span>
                    <select id="resolution" class="form-select">
                      <option value="3840x2160" selected>UHD (2160p)</option>
                      <option value="2560x1440">QHD (1440p)</option>
                      <option value="1920x1080">FHD (1080p)</option>
                      <option value="1280x720">HD (720p)</option>
                      <option value="640x480">SD (480p)</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="text" id="bitrate" class="form-control" placeholder="7000">
                        <span class="input-group-text" id="basic-addon2">KB/s</span>
                    </div>
                </div>

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

            </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" %}