{% extends 'base.html' %}

{% block title %}Waiting for Chat Session{% endblock %}

{% block content_title %}Chat Session Being Created{% endblock %}
{% block content_description %}Please wait...{% endblock %}
{% block content_class %}<div class="col-xl-12 col-lg-5 col-md-7 mx-auto"></div>{% endblock %}

{% block extra_head %}
<meta http-equiv="refresh" content="2;url={{ refresh_url }}">
<style>
    .spinner {
        width: 40px;
        height: 40px;
        margin: 30px auto;
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 4px solid #3498db;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
{% endblock %}

{% block content %}
<div class="container text-center">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Chat Session is being created</h4>
            <div class="spinner"></div>
            <p class="mt-3">The specialist is being executed and the chat session is being created.</p>
            <p>Session ID: <code>{{ session_id }}</code></p>
            <p>This page will automatically refresh every 2 seconds...</p>
        </div>
    </div>
</div>
{% endblock %}