{% extends "base.html" %}

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

{% block content %}
<div class="staff-events-dashboard">
    <div class="staff-header">
        <h1>{{ 'staff_dashboard'|t }}</h1>
        <p>{{ 'welcome'|t }}, {{ staff_name }}</p>
    </div>

    <div class="section-box">
        <h2>{{ 'select_event'|t }}</h2>

        {% if events %}
            <div class="events-list">
                {% for event in events %}
                <div class="event-card">
                    <div class="event-info">
                        <h3>{{ event.name }}</h3>
                        <p><strong>{{ 'location'|t }}:</strong> {{ event.location }}</p>
                        <p><strong>{{ 'start'|t }}:</strong> {{ event.start_time|localized_date if event.start_time else 'TBD' }}</p>
                    </div>
                    <div class="event-actions">
                        <a href="{{ url_for('staff_event_dashboard', event_id=event.id) }}" class="btn btn-primary btn-lg">{{ 'start_qr_scanner'|t }}</a>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <p class="no-events">{{ 'no_events_assigned'|t }}</p>
        {% endif %}
    </div>
</div>

<style>
.staff-events-dashboard {
    max-width: 800px;
    margin: 0 auto;
}

.staff-header {
    margin-bottom: 20px;
}

.staff-header h1 {
    margin-bottom: 5px;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.event-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.event-info h3 {
    margin: 0 0 10px 0;
}

.event-info p {
    margin: 5px 0;
    color: #666;
}

.event-actions {
    flex-shrink: 0;
    margin-left: 20px;
}

.no-events {
    text-align: center;
    color: #666;
    padding: 40px;
}
</style>
{% endblock %}