<!doctype html>
<html class="no-js fuelux" lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>prototype</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <script data-main="js/desktop" src="js/libs/require.js"></script>
</head>

<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BNL</a>
        </div>
        <button id="nav-logout-btn" type="button" class="btn btn-default navbar-btn navbar-right authed-section" style="display:none">Logout</button>
        <a href="#/profile" type="button" class="btn btn-default navbar-btn navbar-right authed-section" style="display:none">Profile</a>
        <p class="authed-section navbar-text navbar-right" style="display:none"><b>User: </b><span class="username-placeholder"></span></p>
        <p class="authed-section navbar-text navbar-right" style="display:none"><b>Chips: </b><span class="chips-placeholder"></span></p>
        <a href="#/login" type="button" class="btn btn-default navbar-btn navbar-right unauthed-section">Login</a>
    </div>
</nav>

<div id="login" class="app-view row-fluid" style="display:none">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
        <div class="panel panel-primary" style="margin-top:10%">
            <div class="panel-heading">Login</div>
            <div class="panel-body">
                <form id="login-form">
                    <div class="form-group">
                        <label>Username</label>
                        <input class="form-control" type="text" name="username" />
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input class="form-control" type="password" name="password" />
                    </div>
                    <div class="form-group">
                        <button id="login-btn" class="btn btn-primary">Login</button>
                        <a href="#/register" class="btn btn-default">Register</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-sm-3"></div>
</div>

<div id="register" class="app-view row-fluid" style="display:none">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
        <div class="panel panel-primary" style="margin-top:10%">
            <div class="panel-heading">Register</div>
            <div class="panel-body">
                <form id="registration-form">
                    <div class="form-group">
                        <label>Username</label>
                        <input class="form-control" type="text" name="username" />
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input class="form-control" type="password" name="password" />
                    </div>
                    <div class="form-group">
                        <label>Email Address</label>
                        <input class="form-control" type="text" name="email" />
                    </div>
                    <div class="form-group">
                        <button id="register-btn" class="btn btn-primary">Register</button>
                        <a href="#/login" class="btn btn-default">Return to Login</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-sm-3"></div>
</div>

<div id="profile" class="app-view row-fluid" style="display:none">
    <div class="col-sm-4">
        <div class="panel panel-primary">
            <div class="panel-heading">User Stats</div>
            <div class="panel-body" id="user-stats-container"></div>
        </div>
    </div>
    <div class="col-sm-8">
        <div class="panel panel-primary">
            <div class="panel-heading">User Profile</div>
            <div class="panel-body" id="profile-container"></div>
        </div>
    </div>
</div>

<script id="ProfileUpdateTmpl" type="text/template">
    <form id="profile-form">
        <div class="form-group">
            <label>Email Address</label>
            <input class="form-control" type="text" name="email" value="<%-user.email %>" />
        </div>
        <div class="form-group">
            <button id="save-profile-btn" class="btn btn-primary">Save Changes</button>
        </div>
    </form>
    <form id="password-form">
        <div class="form-group">
            <label>Old Password</label>
            <input class="form-control" type="password" name="oldpassword" placeholder="Old Password" />
        </div>
        <div class="form-group">
            <label>New Password</label>
            <input class="form-control" type="password" name="password" placeholder="New Password" />
        </div>
        <div class="form-group">
            <label>Confirm Password</label>
            <input class="form-control" type="password" name="password2" placeholder="Confirm Password" />
        </div>
        <div class="form-group">
            <button id="update-password-btn" class="btn btn-primary">Update Password</button>
        </div>
    </form>
</script>

<script id="UserStatsTmpl" type="text/template">
    <dl class="dl-horizontal">
        <p>
            <b>Current Chips</b><br />
            <%-user.chips %> chips
        </p>
        <p>
            <b>Hands Won</b><br />
            <%-user.wins %>
        </p>
        <p>
            <b>Largest Amount Won</b><br />
            <%-user.largestWin %> chips
        </p>
        <p>
            <b>Join Date</b><br />
            <%- new Date(user.created) %>
        </p>
    </dl>
</script>

