{% extends "base.html" %}

{% block title %}Projects - flanner{% endblock %}

{% block content %}
<div class="projects-page">
    <nav class="breadcrumb" aria-label="Breadcrumb"><a href="/">~</a><span class="crumb-sep"> / </span><span class="crumb-here">projects</span></nav>
    <header class="page-header">
        <h1>Projects</h1>
        <a href="/projects/new" class="btn btn-primary">
            New Project
        </a>
    </header>

    {% if projects %}
    <div data-listgroup>
        <div class="list-controls">
            <input type="search" class="list-filter" data-list-filter
                   placeholder="Filter projects..." aria-label="Filter projects by name">
            <label class="list-sort">Sort
                <select data-list-sort aria-label="Sort projects">
                    <option value="name:asc">Name (A-Z)</option>
                    <option value="created:desc">Newest first</option>
                    <option value="created:asc">Oldest first</option>
                    <option value="files:desc">Most files</option>
                </select>
            </label>
        </div>
        <div class="projects-table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Plan Directory</th>
                    <th>Files</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody data-list>
                {% for project in projects %}
                <tr data-list-item data-name="{{ project.name }}"
                    data-created="{{ project.created_at.isoformat() if project.created_at else '' }}"
                    data-files="{{ plan_counts.get(project.id, 0) }}">
                    <td>
                        <a href="/projects/{{ project.id }}" class="table-link">
                            <strong>{{ project.name }}</strong>
                        </a>
                    </td>
                    <td>{{ project.description or '-' }}</td>
                    <td><code>{{ project.plan_directory }}</code></td>
                    <td>
                        <span class="badge">{{ plan_counts.get(project.id, 0) }}</span>
                    </td>
                    <td>{{ project.created_at.strftime('%Y-%m-%d') if project.created_at else '-' }}</td>
                    <td>
                        <div class="table-actions">
                            <a href="/projects/{{ project.id }}" class="btn btn-sm btn-primary" title="View Project">View Project</a>
                            <a href="/projects/{{ project.id }}/plans/new" class="btn btn-sm btn-secondary" title="New Plan">New Plan</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
                <tr class="list-empty" data-list-empty hidden><td colspan="6">No projects match that filter.</td></tr>
            </tbody>
        </table>
        </div>
    </div>
    {% else %}
    <div class="empty-state">
        {% include "_empty_glyph.html" %}
        <h3>No Projects Yet</h3>
        <p>Create your first project to get started with plan file management.</p>
        <a href="/projects/new" class="btn btn-primary">
            Create Project
        </a>
    </div>
    {% endif %}

{% if pages > 1 %}
<nav class="pager" aria-label="Pagination">
    {% if page > 1 %}<a href="?page={{ page - 1 }}">&larr; prev</a>{% endif %}
    <span>page {{ page }} / {{ pages }} ({{ total }} total)</span>
    {% if page < pages %}<a href="?page={{ page + 1 }}">next &rarr;</a>{% endif %}
</nav>
{% endif %}
</div>
{% endblock %}