{% for item in artifacts %}
<div class="bg-black bg-opacity-20 rounded-lg">
  {% if item %}
  <div class="flex items-center space-x-4">
    <div class="relative">
      <img class="w-24 h-24" src="{{ item.icon }}"  alt=""/>
      <div
        class="absolute bottom-3 right-3 px-1 text-base italic bg-black bg-opacity-50 rounded"
      >
        +{{ item.level }}
      </div>
    </div>
    <div class="">
      <div class="font-medium">{{ item.name }}</div>
      <div class="flex text-sm space-x-2">
        <div>{{ item.main_properties[0].property_name }}</div>
        <div class="italic">
            {{ item.main_properties[0].base }}
        </div>
      </div>
    </div>
  </div>
  <div>
    {% for stat in item.properties %}
    <div class="px-4 py-1 odd:bg-white odd:bg-opacity-10 flex space-x-4">
      <div class="flex-1 truncate">
        {{ stat.property_name }}
      </div>
      <div class="min-w-30 italic text-right">
        +{{ stat.base }}
    </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endfor %}