{% load static %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {% for substance in substances %}
    <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">{{ substance.name_display }}</h2>
      <div class="space-y-2">
        <p><strong>Name:</strong> {{ substance.name }}</p>
        <p><strong>Formula:</strong> {{ substance.chemical_formula|default:"Not specified" }}</p>
        <p><strong>CAS Number:</strong> {{ substance.cas_number|default:"Not specified" }}</p>
        {% if substance.description %}
          <p><strong>Description:</strong> {{ substance.description|truncatewords:20 }}</p>
        {% endif %}
      </div>
      <div class="mt-4 pt-4 border-t">
        <a href="{% url 'lara_django_substances_store:substance-detail' substance.substance_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 substances 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>