{# Single artist template #}
<article class="fedistream-single fedistream-single--artist">
    <header class="fedistream-single__header">
        <div class="fedistream-single__hero">
            {% if post.thumbnail %}
                <img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-single__image fedistream-single__image--artist">
            {% else %}
                <div class="fedistream-single__placeholder fedistream-single__placeholder--artist">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                </div>
            {% endif %}
        </div>
        <div class="fedistream-single__info">
            <h1 class="fedistream-single__title">{{ post.title }}</h1>
            {% if post.artist_type %}
                <p class="fedistream-single__type">{{ post.artist_type }}</p>
            {% endif %}
            {% if post.genres is not empty %}
                <div class="fedistream-single__genres">
                    {% for genre in post.genres %}
                        <a href="{{ genre.link }}" class="fedistream-tag">{{ genre.name }}</a>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </header>

    {% if post.content %}
        <section class="fedistream-single__content">
            <h2 class="fedistream-section__title">{{ __('About', 'wp-fedistream') }}</h2>
            <div class="fedistream-single__description">
                {{ post.content|raw }}
            </div>
        </section>
    {% endif %}

    {% if post.social_links is not empty %}
        <section class="fedistream-single__social">
            <h2 class="fedistream-section__title">{{ __('Connect', 'wp-fedistream') }}</h2>
            <div class="fedistream-social-links">
                {% for platform, url in post.social_links %}
                    <a href="{{ url }}" class="fedistream-social-link fedistream-social-link--{{ platform }}" target="_blank" rel="noopener noreferrer">
                        {{ platform }}
                    </a>
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {% if post.albums is not empty %}
        <section class="fedistream-single__albums">
            <h2 class="fedistream-section__title">{{ __('Discography', 'wp-fedistream') }}</h2>
            <div class="fedistream-grid fedistream-grid--albums">
                {% for album in post.albums %}
                    {% include 'partials/card-album.twig' with { post: album } %}
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {% if post.tracks is not empty %}
        <section class="fedistream-single__tracks">
            <h2 class="fedistream-section__title">{{ __('Popular Tracks', 'wp-fedistream') }}</h2>
            <div class="fedistream-tracklist">
                {% for track in post.tracks %}
                    <div class="fedistream-tracklist__item" data-track-id="{{ track.id }}">
                        <span class="fedistream-tracklist__number">{{ loop.index }}</span>
                        {% if track.thumbnail %}
                            <img src="{{ track.thumbnail }}" alt="" class="fedistream-tracklist__artwork">
                        {% endif %}
                        <div class="fedistream-tracklist__info">
                            <a href="{{ track.permalink }}" class="fedistream-tracklist__title">{{ track.title }}</a>
                            {% if track.album %}
                                <span class="fedistream-tracklist__album">{{ track.album }}</span>
                            {% endif %}
                        </div>
                        {% if track.duration_formatted %}
                            <span class="fedistream-tracklist__duration">{{ track.duration_formatted }}</span>
                        {% endif %}
                        <button type="button" class="fedistream-tracklist__play" aria-label="{{ __('Play', 'wp-fedistream') }}">
                            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        </button>
                    </div>
                {% endfor %}
            </div>
        </section>
    {% endif %}
</article>