{% load static %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {% for device in devices %}
    <div class="bg-white border rounded-lg p-6 mb-6 shadow-sm hover:shadow-md transition-shadow">
      <h2 class="text-xl font-bold mb-4">{{ device.name_display }}</h2>
      <div class="space-y-2">
        <p><strong>Name:</strong> {{ device.name }}</p>
        <p><strong>Type:</strong> {{ device.device_type|default:"Not specified" }}</p>
        <p><strong>Manufacturer:</strong> {{ device.manufacturer|default:"Not specified" }}</p>
        {% if device.description %}
          <p><strong>Description:</strong> {{ device.description|truncatewords:20 }}</p>
        {% endif %}
      </div>
      <div class="mt-4 pt-4 border-t">
        <a href="{% url 'lara_django_material_store:device-detail' device.device_id %}" class="text-blue-600 hover:text-blue-800 font-medium">View Details</a>
      </div>
    </div>
  {% empty %}
    <div class="col-span-full text-center py-12">
      <p class="text-gray-500 text-lg">No devices found for this experiment.</p>
      <a href="{% url create_link %}" class="mt-4 inline-block btn bg-green-500 text-white">Add First Substance</a>
    </div>
  {% endfor %}
</div>