{% extends "otree/WaitPage.html" %}
{% load otree %}

{% block title %}
    Matching - Round {{ round_number }}/{{ total_rounds }}
{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-lg">
                <div class="card-header bg-primary text-white text-center">
                    <h3 class="mb-0">
                        <i class="fas fa-users"></i> Matching in progress...
                    </h3>
                </div>
                <div class="card-body">
                    <!-- 玩家信息 -->
                    <div class="alert alert-info text-center mb-4">
                        <h5>Your role: <strong>{{ player_role }}</strong></h5>
                        <p class="mb-0">Waiting for <strong>{{ waiting_for }}</strong> to join</p>
                    </div>


                    <!-- 进度提示 -->
                    <div class="text-center mb-4">
                        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-3 text-muted">The system is matching a partner for you...</p>
                    </div>

                    <!-- 重要提示 -->

                    <div class="alert alert-warning" role="alert">
                        <div class="mb-0" style="font-size:16pt; line-height: 1.6;">
                            <p class="mb-4">
                                Please wait for all participants to be paired together to begin the round. The main task begins when you continue to the next screen.
                            </p>
                            <p class="mb-4">
                                As different participants work at different paces, this may take a couple of minutes. Please be patient during this time.
                            </p>
                        </div>
                   </div>

                    <div class="alert alert-warning p-4" role="alert" style="border-width: 2px;">
                        <h4 class="alert-heading" style="font-weight: bold;">
                            <i class="fas fa-exclamation-triangle"></i> Important Reminder
                        </h6>
                        <ul class="mb-0" style="font-size: 1.4rem; line-height: 1.6;">
                            <li><strong>Please stay on this page</strong>; do not refresh or go back.</li>
                            <li><strong>Do not switch to other tabs or windows</strong>, otherwise you may be marked inactive, and <strong>you cannot be paired with another participant.</strong></li>
                            <li>You will <strong>automatically proceed</strong> after matching succeeds.</li>
                            <li>The estimated waiting time will be approximately <strong>2 minutes</strong></li>
                        </ul>
                    </div>

                    <!-- 轮次进度 -->
                    <div class="progress mb-3" style="height: 25px;">
                        <div class="progress-bar bg-success" role="progressbar" 
                             style="width: {{ progress_percent }}%;"
                             aria-valuenow="{{ round_number }}" 
                             aria-valuemin="0" 
                             aria-valuemax="{{ total_rounds }}">
                            Round {{ round_number }} of {{ total_rounds }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .card {
        border-radius: 15px;
    }
    .card-header {
        border-radius: 15px 15px 0 0 !important;
    }
    .spinner-border {
        animation: spinner-border 0.75s linear infinite;
    }
</style>
{% endblock %}