{% extends "studio/base.html" %}

{% block studio_title %}Models{% endblock %}

{% block studio_content %}
<div class="px-8 py-8">

    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl font-bold text-zinc-800 dark:text-zinc-100">Models</h1>
            <p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
                {{ models | length }} model{{ "s" if models | length != 1 else "" }}
            </p>
        </div>
        <button onclick="openModal('new-model-modal')"
            class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-primary text-white text-sm font-medium hover:opacity-90 transition">
            <ion-icon name="add-outline"></ion-icon> New model
        </button>
    </div>

    {% if not models %}
    <div class="rounded-3xl border border-dashed border-zinc-300 dark:border-zinc-700 bg-white dark:bg-neutral-800/40 p-16 text-center">
        <ion-icon name="layers-outline" class="text-5xl text-zinc-300 dark:text-zinc-600"></ion-icon>
        <h2 class="mt-4 text-lg font-semibold text-zinc-700 dark:text-zinc-200">No models yet</h2>
        <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Create your first model to start modelling data.</p>
        <button onclick="openModal('new-model-modal')"
            class="inline-flex items-center gap-2 mt-6 px-4 py-2.5 rounded-xl bg-primary text-white text-sm font-medium hover:opacity-90 transition">
            <ion-icon name="add-outline"></ion-icon> New model
        </button>
    </div>
    {% else %}
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
        {% for model in models %}
        <a href="{{ url_for('studio_bp.model_detail', module=model.module) }}"
           class="group rounded-3xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-neutral-800 p-6 hover:shadow-lg hover:scale-[98%] transition-all duration-300">
            <div class="flex items-start justify-between">
                <div class="min-w-0">
                    <h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">{{ model.class_name }}</h3>
                    <p class="font-mono text-xs text-zinc-400 dark:text-zinc-500 mt-1 truncate">{{ model.table_name }}</p>
                </div>
                <ion-icon name="chevron-forward-outline" class="text-xl text-zinc-300 dark:text-zinc-600 group-hover:text-primary transition"></ion-icon>
            </div>

            <div class="mt-5 flex items-center gap-4 text-xs text-zinc-500 dark:text-zinc-400">
                <span class="inline-flex items-center gap-1.5">
                    <ion-icon name="list-outline"></ion-icon>
                    {{ model.columns | length }} column{{ "s" if model.columns | length != 1 else "" }}
                </span>
                <span class="inline-flex items-center gap-1.5">
                    <ion-icon name="git-compare-outline"></ion-icon>
                    {{ model.relationships | length }} relationship{{ "s" if model.relationships | length != 1 else "" }}
                </span>
            </div>
        </a>
        {% endfor %}
    </div>
    {% endif %}
</div>

{% include "studio/partials/new_model_modal.html" %}
{% endblock %}