<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <title>Gwent</title>
  <meta name="description" content="">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="../build/main.css">
</head>
<body>
<script id="info-template" type="text/x-handlebars-template">
  <div class="col-xs-12 game-info game-info-foe foe">
    <div class="col-xs-12 info-name">{{name}}</div>
    <div class="col-xs-6 field-single field-leader"></div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-6">Points:</div>
        <div class="col-xs-6 score">{{score}}</div>
      </div>
      <div class="row">
        <div class="col-xs-6">Hand:</div>
        <div class="col-xs-6 hand-card">{{hand}}</div>
      </div>
      <div class="row">
        <div class="col-xs-12 gwent-lives">
          {{#health}}
          {{/health}}
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 passing">Passed</div>
      </div>
    </div>
  </div>
</script>
<script id="battle-template" type="text/x-handlebars-template">
  <div class="col-xs-3 left-side">
    <div class="col-xs-12 game-info game-info-foe foe">
      <div class="col-xs-12 info-name"></div>
      <div class="col-xs-6 field-single field-leader"></div>
      <div class="col-xs-6">
        <div class="row">
          <div class="col-xs-6">Points:</div>
          <div class="col-xs-6 score">0</div>
        </div>
        <div class="row">
          <div class="col-xs-6">Hand:</div>
          <div class="col-xs-6 hand-card">0</div>
        </div>
        <div class="row">
          <div class="col-xs-12 gwent-lives">
            <i class="ruby"></i>
            <i class="ruby"></i>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 passing">Passed</div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 field field-weather">
      field
    </div>
    <div class="col-xs-12 game-info game-info-player player">
      <div class="col-xs-12 info-name">{{name}}</div>
      <div class="col-xs-6 field-single field-leader"></div>
      <div class="col-xs-6">
        <div class="row">
          <div class="col-xs-6">Points:</div>
          <div class="col-xs-6 score">{{score}}</div>
        </div>
        <div class="row">
          <div class="col-xs-6">Hand:</div>
          <div class="col-xs-6 hand-card">{{hand}}</div>
        </div>
        <div class="row">
          <div class="col-xs-12 gwent-lives">
            <!--<i class="ruby"></i>-->
            {{#health lives}}{{/health}}
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 passing">Passed</div>
        </div>
      </div>
      <div class="col-xs-12">
        <button class="button-pass">Pass</button>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="row">
      <div class="col-xs-12 battleside battleside-foe foe">
        <div class="col-xs-12 field">
          <div class="col-xs-1 large-field-counter">0</div>
          <div class="col-xs-11 field-siege"></div>
        </div>
        <div class="col-xs-12 field">
          <div class="col-xs-1 large-field-counter">0</div>
          <div class="col-xs-11 field-range"></div>
        </div>
        <div class="col-xs-12 field">
          <div class="col-xs-1 large-field-counter">0</div>
          <div class="col-xs-11 field-close"></div>
        </div>
      </div>
      <div class="col-xs-12 mid-line"></div>
      <div class="col-xs-12 battleside battleside-player player">
        <div class="col-xs-12 field">
          <div class="col-xs-1 large-field-counter">0</div>
          <div class="col-xs-11 field-close"></div>
        </div>
        <div class="col-xs-12 field">
          <div class="col-xs-1 large-field-counter">0</div>
          <div class="col-xs-11 field-range"></div>
        </div>
        <div class="col-xs-12 field">
          <div class="col-xs-1 large-field-counter">0</div>
          <div class="col-xs-11 field-siege"></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 field field-hand">
        {{#each cards}}
        <div class="card" data-key="{{_key}}" data-id="{{_id}}">
          <img src='../assets/cards/{{_data.img}}.png'>
        </div>
        {{/each}}
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    {{#if preview}}
    <div class="col-xs-12 card-preview">
      <img src="{{preview}}">
    </div>
    {{/if}}
    <div class="col-xs-12 right-side right-side-foe foe">
      <div class="col-xs-5 field-discard field-single">
        discard deck
      </div>
      <div class="col-xs-5 field-single field-deck pull-right">
        main deck
      </div>
    </div>
    <div class="col-xs-12 right-side right-side-player player">
      <div class="col-xs-5 field-discard field-single">
        discard deck
      </div>
      <div class="col-xs-5 field-single field-deck pull-right">
        main deck
      </div>
    </div>
  </div>
</script>
<script id="matchmaker-template" type="text/x-handlebars-template">
  <div class="col-xs-12">
    <div class="panel panel-default">
      <div class="panel-heading">Gwent</div>
      <div class="panel-body">
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="name-input" value="{{name}}">
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <button type="button" class="btn btn-primary create-room">Create Room</button>
            <button type="button" class="btn btn-primary join-room">Join Room</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>
<script id="game-info-template" type="text/x-handlebars-template">
  <div class="col-xs-12 info-name">{{name}}</div>
  <div class="col-xs-6 field-single field-leader"></div>
  <div class="col-xs-6">
    <div class="row">
      <div class="col-xs-6">Points:</div>
      <div class="col-xs-6 score">{{score}}</div>
    </div>
    <div class="row">
      <div class="col-xs-6">Hand:</div>
      <div class="col-xs-6 hand-card">{{hand}}</div>
    </div>
    <div class="row">
      <div class="col-xs-12 gwent-lives">
        <!--<i class="ruby"></i>-->
        {{#health lives}}{{/health}}
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 passing">Passed</div>
    </div>
  </div>
  <div class="col-xs-12">
    <button class="button-pass">Pass</button>
  </div>
</script>
<script src="../build/app.js"></script>
</body>
</html>