{% extends "base.html" %}

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

{% block content %}
<div class="connection-requests">
    <h1>{{ 'connection_requests'|t }}</h1>
    <p>{{ 'people_scanned_qr'|t }}</p>

    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <div class="alert alert-info">
                {% for message in messages %}
                    <p>{{ message }}</p>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    {% if requests %}
        <div class="requests-list">
            {% for req in requests %}
            <div class="request-card">
                <div class="request-profile">
                    {% if req.profile_picture %}
                    <img src="{{ url_for('uploaded_file', filename=req.profile_picture) }}" alt="{{ req.first_name }}" class="profile-photo">
                    {% else %}
                    <div class="profile-photo-placeholder">{{ req.first_name[0] }}{{ req.last_name[0] }}</div>
                    {% endif %}
                </div>
                <div class="request-info">
                    <h3>{{ req.first_name }} {{ req.last_name }}</h3>
                    <p class="request-email">{{ req.email }}</p>
                    <p class="request-org">{{ (req.organisation)|spacify if req.organisation else '' }}{% if req.role %} - {{ (req.role)|spacify }}{% endif %}</p>
                    {% if req.introduction %}
                        <p class="request-intro">"{{ req.introduction }}"</p>
                    {% endif %}
                    <p class="request-time">{{ 'requested'|t }} {{ req.created_at|localized_date if req.created_at else 'recently' }}</p>
                </div>
                <div class="request-actions">
                    <button class="btn btn-success respond-btn" data-connection-id="{{ req.id }}" data-action="approve">{{ 'approve'|t }}</button>
                    <button class="btn btn-danger respond-btn" data-connection-id="{{ req.id }}" data-action="reject">{{ 'reject'|t }}</button>
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="no-requests">{{ 'no_pending_requests'|t }}</p>
    {% endif %}

    <div class="back-link">
        <a href="{{ url_for('attendee_dashboard') }}" class="btn btn-outline">{{ 'back_to_dashboard'|t }}</a>
    </div>
</div>

<script>
document.querySelectorAll('.respond-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const connectionId = this.dataset.connectionId;
        const action = this.dataset.action;

        try {
            const response = await fetch(`/attendee/connection-request/${connectionId}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ action: action })
            });
            const data = await response.json();

            if (data.success) {
                location.reload();
            } else {
                alert(data.error || 'Error processing request');
            }
        } catch (error) {
            alert('Error processing request');
        }
    });
});
</script>

<style>
.request-card {
    display: flex;
    gap: 20px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 15px;
    background: #fff;
}

.request-profile {
    flex-shrink: 0;
}

.profile-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-photo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #64748b;
}

.request-info {
    flex: 1;
}

.request-info h3 {
    margin: 0 0 5px 0;
}

.request-email {
    color: #64748b;
    margin: 0 0 5px 0;
}

.request-org {
    color: #475569;
    margin: 0 0 10px 0;
}

.request-intro {
    font-style: italic;
    color: #64748b;
    margin: 0 0 10px 0;
}

.request-time {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

.request-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}
</style>
{% endblock %}