{{extend defaultLayout}}

{{block 'css'}}
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/abyss-pct.css?v=1.0"/>
{{/block}}

{{block 'main'}}
<div class="info_box">
  <div class="head-box type{{bgType}}">
    {{if chooseFloor == -1}}
    <div class="title">深渊{{modeName}}统计</div>
    {{else}}
    <div class="title">深渊第{{floorName[chooseFloor]}}{{modeName}}</div>
    {{/if}}
    <div class="label">【#深渊出场率】出场总数/总记录数</div>
    <div class="label">【#深渊使用率】出场总数/持有该角色的记录数</div>
    <img class="genshin_logo" src="{{_res_path}}/common/cont/logo.png"/>
  </div>
  <div class="cont msg-cont">
    <div class="cont-title">深渊出场率统计</div>
    <div class="cont-body">
      <ul class="cont-msg">
        <li>数据来自SG团队<strong>胡桃API</strong>，为Snap Genshin / Miao-Plugin 用户自主上传的角色池信息</li>
        <li>您可以通过<strong>#上传深渊数据</strong>命令来上传挑战记录，来帮助我们统计的更加及时准确。（上传命令仅会上传您的角色列表及当期深渊挑战数据，不会上传其他额外信息）</li>
        <li>可通过 <strong>#深渊{{modeName}}</strong>/<strong>#深渊12层{{modeName}}</strong>来查看整体或指定层的{{modeName}}数据</li>
        <li>由于是用户自主上传，数据可能有一定滞后，数据会在深渊开启后一段时间逐步稳定</li>
        <li>统计数据为本期深渊数据，数据更新时间：{{lastUpdate}}</li>
      </ul>
    </div>
  </div>
  <% let pct = function (num) {
  return (num * 100).toFixed(2);
  } %>
  {{each abyss ds}}
  {{if chooseFloor == -1 || chooseFloor == ds.floor}}
  <div class="info_box_border">
    <div class="line_box">
      <span class="line"></span>
      <span class="text">第{{floorName[ds.floor]}}</span>
      <span class="line"></span>
    </div>
    <div class="card-list">
      {{each ds.avatars char}}
      <div class="item star{{char.star == 4? 4:5}}">
        <img class="role"
             src="{{_res_path}}/meta/character/{{char.name}}/face_2.png"
        />
        <div class="num_name">{{pct(char.value)}}%</div>
      </div>
      {{/each}}
    </div>
  </div>
  {{/if}}
  {{/each}}
</div>
{{/block}}