<!DOCTYPE html>
{% extends 'layout.html' %}
{% block content %}
<div class="container py-4">
    <!-- Page Header -->
    <div class="text-center mb-4">
        <h1 class="fs-3 fw-bold mb-2">Your Projects</h1>
        <p class="text-muted mb-0">Manage your TextGrid publication projects</p>
    </div>

    <!-- Projects Grid -->
    <div class="row g-4">
        {% for project in get_projects() %}
        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
            <div class="card h-100 border shadow-sm hover-card">
                <div class="card-body d-flex flex-column p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded bg-primary bg-opacity-10 p-2 me-3 flex-shrink-0 d-flex align-items-center justify-content-center"
                            style="width: 2.5rem; height: 2.5rem;">
                            <i class="bi bi-folder-fill text-primary"></i>
                        </div>
                        <div class="flex-grow-1 min-width-0">
                            <h6 class="card-title fw-semibold mb-0 lh-sm project-name fs-5" title="{{ project.name }}">
                                {{ project.name }}
                            </h6>
                        </div>
                    </div>
                    <div class="mt-auto pt-3 d-flex gap-2">
                        <a class="btn btn-primary flex-grow-1 d-flex align-items-center justify-content-center gap-2 btn-forward"
                            href="project/{{ project.path }}" title="Open project">
                            <i class="bi bi-box-arrow-in-right"></i>
                            <span>Open</span>
                        </a>
                        <a class="btn btn-outline-danger load-modal" title="Delete project"
                            data-url="{{ url_for('project.modal_delete_project', projectname=project.path) }}">
                            <i class="bi bi-trash"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}

        <!-- New Project Card -->
        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
            <div class="card h-100 border-2 border-dashed hover-card" role="button" data-bs-toggle="modal"
                data-bs-target="#newProject">
                <div class="card-body d-flex flex-column align-items-center justify-content-center p-4 text-center">
                    <div class="rounded-circle bg-primary bg-opacity-10 p-3 mb-3 align-items-center d-flex justify-content-center"
                        style="width: 3.5rem; height: 3.5rem;">
                        <i class="bi bi-plus-lg fs-4"></i>
                    </div>
                    <h6 class="card-title fw-semibold mb-1">Create New Project</h6>
                    <small class="text-muted">Start a new publication</small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}