{% extends "base.html" %}
{% block title %}Chat - {{ page_title }}{% endblock %}

{% block content %}
<h1 class="mb-4 display-5 fw-bold site-title">Chatraum</h1>
<div class="card shadow-sm border-0 mb-4">
    <div class="card-body p-4">
        <div id="chat-messages" class="border rounded p-3 mb-4 bg-light chat-box-style" style="height: 450px; overflow-y: scroll;">
            <p id="chat-loading-msg" class="text-center text-muted p-3">Lade Nachrichten...</p>
        </div>
        <form id="chat-form">
            <div class="row g-3 mb-3 align-items-end">
                <div class="col-md-5"><label for="chat-nickname" class="form-label">Nickname:</label><input type="text" id="chat-nickname" class="form-control" required></div>
                <div class="col-md-4"><label for="chat-password" class="form-label">Aktionspasswort:</label><input type="password" id="chat-password" class="form-control" placeholder="Passwort" required></div>
            </div>
             <div class="mb-3"><label for="chat-message" class="form-label">Nachricht:</label><textarea id="chat-message" class="form-control" placeholder="Deine Nachricht..." rows="3" required></textarea></div>
            <button type="submit" class="btn btn-primary px-4"><i class="bi bi-send"></i> Senden</button>
            <div id="chat-status" class="mt-2 form-text d-inline-block ms-3"></div>
        </form>
    </div>
</div>
<template id="chat-message-template">
    <div class="chat-message mb-2"><span class="message-timestamp small text-muted me-2"></span><strong class="message-nickname me-1"></strong>:<span class="message-text"></span><button class="btn btn-sm btn-outline-danger float-end delete-message-btn opacity-0" title="Löschen"><i class="bi bi-x-lg"></i></button></div>
</template>
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
{% endblock %}

{% block scripts_extra %}
{% endblock %}