<div class="" ng-init="init.join()">
    <div class="row" ng-if="contestIsLoading">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading"><h1 class="h3">Loading</h1></div>
                <div class="panel-body">
                    <p>Loading... please wait.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="page-title page-header" ng-if="!contestIsLoading">
        <h1 class="h3" ng-bind="contest.name"></h1>
    </div>
    <div class="row" ng-if="!contestIsLoading">
        <div class="col-sm-8">
            <div class="panel panel-slash-primary">
                <div class="panel-heading">
                    <h4>Players</h4>
                </div>
                <div class="panel-body" ng-bind="contest.description"></div>
            </div>
            <div class="panel panel-dark-slash-primary">
                <div class="panel-heading">
                    <h4>Instructions</h4>
                </div>
                <div class="panel-body">
                    Drag icons to Remix Schedule.<br><br>
                    Once you have created a match-up, click on the team you think will win that match-up, a <img class="icon-winner" alt="W" src="<?php $this->basePath(); ?>/assets/img/icon-win.png"> icon will appear on your selected winner.<br><br>
                    The <span class="btn btn-info btn-xs"><span class="fa fa-fw fa-info"></span></span> will signal divisional match-ups (extra points for the winner).<br><br>
                    If your selected scores more points in Real World Game, then their opponent is your Remix, add those points to your total for the day.
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-slash-secondary">
                <div class="panel-heading">
                    <h4>Invite/Challenge</h4>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
    <div class="row" ng-if="!contestIsLoading && !contest.isJoined">
        <div class="col-xs-6">
            <div class="panel panel-dark-slash-primary">
                <div class="panel-heading">
                    <h4>Real World Games</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item text-center list-group-title">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-5">
                                    <h5>Home</h5>
                                </div>
                                <div class="col-xs-5">
                                    <h5>Away</h5>
                                </div>
                                <div class="col-xs-2">
                                    <h5 bs-tooltip title="Divisional Match-Up">Div. Match</h5>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li ng-repeat="schedule in models.matches" class="list-group-item">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-5">
                                    <ul class="team-container team-container-home"
                                        dnd-list="models.matches[$index].home"
                                        dnd-disable-if="models.matches[$index].home.length >= 1">
                                        <li ng-repeat="team in models.matches[$index].home" class="team team-home"
                                            dnd-draggable="team"
                                            dnd-effect-allowed="move"
                                            dnd-moved="models.matches[$parent.$index].home.splice(0, 1)">
                                            <span ng-bind="team.name"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-xs-5">
                                    <ul class="team-container team-container-away"
                                        dnd-list="models.matches[$index].away"
                                        dnd-disable-if="models.matches[$index].away.length >= 1">
                                        <li ng-repeat="team in models.matches[$index].away" class="team team-away"
                                            dnd-draggable="team"
                                            dnd-effect-allowed="move"
                                            dnd-moved="models.matches[$parent.$index].away.splice(0, 1)">
                                            <span ng-bind="team.name"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-xs-2">
                                    <ul class="team-container team-container-attr">
                                        <li ng-repeat="team in models.matches[$index].away" class="team team-attr">
                                            <span ng-if="schedule.home[0].group == schedule.away[0].group" class="btn btn-xs btn-info" bs-tooltip title="Divisional Match-Up"><i class="fa fa-fw fa-info"></i></span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-dark-slash-secondary">
                <div class="panel-heading">
                    <h4>Your Remixed Schedule</h4>
                </div>
                <ul class="list-group">
                    <li class="list-group-item text-center list-group-title">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-5">
                                    <h5>Home</h5>
                                </div>
                                <div class="col-xs-5">
                                    <h5>Away</h5>
                                </div>
                                <div class="col-xs-2">
                                    <h5 bs-tooltip title="Divisional Match-Up">Div. Match</h5>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li ng-repeat="schedule in models.mixes" class="list-group-item">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-xs-5">
                                    <ul class="team-container team-mixes team-container-home"
                                        dnd-list="models.mixes[$index].home"
                                        dnd-disable-if="models.mixes[$index].home.length >= 1"
                                        dnd-drop="dropAtMixed(event, index, item)">
                                        <li ng-repeat="team in models.mixes[$index].home"
                                            class="team" ng-class="{ 'team-home': team.type == 'home', 'team-away': team.type == 'away'}"
                                            ng-click="setBet($parent.$index, team.id)"
                                            dnd-draggable="team"
                                            dnd-effect-allowed="move"
                                            dnd-moved="models.mixes[$parent.$index].home.splice(0, 1)">
                                            <span ng-bind="team.name"></span>
                                            <span class="bet btn btn-xs" ng-if="schedule.bet == team.id" bs-tooltip="{ title: 'Your pick as winner' }"><img class="icon-winner" alt="W" src="<?php $this->basePath(); ?>/assets/img/icon-win.png"></span>
                                        </li>
                                        <li class="dndPlaceholder">Home</li>
                                    </ul>
                                </div>
                                <div class="col-xs-5">
                                    <ul class="team-container team-mixes team-container-away"
                                        dnd-list="models.mixes[$index].away"
                                        dnd-disable-if="models.mixes[$index].away.length >= 1"
                                        dnd-drop="dropAtMixed(event, index, item)">
                                        <li ng-repeat="team in models.mixes[$index].away"
                                            class="team" ng-class="{ 'team-home': team.type == 'home', 'team-away': team.type == 'away'}"
                                            ng-click="setBet($parent.$index, team.id)"
                                            dnd-draggable="team"
                                            dnd-effect-allowed="move"
                                            dnd-moved="models.mixes[$parent.$index].away.splice(0, 1)">
                                            <span ng-bind="team.name"></span>
                                            <span class="bet btn btn-xs" ng-if="schedule.bet == team.id" bs-tooltip="{ title: 'Your pick as winner' }"><img class="icon-winner" alt="W" src="<?php $this->basePath(); ?>/assets/img/icon-win.png"></span>
                                        </li>
                                        <li class="dndPlaceholder">Away</li>
                                    </ul>
                                </div>
                                <div class="col-xs-2">
                                    <ul class="team-container team-mixes team-container-attr">
                                        <li class="team team-attr">
                                            <span ng-if="schedule.home[0].group == schedule.away[0].group && schedule.home[0].group > 0" bs-tooltip="{ title: 'Divisional Match-Up' }" class="btn btn-xs btn-info"><i class="fa fa-fw fa-info"></i></span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-xs-12 text-center">
            <p><button class="btn btn-primary btn-lg" ng-click="submitMixes()" ng-disabled="betCount < models.mixes.length">Submit</button></p>
        </div>
    </div>
    <div class="row" ng-if="!contestIsLoading &&  contest.isJoined">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading"><h1 class="h3">Info</h1></div>
                <div class="panel-body">
                    <p>You already joined the contest!</p>
                </div>
            </div>
        </div>
    </div>
</div>