<div class="invite-box hero-unit" ng-show="showInviteBox">
    <h2>To invite friends to play together in this game send them this link:
        <div class="link">{{url}}</div>
    </h2>
</div>
<div class="container-fluid lobby-container" ng-init="constructor()">
    <div class="row-fluid">
        <div class="span3">
            <div id="playersList">
                <div class="player" ng-repeat="player in players">
                     <div data-playerid="{{id}}" class="well player-{{id}}">
                        <div class="race-icon" style="background: url('/img/races.png') -{{getRaceIcon(player.race).posX}}px -{{getRaceIcon(player.race).posY}}px"></div>
                        <div class="player-name">{{player.name}}</div>
                        <div class="player-team">
                            <select ng-model="player.team" ng-change="updateValue(player.id, 'team')" class="team-picker" ng-disabled="!(mode == 'PVP' && (player.id == playerId || (isHost() && player.isBot)))" ng-show="mode == 'PVP'">
                                <option value="0">0</option>
                                <option value="1">1</option>
                            </select>
                        </div>
                     </div>
                </div>
                <div class="player">
                    <div class="well add-bot" ng-show="mode == 'PVP' && isHost() && players.length < 6" ng-click="addBot()">Add Bot</div>
                </div>
            </div>
        </div>
        <div class="span7">
            <div class="race-picker">
                <div ng-repeat="race in races" data-title="{{race.formattedName}}" data-content="{{race.description}}" data-trigger="hover" data-name="{{race.name}}" data-placement="top" class="race-icon-wrap {{race.name}}">
                    <div style="background: url('/img/races.png') -{{race.imagePosX}}px -{{race.imagePosY}}px" class="race-icon" ng-click="changeRace(race.name)"></div>
                </div>
            </div>
        </div>
        <div style="clear: both"></div>
        <div class="span2">
            <h3>Game Settings</h3>
            <span ng-show="isHost()">
                <label for="gameName"><strong>Name:</strong>
                    <input type="text" ng-model="name" class="gameName span10" id="gameName" ng-change="updateSettings()" />
                </label>
                <!--<label for="mode"><strong>Mode:</strong><br>
                    <select ng-model="mode" id="mode" ng-change="updateSettings()">
                        <option value="SURVIVAL">Survival</option>
                        <option value="PVP">PvP</option>
                    </select>
                </label>-->
                <div class='survival-settings' ng-show="mode == 'SURVIVAL'">
                    <label for="difficulty"><strong>Difficulty:</strong>
                        <select ng-model="difficulty" id="difficulty" ng-change="updateSettings()">
                            <option value="-2">Very Easy</option>
                            <option value="-1">Easy</option>
                            <option value="0">Normal</option>
                            <option value="1">Hard</option>
                            <option value="2">Very Hard</option>
                            <option value="4">Insane</option>
                            <option value="6">God Like</option>
                        </select>
                    </label>
                    <label for="targetTime"><strong>Survival Time:</strong>
                        <select ng-model="targetTime" id="targetTime" ng-change="updateSettings()">
                            <option value="600">10 Minutes</option>
                            <option value="900">15 Minutes</option>
                            <option value="1200">20 Minutes</option>
                            <option value="1500">25 Minutes</option>
                            <option value="1800">30 Minutes</option>
                            <option value="0">Unlimited</option>
                        </select>
                    </label>
                </div>
                <p><strong>Total Players:</strong> {{players.length}} / 6</p>
                <!--<button type="button" class="updateGame btn btn-large btn-block btn-primary" ng-click="saveSettings()">Save Settings</button>-->
                <button type="button" class="startGame btn btn-large btn-block btn-primary" ng-click="startGame()">
                    Start Game
                </button>
                </span>
            <span ng-show="!isHost()">
                <p><strong>Name:</strong> {{name}}</p>
                <p><strong>Mode:</strong> {{mode}}</p>
                <p><strong>Total Players:</strong> {{players.length}} / 6</p>
            </span>

        </div>
    </div>
</div>