<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>Tic Tac Toe</h2>
      <div data-bind="visible: winner().length > 0">
        <h3><label data-bind="text: winner"></label></h3>
      </div>
      <div data-bind=" visible: isBoardVisible && winner().length === 0">
        <h3><label class='turnIndicator' data-bind="text: turnIndicator"></label></h3>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4 gameboard" data-bind="visible: isBoardVisible">
      <div class="row">
        <div id="cell-0-0" class="col-xs-4 cell">
          <label data-bind="text: cell00" />
        </div>
        <div id="cell-0-1" class="col-xs-4 cell cell-middle">
          <label data-bind="text: cell01" />
        </div>
        <div id="cell-0-2" class="col-xs-4 cell">
          <label data-bind="text: cell02" />
        </div>
      </div>
      <div class="row row-middle">
        <div id="cell-1-0" class="col-xs-4 cell">
          <label data-bind="text: cell10" />
        </div>
        <div id="cell-1-1" class="col-xs-4 cell cell-middle">
          <label data-bind="text: cell11" />
        </div>
        <div id="cell-1-2" class="col-xs-4 cell">
          <label data-bind="text: cell12" />
        </div>
      </div>
      <div class="row">
        <div id="cell-2-0" class="col-xs-4 cell">
          <label data-bind="text: cell20" />
        </div>
        <div id="cell-2-1" class="col-xs-4 cell cell-middle">
          <label data-bind="text: cell21" />
        </div>
        <div id="cell-2-2" class="col-xs-4 cell">
          <label data-bind="text: cell22" />
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4 startMenu" data-bind="visible: isStartMenuVisible">
      <form>
        <fieldset class="form-group">
          <legend>Team</legend>
          <div class="form-check">
            <label for="radioX" class="form-check-label">
              <input type="radio" class="form-check-input" name="optionside" value="X" id="radioX" data-bind="checked: player1Symbol">
              X

            </label>
          </div>
          <div class="form-check">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="optionside" value="O" id="radioO"  data-bind="checked: player1Symbol">
              O

            </label>
          </div>

        </fieldset>
        <fieldset class="form-group">
          <legend>Difficulty</legend>
          <div class="form-check">
            <label for="radioEasy" class="form-check-label">
              <input type="radio" class="form-check-input" name="optradio" value="Easy" id="radioEasy" data-bind="checked: gameMode">
              Easy
            </label>
          </div>
          <div class="form-check">
            <label for="radioHard" class="form-check-label">
              <input type="radio" class="form-check-input" name="optradio" value="Hard" id="radioHard" data-bind="checked: gameMode">
              Medium
            </label>
          </div>

        </fieldset>

        <div class="col-xs-12 text-center">
          <input id="btnStart" type="button" class="btn btn-primary" value="Start Playing" data-bind="click: startPlaying">
        </div>

      </form>
    </div>
    <div class="col-xs-2 col-xs-offset-5 text-center endMenu" data-bind="visible: winner().length > 0">
      <input id="btnReset" type="button" class="btn btn-primary" value="Play Again" data-bind="click: resetGame">
    </div>
  </div>