<!DOCTYPE html>
<html lang="en" data-baseurl="/hwtools/">
    


    <!-- _includes/partials/head.html -->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/hwtools/assets/sass/main.css?1594138456">
</head>

<!-- / _includes/partials/head.html -->



    <body>
        <!-- _includes/partials/header.html -->

<header>
    <button class="button hamburger-button">
      <strong>Load War</strong>
    </button>

    <!--<form id="dataform" class="form">
      <h3>Add War</h3>
      <textarea id="data"></textarea>
      <input type="submit" value="Submit" class="button" />
      or
      <label class="button">
        Upload File
        <input id="fileUpload" type="file" accept=".har" />
      </label>
      |
      <a href="#" class="button button--danger"
      onClick="/*(function(){var newStorage=JSON.parse(localStorage.getItem('HeroWarsHistory'));newStorage.shift();localStorage.setItem('HeroWarsHistory',JSON.stringify(newStorage));})();*/">
      Remove Newest Entry</a>
    </form>
  -->
</header>

<!-- / _includes/partials/header.html -->


        <main class="wrapper">
            
<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.warDate | unixToLocale}} -
          <span>
            {{ item.enemyClan.title || "unknown" }}
          </span></a>
      </li>
    </ul>
  </nav>

  <section v-if="orderedAllies.length">
    <h1 v-if="orderedAllies.length">
      {{ map.ourSlots[1].user.clanTitle }} VS. {{ map.enemyClan.title || "unknown" }}
      <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="'/hwtools/assets/img/Heroes/00'+ character.id + '.png'" />
          <img v-if="character.type == 'pet'" v-for="character in ally.team[0]" :src="'/hwtools/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="'/hwtools/assets/img/Heroes/00'+ character.id + '.png'" />
          <img v-if="character.type == 'pet'" v-for="character in enemy.team[0]" :src="'/hwtools/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="'/hwtools/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="'/hwtools/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>

        </main>

        <!-- _includes/partials/footer.html -->

<footer>
    
</footer>

<!-- / _includes/partials/footer.html -->


        <!-- _includes/partials/scripts.html -->


  <script src="/hwtools/assets/js/main.min.js?1594138456"></script>


<!-- / _includes/partials/scripts.html -->

    </body>
</html>
