web-dev/labs/lab-6/app/templates/courses/show.html

{% extends 'base.html' %}

{% block content %}
<div class="title-area position-relative" style="background-image: url({{ course.bg_image.url }});">
    <div class="h-100 w-100 py-5 d-flex text-center position-absolute" style="background-color: rgba(0, 0, 0, 0.7);">
        <div class="m-auto">
            <h1 class="title mb-3">{{ course.name }}</h1>
            <p class="mb-3 mx-auto">
                {# Категория и рейтинг #}
                <span class="badge-red me-2">{{ course.category.name }}</span>
                <span class="rating-badge"><i class="fas fa-star me-1"></i>{{ "%.2f" | format(course.rating) }}</span>
            </p>
            <div class="container">
                <p class="w-75 mb-5 mx-auto" style="color: rgba(255,255,255,0.85);">
                    {{ course.short_desc }}
                </p>
            </div>
            {% if current_user.is_authenticated %}
                <a href="#" class="btn-primary-red">
                    <i class="fas fa-play me-1"></i>Перейти к материалам
                </a>
            {% else %}
                <button class="btn btn-outline-light btn-lg" disabled>Записаться</button>
            {% endif %}
        </div>
    </div>
</div>

<div class="container mt-5">

    <section class="course-section">
        <h2>О курсе</h2>
        <p style="color: var(--text-sec);">{{ course.full_desc }}</p>
    </section>

    {# Блок последних отзывов #}
    <section class="course-section">
        <div class="d-flex align-items-center justify-content-between mb-4">
            <h2 class="mb-0">Последние отзывы</h2>
            <a href="{{ url_for('courses.reviews', course_id=course.id) }}" class="btn-primary-red">
                <i class="fas fa-list me-1"></i>Все отзывы
            </a>
        </div>

        {% if reviews %}
            {% for review in reviews %}
                <div class="review-card">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <div>
                            <span class="review-author">{{ review.user.full_name }}</span>
                            <span class="review-date ms-2">{{ review.created_at.strftime('%d.%m.%Y') }}</span>
                        </div>
                        <div class="review-stars">
                            {% for i in range(5) %}
                                {% if i < review.rating %}<i class="fas fa-star"></i>{% else %}<i class="far fa-star"></i>{% endif %}
                            {% endfor %}
                            <span class="ms-1" style="color: var(--text-muted); font-size:0.82rem;">({{ review.rating }}/5)</span>
                        </div>
                    </div>
                    <p class="review-text mb-0">{{ review.text }}</p>
                </div>
            {% endfor %}
        {% else %}
            <p style="color: var(--text-muted);">Отзывов пока нет. Будьте первым!</p>
        {% endif %}
    </section>

    {# Форма отзыва / Уже оставленный отзыв #}
    {% if current_user.is_authenticated %}
        <section class="course-section">
            {% if user_review %}
                <h2>Ваш отзыв</h2>
                <div class="review-card">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <div>
                            <span class="review-author">{{ current_user.full_name }}</span>
                            <span class="review-date ms-2">{{ user_review.created_at.strftime('%d.%m.%Y') }}</span>
                        </div>
                        <div class="review-stars">
                            {% for i in range(5) %}
                                {% if i < user_review.rating %}<i class="fas fa-star"></i>{% else %}<i class="far fa-star"></i>{% endif %}
                            {% endfor %}
                            <span class="ms-1" style="color: var(--text-muted); font-size:0.82rem;">({{ user_review.rating }}/5)</span>
                        </div>
                    </div>
                    <p class="review-text mb-0">{{ user_review.text }}</p>
                </div>
            {% else %}
                {# Форма нового отзыва #}
                <h2>Оставить отзыв</h2>
                <div class="review-form-card">
                    <form method="POST" action="{{ url_for('courses.create_review', course_id=course.id) }}">
                        <input type="hidden" name="next" value="{{ url_for('courses.show', course_id=course.id) }}">
                        <div class="mb-3">
                            <label for="rating">Оценка</label>
                            <select class="form-select" name="rating" id="rating">
                                <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>
                                <option value="0">0 — Ужасно</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="text">Текст отзыва</label>
                            <textarea class="form-control" name="text" id="text" rows="4" placeholder="Поделитесь впечатлением о курсе..."></textarea>
                        </div>
                        <button type="submit" class="btn-primary-red">
                            <i class="fas fa-paper-plane me-1"></i>Отправить отзыв
                        </button>
                    </form>
                </div>
            {% endif %}
        </section>
    {% endif %}

</div>
{% endblock %}