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

<script>
    const mediaInfo = JSON.parse("{{ file }}".replaceAll("&#39;", '"').replaceAll("&#34;", "'"));
</script>

<div class="container mt-2">
    <h1 class="mb-3">{{ file.name }}</h1>
    <p class="text-muted">Path: {{ file.path }}</p>
    <a href="/" class="btn btn-outline-secondary mb-4"><i class="bi bi-arrow-left"></i> Back to mediafiles list</a>    

    <!-- Информация о контейнере -->
    <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> <span class="duration-to-minutes" data-duration-in-seconds="{{ file.info.container.duration }}"></span></p>
            <p><strong>Size:</strong> {{ file.info.container.size }}</p>
            
            {% include "components/single-transcoding.html" %}
        </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>Title</th>
                        <th>Bitrate</th>
                        <th>Channels</th>
                        <th>Codec</th>
                        <th>Lang</th>
                        <th>Layout</th>
                    </tr>
                </thead>
                <tbody>
                    {% for audio in file.info.audio %}
                    <tr>
                        <td>{{ audio.title }}</td>
                        <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" %}