{% extends "base.html" %}

{% block title %}{{ 'attendee_types'|t }} - NetEvents{% endblock %}

{% block content %}
<div class="all-attendee-types-page">
    <a href="{{ url_for('organizer_dashboard') }}" class="back-link"><i data-lucide="arrow-left"></i> {{ 'back_to_dashboard'|t }}</a>

    <div class="page-header">
        <h1>{{ 'attendee_types'|t }}</h1>
        <p class="text-muted">{{ 'manage_attendee_types_across_events'|t }}</p>
    </div>

    {% if events %}
        {% for event in events %}
            <div class="event-card">
                <h2>
                    {{ event.name }}
                    <a href="{{ url_for('event_detail', code=event.code) }}" class="btn btn-sm btn-outline"><i data-lucide="eye"></i> {{ 'view_event'|t }}</a>
                </h2>

                {% if event.attendee_types %}
                    <table class="types-table">
                        <thead>
                            <tr>
                                <th>{{ 'type_name'|t }}</th>
                                <th>{{ 'price'|t }}</th>
                                <th>{{ 'registration_link'|t }}</th>
                                <th>{{ 'attendees'|t }}</th>
                                <th>{{ 'actions'|t }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for at in event.attendee_types %}
                                <tr>
                                    <td><strong>{{ at.name }}</strong></td>
                                    <td>
                                        {% if at.price and at.price > 0 %}
                                            <span class="price">{{ at.price|format_currency }}</span>
                                        {% else %}
                                            <span class="price free">{{ 'free'|t }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <code class="code">
                                            {{ url_for('register_event', code=event.code, type_code=at.code, _external=True) }}
                                        </code>
                                        <button type="button" class="btn btn-sm btn-ghost"
                                                onclick="copyLink('{{ url_for('register_event', code=event.code, type_code=at.code, _external=True) }}')">
                                            <i data-lucide="copy"></i>
                                        </button>
                                    </td>
                                    <td>{{ at.attendee_count }}</td>
                                    <td>
                                        <a href="{{ url_for('manage_attendee_types', event_id=event.id) }}" class="btn btn-sm btn-outline"><i data-lucide="settings"></i></a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <p class="no-types">{{ 'no_attendee_types_for_event'|t }} <a href="{{ url_for('manage_attendee_types', event_id=event.id) }}">{{ 'create_first_type'|t }}</a></p>
                {% endif %}
            </div>
        {% endfor %}
    {% else %}
        <p class="text-muted text-center p-10">
            {{ 'no_events_yet'|t }}
        </p>
    {% endif %}
</div>

<script>
function copyLink(url) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(function() {
            showToast('{{ 'link_copied'|t }}', 'success');
        }, function(err) {
            fallbackCopy(url);
        });
    } else {
        fallbackCopy(url);
    }
}

function fallbackCopy(url) {
    var textArea = document.createElement('textarea');
    textArea.value = url;
    textArea.style.position = 'fixed';
    textArea.style.left = '-9999px';
    textArea.style.top = '-9999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
        var successful = document.execCommand('copy');
        if (successful) {
            showToast('{{ 'link_copied'|t }}', 'success');
        } else {
            showToast('{{ 'copy_failed'|t }}', 'error');
        }
    } catch (err) {
        showToast('{{ 'copy_failed'|t }}', 'error');
    }
    document.body.removeChild(textArea);
}

document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}