{% extends "base.html" %}

{% block title %}Media Viewer{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="text-center">Viewing Media: {{ filename }}</h1>
    <p class="text-muted text-center">MIME Type: {{ mime_type }}</p>

    <div class="media-container text-center">
        {% if mime_type.startswith("image/") %}
            <img src="{{ url_for('get_file', filename=filename) }}" alt="Image" class="img-fluid" />
        {% elif mime_type.startswith("video/") %}
            <video controls class="w-100">
                <source src="{{ url_for('get_file', filename=filename) }}" type="{{ mime_type }}">
                Your browser does not support the video tag.
            </video>
        {% elif mime_type.startswith("audio/") %}
            <audio controls class="w-100">
                <source src="{{ url_for('get_file', filename=filename) }}" type="{{ mime_type }}">
                Your browser does not support the audio element.
            </audio>
        {% elif mime_type == "application/pdf" %}
            <embed src="{{ url_for('get_file', filename=filename) }}" type="{{ mime_type }}" width="100%" height="600px">
        {% endif %}
    </div>

    <div class="d-flex justify-content-center mt-4">
        <button class="btn btn-primary me-2" onclick="toggleMetadata()">Toggle Metadata</button>
        <a href="{{ url_for('download_paste', id=paste_id) }}" class="btn btn-success">📥 Download</a>
    </div>

    <div class="metadata mt-4">
        <div id="metadata-content" class="metadata-content" style="display: none;">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Property</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                    {% if metadata %}
                        {% for track in metadata %}
                            {% for key, value in track.items() %}
                                <tr>
                                    <td>{{ key }}</td>
                                    <td>{{ value }}</td>
                                </tr>
                            {% endfor %}
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="2">No metadata available for this file.</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    function toggleMetadata() {
        const content = document.getElementById("metadata-content");
        if (content.style.display === "none") {
            content.style.display = "block";
        } else {
            content.style.display = "none";
        }
    }
</script>
{% endblock %}

