---
layout: default
---
{% raw %}
<div id="app" class="war">
  <nav class="hamburger">
    <ul>
      <li v-for="(item, index) in storage">
        <button class="button button--danger js--remove-storage" :data-item="index">&times;</button>
        <a class="js--load-war" href="javascript:;" :data-item="index">{{ item.date | unixToLocale}} -
          {{ item.results[1].result.response.enemyClan.title }}</a>
      </li>
    </ul>
  </nav>

  <section v-if="orderedAllies.length">
    <h1 v-if="orderedAllies.length">
      {{ map.ourSlots[1].user.clanTitle }} VS. {{ map.enemyClan.title }}
      <date>{{ map.warDate | unixToLocale }}</date>
    </h1>

    <div class="row">
      <div class="col col-3">
        <h4>Allied HEROES</h4>
        <div class="team team--hero ally-team js-ally-hero" :data-id="ally.user.id" :data-power="ally.power"
          v-if="ally.location.type == 'Hero' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
          <input name="attack_first" type="checkbox" />
          <input name="attack_second" type="checkbox" />
          <img v-if="character.type != 'pet'" v-for="character in ally.team[0]" :src="'assets/img/Heroes/00'+ character.id + '.png'" />
          <img v-if="character.type == 'pet'" v-for="character in ally.team[0]" :src="'assets/img/Pets/'+ character.id + '.png'" />
          <div class="team__details">
            <span class="team__location">{{ ally.location.name }}</span>
            <span class="team__name">{{ ally.user.name }} - {{ ally.power | formatNumber }}</span>
          </div>
        </div>
      </div>

      <div class="col col-3">
        <h4>Enemy HEROES</h4>
        <label class="team team--hero enemy-team js-enemy-hero" :data-id="enemy.user.id" :data-power="enemy.power"
          v-if="enemy.location.type == 'Hero' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
          <input type="checkbox" />
          <img v-if="character.type != 'pet'" v-for="character in enemy.team[0]" :src="'assets/img/Heroes/00'+ character.id + '.png'" />
          <img v-if="character.type == 'pet'" v-for="character in enemy.team[0]" :src="'assets/img/Pets/'+ character.id + '.png'" />
          <div class="team__details">
            <span class="team__location">{{ enemy.location.name }}</span>
            <span class="team__name">{{ enemy.user.name }} - {{ enemy.power | formatNumber }}</span>
          </div>
        </label>
      </div>

      <div class="col col-3">
        <h4>Allied Titans</h4>
        <div class="team team--titan ally-team js-ally-titan" :data-id="ally.user.id" :data-power="ally.power"
          v-if="ally.location.type == 'Titan' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
          <input name="attack_first" type="checkbox" />
          <input name="attack_second" type="checkbox" />
          <img v-for="character in ally.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
          <div class="team__details">
            <span class="team__location">{{ ally.location.name }}</span>
            <span class="team__name">{{ ally.user.name }} - {{ ally.power | formatNumber }}</span>
          </div>
        </div>
      </div>

      <div class="col col-3">
        <h4>Enemy Titans</h4>
        <label class="team team--titan enemy-team js-enemy-titan" :data-id="enemy.user.id" :data-power="enemy.power"
          v-if="enemy.location.type == 'Titan' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
          <input type="checkbox" />
          <img v-for="character in enemy.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
          <div class="team__details">
            <span class="team__location">{{ enemy.location.name }}</span>
            <span class="team__name">{{ enemy.user.name }} - {{ enemy.power | formatNumber }}</span>
          </div>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="col col-6 align-right">
        <h4>Allied Stats</h4>
        Allies Hero Power: <strong>{{ getAllyPower.heroPower | formatNumber }}</strong> <br />
        Allies Titan Power: <strong>{{ getAllyPower.titanPower | formatNumber }}</strong> <br />
        Allies Total Power: <strong>{{ getAllyPower.totalPower | formatNumber }}</strong> <br />
      </div>
      <div class="col col-6">
        <h4>Enemy Stats</h4>
        Enemy Hero Power: <strong>{{ getEnemyPower.heroPower | formatNumber }}</strong> <br />
        Enemy Titan Power: <strong>{{ getEnemyPower.titanPower | formatNumber }}</strong> <br />
        Enemy Total Power: <strong>{{ getEnemyPower.totalPower | formatNumber }}</strong> <br />
      </div>
    </div>
  </section>
</div>
{% endraw %}