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

{% set display_name = profile.displayName ?: profile.username %}

{% block title %}Livres de {{ display_name }} · LivreComment{% endblock %}

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

{% block body %}
    <header class="profile-subpage-header">
        <a href="{{ path('app_profile_show', { handle: profile.username }) }}" class="search-crumb">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polyline points="15 18 9 12 15 6"/>
            </svg>
            {{ display_name }}
        </a>
        <h1 class="search-page-title">{% if is_own_profile %}Tes livres{% else %}Livres de {{ display_name }}{% endif %}</h1>
    </header>

    {% if ratings|length > 0 %}
        <div class="favorites-grid">
            {% for rating in ratings %}
                {% set rwork = rating.work %}
                {% set rscore = rating.score %}
                {% set rfull = rscore|round(0, 'floor') %}
                <a href="{{ path('app_work_show', { publicId: rwork.publicId }) }}" class="favorite-card">
                    {% if work_cover_thumb(rwork) %}
                        <img class="favorite-card__cover" src="{{ work_cover_thumb(rwork) }}" alt="Couverture de {{ rwork.title }}" loading="lazy" width="167" height="250"
                             onerror="this.outerHTML='<div class=&quot;favorite-card__cover favorite-card__cover--placeholder&quot; aria-hidden=&quot;true&quot;><svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.25&quot; width=&quot;28&quot; height=&quot;28&quot;><path d=&quot;M4 19.5A2.5 2.5 0 0 1 6.5 17H20&quot;/><path d=&quot;M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z&quot;/></svg></div>'">
                    {% else %}
                        <div class="favorite-card__cover favorite-card__cover--placeholder" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" width="28" height="28">
                                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
                                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
                            </svg>
                        </div>
                    {% endif %}
                    <div class="activity-recent__meta">
                        <span class="activity-recent__stars" aria-label="Note {{ rscore }} sur 5">
                            {% if rfull > 0 %}{% for i in 1..rfull %}<svg viewBox="0 0 24 24" fill="currentColor" width="10" height="10" aria-hidden="true"><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 %}{% endif %}
                            {% if (rscore - rfull) >= 0.5 %}<span class="activity-recent__half" aria-hidden="true">½</span>{% endif %}
                        </span>
                        {% if rating.review %}
                            <svg class="activity-recent__comment" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-label="A écrit une critique">
                                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
                            </svg>
                        {% endif %}
                    </div>
                </a>
            {% endfor %}
        </div>
    {% else %}
        <div class="home-empty">
            <p class="home-empty__title">{% if is_own_profile %}Tu n'as encore noté aucun livre{% else %}Aucun livre noté{% endif %}</p>
            {% if is_own_profile %}<a href="{{ path('app_search') }}" class="btn btn--compact">Trouver un livre</a>{% endif %}
        </div>
    {% endif %}
{% endblock %}