{{extend defaultLayout}}

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

{{block 'main'}}
<div class="card">
  <div class="uid">UID {{uid}}</div>
  <div class="basic">
    <div class="char">
      <div class="avatar">
        <img src="{{charData.role_icon}}" alt="">
      </div>
      <div class="skills">
        <div class="skill">{{charData.skills[0].level}}</div>
        <div class="skill">{{charData.skills[2].level}}</div>
        <div class="skill">{{charData.skills[5].level}}</div>
        <div class="skill">{{charData.skills[1].level}}</div>
        <div class="skill">{{charData.skills[3].level}}</div>
        <div class="skill">{{charData.skills[4].level}}</div>
      </div>
    </div>
    <div class="info">
      <div class="char_info">
        <div class="base">
          <div class="rank rank-icon {{charData.rarity}}"></div>
          <div class="property {{charData.element_str}}"></div>
          <div class="name">{{charData.full_name_mi18n}}</div>
        </div>
        <div class="addition">
          <div class="level">Lv.{{charData.level}}</div>
          <div class="role_ranks r{{charData.rank}}">
            <span></span><span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>
      </div>
      <div class="property_info">
        <div class="title">
          <% include(sys.specialTitle, {en: 'PROPERTY' , cn: '属性' , count: 6 }) %>
        </div>
        {{set basic_properties = charData.basic_properties}}
        <div class="list">
          <div class="properties">
            <div class="prop-icon hpmax"></div>
            <div class="label yellow">生命值</div>
            <div class="value">{{basic_properties.hpmax.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon attack"></div>
            <div class="label yellow">攻击力</div>
            <div class="value">{{basic_properties.attack.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon def"></div>
            <div class="label yellow">防御力</div>
            <div class="value">{{basic_properties.def.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon breakstun"></div>
            <div class="label">冲击力</div>
            <div class="value">{{basic_properties.breakstun.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon crit"></div>
            <div class="label blue">暴击率</div>
            <div class="value">{{basic_properties.crit.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon critdam"></div>
            <div class="label blue">暴击伤害</div>
            <div class="value">{{basic_properties.critdam.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon elementabnormalpower"></div>
            <div class="label">异常掌控</div>
            <div class="value">{{basic_properties.elementabnormalpower.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon elementmystery"></div>
            <div class="label">异常精通</div>
            <div class="value">{{basic_properties.elementmystery.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon penratio"></div>
            <div class="label">穿透率</div>
            <div class="value">{{basic_properties.penratio.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon sprecover"></div>
            <div class="label">能量恢复</div>
            <div class="value">{{basic_properties.sprecover.final}}</div>
          </div>
        </div>
      </div>
      <div class="weapon_info">
        {{if charData.weapon}}
        <div class="info">
          <div class="base">
            <div class="rarity-icon {{charData.weapon.rarity}}"></div>
            <div class="name">{{charData.weapon.name}}</div>
          </div>
          <div class="main">
            <div class="addition">
              <div class="star star{{charData.weapon.star}}"></div>
              <div class="level">Lv.{{charData.weapon.level}}</div>
            </div>
            {{each charData.weapon.main_properties prop}}
            <div class="properties">
              <div class="prop-icon {{prop.classname}}"></div>
              <div class="label">{{prop.property_name}}</div>
              <div class="value">{{prop.base}}</div>
            </div>
            {{/each}}
            {{each charData.weapon.properties prop}}
            <div class="properties sub">
              <div class="prop-icon {{prop.classname}}"></div>
              <div class="label">{{prop.property_name}}</div>
              <div class="value">{{prop.base}}</div>
            </div>
            {{/each}}
          </div>
        </div>
        <div class="icon">
          <img src="{{charData.weapon.square_icon}}" alt="">
        </div>
        {{else}}
          <div class="info empty">
            <div class="base">
              <div class="rarity-icon"></div>
              <div class="name"></div>
            </div>
          </div>
          {{/if}}
      </div>
    </div>
  </div>
  <div class="other">
    <div class="title">
      <% include(sys.specialTitle, {en: 'METAL' , cn: '驱动盘信息' }) %>
    </div>
    {{if charData.equip_score !== false}}
    <div class="equip-score {{charData.equip_comment}}">
      <div class="comment-box">
        <div class="comment">{{charData.equip_comment}}</div>
      </div>
      <div class="value">
        <span>{{charData.equip_score.toFixed(2)}}</span>
        <span class="subt">分</span>
      </div>
    </div>
    {{/if}}
    <div class="equip-list">
      {{each charData.equip_final equip}}
      {{if equip}}
      <div class="box">
        <div class="icon">
          <img src="{{equip.suit_icon}}" alt="">
        </div>
        <div class="info">
          <div class="level">等级{{equip.level}}</div>
          <div class="rarity-icon {{equip.rarity}}"></div>
        </div>
        <div class="name">{{equip.name}}</div>
        {{if equip.score !== false}}
        <div class="score {{equip.comment}}">
          <div class="comment">{{equip.comment}}</div>
          <div class="value">{{equip.score.toFixed(2)}}</div>
        </div>
        {{/if}}
        <div class="property-list">

          {{each equip.main_properties prop}}
          <div class="properties main">
            <div class="prop-icon {{prop.classname}}"></div>
            <div class="label yellow">{{prop.short_name}}</div>
            <div class="value">{{prop.base}}</div>
          </div>
          {{/each}}

          {{each equip.properties prop}}
          <div class="properties">
            <div class="prop-icon {{prop.classname}}"></div>
            {{if prop.score !== false}}
            <div class="label yellow hit{{prop.base_score * 100}}">
              {{else}}
                <div class="label yellow">
                  {{/if}}

                  {{prop.property_name}}
                </div>
                {{if prop.count}}
                <div class="count">
                  <% for(let i=1 ; i <=prop.count ; i++) { %>
                    <span></span>
                    <% } %>
                </div>
                {{/if}}
                <div class="value">{{prop.base}}</div>
            </div>
            {{/each}}
          </div>
        </div>
        {{else}}
          <div class="box empty">
            <div class="icon">
            </div>
          </div>
          {{/if}}

          {{/each}}

      </div>
      {{set damages = charData?.damages}}
      {{if damages && damages?.length}}
      <div class="title damage-title">
        <% include(sys.specialTitle, {en: 'DAMAGE' , cn: '伤害统计' }) %>
      </div>
      <div class="damagelist">
        <div class="dmg-tr titlebar no-zzz-font">
          <div class="dmg-td">类型</div>
          <div class="dmg-td">暴击伤害</div>
          <div class="dmg-td">期望伤害</div>
        </div>
        {{each damages damage}}
        <div class="dmg-tr">
          <div class="dmg-td no-zzz-font">{{damage.skill.name}}</div>
          <div class="dmg-td">{{damage.result.critDMG.toFixed(0)}}</div>
          <div class="dmg-td">{{damage.result.expectDMG.toFixed(0)}}</div>
        </div>
        {{/each}}
      </div>
      {{/if}}
    </div>
  </div>
  {{/block}}