{{extend defaultLayout}}

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

{{block 'main'}}
<div class="card">
  {{include sys.playerInfo}}
  <% include(sys.specialTitle, {en: 'STAMINA' , cn: '电池电量' }) %>
    <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>


    <% include(sys.specialTitle, {en: 'ACTIVE' , cn: '每日情况' }) %>
      <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}}