{% extends "layouts/base.html" %}

{% block title %}{{ exchange.name }}{% endblock %}

{% block content %}
<div class="container">
    <h1>{{ exchange.name }}</h1>

    <div class="exchange-details">
        <div class="detail-section">
            <h2>Details</h2>
            <dl>
                <dt>State</dt>
                <dd><span class="badge badge-{{ exchange.state }}">{{ exchange.state }}</span></dd>

                <dt>Description</dt>
                <dd>{{ exchange.description or "No description" }}</dd>

                <dt>Budget</dt>
                <dd>{{ exchange.budget }}</dd>

                <dt>Max Participants</dt>
                <dd>{{ exchange.max_participants }}</dd>

                <dt>Registration Close Date</dt>
                <dd>{{ exchange.registration_close_date.strftime('%Y-%m-%d %H:%M') }} {{ exchange.timezone }}</dd>

                <dt>Exchange Date</dt>
                <dd>{{ exchange.exchange_date.strftime('%Y-%m-%d %H:%M') }} {{ exchange.timezone }}</dd>

                <dt>Registration Link</dt>
                <dd>
                    <code id="registration-link">{{ url_for('participant.register', slug=exchange.slug, _external=True) }}</code>
                    <button type="button" onclick="copyToClipboard()">Copy</button>
                </dd>
            </dl>
        </div>

        <div class="detail-section">
            <h2>Participants ({{ exchange.participants|selectattr('withdrawn_at', 'none')|list|length }} / {{ exchange.max_participants }})</h2>
            {% set active_participants = exchange.participants|selectattr('withdrawn_at', 'none')|list %}
            {% if active_participants %}
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Registered</th>
                    </tr>
                </thead>
                <tbody>
                    {% for participant in active_participants|sort(attribute='name') %}
                    <tr>
                        <td>{{ participant.name }}</td>
                        <td>{{ participant.email }}</td>
                        <td>{{ participant.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p>No participants yet.</p>
            {% endif %}
        </div>

        <div class="actions">
            {% if exchange.state == 'draft' %}
            <form method="POST" action="{{ url_for('admin.open_registration', exchange_id=exchange.id) }}" style="display: inline;">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-primary">Open Registration</button>
            </form>
            {% endif %}
            <a href="{{ url_for('admin.dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
        </div>
    </div>
</div>

<script>
function copyToClipboard() {
    const link = document.getElementById('registration-link').textContent;
    navigator.clipboard.writeText(link).then(() => {
        alert('Link copied to clipboard!');
    });
}
</script>
{% endblock %}