{% extends layout|default('base.html', true) %}
{% block style %}
    <link rel="stylesheet" href="{{ data.base_url }}/client/src/css/openProject.css?v=20260918_import_dataset">
{% endblock %}
{% block content %}
<title>Plexora - Open Project</title>
<div class="open-project-page">
    <div class="open-project-header">
        <div>
            <h1>Samples</h1>
            <p class="open-project-subtitle" id="project-count">Loading&hellip;</p>
        </div>
        <div class="open-project-header-actions">
            {# A dataset is a folder for samples that belong together. Beside
               Import Sample rather than on a page of its own: the whole point
               is that grouping is something done in passing while looking at
               the samples, not a management screen to go to. #}
            <button type="button" class="btn btn-outline-light" id="dataset-create">
                <span class="fas fa-folder-plus"></span> New Dataset&hellip;
            </button>
            {# A button rather than a link: importing opens a dialog in place
               instead of navigating to a form. Whoever came here to find a
               sample and found they had not imported it yet should not lose
               this page to do so. #}
            <button type="button" class="btn btn-primary open-project-create"
                    id="sample-import">
                <span class="fas fa-plus"></span> Import Sample&hellip;
            </button>
        </div>
    </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 %}

    {# Where you are, and the way back out. The root crumb is also a drop
       target: dragging cards onto it is how a project leaves a dataset, which
       is the counterpart of dragging it onto a folder and is the only gesture
       that could otherwise not be undone the same way it was done. #}
    <nav class="open-project-crumbs" id="project-crumbs" aria-label="Location"></nav>

    <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>

    {# What can be done to a selection, shown only once there is one. Every
       action here is a bulk one: the per-card Edit and Delete stay on the
       cards, where they are about that one project. #}
    <div class="project-selection-bar" id="project-selection-bar" hidden>
        <span class="project-selection-count" id="project-selection-count"></span>
        <div class="project-selection-actions">
            <button type="button" class="btn btn-sm btn-outline-light" data-action="move">
                <span class="fas fa-folder"></span> Move to&hellip;
            </button>
            <button type="button" class="btn btn-sm btn-outline-light" data-action="unassign">
                <span class="fas fa-arrow-up-from-bracket"></span> Remove from dataset
            </button>
            <button type="button" class="btn btn-sm btn-outline-danger" data-action="delete">
                <span class="fas fa-trash"></span> Delete
            </button>
            <button type="button" class="btn btn-sm btn-link" data-action="clear">Clear</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 samples yet</p>
        <button type="button" class="btn btn-primary" id="sample-import-empty">
            Import your first sample&hellip;
        </button>
    </div>

    {# An emptied folder is still somewhere you can drop things, which is why
       this is its own panel rather than the "no results" one: it has to hold
       enough height to be a target. #}
    <div id="dataset-empty-state" class="open-project-state open-project-dropzone" hidden>
        <span class="fas fa-folder-open open-project-state-icon"></span>
        <p>This dataset is empty</p>
        <p class="open-project-state-hint">Drag projects here, or go back to
            <button type="button" class="btn btn-link" data-open-dataset="">All projects</button>.</p>
    </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>
<script src="{{ data.base_url }}/client/src/js/views/openProjectPage.js?v=20260918_import_sample" defer></script>
{% endblock %}