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

{% block title %}{{ playlist.title }} on SpinShare{% endblock %}

{% block meta %}
    <meta property="og:title" content="{{ playlist.title }} on SpinShare"/>
    <meta property="og:description" content="Created by {{ user.username }} &dash; {{ playlistCount }} Charts"/>
    <meta property="og:type" content="music.playlist"/>
    <meta property="og:url" content="{{ path('playlist.detail', {playlistId: playlist.id}) }}"/>
    <meta property="og:image" content="{{ asset("uploads/cover/" ~ playlist.fileReference ~ ".png?v=" ~ date().timestamp) }}"/>
{% endblock %}

{% block content %}
    <section class="section-playlist-detail">
        <div class="cover" style="background-image: url({{ asset('uploads/cover/' ~ playlist.fileReference ~ '.png?t=' ~ date().timestamp) }});">
            <div class="shade">
                <div class="content">
                    <div class="title">{{ playlist.title }}{% if playlist.isOfficial %}<span class="official-badge">OFFICIAL</span>{% endif %}</div>
                    <div class="quickinfo">{{ playlistCount }} Charts</div>
                </div>
            </div>
        </div>
        <div class="playlist-content">
            <div class="playlist-detail">
                <div class="playlist-description">
                    {{ playlist.description|nl2br }}
                </div>
                {% if not playlist.isOfficial %}
                    <div class="playlist-uploader">
                        <div class="label">Created by</div>
                        <a href="{{ path('user.detail', {userId: user.id}) }}" class="user-item">
                            <div class="user-avatar" style="background-image: url({{ asset('uploads/avatar/' ~ user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></div>
                            <div class="user-metadata">
                                <div class="user-username">{{ user.username }}</div>
                                {% if user.isVerified %}
                                    <div class="user-badge"><i class="mdi mdi-check-decagram"></i></div>
                                {% endif %}
                                {% if user.isPatreon %}
                                    <div class="user-badge"><i class="mdi mdi-patreon"></i></div>
                                {% endif %}
                            </div>
                        </a>
                    </div>
                {% endif %}
                {% if playlist.songs|length > 0 %}
                    <div class="playlist-charters">
                        <div class="label">With Charts by</div>
                        <div class="charters">
                            {% set charters = [] %}
                            {% for song in playlist.songs %}
                                {% if song.charter not in charters %}
                                    {% if loop.index == 1 %}
                                    {{ song.charter }}
                                    {% endif %}
                                    ,&#32{{ song.charter }}
                                    {% set charters = charters|merge([song.charter]) %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>
            <div class="song-row song-row-playlist">
                {% if playlist.songs|length > 0 %}
                    <div class="song-list">
                        {% for song in playlist.songs %}
                            {{ include('components/song-item.html.twig', {song: song}) }}
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="list-noresults">
                        <div class="noresults-text">This playlist is empty.</div>
                    </div>
                {% endif %}
            </div>
        </div>
    </section>
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{{ asset('assets/css/playlistdetail.css?v=' ~ date().timestamp) }}" />
{% endblock %}
