<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Telstra SMS Chat</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <header class="sidebar-header">
                <div>
                    <h2>Messages</h2>
                    <p id="myNumberDisplay" style="font-size: 0.8rem; color: var(--text-muted); margin-top: 2px;"></p>
                </div>
                <div style="display: flex; gap: 4px;">
                    <button id="btnProvisionNumber" class="btn-new-chat" aria-label="Request Number" title="Request New Telstra Number">
                        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path><line x1="12" y1="2" x2="12" y2="8"></line><line x1="9" y1="5" x2="15" y2="5"></line></svg>
                    </button>
                    <button class="btn-new-chat" aria-label="New Chat" title="New Chat">
                        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                    </button>
                </div>
            </header>
            <div id="contactsList" class="contacts-list">
                <!-- Contacts rendered dynamically -->
            </div>
        </aside>

        <!-- Main Chat Area -->
        <main class="chat-area">
            <header class="chat-header">
                <div class="chat-header-info">
                    <h2 id="chatTitle">Select a conversation</h2>
                    <p id="chatSubtitle"></p>
                </div>
            </header>
            
            <div id="messagesArea" class="messages-area">
                <!-- Messages rendered dynamically -->
            </div>

            <div id="messageInputArea" class="message-input-area" style="display: none;">
                <textarea id="messageInput" placeholder="Type a message..." rows="1"></textarea>
                <button id="btnSend" class="btn-send" aria-label="Send Message">
                    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                </button>
            </div>
        </main>
    </div>

    <!-- New Contact Modal -->
    <div id="modalOverlay" class="modal-overlay"></div>
    <div id="newContactModal" class="modal" aria-hidden="true">
        <div class="modal-header">
            <h3>New Conversation</h3>
            <button class="close" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <label for="newContactNumber">Phone Number</label>
            <input type="text" id="newContactNumber" placeholder="e.g. +61400000000">
        </div>
        <div class="modal-footer">
            <button id="btnCreateContact" class="btn-primary">Start Chat</button>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>