{% extends "global/Page.html" %}

{{ block title }}
    Waiting for This Round to Complete
{{ endblock }}

{{ block content }}
<style>
    .wait-container {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
        padding: 40px 20px;
    }
    
    .wait-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        padding: 40px;
        margin-bottom: 30px;
    }
    
    .wait-icon {
        font-size: 48px;
        margin-bottom: 20px;
    }
    
    .wait-title {
        font-size: 24px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
    }
    
    .wait-message {
        font-size: 16px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 20px;
    }
    
    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 20px auto;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .info-note {
        background: #f0f7ff;
        border-left: 4px solid #3498db;
        padding: 15px 20px;
        text-align: left;
        margin-top: 20px;
        border-radius: 4px;
    }
    
    .info-note p {
        margin: 0;
        color: #555;
        font-size: 14px;
    }
</style>

<div class="wait-container">
    <div class="wait-card">
        <div class="wait-icon">⏳</div>
        <h2 class="wait-title">You're sitting out this round</h2>
        <p class="wait-message">
            With an odd number of participants, one person sits out each paired round.
            You'll be paired with different partners in the other rounds.
        </p>
        
        <div class="spinner"></div>
        <p class="wait-message" style="margin-bottom: 0;">
            Waiting for other participants to complete their round...
        </p>
        
        <div class="info-note">
            <p><strong>Note:</strong> The study automatically continues once the other participants have finished.</p>
        </div>
    </div>
</div>
{{ endblock }}