{% extends "base.html" %}

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

{% block content %}
<style>
.page-header {
    margin-bottom: 30px;
}
.page-header h1 {
    margin-bottom: 10px;
}
.event-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.event-card h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #2c3e50;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.event-card h2 a {
    font-size: 16px;
    font-weight: normal;
}
.types-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.types-table th,
.types-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.types-table th {
    background: #f8f9fa;
    font-weight: 600;
}
.price {
    font-weight: 500;
    color: #27ae60;
}
.price.free {
    color: #7f8c8d;
}
.no-types {
    color: #888;
    font-style: italic;
}
.back-link {
    margin-bottom: 20px;
    display: inline-block;
}
</style>

<div class="all-attendee-types-page">
    <a href="{{ url_for('organizer_dashboard') }}" class="back-link">&larr; {{ 'back_to_dashboard'|t }}</a>

    <div class="page-header">
        <h1>{{ 'attendee_types'|t }}</h1>
        <p style="color: #666;">{{ '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">{{ '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 style="background: #f0f0f0; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                                            {{ url_for('register_event', code=event.code, type_code=at.code, _external=True) }}
                                        </code>
                                        <button type="button" class="btn btn-sm" style="padding: 2px 8px; margin-left: 8px;"
                                                onclick="copyLink('{{ url_for('register_event', code=event.code, type_code=at.code, _external=True) }}')">
                                            {{ 'copy'|t }}
                                        </button>
                                    </td>
                                    <td>{{ at.attendee_count }}</td>
                                    <td>
                                        <a href="{{ url_for('manage_attendee_types', event_id=event.id) }}" class="btn btn-sm">{{ 'manage'|t }}</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 style="color: #888; text-align: center; padding: 40px;">
            {{ 'no_events_yet'|t }}
        </p>
    {% endif %}
</div>

<script>
function copyLink(url) {
    // Try modern clipboard API first
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(function() {
            alert('{{ 'link_copied'|t }}');
        }, function(err) {
            // Fallback for HTTP sites
            fallbackCopy(url);
        });
    } else {
        // Fallback for older browsers or HTTP sites
        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) {
            alert('{{ 'link_copied'|t }}');
        } else {
            alert('{{ 'copy_failed'|t }}');
        }
    } catch (err) {
        alert('{{ 'copy_failed'|t }}');
    }
    document.body.removeChild(textArea);
}
</script>
{% endblock %}