{% extends 'base.html.j2' %}

{% block title %}View Media{% endblock %}

{% block content %}
<h1>{{ media.title if media.title else media.filename }}</h1>
<p>Uploaded by <a href="{{ request.route_url('user_media', user_short_id=user_short_id) }}">{{ username }}</a> on {{ media.upload_date.strftime('%Y-%m-%d %H:%M:%S') }}</p>
<p>Size: {{ media.size | filesizeformat }}</p>

<!-- Display media based on type -->
{% if media.media_type == 'image' %}
    <img src="{{ request.route_url('view_media', user_short_id=user_short_id, media_short_id=media.short_id) }}" alt="{{ media.filename }}">
{% elif media.media_type == 'audio' %}
    <audio controls>
        <source src="{{ request.route_url('view_media', user_short_id=user_short_id, media_short_id=media.short_id) }}">
        Your browser does not support the audio element.
    </audio>
{% elif media.media_type == 'video' %}
    <video controls width="600">
        <source src="{{ request.route_url('view_media', user_short_id=user_short_id, media_short_id=media.short_id) }}">
        Your browser does not support the video tag.
    </video>
{% endif %}

<!-- View and Download links -->
<p>
    <a href="{{ request.route_url('view_media', user_short_id=user_short_id, media_short_id=media.short_id) }}">View</a> |
    <a href="{{ request.route_url('view_media', user_short_id=user_short_id, media_short_id=media.short_id, _query={'download': 'true'}) }}">Download</a>
</p>

{% if is_owner %}
    <!-- Edit button for the owner -->
    <p>
        <a href="{{ request.route_url('edit_media', user_short_id=user_short_id, media_short_id=media.short_id) }}">Edit</a>
    </p>
{% endif %}

{% endblock %}