{% extends "base.html" %}

{% block content %}
<h1>Отзывы наших клиентов</h1>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
    <!-- Форма отзыва -->
    <div style="background: #FDF5E6; padding: 1.5rem; border-radius: 10px; border: 1px solid #CD853F;">
        <h3 style="color: #CD853F;">Оставить отзыв</h3>
        
        {% if session.get('user_id') %}
        <form method="POST">
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem;">Оценка</label>
                <select name="rating" required style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 5px;">
                    <option value="5">★★★★★ (5 звезд)</option>
                    <option value="4">★★★★☆ (4 звезды)</option>
                    <option value="3">★★★☆☆ (3 звезды)</option>
                    <option value="2">★★☆☆☆ (2 звезды)</option>
                    <option value="1">★☆☆☆☆ (1 звезда)</option>
                </select>
            </div>
            
            <div style="margin-bottom: 1rem;">
                <label style="display: block; margin-bottom: 0.5rem;">Ваш отзыв</label>
                <textarea name="text" rows="4" required style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 5px;"></textarea>
            </div>
            
            <button type="submit" class="btn-primary">Отправить отзыв</button>
        </form>
        {% else %}
        <p>Чтобы оставить отзыв, <a href="/login" style="color: #CD853F;">войдите в систему</a></p>
        {% endif %}
    </div>
    
    <!-- Список отзывов -->
    <div>
        <h3 style="color: #CD853F;">Отзывы</h3>
        
        {% if reviews %}
            {% for review in reviews %}
            <div style="background: white; padding: 1rem; margin-bottom: 1rem; border-radius: 10px; border: 1px solid #eee;">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <strong style="color: #CD853F;">{{ review.author_name }}</strong>
                        <span style="margin-left: 0.5rem;">
                            {% for i in range(review.rating) %}★{% endfor %}
                            {% for i in range(5 - review.rating) %}☆{% endfor %}
                        </span>
                    </div>
                    <div style="color: #999; font-size: 0.8rem;">
                        {{ review.created_at }}
                    </div>
                </div>
                <p style="margin-top: 0.5rem;">{{ review.text }}</p>
            </div>
            {% endfor %}
        {% else %}
            <p style="color: #999;">Пока нет отзывов. Будьте первым!</p>
        {% endif %}
    </div>
</div>
{% endblock %}