<html>
  <head>
    <meta charset="utf-8">
    <title>aggrolist</title>
    <link rel="stylesheet" href="aggrolist.css">
  </head>

  <body id="aggrolist" v-class="resize-handle: !locked">
    <div class="{{hide ? 'hide' : ''}} outer">
      <div class="inner">
        <div class="background"></div>
          <div v-if="!updated" class="gold">
            <span>No data to show.</span>
          </div>
          <div v-if="updated">
            <table id="combatants" v-show="!collapsed">
              <!-- <thead class="gold">
                <tr>
                  <th class="text-left">Hate</th>
                  <th class="text-left">Name</th>
                  <th class="test-left">HPP</th>
                  <th class="test-left" style="width: 5em">Target</th>
                </tr>
              </thead> -->
             <tbody class="blue">
             <template v-repeat="combatant: combatants">
               <tr class="{{combatant.isCurrentTarget ? '' : ''}}">
                <!-- <td class="text-right" style="width: 4em"><div style="margin: 1px; padding-right: 1px" class="{{combatant.hatecolor}}">{{combatant.isCurrentTarget ? " ➸ " : "  "}}{{combatant.HateRate}}%</div></td> -->
                <td class="text-right" style="width: 4em"><div style="margin: 1px; padding-right: 1px" class="{{combatant.hatecolor}}">{{combatant.isCurrentTarget ? " >> " : "  "}}{{combatant.HateRate}}%</div></td>
                <td class="text-left" colspan="2">
                  <div class="box">
                    <!-- <div class="content">{{combatant.Name}}<span style="float: right">{{combatant.HPPercent}}%</span> -->
                    <div class="content">{{combatant.Name}}<span style="float: right"></span>
                    </div>
                    <div class="gauge {{combatant.hpcolor}}" style="width: {{combatant.HPPercent}}%" />
                  </div>
                </td>
                 <td class="text-center"><div style="margin: 1px; padding-right: 1px" class="{{combatant.Target | jobrole}}">{{combatant.Target.isMe ? "YOU" : combatant.Target.isPet ? "PET" : combatant.Target.JobName}}</div></td>
              </tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
    <script src="aggrolist.js"></script>
  </body>
</html>

