{% 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>
        <div class="event-content">
            <twig:Atoms:Content :content="event.content" />
        </div>

        {% 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">
            <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>
        </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;
    }

    .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;
        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;
    }
</style>
{% endblock %}