<header id="headerwrapper" class="wrapper">
    <div id="header" class="content">
        <div id="title">
            <img src="./images/cookie.png" alt="Cookie" />
            <p>Cookie Clicker</p>
        </div>
        <div id="user">
            <span>{{user.username}}</span>
            <a class="button" href="/signout">Sign Out</a>
        </div>
    </div>
</header>

<div id="contentwrapper" class="wrapper">
    <main id="content" class="content">
        <h1>Dashboard</h1>
        <h2>Add a room</h2>
        <div id="add-room">
            <div id="new-room">
                <a class="button" href="/new-room">New room</a>
            </div>
            <div id="join-room">
                <p>Join a room:</p>
                <form method="post" action="/join-room">
                    <input type="text" name="roomId" required placeholder="Room-ID"/>
                    <input type="submit" value="Join">
                </form>
            </div>
        </div>
        <h2>Your rooms</h2>
        <div id="rooms">
            {{#each rooms}}
                <div class="room">
                    <div class="room-id">
                        <p>{{id}}</p>
                    </div>
                    <img src="./images/cookie.png" alt="Cookie" />
                    <div class="room-name">
                        <p>{{name}}</p>
                    </div>
                    <div class="clicks">
                        <p>{{count}}</p>
                    </div>
                    <a class="button" href="/room?id={{id}}">Enter</a>
                </div>
            {{/each}}
        </div>
    </main>
</div>