<div id="tables" class="app-view row-fluid" style="display:none;margin-top:25px">
    <div class="col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Table List
                <button id="sync-table-list" class="btn btn-sm btn-default pull-right"><span class="glyphicon glyphicon-refresh"></span> Sync</button>
            </div>
            <div class="panel-body">
                <table class="table table-condensed table-hover">
                    <thead>
                    <tr>
                        <th>
                            Blinds
                        </th>
                        <th>
                            Buy In
                        </th>
                        <th>
                            Players
                        </th>
                        <th>
                        </th>
                    </tr>
                    </thead>
                    <tbody id="table-list"></tbody>
                </table>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">Messenger
                <button id="show-add-friend-modal-btn" class="btn btn-sm btn-default pull-right"><span class="glyphicon glyphicon-plus"></span> Add Friend</button>
                <button id="sync-friend-list" class="btn btn-sm btn-default pull-right"><span class="glyphicon glyphicon-refresh"></span> Sync</button>
            </div>
            <div class="panel-body">
                <div class="row-fluid">
                    <div class="col-sm-4">
                        <b>Friend List</b>
                        <ul id="friend-list" class="list-group"></ul>
                    </div>
                    <div id="messenger-input-container" class="col-sm-8" style="display:none">
                        <div id="messenger-area"></div>
                        <div class="clearfix">
                            <textarea id="messenger-chatbox" placeholder="Type your message.."></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Create Table</div>
            <div class="panel-body" id="create-table-container"></div>
        </div>
    </div>
</div>

<script id="FriendListTmpl" type="text/template">
    <% if(friends.length > 0){ %>
    <% _.each(friends, function(friend, key){ %>
    <li <% if(friend.online){ %>did="<%- friend.id %>"<% } %> class="list-group-item <% if(friend.online !== true){ %>disabled<% } %>"><%- friend.username %><% if(showCheckbox){ %><input type="checkbox" name="friend-checkbox" /><% } %></li>
    <% }); %>
    <% }else{ %>
        <li class="list-group-item">no matches found.</li>
    <% } %>
</script>

<div id="dashboard" class="app-view row-fluid" style="display:none;margin-top:25px">
    <div class="col-sm-4">
        <div id="user-list-container" class="panel panel-primary">
            <div class="panel-heading">User List</div>
            <div class="panel-body">
                <div class="list-group"></div>
            </div>
        </div>
        <div id="chat-container" class="panel panel-primary">
            <div class="panel-heading">Chat Room</div>
            <div class="panel-body">
                <div id="chat-area"></div>
                <div class="clearfix">
                    <textarea placeholder="Type your message.."></textarea>
                </div>
            </div>
        </div>
        <div id="history-container" class="panel panel-primary">
            <div class="panel-heading">Game History</div>
            <div class="panel-body">
                <div id="history-area"></div>
            </div>
        </div>
    </div>
    <div class="col-sm-8">
        <div id="poker-container" class="panel panel-primary">
            <div class="panel-heading">Poker
                <button id="remove-bots-btn" class="btn btn-sm btn-default pull-right">Remove Bots</button>
                <button id="leave-table-btn" class="btn btn-sm btn-default pull-right">Leave Table</button>
                <div id="countdown-placeholder" class="pull-right"></div>
            </div>
            <div class="panel-body"></div>
        </div>
    </div>
</div>

<script id="TableListTmpl" type="text/template">
    <% if(tables.length > 0){ %>
    <% _.each(tables, function(table, key){ %>
        <tr did="<%- table.id %>">
            <td><%- table.smallBlind %> / <%- table.bigBlind %></td>
            <td><%- table.minBuyIn %> / <%- table.maxBuyIn %></td>
            <td><%- table.players %> playing / <%- table.members %> member</td>
            <td><button class="join-table-btn btn btn-primary">Join</button></td>
        </tr>
    <% }); %>
    <% }else{ %>
    <tr>
        <td colspan="4">No games available. You can create a game yourself.</td>
    </tr>
    <% } %>
    <tr>
        <td colspan="4">
            <div class="row-fluid">
                <div class="col-sm-4">members: <%- totalMembers || 0 %></div>
                <div class="col-sm-4">players: <%- totalPlayers || 0 %></div>
                <div class="col-sm-4">tables: <%- tables.length %></div>
            </div>
        </td>
    </tr>
</script>

<script id="newTableTmpl" type="text/template">
    <form class="row-fluid">
        <div class="form-group col-xs-6">
            <label>Small Blind</label>
            <input type="text" class="form-control" name="smallBlind" placeholder="Small Blind" value="50" />
        </div>
        <div class="form-group col-xs-6">
            <label>Big Blind</label>
            <input type="text" class="form-control" name="bigBlind" placeholder="Big Blind" value="100" />
        </div>
        <div class="form-group col-xs-6">
            <label>Minimum Buy In</label>
            <input type="text" class="form-control" name="minBuyIn" placeholder="Minimum Buy In" value="100" />
        </div>
        <div class="form-group col-xs-6">
            <label>Maximum Buy In</label>
            <input type="text" class="form-control" name="maxBuyIn" placeholder="Maximum Buy In" value="10000" />
        </div>
        <div class="form-group col-xs-6">
            <label>Minimum Players</label>
            <select class="form-control" name="minPlayers">
                <option value="2" selected="selected">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </div>
        <div class="form-group col-xs-6">
            <label>Maximum Players</label>
            <select class="form-control" name="maxPlayers">
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10" selected="selected">10</option>
            </select>
        </div>
        <div class="form-group col-xs-12">
            <label>Game Mode</label>
            <select class="form-control" name="gameMode">
                <option value="normal">Normal (30 second hand)</option>
                <option value="fast">Fast (15 second hand)</option>
            </select>
        </div>
        <div class="form-group col-xs-12">
            <button id="create-table-btn" class="btn btn-primary">Create Table</button>
        </div>
    </form>
