{% extends "layouts/main.html" %}
{% block title %}{{ page_title }} — pyvelm{% endblock %}
{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="flex gap-4 overflow-x-auto pb-4">
    {% for col in columns %}
    <section class="flex-none w-72 bg-neutral-tertiary/70 rounded-xl p-3">
        <header class="flex items-center justify-between mb-3 px-1">
            <h3 class="text-xs font-semibold uppercase tracking-wider text-body-subtle">
                {{ col.label }}
            </h3>
            <span class="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full
                         bg-neutral-primary text-2xs font-medium text-body">
                {{ col.count }}
            </span>
        </header>
        <div class="space-y-2">
            {% for card in col.cards %}
            <{% if card.link %}a href="{{ card.link }}"{% else %}div{% endif %}
                class="block bg-neutral-primary border border-default rounded-lg p-3 shadow-sm
                       hover:shadow-md hover:border-fg-brand/40 transition
                       {% if card.link %}cursor-pointer{% endif %}"
                data-record-id="{{ card.id }}">
                {% if card.title %}
                <div class="font-semibold text-sm text-heading">{{ card.title }}</div>
                {% endif %}
                {% if card.subtitle %}
                <div class="text-xs text-body-subtle mt-0.5">{{ card.subtitle }}</div>
                {% endif %}
                {% if card.fields %}
                <div class="mt-2 space-y-1">
                    {% for f in card.fields %}
                    <div class="text-xs">
                        <span class="text-body-subtle">{{ f.label }}:</span>
                        <span class="text-body">{{ f.html }}</span>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
                {% if card.badges %}
                <div class="mt-2 flex flex-wrap gap-1">
                    {% for b in card.badges %}
                    <span class="inline-flex items-center text-xs">{{ b.html }}</span>
                    {% endfor %}
                </div>
                {% endif %}
            </{% if card.link %}a{% else %}div{% endif %}>
            {% endfor %}
            {% if not col.cards %}
            <p class="text-xs text-body-subtle text-center py-4">No records</p>
            {% endif %}
        </div>
    </section>
    {% endfor %}
</div>
{% endblock %}