{% extends "base.html" %}

{% block title %}Chat - mc-webui{% endblock %}

{% block extra_head %}
<!-- Emoji Picker -->
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
<style>
    emoji-picker {
        --emoji-size: 1.5rem;
        --num-columns: 8;
    }
    .emoji-picker-container {
        position: relative;
    }
    .emoji-picker-popup {
        position: absolute;
        bottom: 100%;
        right: 0;
        z-index: 1000;
        margin-bottom: 0.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-radius: 0.5rem;
        overflow: hidden;
    }
    .emoji-picker-popup.hidden {
        display: none;
    }

    /* Mobile responsive adjustments */
    @media (max-width: 576px) {
        emoji-picker {
            --emoji-size: 1.25rem;
            --num-columns: 6;
        }
        .emoji-picker-popup {
            right: auto;
            left: 0;
            width: 100%;
            max-width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid d-flex flex-column" style="height: 100%;">
    <!-- Messages Container -->
    <div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
        <div class="col-12" style="height: 100%;">
            <div id="messagesContainer" class="messages-container h-100 overflow-auto p-3">
                <div id="messagesList">
                    <!-- Messages will be loaded here via JavaScript -->
                    <div class="text-center text-muted py-5">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-3">Loading messages...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Send Message Form -->
    <div class="row border-top bg-light">
        <div class="col-12">
            <form id="sendMessageForm" class="p-3">
                <div class="emoji-picker-container">
                    <div class="input-group">
                        <textarea
                            id="messageInput"
                            class="form-control"
                            placeholder="Type a message..."
                            rows="2"
                            maxlength="500"
                            required
                        ></textarea>
                        <button type="button" class="btn btn-outline-secondary" id="emojiBtn" title="Insert emoji">
                            <i class="bi bi-emoji-smile"></i>
                        </button>
                        <button type="submit" class="btn btn-primary px-4" id="sendBtn">
                            <i class="bi bi-send"></i>
                        </button>
                    </div>
                    <!-- Emoji picker popup (hidden by default) -->
                    <div id="emojiPickerPopup" class="emoji-picker-popup hidden"></div>
                </div>
                <div class="d-flex justify-content-end">
                    <small id="charCounter" class="text-muted">0 / 140</small>
                </div>
            </form>
        </div>
    </div>

    <!-- Status Bar -->
    <div class="row border-top">
        <div class="col-12">
            <div class="p-2 small text-muted d-flex justify-content-between align-items-center">
                <span id="statusText">
                    <i class="bi bi-circle-fill text-secondary"></i> Connecting...
                </span>
                <span id="lastRefresh">Last refresh: Never</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    // Pass configuration from Flask to JavaScript
    window.MC_CONFIG = {
        refreshInterval: {{ refresh_interval }} * 1000,  // Convert to milliseconds
        deviceName: "{{ device_name }}"
    };
</script>
{% endblock %}
