{% extends 'base.html.twig' %}

{% set rv_work = review.work %}
{% set rv_author = review.author %}
{% set rv_score = review.rating.score|number_format(1, '.', '') %}
{% set rv_author_avatar = user_avatar(rv_author) %}

{% block title %}{{ rv_author.displayName ?: rv_author.username }} sur {{ rv_work.title }} · LivreComment{% endblock %}
{% block og %}
    {% set og_cover = work_cover(rv_work) %}
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="LivreComment">
    <meta property="og:title" content="{{ rv_author.displayName ?: rv_author.username }} sur {{ rv_work.title }}">
    <meta property="og:description" content="{{ review.containsSpoilers ? 'Une critique (avec spoilers) sur LivreComment.' : review.body|striptags|slice(0, 200) }}">
    <meta property="og:url" content="{{ url('app_review_show', { publicId: review.publicId }) }}">
    {% if og_cover %}<meta property="og:image" content="{{ og_cover starts with 'http' ? og_cover : absolute_url(og_cover) }}">{% endif %}
    <meta name="twitter:card" content="{{ og_cover ? 'summary_large_image' : 'summary' }}">
{% endblock %}

{% block body_class %}page-wide{% endblock %}

{% block app_header %}
    {% include 'components/_detail_header.html.twig' with { back_fallback: path('app_work_show', { publicId: rv_work.publicId }), title: 'Livre' } only %}
{% endblock %}

{% block body %}
    {% for label, messages in app.flashes(['error']) %}
        <ul class="flash-list">
            {% for message in messages %}
                <li class="flash flash--{{ label }}">{{ message }}</li>
            {% endfor %}
        </ul>
    {% endfor %}

    <article class="review-show">
        <header class="review-show__header">
            <a class="review-show__author" href="{{ path('app_profile_show', { handle: rv_author.username }) }}">
                {% if rv_author_avatar %}
                    <img class="review-show__avatar" src="{{ rv_author_avatar }}" alt="" width="40" height="40" loading="lazy">
                {% else %}
                    <span class="review-show__avatar review-show__avatar--placeholder" aria-hidden="true">
                        {{ (rv_author.displayName ?: rv_author.username)|first|upper }}
                    </span>
                {% endif %}
                <span class="review-show__author-name">
                    <strong>{{ rv_author.displayName ?: rv_author.username }}</strong>
                    <span class="review-show__handle">@{{ rv_author.username }}</span>
                </span>
            </a>
            <span class="review-show__date">{{ review.createdAt|temps_relatif }}</span>
        </header>

        <a class="review-show__work" href="{{ path('app_work_show', { publicId: rv_work.publicId }) }}">
            {% if work_cover(rv_work) %}
                <img class="review-show__cover" src="{{ work_cover(rv_work) }}" alt="" loading="eager"
                     onerror="this.outerHTML='<div class=&quot;review-show__cover review-show__cover--placeholder&quot; aria-hidden=&quot;true&quot;></div>'">
            {% else %}
                <div class="review-show__cover review-show__cover--placeholder" aria-hidden="true"></div>
            {% endif %}
            <div class="review-show__work-meta">
                <h1 class="review-show__title">{{ rv_work.title }}</h1>
                <p class="review-show__stars" aria-label="Note {{ review.rating.score }} sur 5">
                    {% for i in 1..5 %}
                        <svg viewBox="0 0 24 24" fill="{{ rv_score >= i ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="1.5" width="14" height="14">
                            <path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                        </svg>
                    {% endfor %}
                    <span class="review-show__score">{{ review.rating.score }}/5</span>
                </p>
            </div>
        </a>

        {% if review.containsSpoilers %}
            <details class="review-show__body review-show__body--spoilers">
                <summary>Contient des spoilers, afficher</summary>
                <p>{{ review.body }}</p>
            </details>
        {% else %}
            <div class="review-show__body">{{ review.body|nl2br }}</div>
        {% endif %}

        <footer class="review-show__footer">
            {% include 'components/_review_like_button.html.twig' with { review: review, return_to: app.request.requestUri } only %}
            <span class="review-show__comments-count">
                {{ review.commentsCount }} {{ review.commentsCount > 1 ? 'commentaires' : 'commentaire' }}
            </span>
            <button type="button"
                    class="review-show__share"
                    data-controller="share"
                    data-share-url-value="{{ url('app_review_show', { publicId: review.publicId }) }}"
                    data-share-title-value="{{ rv_author.displayName ?: rv_author.username }} sur {{ rv_work.title }} · LivreComment"
                    data-action="share#trigger"
                    aria-label="Partager la critique">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" aria-hidden="true">
                    <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
                    <polyline points="16 6 12 2 8 6"/>
                    <line x1="12" y1="2" x2="12" y2="15"/>
                </svg>
                Partager
            </button>
        </footer>
    </article>

    <section class="comments">
        <h2 class="comments__title">Commentaires</h2>

        {% include 'components/_comment_form.html.twig' with { review: review } only %}

        {% if comments|length > 0 %}
            <ul class="comments__list">
                {% for comment in comments %}
                    {% include 'components/_comment_card.html.twig' with { comment: comment, is_owner: app.user.id == comment.author.id } only %}
                {% endfor %}
            </ul>
        {% else %}
            <p class="comments__empty">Sois le premier à réagir.</p>
        {% endif %}
    </section>
{% endblock %}