<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Direct Messages - mc-webui</title>

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon-16x16.png') }}">
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

    <!-- 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%;
            }
        }

        /* PWA safe area handling - ensure bottom UI is visible above system bars */
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            body {
                padding-bottom: env(safe-area-inset-bottom);
            }
        }
    </style>
</head>
<body>
    <!-- Navbar for DM page -->
    <nav class="navbar navbar-dark bg-success">
        <div class="container-fluid">
            <div class="d-flex align-items-center gap-2">
                <a href="/" class="btn btn-outline-light btn-sm" title="Back to Channels">
                    <i class="bi bi-arrow-left"></i>
                </a>
                <span class="navbar-brand mb-0 h1">
                    <i class="bi bi-envelope"></i> DM
                </span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <select id="dmConversationSelector" class="form-select form-select-sm" style="width: auto; min-width: 120px;" title="Select conversation">
                    <option value="">Select chat...</option>
                    <!-- Conversations loaded dynamically via JavaScript -->
                </select>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main>
        <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="dmMessagesContainer" class="messages-container h-100 overflow-auto p-3">
                        <div id="dmMessagesList">
                            <!-- Placeholder shown when no conversation selected -->
                            <div class="dm-empty-state">
                                <i class="bi bi-envelope"></i>
                                <p class="mb-1">Select a conversation</p>
                                <small class="text-muted">Choose from the dropdown above or start a new chat from channel messages</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Send Message Form -->
            <div class="row border-top bg-light">
                <div class="col-12">
                    <form id="dmSendForm" class="p-2">
                        <div class="emoji-picker-container">
                            <div class="input-group">
                                <input type="text"
                                       id="dmMessageInput"
                                       class="form-control"
                                       placeholder="Type a message..."
                                       maxlength="200"
                                       disabled>
                                <button type="button" class="btn btn-outline-secondary" id="dmEmojiBtn" title="Insert emoji">
                                    <i class="bi bi-emoji-smile"></i>
                                </button>
                                <button type="submit" class="btn btn-success px-4" id="dmSendBtn" disabled>
                                    <i class="bi bi-send"></i>
                                </button>
                            </div>
                            <!-- Emoji picker popup (hidden by default) -->
                            <div id="dmEmojiPickerPopup" class="emoji-picker-popup hidden"></div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <small class="text-muted"><span id="dmCharCounter">0</span> / 140</small>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Status Bar -->
            <div class="row border-top">
                <div class="col-12">
                    <div class="p-1 small text-muted d-flex justify-content-between align-items-center">
                        <span id="dmStatusText">
                            <i class="bi bi-circle-fill text-secondary"></i> Ready
                        </span>
                        <span id="dmLastRefresh">-</span>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Toast container for notifications -->
    <div class="toast-container position-fixed top-0 start-0 p-3">
        <div id="notificationToast" class="toast" role="alert">
            <div class="toast-header">
                <strong class="me-auto">mc-webui</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body"></div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Custom JS -->
    <script src="{{ url_for('static', filename='js/dm.js') }}"></script>

    <script>
        // Pass configuration from Flask to JavaScript
        window.MC_CONFIG = {
            refreshInterval: {{ refresh_interval }} * 1000,
            deviceName: "{{ device_name }}",
            initialConversation: "{{ initial_conversation or '' }}"
        };
    </script>
</body>
</html>
