{% load static %}


<div class="bg-base-100 border rounded-lg mb-6 shadow-lg rounded-lg overflow-hidden">
    <!-- Top section-->
    <div class="bg-{{ item.color }}-500 p-4">
        <h2 class="text-white text-xl font-semibold"> {{ item.name }}</h2>
    </div>

   
    <div class="grid grid-cols-4 gap-x-4 p-4">
        {% if item.image %}
        <div
            class="col-span-4 sm:col-span-2 md:col-span-1 h-full content-center"
        >
            <figure>
                <img
                    class="rounded-lg"
                    src="{% static '{{ item.image }}' %}"
                    alt="Project/Experiment Image"
                />
            </figure>
        </div>
        {% endif %}
        <div class="col-span-4 mt-2 sm:mt-0 sm:col-span-2 md:col-span-3">

            <p class="text-gray-600 text-slate-800 mb-4">
                {{ item.description }}
            </p>
            <div class="inline-flex items-center rounded-md shadow-sm">
            {% for class_app in item.class_apps %}
                {% if forloop.first %}
                    <button  class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-{{ class_app.color }}-100 border border-{{ class_app.color }}-400 rounded-l-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
                {% elif forloop.last %}
                <button  class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-{{ class_app.color }}-200 border border-{{ class_app.color }}-500 rounded-r-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
                    {% else %}
                    <button  class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-{{ class_app.color }}-300 border-y border-{{ class_app.color }}-600 font-medium px-4 py-2 inline-flex space-x-1 items-center">
                    {% endif %}
                    <a href="{% url class_app.path %}">
                        {{ class_app.name }} 
                    </a>
                </button>
            
            {% endfor %}
            </div>
            <div class="inline-flex items-center rounded-md shadow-sm mt-4">
                {% for class_app in item.instance_apps %}
                    {% if forloop.first %}
                        <button  class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-{{ class_app.color }}-100 border border-{{ class_app.color }}-400 rounded-l-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
                    {% elif forloop.last %}
                    <button  class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-{{ class_app.color }}-200 border border-{{ class_app.color }}-500 rounded-r-lg font-medium px-4 py-2 inline-flex space-x-1 items-center">
                        {% else %}
                        <button  class="text-slate-800 hover:text-blue-600 text-sm bg-white hover:bg-{{ class_app.color }}-300 border-y border-{{ class_app.color }}-600 font-medium px-4 py-2 inline-flex space-x-1 items-center">
                        {% endif %}
                        <a href="{% url class_app.path %}">
                            {{ class_app.name }} 
                        </a>
                    </button>
                
                {% endfor %}
                </div>
        </div>
    </div>
</div>