{% extends "base.html" %}

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

{% block content %}
<div class="attendees-page">
    {% if event %}
    <div class="event-info-header">
        <h1>{{ event.name }}</h1>
        <div class="event-meta">
            {% if event.location %}
                <span class="event-location">{{ event.location }}</span>
            {% endif %}
            {% if event.start_date %}
                <span class="event-date">{{ event.start_date|format_date }}</span>
            {% endif %}
        </div>
        {% if event.description %}
            <p class="event-description">{{ event.description }}</p>
        {% endif %}
    </div>
    {% endif %}

    <p class="page-subtitle">{{ 'connect_with_attendees'|t }}</p>

    <div class="attendee-search">
        <form method="GET" action="{{ url_for('list_attendees') }}">
            <input type="text" name="q" value="{{ search_query }}" placeholder="{{ 'search_attendees'|t }}">
            <button type="submit" class="btn btn-primary">{{ 'search'|t }}</button>
        </form>
        <p class="search-hint">{{ 'search_min_chars'|t|format(min_chars) }}</p>
    </div>

    {% if search_query and search_query|length >= min_chars %}
        {% if too_broad %}
            <p class="search-too-broad">{{ 'search_too_broad'|t }}</p>
        {% elif attendees %}
            <div class="attendees-grid">
                {% for att in attendees %}
                    <div class="attendee-card">
                        <div class="attendee-photo">
                            {% if att.profile_picture %}
                                <img src="{{ url_for('static', filename='uploads/' + att.profile_picture) }}" alt="Photo">
                            {% else %}
                                <div class="no-photo">{{ att.first_name[0] }}{{ att.last_name[0] }}</div>
                            {% endif %}
                        </div>
                        <div class="attendee-info">
                            <h3>{{ att.first_name }} {{ att.last_name }}</h3>
                            <p class="attendee-org">{{ att.organisation if att.organisation else '' }}</p>
                            <p class="attendee-role">{{ att.role if att.role else '' }}</p>
                            {% if att.introduction %}
                                <p class="attendee-intro">{{ att.introduction[:100] }}{% if att.introduction|length > 100 %}...{% endif %}</p>
                            {% endif %}
                        </div>
                        <div class="attendee-actions">
                            {% if att.my_status == 'accepted' %}
                                <span class="badge badge-success">{{ 'connected'|t }}</span>
                            {% elif att.my_status == 'pending' %}
                                <span class="badge badge-pending">{{ 'request_pending'|t }}</span>
                            {% elif att.my_status == 'rejected' %}
                                <span class="badge badge-rejected">{{ 'rejected'|t }}</span>
                            {% else %}
                                <form method="POST" action="{{ url_for('create_connection') }}" class="connect-form">
                                    <input type="hidden" name="connected_attendee_id" value="{{ att.id }}">
                                    <button type="submit" class="btn btn-sm btn-primary">{{ 'connect'|t }}</button>
                                </form>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <p class="no-attendees">{{ 'no_attendees_found'|t }}</p>
        {% endif %}
    {% endif %}
</div>
{% endblock %}