{{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>
        <div class="list">
          <div class="properties">
            <div class="prop-icon hpmax"></div>
            <div class="label yellow">生命值</div>
            <div class="value">{{charData.basic_properties.hpmax.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon attack"></div>
            <div class="label yellow">攻击力</div>
            <div class="value">{{charData.basic_properties.attack.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon def"></div>
            <div class="label yellow">防御力</div>
            <div class="value">{{charData.basic_properties.def.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon breakstun"></div>
            <div class="label">冲击力</div>
            <div class="value">{{charData.basic_properties.breakstun.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon crit"></div>
            <div class="label blue">暴击率</div>
            <div class="value">{{charData.basic_properties.crit.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon critdam"></div>
            <div class="label blue">暴击伤害</div>
            <div class="value">{{charData.basic_properties.critdam.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon elementabnormalpower"></div>
            <div class="label">异常掌控</div>
            <div class="value">{{charData.basic_properties.elementabnormalpower.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon elementmystery"></div>
            <div class="label">异常精通</div>
            <div class="value">{{charData.basic_properties.elementmystery.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon penratio"></div>
            <div class="label">穿透率</div>
            <div class="value">{{charData.basic_properties.penratio.final}}</div>
          </div>
          <div class="properties">
            <div class="prop-icon sprecover"></div>
            <div class="label">能量恢复</div>
            <div class="value">{{charData.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>
    <div class="equip-list">
      {{each charData.equip 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>
        <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.property_name}}</div>
            <div class="value">{{prop.base}}</div>
          </div>
          {{/each}}

          {{each equip.properties prop}}
          <div class="properties">
            <div class="prop-icon {{prop.classname}}"></div>
            <div class="label yellow">{{prop.property_name}}</div>
            <div class="value">{{prop.base}}</div>
          </div>
          {{/each}}
        </div>
      </div>
      {{/each}}
      <% for(let i=charData.equip.length; i < 6 ; i++) { %>
        <div class="box empty">
          <div class="icon">
          </div>
        </div>
        <% } %>

    </div>
  </div>
</div>
{{/block}}