{{extend defaultLayout}}

{{block 'css'}}
<link rel="stylesheet" href="{{@sys.currentPath}}/index.css">
{{/block}}

{{block 'main'}}
<div class="card">
  <div class="user-info">
    <div class="avatar">
      <img src="{{avatar}}" alt="Avatar">
    </div>
    <div class="info-bar">
      <div class="info">
        <div class="nickname">{{player.nickname}}</div>
        <div class="label level">Lv{{player.level}}</div>
        <div class="label server">{{player.region_name}}</div>
      </div>
      <div class="uid">UID {{player.game_uid}}</div>
    </div>
  </div>
  <div class="title">
    <div class="bg-content">
      STAMINA
    </div>
    <div class="parallelograms">
      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
    <div class="content">
      电池电量
    </div>
    <div class="parallelograms">
      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
  </div>

  <div class="battery">
    <div class="icon">
      <img src="{{@sys.currentPath}}/images/IconStamina.png" alt="">
    </div>
    <div class="info">
      <div class="bvalue">
        <div class="title">电量</div>
        <div class="value"><span class="big">{{note.energy.progress.current}}</span>/{{note.energy.progress.max}}</div>
      </div>
      <div class="bleft">
        <div class="title">剩余</div>
        <div class="value">{{note.energy.progress.rest}}</div>
      </div>
      <div class="texture">
        <div class="bar">
          <div class="progress" style="width: {{note.energy.progress.percent}}%;"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="title">
    <div class="bg-content">
      ACTIVE
    </div>
    <div class="parallelograms">
      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
    <div class="content">
      每日情况
    </div>
    <div class="parallelograms">
      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
  </div>

  <div class="active-list">
    <div class="active">
      <div class="status {{note.vitality.finish && 'finish'}}"></div>
      <div class="title">今日活跃度</div>
      <div class="value">
        {{note.vitality.current}}
        <span class="sub">/{{note.vitality.max}}</span>
      </div>
    </div>
    <div class="active">
      <div class="status {{note.vhs_sale.state && 'finish'}}"></div>
      <div class="title">录像店经营</div>
      <div class="value">
        {{note.vhs_sale.state_label}}
      </div>
    </div>
    <div class="active">
      <div class="status {{note.sign && 'finish'}}"></div>
      <div class="title">刮刮卡</div>
      <div class="value">
        {{note.sign_label}}
      </div>
    </div>
  </div>
</div>
{{/block}}