<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinkUp</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="module" src="./app.js"></script>
</head>
<body>
<header>
<div>LinkUp</div>
<div class="window-controls">
<button id="minimize-button">-</button>
<button id="maximize-button">+</button>
<button id="close-button">x</button>
</div>
</header>
<main>
<div id="register" class="hidden">
<form id="register-form">
<input required id="reg-username" type="text" placeholder="Username" />
<input type="file" id="avatar-file" accept="image/*" style="display: none;" />
<button type="button" id="select-avatar">Select Avatar</button>
<input type="submit" value="Register" />
</form>
</div>
<div id="setup" class="hidden">
<div id="user-info">
<!-- User info will be populated dynamically -->
</div>
<label for="connection-topic">Enter connection topic:</label>
<input type="text" id="join-chat-room-topic" placeholder="Enter connection topic">
<button id="create-chat-room">Create</button>
<button id="join-chat-room">Join</button> <!-- Changed id -->
</div>
<div id="chat" class="hidden">
<div id="header">
<div id="details">
<div>
Topic: <span id="chat-room-topic"></span>
</div>
<div>
Peers: <span id="peers-count">0</span>
</div>
</div>
<div id="user-list">
<!-- User list will be populated here -->
</div>
</div>
<div id="messages"></div>
<form id="message-form">
<input id="message" type="text" />
<input type="submit" value="Send" />
</form>
</div>
<div id="loading" class="hidden">Loading ...</div>
</main>
</body>
</html>