{% extends "base.html" %}

{% block title %}{{ page_title or "Projects" }} - MLOps Monitor{% endblock %}

{% block content %}
<div class="space-y-6" x-data="{ showNewProject: false }" @new-project:done.window="showNewProject = false" x-effect="document.body.style.overflow = showNewProject ? 'hidden' : ''">
    <section class="p-6">
        <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">Workspace</p>
                <h2 class="text-3xl font-semibold">Projects</h2>
            </div>
            <div class="flex items-center gap-3">
                <button class="inline-flex items-center justify-center rounded-full bg-primary px-5 py-2 text-sm font-semibold text-primary-foreground shadow-lg transition hover:translate-y-[-1px] hover:shadow-xl"
                        @click="showNewProject = true"
                        hx-get="/projects/new"
                        hx-target="#project-form"
                        hx-swap="innerHTML">
                    + New Project
                </button>
            </div>
        </div>
    </section>

    <section>
        <div id="projects-list" class="mt-2">
            {% include "partials/projects_list.html" %}
        </div>
    </section>

    <template x-teleport="body">
        <div class="fixed inset-0 z-[200]" x-show="showNewProject" x-cloak @keydown.window.escape="showNewProject = false">
            <div class="fixed inset-0 bg-black/60" x-show="showNewProject" x-transition.opacity @click="showNewProject = false"></div>
            <div class="fixed inset-0 flex items-center justify-center px-4">
                <div class="relative w-full max-w-lg rounded-2xl border border-border bg-background/95 p-6 shadow-2xl backdrop-blur"
                     x-show="showNewProject" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">Create</p>
                        <h3 class="text-xl font-semibold">New Project</h3>
                    </div>
                    <button type="button" @click="showNewProject = false" class="rounded-full border border-border p-2">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 6L6 18"></path>
                            <path d="M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div id="project-form"></div>
                </div>
            </div>
        </div>
    </template>
</div>
{% endblock %}