<header>
    <h1 id="board-title">Kanban Inteligence</h1>
    <button class="logout-button hidden" id="logout-button">Cerrar sesión</button>
    <button class="share-board-button hidden" id="share-board-button">Compartir</button>
</header>

<div class="main-content">
    <div class="sidebar hidden" id="sidebar">
        <div>
            <h2>Tableros</h2>
            <form id="create-board-form">
                <input type="text" id="new-board-name" placeholder="Nuevo tablero..." required />
                <button type="submit">Crear</button>
            </form>
            <ul class="board-list" id="board-list"></ul>

            <div id="board-users-section">
                <h3>Usuarios del Tablero</h3>
                <form id="add-board-user-form">
                    <input type="text" id="new-user-name" placeholder="Nuevo usuario..." required />
                    <button type="submit">Agregar Usuario</button>
                </form>
                <ul id="board-users-list"></ul>
            </div>
        </div>
        <div>
            <button id="toggle-frozen-btn" style="width:100%;margin-top:20px;">Mostrar solo congelados</button>
        </div>
    </div>

    <div class="board-container">
        <div id="auth-container" class="hidden">
            <h2>Inicie sesión o regístrese</h2>
            <form id="login-form">
                <input type="email" id="login-email" placeholder="Email" required>
                <input type="password" id="login-password" placeholder="Contraseña" required>
                <button type="submit">Ingresar</button>
            </form>
            <h3>O regístrese:</h3>
            <form id="register-form">
                <input type="email" id="reg-email" placeholder="Email" required>
                <input type="text" id="reg-username" placeholder="Nombre de usuario" required>
                <input type="password" id="reg-password" placeholder="Contraseña" required>
                <button type="submit">Registrar</button>
            </form>
        </div>

        <div id="board-selector" class="board-selector hidden">
            Selecciona un tablero existente o crea uno nuevo.
        </div>
        <div class="board hidden" id="kanban-board">
            <!-- Columna Por hacer -->
            <div class="column" data-status="todo">
                <h2>Por hacer</h2>
                <div class="tasks" id="todo-tasks"></div>
                <form class="add-task-form" id="add-task-form">
                    <input type="text" id="new-task-title" class="task-input" placeholder="Nueva tarea..." required />
                    <select id="new-task-participants" class="task-input" multiple>
                        <!-- Opciones se llenan dinámicamente -->
                    </select>
                    <button type="submit" id="add-task-btn">Agregar</button>
                </form>
            </div>
            <!-- Columna Haciendo -->
            <div class="column" data-status="doing">
                <h2>Haciendo</h2>
                <div class="tasks" id="doing-tasks"></div>
            </div>
            <!-- Columna Hecho -->
            <div class="column" data-status="done">
                <h2>Hecho</h2>
                <div class="tasks" id="done-tasks"></div>
            </div>
        </div>
    </div>
</div>