{% extends 'base.html' %}

{% block title %}Мои записи — Beauty Salon{% endblock %}

{% block content %}
<h2 class="text-center mb-5 fw-bold">Мои записи</h2>

<a href="{% url 'create_appointment' %}" class="btn btn-pink btn-lg mb-4 d-block mx-auto" style="max-width:300px;">
    + Новая запись
</a>

{% if records %}
    <div class="row g-4">
        {% for record in records %}
        <div class="col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm h-100 {% if record.status == 'completed' %}border-success{% elif record.status == 'canceled' %}border-danger{% else %}border-warning{% endif %}">
                <div class="card-body">
                    <h5 class="card-title">{{ record.service }}</h5>
                    <p class="mb-1"><strong>Мастер:</strong> {{ record.master|default:"Не выбран" }}</p>
                    <p class="mb-1"><strong>Дата:</strong> {{ record.date|date:"d.m.Y" }}</p>
                    {% if record.time %}
                    <p class="mb-1"><strong>Время:</strong> {{ record.time|time:"H:i" }}</p>
                    {% endif %}
                    <p class="mb-2"><strong>Статус:</strong> 
                        <span class="badge {% if record.status == 'completed' %}bg-success{% elif record.status == 'canceled' %}bg-danger{% else %}bg-warning{% endif %}">
                            {{ record.get_status_display }}
                        </span>
                    </p>

                    {% if record.status == 'completed' %}
                        {% if record.review %}
                            <div class="alert alert-light mt-3 small">
                                <strong>Ваш отзыв:</strong> {{ record.review.rating }}/5<br>
                                {{ record.review.text|truncatewords:20 }}
                            </div>
                        {% else %}
                            <a href="{% url 'add_review' record.pk %}" class="btn btn-sm btn-outline-success">
                                Оставить отзыв
                            </a>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
{% else %}
    <div class="text-center py-5">
        <h4 class="text-muted">У вас пока нет записей</h4>
        <a href="{% url 'create_appointment' %}" class="btn btn-pink mt-3">Записаться сейчас</a>
    </div>
{% endif %}
{% endblock %}