{% extends "main/base.html" %}
{% load static %}

{% block content %}
<div class="container my-5 text-center">
    <a href="{% url 'media' %}" class="btn btn-outline-secondary mb-4">← Back to Gallery</a>

    <div class="card mx-auto shadow" style="max-width: 800px;">
        {% if media.media_type == 'image' and media.image %}
            <img src="{{ media.image.url }}" class="card-img-top" alt="{{ media.title }}">
        {% elif media.media_type == 'video' and media.video_url %}
            <div class="ratio ratio-16x9">
                <iframe src="{{ media.video_url }}" allowfullscreen></iframe>
            </div>
        {% endif %}
        <div class="card-body">
            <h3 class="card-title">{{ media.title }}</h3>
            <p class="card-text">{{ media.description }}</p>
        </div>
    </div>
</div>
{% endblock %}