extends ../layout

block head
  link(rel="stylesheet", type="text/css", href="/cards/cards.css", media="screen")
  //if lt IE 9
    link(rel="stylesheet", type="text/css", href="/cards/cards-ie.css", media="screen")
  //if IE 9
    link(rel="stylesheet", type="text/css", href="/cards/cards-ie9.css", media="screen")
  != css('style')

  script(src='/javascripts/thrift.js')
  script(src='/types/hearts/hearts_types.js')
  script(src='/types/hearts/Hearts.js')
  != js('hearts/controllers')
  != js('hearts/services')
  != js('hearts/filters')
  != js('hearts/app')

mixin cardBody
  span.rank {{card.rank | rankName | uppercase}}
  span.suit(ng-show="card.suit == Suits.CLUBS") ♣
  span.suit(ng-show="card.suit == Suits.DIAMONDS") ♦
  span.suit(ng-show="card.suit == Suits.SPADES") ♠
  span.suit(ng-show="card.suit == Suits.HEARTS") ♥

mixin cardInput
  label(class="card {{card.suit | cardSuitClass}} rank-{{card.rank | rankName}}")
    mixin cardBody
    input(type="checkbox", ng-model="card.checked")

mixin cardDiv
  div(class="card {{card.suit | cardSuitClass}} rank-{{card.rank | rankName}}")
    mixin cardBody

block content
  div(ng-app="AgentVsAgent")
    div(ng-controller='HeartsCtrl')
      .container-fluid
        .row-fluid.cardTable
          .span12
            .row-fluid
              .span12(ng-repeat="round in state.rounds")
                .clearfix
                  h1 Dealt:
                  .playingCards
                    ul.table
                      li(ng-repeat="card in round.dealt")
                        mixin cardDiv
                .clearfix
                  h1 Passed:
                  .playingCards
                    ul.table
                      li(ng-repeat="card in round.passed")
                        mixin cardDiv
                .clearfix
                  h1 Received:
                  .playingCards
                    ul.table
                      li(ng-repeat="card in round.received")
                        mixin cardDiv
                .clearfix
                table.table.table-bordered
                  tr
                    th(ng-class="{currentPlayer: state.position == Positions.NORTH}") North
                    th(ng-class="{currentPlayer: state.position == Positions.EAST}") East
                    th(ng-class="{currentPlayer: state.position == Positions.SOUTH}") South
                    th(ng-class="{currentPlayer: state.position == Positions.WEST}") West
                    th(ng-class="{currentPlayer: state.position == Positions.NORTH}") North
                    th(ng-class="{currentPlayer: state.position == Positions.EAST}") East
                    th(ng-class="{currentPlayer: state.position == Positions.SOUTH}") South
                  tr(ng-repeat="trick in round.tricks")
                    td(class="blankSpot", ng-repeat="i in positionsBefore(trick)")
                    td(ng-repeat="card in trick.played")
                      .playingCards
                        mixin cardDiv
                    td(class="waitingSpot", ng-repeat="i in positionsNotPlayed(trick)")
                    td(class="blankSpot", ng-repeat="i in positionsAfter(trick)")
                  tr(ng-show="round.result")
                    td {{round.result.north}}
                    td {{round.result.east}}
                    td {{round.result.south}}
                    td {{round.result.west}}
                    td
                    td
                    td
                  tr
                    th(ng-class="{currentPlayer: state.position == Positions.NORTH}") North
                    th(ng-class="{currentPlayer: state.position == Positions.EAST}") East
                    th(ng-class="{currentPlayer: state.position == Positions.SOUTH}") South
                    th(ng-class="{currentPlayer: state.position == Positions.WEST}") West
                    th(ng-class="{currentPlayer: state.position == Positions.NORTH}") North
                    th(ng-class="{currentPlayer: state.position == Positions.EAST}") East
                    th(ng-class="{currentPlayer: state.position == Positions.SOUTH}") South
            .row-fluid
              .span12
                .info {{trick}}
                .round {{roundResult}}
                .game {{gameResult}}
            .row-fluid
              .span12
                div(ng-show="state.currentState == 'unstarted'")
                  button.startGame(ng-click="startGame()") start the game
                div(ng-show="state.currentState == 'waitingForGame'")
                  p Waiting for a game
            .row-fluid
              .span-12
                .playingCards
                  h1 HAND:
                  ul.table
                    li(ng-repeat="card in state.hand")
                      mixin cardInput
                  div(ng-show="state.currentState == 'waiting'") WAITING...
                  button(ng-show="state.currentState == 'passing'", ng-click="pass()") Pass
                  button(ng-show="state.currentState == 'playing'", ng-click="play()") Play