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

{% block body %}

    {% include 'partial/_author-section.html.twig' with {author: author, npub: npub} %}

    <section>
    <div class="profile-tabs">
        <a href="{{ path('author-profile', {'npub': npub}) }}" class="tab-link">Articles</a>
{#        <a href="{{ path('author-reading-lists', {'npub': npub}) }}" class="tab-link">Reading Lists</a>#}
        <a href="{{ path('author-media', {'npub': npub}) }}" class="tab-link active">Media</a>
      </div>

    <div class="w-container">
        {% if pictureEvents|length > 0 %}
            <div data-controller="media--media-loader"
                 data-media--media-loader-npub-value="{{ npub }}"
                 data-media--media-loader-total-value="{{ total }}">
                <div class="masonry-grid" data-media--media-loader-target="grid">
                    {% for event in pictureEvents %}
                        <div class="masonry-item">
                            {# Extract title #}
                            {% set title = null %}
                            {% for tag in event.tags %}
                                {% if tag[0] == 'title' %}
                                    {% set title = tag[1] %}
                                {% endif %}
                            {% endfor %}

                            {# Extract first image from imeta tags #}
                            {% set firstImageUrl = null %}
                            {% set firstVideoUrl = null %}
                            {% set imageAlt = null %}
                            {% set isVideo = false %}
                            {% for tag in event.tags %}
                                {% if tag[0] == 'imeta' %}
                                    {% set videoUrl = null %}
                                    {% set imageUrl = null %}
                                    {% set previewImage = null %}
                                    {% for i in 1..(tag|length - 1) %}
                                        {% set param = tag[i] %}
                                        {% if param starts with 'url ' %}
                                            {% set potentialUrl = param[4:] %}
                                            {# Check if it's a video URL #}
                                            {% if potentialUrl matches '/\\.(mp4|webm|ogg|mov)$/i' or potentialUrl matches '/video/i' %}
                                                {% set videoUrl = potentialUrl %}
                                                {% set isVideo = true %}
                                            {% else %}
                                                {% set imageUrl = potentialUrl %}
                                            {% endif %}
                                        {% elseif param starts with 'image ' %}
                                            {# Preview/poster image for video or regular image #}
                                            {% set previewImage = param[6:] %}
                                        {% elseif param starts with 'alt ' %}
                                            {% set imageAlt = param[4:] %}
                                        {% endif %}
                                    {% endfor %}
                                    {# Set the first video and image found #}
                                    {% if videoUrl and firstVideoUrl is null %}
                                        {% set firstVideoUrl = videoUrl %}
                                        {# Use preview image if available, otherwise try to use the main image URL #}
                                        {% if previewImage and firstImageUrl is null %}
                                            {% set firstImageUrl = previewImage %}
                                        {% elseif imageUrl and firstImageUrl is null %}
                                            {% set firstImageUrl = imageUrl %}
                                        {% endif %}
                                    {% endif %}
                                    {# For non-video items, use the image URL or preview #}
                                    {% if not videoUrl and firstImageUrl is null %}
                                        {% if imageUrl %}
                                            {% set firstImageUrl = imageUrl %}
                                        {% elseif previewImage %}
                                            {% set firstImageUrl = previewImage %}
                                        {% endif %}
                                    {% endif %}
                                {% endif %}
                            {% endfor %}

                            {# Generate nevent for linking #}
                            {% set eventId = event.id %}
                            {% set noteId = event.noteId %}

                            <a href="/e/{{ noteId }}" class="masonry-link">
                                {% if firstImageUrl %}
                                    <div class="masonry-image-container">
                                        <img src="{{ firstImageUrl }}"
                                             alt="{{ imageAlt|default(title|default(isVideo ? 'Video' : 'Picture')) }}"
                                             class="masonry-image"
                                             loading="lazy" />
                                        {% if isVideo %}
                                            <div class="video-overlay">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="white" opacity="0.9">
                                                    <path d="M8 5v14l11-7z"/>
                                                </svg>
                                            </div>
                                        {% endif %}
                                        {% if event.content %}
                                            <div class="masonry-hover-caption">
                                                {% if event.content %}
                                                    <p>{{ event.content|length > 100 ? event.content[:100] ~ '...' : event.content }}</p>
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    </div>
                                {% elseif isVideo %}
                                    {# Video without preview image - show placeholder with video icon #}
                                    <div class="masonry-image-container video-no-preview">
                                        <div class="video-placeholder">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="currentColor" opacity="0.4">
                                                <path d="M8 5v14l11-7z"/>
                                            </svg>
                                        </div>
                                        {% if event.content %}
                                            <div class="masonry-hover-caption">
                                                {% if event.content %}
                                                    <p>{{ event.content|length > 100 ? event.content[:100] ~ '...' : event.content }}</p>
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            </a>
                        </div>
                    {% endfor %}
                </div>

                {% if hasMore %}
                    <div class="load-more-container">
                        <button data-media-loader-target="button"
                                data-action="click->media-loader#loadMore"
                                class="btn-load-more">
                            Load More
                        </button>
                        <p data-media-loader-target="status" class="load-more-status">
                            Showing {{ pictureEvents|length }} of {{ total }} media items
                        </p>
                    </div>
                {% endif %}
            </div>
        {% else %}
            <div class="no-media">
                <p>No media found for this author.</p>
            </div>
        {% endif %}
    </div>
</section>
{% endblock %}