</script>

<script id="UserListItem" type="text/template">
    <% _.each(items, function(item, key){ %>
    <a tabindex="0" did="<%- item.attributes.id %>" class="list-group-item<% if(userId == item.attributes.id){ %> is-me<% } %> clearfix" data-placement="auto left" title="<%- item.attributes.username %>">
        <% if(userId == item.attributes.id){ %>
        <span class="glyphicon glyphicon-chevron-right"></span>
        <% } %>
        <%- item.attributes.username %>
        <div class="pull-right">
            <span class="glyphicon glyphicon-usd"></span>
            <%- item.attributes.chips %>
        </div>
    </a>
    <% }); %>
</script>

<script id="ChatMessageList" type="text/template">
    <% _.each(items, function(item, key){ %>
    <table>
        <tr>
            <td class="date"><%- item.date %></td>
            <td class="nick"><%- item.user %></td>
            <td class="msg-text <%- typeof type !== 'undefined' ? type : '' %>"><%- item.msg %></td>
        </tr>
    </table>
    <% }); %>
</script>

<script id="ChatMessageItem" type="text/template">
    <table>
        <tr>
            <td class="date"><%- date %></td>
            <td class="nick"><%- user %></td>
            <td class="msg-text <%- typeof type !== 'undefined' ? type : '' %>"><%- msg %></td>
        </tr>
    </table>
</script>

