{% 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</h2>
            <p>No participants yet.</p>
        </div>

        <div class="actions">
            <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 %}