{% extends layout|default('base.html', true) %}
{% block style %}
    {# The stylesheet for the classes this page borrows, which base.html links
       only for pages it owns -- so borrowing the markup without borrowing this
       left every rule below unresolved and the list unstyled. In the style
       block rather than beside the markup so it lands BEFORE the plugin's own
       sheet (base.html links plugin styles further down), which is the order
       that lets a .fb- rule refine a .project- one instead of losing to it. #}
    <link rel="stylesheet" href="{{ data.base_url }}/client/src/css/openProject.css?v=20260825_card_action_icons">
{% endblock %}
{% block content %}
<title>Plexora - Figures</title>
{# Deliberately shaped like the Open Project page, down to the class names it
   reuses from openProject.css: a figure and a project are the same KIND of
   thing to a user -- something saved, found again and opened -- and giving the
   two lists different furniture would be inventing a distinction that does not
   exist. Everything specific to figures is prefixed .fb-, which is what keeps
   this plugin's stylesheet off core's elements. #}
<div class="open-project-page fb-library">
    <div class="open-project-header">
        <div>
            <h1>Figures</h1>
            <p class="open-project-subtitle" id="fb_library_count">Loading&hellip;</p>
        </div>
        <button type="button" class="btn btn-primary open-project-create" id="fb_library_create">
            <span class="fas fa-plus"></span> New Figure&hellip;
        </button>
    </div>

    <div class="open-project-tabs" role="tablist">
        <a class="open-project-tab" role="tab" aria-selected="false"
           href="{{ data.base_url }}/open_project">Projects</a>
        <span class="open-project-tab is-active" role="tab" aria-selected="true">Figures</span>
    </div>

    <div class="open-project-toolbar">
        <div class="open-project-search">
            <span class="fas fa-magnifying-glass"></span>
            <input type="text" id="fb_library_search" placeholder="Search figures&hellip;" autocomplete="off">
        </div>
    </div>

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

    <div id="fb_library_empty" class="open-project-state" hidden>
        <span class="fas fa-images open-project-state-icon"></span>
        <p>No figures yet</p>
        <p class="fb-muted">Open a project, find a view worth keeping, and capture it &mdash;
            or start an empty figure here.</p>
        <button type="button" class="btn btn-primary" id="fb_library_create_empty">Create your first figure&hellip;</button>
    </div>

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

    {# A button, not a link: deleting posts, so there is no URL for a
       prefetcher or a stale bookmark to follow. Dismissed through bootstrap's
       data API for the reason core's delete dialog documents -- the ES-module
       build never assigns window.bootstrap. #}
    <div class="modal fade" id="fb_delete_modal" 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 figure?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Delete <strong id="fb_delete_modal_name"></strong>? Its layout, captured
                        scenes and previews are removed from disk and cannot be recovered.</p>
                    <p class="fb-muted">The images it referenced are untouched.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancel</button>
                    <button id="fb_delete_modal_confirm" type="button" class="btn btn-danger"
                            data-bs-dismiss="modal">Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}