{% if sequences_list %}
    <div id="sequences-cards" class="grid grid-cols-1 xl:grid-cols-2 gap-4">
        {% for sequence in sequences_list %}
            {% with class_name=sequence.sequence_class.name|default:""|lower %}
                <article class="border rounded-lg overflow-hidden bg-base-100 shadow-sm"
                         id="sequence-card-{{ sequence.pk }}">
                    <div class="h-3 {% if 'protein' in class_name or 'peptide' in class_name %}bg-green-500{% elif 'dna' in class_name or 'rna' in class_name or 'pna' in class_name or 'xna' in class_name %}bg-lime-300{% else %}bg-{{ app_color }}-500{% endif %}">
                    </div>
                    <div class="p-4 space-y-3">
                        <div class="flex items-start justify-between gap-3">
                            <a href="{% url 'lara_django_sequences:sequence-detail' sequence.pk %}"
                               class="font-semibold text-{{ app_color }}-700 hover:text-{{ app_color }}-900 break-words">
                                {{ sequence.name|default:"-" }}
                            </a>
                            <input type="checkbox"
                                   name="selected_sequences"
                                   value="{{ sequence.pk }}"
                                   class="checkbox checkbox-sm sequence-checkbox"
                                   @change=" const parentCard = $event.target.closest('article'); if($event.target.checked) { parentCard.classList.add('ring-2', 'ring-{{ app_color }}-300'); } else { parentCard.classList.remove('ring-2', 'ring-{{ app_color }}-300'); } " />
                        </div>
                        <div class="text-sm flex flex-wrap gap-x-4 gap-y-1">
                            <p>
                                <span class="font-semibold">Class:</span> {{ sequence.sequence_class.name|default:"-" }}
                            </p>
                            <p>
                                <span class="font-semibold">Namespace:</span> {{ sequence.namespace.name|default:"-" }}
                            </p>
                        </div>
                        <p class="text-sm">
                            <span class="font-semibold">UniProt:</span>
                            {% if sequence.uniprot_accession %}
                                <a href="https://www.uniprot.org/uniprotkb/{{ sequence.uniprot_accession }}"
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   class="text-{{ app_color }}-600 hover:text-{{ app_color }}-800 hover:underline">
                                    {{ sequence.uniprot_accession }}
                                </a>
                            {% else %}
                                -
                            {% endif %}
                        </p>
                        <p class="text-sm">
                            <span class="font-semibold">Sequence (first 100):</span>
                            <span class="font-mono break-all">{{ sequence.sequence|default:"-"|truncatechars:100 }}</span>
                        </p>
                        <p class="text-sm">
                            <span class="font-semibold">Description:</span>
                            {{ sequence.description|default:"-"|truncatechars:220 }}
                        </p>
                        <div class="pt-1 flex items-center gap-2 flex-wrap">
                            <a href="{% url 'lara_django_sequences:sequence-update' sequence.pk %}"
                               class="btn btn-ghost btn-xs text-info hover:bg-info/10 tooltip tooltip-top"
                               data-tip="Edit">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </a>
                            <button type="button"
                                    class="btn btn-ghost btn-xs text-error hover:bg-error/10 tooltip tooltip-top"
                                    data-tip="Delete"
                                    hx-get="{% url 'lara_django_sequences:sequence-delete' sequence.pk %}"
                                    hx-target="#delete-sequence-modal-content"
                                    hx-trigger="click"
                                    onclick="delete_sequence_modal.showModal()">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </article>
            {% endwith %}
        {% endfor %}
    </div>
    {% if page_obj %}
        <div class="mt-4">{% include "lara_django_base/partials/pagination.html" %}</div>
    {% endif %}
{% else %}
    <div role="alert" class="alert alert-info">
        <svg xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
             class="h-6 w-6 shrink-0 stroke-current">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
            </path>
        </svg>
        <span>No sequences found.</span>
    </div>
{% endif %}