{% extends 'base.html' %}
{% block style %}
    <link rel="stylesheet" href="{{ data.base_url }}/client/src/css/openProject.css?v=20260824_shared_roots">
{% endblock %}
{% block content %}
<title>Plexora - Open Project</title>
<div class="open-project-page">
    <div class="open-project-header">
        <div>
            <h1>Open Project</h1>
            <p class="open-project-subtitle" id="project-count">Loading&hellip;</p>
        </div>
        <a class="btn btn-primary open-project-create" href="{{ data.base_url }}/upload_page">
            <span class="fas fa-plus"></span> Create Project&hellip;
        </a>
    </div>

    {# [ Projects ] [ Figures ] ... -- the strip only exists once something else
       is on it. A single tab reading "Projects" beside nothing is a control
       that does not control anything, so a core-only build renders no strip at
       all rather than a degenerate one. #}
    {% set page_tabs = data.plugin_nav_items | selectattr('menu', 'equalto', 'open_project') | list %}
    {% if page_tabs %}
    <div class="open-project-tabs" role="tablist">
        <span class="open-project-tab is-active" role="tab" aria-selected="true">Projects</span>
        {% for item in page_tabs %}
        <a class="open-project-tab" id="{{ item.id }}" role="tab" aria-selected="false"
           href="{{ item.href }}">{{ item.label }}</a>
        {% endfor %}
    </div>
    {% endif %}

    <div class="open-project-toolbar">
        <div class="open-project-search">
            <span class="fas fa-magnifying-glass"></span>
            <input type="text" id="project-search" placeholder="Search projects&hellip;" autocomplete="off">
        </div>
        <select id="project-sort" class="open-project-sort">
            <option value="lastOpenedAt">Recently Opened</option>
            <option value="createdAt">Date Created</option>
            <option value="name">Name (A&ndash;Z)</option>
        </select>
        <div class="open-project-view-toggle" role="group" aria-label="View">
            <button type="button" id="project-view-grid" class="view-toggle-button" title="Grid view">
                <span class="fas fa-grip"></span>
            </button>
            <button type="button" id="project-view-list" class="view-toggle-button" title="List view">
                <span class="fas fa-list"></span>
            </button>
        </div>
    </div>

    <div id="project-results" class="project-results project-grid"></div>

    <div id="project-empty-state" class="open-project-state" hidden>
        <span class="fas fa-folder-open open-project-state-icon"></span>
        <p>No projects yet</p>
        <a class="btn btn-primary" href="{{ data.base_url }}/upload_page">Create your first project&hellip;</a>
    </div>

    <div id="project-no-results" class="open-project-state" hidden>
        <span class="fas fa-magnifying-glass open-project-state-icon"></span>
        <p>No projects match your search</p>
    </div>

    <div class="modal fade" id="deleteProjectModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete project?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Delete <strong id="deleteProjectModalName"></strong>? This removes its data from disk and cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancel</button>
                    {# A button, not a link: deleting posts, so there is no URL
                       for a prefetcher or a stale bookmark to follow.

                       Dismissed by the data API rather than from the click
                       handler, which used to call window.bootstrap.Modal --
                       undefined here, because vendor.js imports bootstrap as an
                       ES module. That registers this data API but never assigns
                       the global, so the optional chain the handler used
                       evaluated to undefined and the dialog just sat there
                       after a successful delete. #}
                    <button id="deleteProjectModalConfirm" type="button" class="btn btn-danger"
                            data-bs-dismiss="modal">Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ data.base_url }}/client/src/js/views/openProjectPage.js?v=20260824_shared_roots" defer></script>
{% endblock %}