{% extends 'mysite/base.html' %}

{% block title %}Оценка песни{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-5">
        <div class="card shadow">
            <div class="card-header bg-primary text-white text-center">
                <h4 class="mb-0">⭐ Оценка песни</h4>
            </div>
            <div class="card-body">
                <div class="text-center mb-4">
                    <h3>{{ song.title }}</h3>
                    <p class="text-muted">
                        {{ song.album.musician.name }} — {{ song.album.album_name }}
                    </p>
                    <p>⏱️ Длительность: {{ song.duration_formatted }}</p>
                </div>
                
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="mb-4 text-center">
                        <label class="form-label fw-bold">Ваша оценка (1-10)</label>
                        <div class="d-flex justify-content-center gap-2 flex-wrap">
                            {% for i in "12345678910"|make_list %}
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="score" value="{{ forloop.counter }}" id="score{{ forloop.counter }}"
                                    {% if form.score.value|stringformat:"s" == forloop.counter|stringformat:"s" %}checked{% endif %}>
                                <label class="form-check-label" for="score{{ forloop.counter }}">{{ forloop.counter }}</label>
                            </div>
                            {% endfor %}
                        </div>
                        {% if form.score.errors %}
                            <div class="text-danger small">{{ form.score.errors }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <button type="submit" class="btn btn-primary">💾 Сохранить оценку</button>
                        <a href="{% url 'mysite:song_list' %}" class="btn btn-secondary">❌ Отмена</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .form-check-inline {
        margin-right: 5px;
    }
    .form-check-input:checked + .form-check-label {
        font-weight: bold;
        color: #ffc107;
    }
</style>
{% endblock %}