{% for item in artifacts %}
<div class="bg-black bg-opacity-20 rounded-lg">
  <div class="flex items-center space-x-4">
    <div class="relative">
      <img
        class="w-24 h-24"
        src="{{ item.equipment.detail.icon.url }}"
        alt="{{ item.equipment.detail.name }}"
      />
      <div
        class="absolute bottom-3 right-3 px-1 text-base italic bg-black bg-opacity-50 rounded"
      >
        +{{ item.equipment.level }}
      </div>
    </div>
    <div class="">
      <div class="font-medium">{{ item.equipment.detail.artifact_name_set }}</div>
      <div class="flex text-sm space-x-2">
        <div>{{ item.equipment.detail.mainstats.name }}</div>
        <div class="italic">
            {{ item.equipment.detail.mainstats.value }}
            {%- if item.equipment.detail.mainstats.type == DigitType.PERCENT -%} % {%- endif %}
        </div>
      </div>
      <div class="text-base {{ item.score_class }}">
        <span class="italic"> {{ item.score }} </span> 分 - {{ item.score_label
        }}
      </div>
    </div>
  </div>
  <div>
    {% for stat in item.equipment.detail.substats %}
    <div class="px-4 py-1 odd:bg-white odd:bg-opacity-10 flex space-x-4 {% if item.substat_scores[loop.index0] == 0 %} text-neutral-400 {% endif %}">
      <div class="flex-1 truncate">
        {%- if stat.name == '元素充能效率' -%}
            充能效率
        {%- else -%}
        {{ stat.name }}
        {%- endif -%}
      </div>
      <div class="min-w-30 italic text-right">
        +{{ stat.value }}
        {%- if stat.type == DigitType.PERCENT -%} % {%- endif %}
    </div>
      <div class="min-w-30 text-right">
        <span class="italic">{{ item.substat_scores[loop.index0] }}</span>
        <span class="text-sm">分</span>
      </div>
    </div>
    {% endfor %}
  </div>
  <!-- 计算圣遗物分数就行了 原神又不是PVP 也卷不动隔壁 -->
  <!--
  <div
    class="px-4 py-1 flex justify-between border-t border-neutral-200 border-dashed"
  >
    <div>备用</div>
    <div class="italic">x 100.0%</div>
  </div>
  -->
</div>
{% endfor %}