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

{% block title %}Nostr Event{% endblock %}

{% block body %}
<div class="container">
    <div class="event-container">
        <div class="event-header">
            {% if author %}
                {% if author.image is defined %}
                    <img src="{{ author.image }}" class="avatar" alt="{{ author.name }}" onerror="this.style.display = 'none'" />
                {% endif %}

                <twig:Molecules:UserFromNpub ident="{{ event.pubkey }}" />
                <hr />
            {% endif %}
            <div class="event-meta">
                <span class="event-date">{{ event.created_at|date('F j, Y - H:i') }}</span>
            </div>
        </div>

        {# NIP-68 Picture Event (kind 20) #}
        {% if event.kind == 20 %}
            {% include 'event/_kind20_picture.html.twig' %}
        {% else %}
            {# Regular event content for non-picture events #}
            <div class="event-content">
                <twig:Atoms:Content :content="event.content" />
            </div>
        {% endif %}

        {% if nostrLinks is defined and nostrLinks|length > 0 %}
        <div class="nostr-links">
            <h4>Referenced Nostr Links</h4>
            <ul class="link-list">
                {% for link in nostrLinks %}
                <li>
                    <a href="/e/{{ link.identifier }}">{{ link.identifier }}</a>
                    <span class="link-type">({{ link.type }})</span>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        <div class="event-footer">
            {# Source link from r tag #}
            {% set sourceUrl = null %}
            {% for tag in event.tags %}
                {% if tag[0] == 'r' and tag[2] == 'source' %}
                    {% set sourceUrl = tag[1] %}
                {% endif %}
            {% endfor %}

            {% if sourceUrl %}
                <div class="picture-source">
                    <span class="source-label">Source:</span>
                    <a href="{{ sourceUrl }}" target="_blank" rel="noopener noreferrer" class="source-link">
                        {{ sourceUrl }}
                    </a>
                </div>
            {% endif %}

            {% if is_granted('ROLE_ADMIN') %}
            <div class="event-tags">
                {% if event.tags is defined and event.tags|length > 0 %}
                    <ul>
                    {% for tag in event.tags %}
                        <li>
                            <strong>{{ tag[0] }}:</strong> {{ tag[1] }}
                            {% if tag[2] is defined %}
                                <span>{{ tag[2] }}</span>
                            {% endif %}
                            {% if tag[3] is defined %}
                                <span>{{ tag[3] }}</span>
                            {% endif %}
                        </li>
                    {% endfor %}
                    </ul>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .event-container {
        max-width: 800px;
        margin: 2rem auto;
        background: #fff;
        border-radius: 8px;
    }

    .event-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid #eee;
        padding: 1rem;
    }

    .event-content {
        padding: 1rem;
        font-size: 1.1rem;
        line-height: 1.6;
    }

    /* NIP-68 Picture Event Styles */
    .picture-event {
        padding: 1rem;
    }

    .picture-title {
        font-size: 1.8rem;
        font-weight: bold;
        margin-bottom: 1rem;
        color: #333;
    }

    .content-warning {
        background-color: #fff3cd;
        border: 2px solid #ffc107;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
        text-align: center;
    }

    .btn-show-nsfw {
        margin-top: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: #ffc107;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
    }

    .btn-show-nsfw:hover {
        background-color: #e0a800;
    }

    .picture-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .picture-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        background-color: #f5f5f5;
    }

    .picture-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        border-radius: 8px;
    }

    .annotated-users {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .user-tag {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.9rem;
        pointer-events: all;
        cursor: pointer;
        transform: translate(-50%, -50%);
    }

    .picture-alt {
        font-size: 0.9rem;
        color: #666;
        margin-top: 0.5rem;
        font-style: italic;
    }

    .picture-description {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
        color: #333;
    }

    .picture-location {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
        color: #555;
        font-size: 0.95rem;
    }

    .location-icon {
        font-size: 1.2rem;
    }

    .geohash {
        background-color: #e9ecef;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-family: monospace;
        font-size: 0.85rem;
        cursor: help;
    }

    .picture-hashtags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .hashtag {
        background-color: #e7f3ff;
        color: #0066cc;
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .hashtag:hover {
        background-color: #d0e7ff;
    }

    .picture-source {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
        font-size: 0.95rem;
    }

    .source-label {
        font-weight: 600;
        color: #495057;
    }

    .source-link {
        color: #0066cc;
        text-decoration: none;
        word-break: break-all;
    }

    .source-link:hover {
        text-decoration: underline;
    }

    .nostr-links {
        margin: 1.5rem 0;
        padding: 1rem;
        background-color: #f9f9f9;
        border-radius: 4px;
    }

    .link-list {
        list-style: none;
        padding-left: 0;
    }

    .link-list li {
        word-break: break-all;
    }

    .link-type {
        color: #6c757d;
        font-size: 0.9rem;
        margin-left: 0.5rem;
    }

    .event-footer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1rem;
        border-top: 1px solid #eee;
    }

    .event-tags {
        flex: 1;
    }

    .event-tags ul, .event-references ul {
        list-style-type: none;
        padding-left: 0;
    }

    .event-tags li, .event-references li {
        margin-bottom: 0.5rem;
    }

    .error {
        color: #dc3545;
        padding: 1rem;
        text-align: center;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .picture-gallery {
            grid-template-columns: 1fr;
        }

        .picture-title {
            font-size: 1.5rem;
        }
    }
</style>
{% endblock %}