<script id="CurrentGameView" type="text/template">
    <% if(!gameSession){ %>
        <h4>No Game Exists</h4>
    <% }else if(gameSession.state == 'JOIN'){ %>
        <% if(gameSession.gameWinners && gameSession.gameWinners.length > 0){ %>
        <h4>Last Game Winners</h4>
        <ul>
            <% _.each(gameSession.gameWinners, function(winner, key){ %>
            <li><b><%- winner.playerName %></b> wins <b><%- winner.amount %> chips of the pot!</b></li>
            <% }); %>
        </ul>
        <% } %>
    <h4>Waiting for players. <% if(!gameSession.playersToAdd.some(function(el){ return el.id === user.id})){ %>Would you like to join?<% } %></h4>
    <h5>GAME RULES</h5>
    <dl class="dl-horizontal">
        <dt>Small Blind</dt>
        <dd><%- gameSession.smallBlind %></dd>
        <dt>Big Blind</dt>
        <dd><%- gameSession.bigBlind %></dd>
        <dt>Minimum Buy In</dt>
        <dd><%- gameSession.minBuyIn %></dd>
        <dt>Maximum Buy In</dt>
        <dd><%- gameSession.maxBuyIn %></dd>
        <dt>Minimum Players</dt>
        <dd><%- gameSession.minPlayers %></dd>
        <dt>Maximum Players</dt>
        <dd><%- gameSession.maxPlayers %></dd>
    </dl>
    <h5>JOINED PLAYERS</h5>
    <ul>
        <% _.each(gameSession.playersToAdd, function(player, key){ %>
            <li><%- player.playerName %></li>
        <% }); %>
    </ul>
    <% if(!gameSession.playersToAdd.some(function(el){ return el.id === user.id})){ %>
        <% if(user.chips >= gameSession.minBuyIn){ %>
            <button id="join-game-btn" class="btn btn-primary">Join Game</button>
            <div class="form-group">
                <label>Buy In</label>
                <input type="text" class="form-control" name="user-buyin-input" placeholder="Buy In" value="<%- (gameSession.minBuyIn <= 1000 && gameSession.maxBuyIn >= 1000) ? 1000 : gameSession.minBuyIn %>" />
            </div>
        <% }else{ %>
            <div class="alert alert-warning alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <strong>Sorry!</strong> You do not have enough chips for the minimum buy-in and cannot join the game.
            </div>
        <% } %>
    <% } %>
    <% if(gameSession.playersToAdd.some(function(el){ return el.id === user.id}) && gameSession.playersToAdd.length >= gameSession.minPlayers){ %>
    <button id="start-game-btn" class="btn btn-primary">Start Playing</button>
    <% } %>
    <% }else if(gameSession.state == 'IN_PROGRESS'){ %>
            <div class="panel panel-success clearfix">
                <div class="panel-heading">
                    Board
                    <div class="pull-right">
                        <b>Pot: <%- gameSession.game.pot %> chips</b>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row-fluid">
                        <div class="col-md-7">
                            <% _.each(gameSession.game.board, function(card, key){ %>
                            <img src="/images/cards/<%- convertCard(card) %>" />
                            <% }); %>
                        </div>
                        <div class="col-md-5">
                            <p class="bg-info">
                                <% _.each(gameSession.actions, function(action, key){ %>
                                    Player <b><%- action.playerName %></b>
                                    performed <b><%- action.action %></b>
                                    <% if(action.amount){ %>
                                    for <b><%- action.amount %></b> chips.
                                    <% } %>
                                    <br />
                                <% }); %>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        <% _.each(gameSession.players, function(player, key){  %>
            <div class="panel panel-info clearfix">
                <div class="panel-heading">
                    <% if(gameSession.players[gameSession.currentPlayer].id == player.id){ %>
                        <span class="glyphicon glyphicon-user"></span>
                    <% } %>
                    <%- player.playerName %> / <%- player.chips %> chips
                    <div class="pull-right">
                        <span class="glyphicon glyphicon-plus"></span> <%- gameSession.game.bets[key] %> chips
                        <% if(gameSession.game.blinds[0] == key){ %>
                        <span class="label label-success">SMALL BLIND</span>
                        <% }else if(gameSession.game.blinds[1] == key){ %>
                        <span class="label label-success">BIG BLIND</span>
                        <% } %>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row-fluid">
                        <div class="col-md-6">
                        <% if(player.cards){ %>
                            <% _.each(player.cards, function(card, key){ %>
                            <img src="/images/cards/<%- convertCard(card) %>" />
                            <% }); %>
                        <% } %>
                        </div>
                        <div class="col-md-6">
                            <% if(gameSession.players[gameSession.currentPlayer].id == player.id && player.id == user.id){ %>
                            <button did="call" class="game-action btn btn-primary">Call / Check</button>
                            <!--<button did="check" class="game-action btn btn-primary">Check</button>-->
                            <button did="allin" class="game-action btn btn-primary">All In</button>
                            <button did="fold" class="game-action btn btn-primary">Fold</button>
                            <div class="input-group">
                                <input class="form-control" name="betAmount" placeholder="Chips to Bet">
                                <div did="bet" class="game-action btn btn-primary input-group-addon">Bet</div>
                            </div>
                            <% } %>
                        </div>
                    </div>
                </div>
            </div>
        <% }); %>
        <div class="row-fluid">
            <div class="col-md-6">
                <h4>GAME RULES</h4>
                <dl class="dl-horizontal">
                    <dt>Small Blind</dt>
                    <dd><%- gameSession.smallBlind %></dd>
                    <dt>Big Blind</dt>
                    <dd><%- gameSession.bigBlind %></dd>
                    <dt>Minimum Buy In</dt>
                    <dd><%- gameSession.minBuyIn %></dd>
                    <dt>Maximum Buy In</dt>
                    <dd><%- gameSession.maxBuyIn %></dd>
                    <dt>Minimum Players</dt>
                    <dd><%- gameSession.minPlayers %></dd>
                    <dt>Maximum Players</dt>
                    <dd><%- gameSession.maxPlayers %></dd>
                </dl>
            </div>
            <div class="col-md-6">
                <h4>GAME INFO</h4>
                <dl class="dl-horizontal">
                    <dt>Round Name</dt>
                    <dd><%- gameSession.game.roundName %></dd>
                    <dt>Bet Name</dt>
                    <dd><%- gameSession.game.betName %></dd>
                    <dt>Game State</dt>
                    <dd><%- gameSession.state %></dd>
                </dl>
            </div>
        </div>
    <% } %>
</script>

<div id="general-alert" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span class="sr-only">Close</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button data-dismiss="modal" type="button" class="btn btn-primary">Ok</button>
            </div>
        </div>
    </div>
</div>

<div id="confirm-alert" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span class="sr-only">Close</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="submit btn btn-primary">Yes</button>
                <button data-dismiss="modal" type="button" class="btn btn-default">No</button>
            </div>
        </div>
    </div>
</div>

<div id="error-alert" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span class="sr-only">Close</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button data-dismiss="modal" type="button" class="btn btn-primary">Ok</button>
            </div>
        </div>
    </div>
</div>

<div id="add-friend-alert" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Add Friend</h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <input class="form-control" name="friendName" placeholder="Friend Name">
                    <div id="search-friends-btn" class="btn btn-primary input-group-addon">Search</div>
                </div>
                <ul id="friend-results-list" class="clearfix"></ul>
            </div>
            <div class="modal-footer">
                <button id="add-friend-btn" type="button" class="btn btn-primary">Add Selected</button>
                <button data-dismiss="modal" type="button" class="btn btn-primary">Close</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
