<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Points Breakdown</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th colspan="2" class="text-center">Home</th>
                            <th colspan="2" class="text-center">Away</th>
                            <th rowspan="2">Picked to Win</th>
                            <th rowspan="2" class="score">Diff.</th>
                            <th rowspan="2" class="score">Div. Scoring</th>
                            <th rowspan="2" class="score">Points</th>
                        </tr>
                        <tr>
                            <th class="team-fixed">Team</th>
                            <th class="score">Score</th>
                            <th class="team-fixed">Team</th>
                            <th class="score">Score</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="mixture in slot.mixtures">
                            <td class="team-fixed" ng-bind="mixture.homeTeam.name"></td>
                            <td class="score" ng-bind="mixture.scoreHome"></td>
                            <td class="team-fixed" ng-bind="mixture.awayTeam.name"></td>
                            <td class="score" ng-bind="mixture.scoreAway"></td>
                            <td ng-bind="mixture.bet.name"></td>
                            <td class="score" ng-bind="mixture.diff"></td>
                            <td class="score" ng-bind="mixture.earned"></td>
                            <td class="score" ng-bind="mixture.points"></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="7" class="text-right">Total Points</th>
                            <th class="text-right" ng-bind="slot.totalPoints"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default btn-labeled" type="button" ng-click="modalMixturesActions.hide()"><span class="btn-label"><i class="fa fa-times"></i></span> Close</button>
            </div>
        </div>
    </div>
</div>