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

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

{% block title %}Activité 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 %}Ton activité{% else %}Activité de {{ display_name }}{% endif %}
        </h1>
    </header>

    {% if activity|length > 0 %}
        {% set shelf_labels_fr = { 'read': 'a fini', 'reading': 'a commencé', 'want_to_read': 'a ajouté à lire' } %}
        <ol class="activity-timeline">
            {% for event in activity %}
                <li class="activity-event">
                    {% if event.work %}
                        <a class="activity-event__cover-link" href="{{ path('app_work_show', { publicId: event.work.publicId }) }}">
                            {% if work_cover_thumb(event.work) %}
                                <img class="activity-event__cover" src="{{ work_cover_thumb(event.work) }}" alt="" loading="lazy" width="167" height="250"
                                     onerror="this.outerHTML='<span class=&quot;activity-event__cover activity-event__cover--ph&quot; aria-hidden=&quot;true&quot;></span>'">
                            {% else %}
                                <span class="activity-event__cover activity-event__cover--ph" aria-hidden="true"></span>
                            {% endif %}
                        </a>
                    {% else %}
                        <span class="activity-event__cover activity-event__cover--ph" aria-hidden="true"></span>
                    {% endif %}
                    <div class="activity-event__main">
                    <span class="activity-event__when">{{ event.createdAt|temps_relatif }}</span>
                    <div class="activity-event__body">
                        {% if event.type == 'rated' %}
                            <span class="activity-event__verb">a noté</span>
                            <a class="activity-event__work" href="{{ path('app_work_show', { publicId: event.work.publicId }) }}">{{ event.work.title }}</a>
                            <span class="activity-event__score">
                                {% set s = event.score|number_format(1, '.', '') %}
                                {% for i in 1..5 %}
                                    <svg viewBox="0 0 24 24" fill="{{ s >= i ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="1.5" width="12" height="12">
                                        <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>
                        {% elseif event.type == 'reviewed' %}
                            <span class="activity-event__verb">a publié une critique sur</span>
                            <a class="activity-event__work" href="{{ path('app_work_show', { publicId: event.work.publicId }) }}">{{ event.work.title }}</a>
                        {% elseif event.type == 'shelved' %}
                            <span class="activity-event__verb">{{ shelf_labels_fr[event.shelf] ?? 'a rangé' }}</span>
                            <a class="activity-event__work" href="{{ path('app_work_show', { publicId: event.work.publicId }) }}">{{ event.work.title }}</a>
                        {% elseif event.type == 'commented' %}
                            <span class="activity-event__verb">a commenté la critique sur</span>
                            <a class="activity-event__work" href="{{ path('app_review_show', { publicId: event.targetReview.publicId }) }}">{{ event.work.title }}</a>
                        {% elseif event.type == 'followed' %}
                            <span class="activity-event__verb">a commencé à suivre</span>
                            <a class="activity-event__work" href="{{ path('app_profile_show', { handle: event.targetUser.username }) }}">@{{ event.targetUser.username }}</a>
                        {% endif %}
                    </div>
                    </div>
                </li>
            {% endfor %}
        </ol>
    {% else %}
        <p class="muted" style="margin-top: var(--space-5);">
            {% if is_own_profile %}
                Tu n'as encore rien fait. <a href="{{ path('app_search') }}" style="color: var(--violet);">Note un livre</a> pour commencer.
            {% else %}
                Pas encore d'activité.
            {% endif %}
        </p>
    {% endif %}
{% endblock %}