{% extends 'base.html' %}
{% load static %}

{% block title %}{{ media.title|default:"Media Detail" }}{% endblock %}

{% block content %}
<div class="container">
    <h1>{{ media.title }}</h1>
    <img src="{{ media.image.url }}" alt="{{ media.title }}" class="img-fluid">
    {% if media.measurements %}
        <p>Measurements: {{ media.measurements }}</p>
    {% endif %}
    <a href="{% url 'index' %}">Back to home</a>

    <div class="rating-section">
        <h2>Rate this media</h2>
        <form method="post" action="{% url 'rate_media' media.id %}">
            {% csrf_token %}
            <div class="mb-3">
                <label for="score" class="form-label">Score (1-5):</label>
                <select name="score" id="score" class="form-control">
                    {% for i in "12345" %}
                        <option value="{{ i }}">{{ i }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="mb-3">
                <label for="comment" class="form-label">Comment:</label>
                <textarea name="comment" id="comment" class="form-control" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit Rating</button>
        </form>

        {% if average_rating is not None %}
            <h3>Average Rating: {{ average_rating|floatformat:1 }} / 5</h3>
        {% else %}
            <h3>No ratings yet.</h3>
        {% endif %}

        {% if ratings %}
            <div class="comments-section">
                <h3>Comments:</h3>
                {% for rating in ratings %}
                    <div class="card mb-2">
                        <div class="card-body">
                            <h5 class="card-title">Score: {{ rating.score }}</h5>
                            {% if rating.comment %}
                                <p class="card-text">{{ rating.comment }}</p>
                            {% endif %}
                            <p class="card-text"><small class="text-muted">By {% if rating.rater %}{{ rating.rater.username }}{% else %}Anonymous{% endif %} on {{ rating.created_at|date:"M d, Y H:i" }}</small></p>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}
