{# NIP-68 Picture Event (kind 20) #}
<div class="picture-event">
    {# Title tag #}
    {% set title = null %}
    {% for tag in event.tags %}
        {% if tag[0] == 'title' %}
            {% set title = tag[1] %}
        {% endif %}
    {% endfor %}

    {% if title %}
        <h2 class="picture-title">{{ title }}</h2>
    {% endif %}

    {# Content warning #}
    {% set contentWarning = null %}
    {% for tag in event.tags %}
        {% if tag[0] == 'content-warning' %}
            {% set contentWarning = tag[1] %}
        {% endif %}
    {% endfor %}

    {% if contentWarning %}
        <div class="content-warning">
            <strong>⚠️ Content Warning:</strong> {{ contentWarning }}
            <button class="btn-show-nsfw" onclick="this.parentElement.nextElementSibling.classList.remove('hidden'); this.parentElement.style.display='none';">Show Content</button>
        </div>
        <div class="picture-gallery hidden">
    {% else %}
        <div class="picture-gallery">
    {% endif %}

    {# Display images from imeta tags #}
    {% for tag in event.tags %}
        {% if tag[0] == 'imeta' %}
            {% set imageUrl = null %}
            {% set mimeType = null %}
            {% set blurhash = null %}
            {% set dimensions = null %}
            {% set altText = null %}
            {% set fallbacks = [] %}
            {% set annotatedUsers = [] %}

            {# Parse imeta tag parameters #}
            {% for i in 1..(tag|length - 1) %}
                {% set param = tag[i] %}
                {% if param starts with 'url ' %}
                    {% set imageUrl = param[4:] %}
                {% elseif param starts with 'm ' %}
                    {% set mimeType = param[2:] %}
                {% elseif param starts with 'blurhash ' %}
                    {% set blurhash = param[9:] %}
                {% elseif param starts with 'dim ' %}
                    {% set dimensions = param[4:] %}
                {% elseif param starts with 'alt ' %}
                    {% set altText = param[4:] %}
                {% elseif param starts with 'fallback ' %}
                    {% set fallbacks = fallbacks|merge([param[9:]]) %}
                {% elseif param starts with 'annotate-user ' %}
                    {% set annotatedUsers = annotatedUsers|merge([param[14:]]) %}
                {% endif %}
            {% endfor %}

            {% if imageUrl %}
                <div class="picture-item">
                    <picture>
                        {% for fallback in fallbacks %}
                            <source srcset="{{ fallback }}" />
                        {% endfor %}
                        <img src="{{ imageUrl }}"
                             alt="{{ altText|default('Picture') }}"
                             {% if dimensions %}data-dimensions="{{ dimensions }}"{% endif %}
                             {% if blurhash %}data-blurhash="{{ blurhash }}"{% endif %}
                             class="picture-image"
                             onerror="if(this.nextSibling) this.src=this.nextSibling.srcset; else this.parentElement.innerHTML='<p class=error>Image failed to load</p>';" />
                    </picture>

                    {# Display annotated users #}
                    {% if annotatedUsers|length > 0 %}
                        <div class="annotated-users">
                            {% for userAnnotation in annotatedUsers %}
                                {% set parts = userAnnotation|split(':') %}
                                {% if parts|length == 3 %}
                                    <div class="user-tag" data-left="{{ parts[1] }}" data-top="{{ parts[2] }}" style="left: {{ parts[1] }}%; top: {{ parts[2] }}%;">
                                        <twig:Molecules:UserFromNpub ident="{{ parts[0] }}" />
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    {% endif %}

                    {% if altText %}
                        <p class="picture-alt">{{ altText }}</p>
                    {% endif %}
                </div>
            {% endif %}
        {% endif %}
    {% endfor %}
    </div>

    {# Description from content #}
    {% if event.content %}
        <div class="picture-description mt-1">
            <twig:Atoms:Content :content="event.content" />
        </div>
    {% endif %}

    {# Location data #}
    {% set location = null %}
    {% set geohash = null %}
    {% for tag in event.tags %}
        {% if tag[0] == 'location' %}
            {% set location = tag[1] %}
        {% elseif tag[0] == 'g' %}
            {% set geohash = tag[1] %}
        {% endif %}
    {% endfor %}

    {% if location or geohash %}
        <div class="picture-location">
            <span class="location-icon">📍</span>
            {% if location %}{{ location }}{% endif %}
            {% if geohash %}<span class="geohash" title="{{ geohash }}">{{ geohash[:6] }}...</span>{% endif %}
        </div>
    {% endif %}

    {# Hashtags #}
    {% set hashtags = [] %}
    {% for tag in event.tags %}
        {% if tag[0] == 't' %}
            {% set hashtags = hashtags|merge([tag[1]]) %}
        {% endif %}
    {% endfor %}

    {% if hashtags|length > 0 %}
        <div class="picture-hashtags">
            {% for hashtag in hashtags %}
                <span class="hashtag">#{{ hashtag }}</span>
            {% endfor %}
        </div>
    {% endif %}
</div>