{% 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.icon }}"  alt=""/>
      <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.name }}</div>
      <div class="flex text-sm space-x-2">
        <div>{{ item.equipment.main_sub.name }}</div>
        <div class="italic">
            {{ item.equipment.main_sub.value }}
        </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.sub %}
    <div class="px-4 py-1 odd:bg-white odd:bg-opacity-10 flex space-x-4 {% if not item.substat_scores[loop.index0] %} text-neutral-400 {% endif %}">
      <div class="flex-1 truncate">
        {{ stat.name }}
      </div>
      <div class="min-w-30 italic text-right">
        +{{ stat.value }}
    </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>
</div>
{% endfor %}