{% extends layout|default('base.html', true) %}
{% block style %}
    <link rel="stylesheet" href="{{ data.base_url }}/client/src/css/import.css?v=20260826_node_picks">
{% endblock %}
{% block content %}
<title>Plexora - New Project</title>
{#
  One form, three inputs. The format of the data file is detected server-side
  (/inspect_data), so there is no tab strip and no per-format duplicate of the
  name/image/mask fields.

  The two extra controls below are hidden until the file itself makes them
  necessary: a .zarr store with several tables, and a table spanning several
  images, cannot be read at all until the user picks one. Everything else the
  old import wizard asked for is either worked out from the file or asked for
  later, by whichever feature actually needs it.
#}
<div class="import-page">
    <div id="upload-parent">
        <div class="import-card" id="upload-container">
            <span class="import-kicker">New Project</span>
            <h1>Import Data</h1>
            <p class="import-subtitle">An image is all that is required. Add a segmentation mask
                and single-cell data now, or later from the project's Edit page.</p>

            {% if data.error %}
                <div class="import-alert" role="alert">{{ data.error }}</div>
            {% endif %}

            <form action="{{ data.base_url }}/import" id="import_form" method="POST"
                  class="needs-validation" enctype="multipart/form-data" novalidate>
                <div class="import-field">
                    <label for="name">Project Name</label>
                    <input type="text" class="form-control" id="name" name="name"
                           oninput="markDatasetNameEdited()" required placeholder="e.g. patient_01"
                           value="{{ data.form_name or '' }}">
                    <div class="invalid-feedback">Please name the project.</div>
                </div>

                <div class="import-field">
                    <label for="image_file">Image</label>
                    <div class="import-field-row">
                        <input type="text" id="image_file" class="form-control" name="image_file"
                               onkeyup="checkFileExistence(this); suggestDatasetName(this);" required
                               placeholder="/path/to/image.ome.tif"
                               value="{{ data.form_image or '' }}">
                        <button type="button" class="browse-button" data-browse-target="image_file"
                                data-browse-mode="file" data-browse-filter="image">Browse&hellip;</button>
                    </div>
                    <div class="invalid-feedback">Please provide a valid path to the image file.</div>
                    {# Images a registered data node is serving. Shown only when
                       there are some, so an ordinary install never sees a
                       control for a thing it does not use. Clicking one fills
                       the field with `node://<node>/<resource>`, which the
                       field accepts as readily as a path. #}
                    {% set node_images = (node_resources or [])|selectattr("kind", "equalto", "image")|list %}
                    {% if node_images %}
                    <div class="node-picks">
                        <span class="field-hint">or an image on a data node:</span>
                        {% for choice in node_images %}
                        <button type="button" class="node-pick"
                                data-node-target="image_file"
                                data-node-locator="{{ choice.locator }}">{{ choice.label }}</button>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>

                <div class="import-field">
                    <label for="label_file">Segmentation Mask <span class="field-hint">(optional)</span></label>
                    <div class="import-field-row">
                        <input type="text" id="label_file" class="form-control" name="label_file"
                               onkeyup="checkOptionalFileExistence(this)"
                               placeholder="/path/to/segmentation.ome.tif"
                               value="{{ data.form_mask or '' }}">
                        <button type="button" class="browse-button" data-browse-target="label_file"
                                data-browse-mode="file" data-browse-filter="image">Browse&hellip;</button>
                    </div>
                    {% set node_masks = (node_resources or [])|selectattr("kind", "equalto", "segmentation")|list %}
                    {% if node_masks %}
                    <div class="node-picks">
                        <span class="field-hint">or a mask on a data node:</span>
                        {% for choice in node_masks %}
                        <button type="button" class="node-pick"
                                data-node-target="label_file"
                                data-node-locator="{{ choice.locator }}">{{ choice.label }}</button>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>

                <div class="import-field">
                    <label for="data_file">Data <span class="field-hint">(optional)</span></label>
                    <div class="import-field-row">
                        <input type="text" id="data_file" class="form-control" name="data_file"
                               onkeyup="inspectDataFile(this)"
                               placeholder="/path/to/cells.csv"
                               value="{{ data.form_data or '' }}">
                        {# A .zarr store is a directory and a .csv/.h5ad is a file, and
                           one input takes both -- so the picker offers each in turn. #}
                        <button type="button" class="browse-button" data-browse-target="data_file"
                                data-browse-mode="file" data-browse-filter="data">File&hellip;</button>
                        <button type="button" class="browse-button" data-browse-target="data_file"
                                data-browse-mode="directory" data-browse-filter="any">Store&hellip;</button>
                    </div>
                    <span class="field-hint" id="data_file_hint">CSV, AnnData (.h5ad) or SpatialData (.zarr).</span>
                    <div class="invalid-feedback" id="data_file_error"></div>
                    {# The laptop-share layout: the viewer runs beside the
                       images and the cell table never left the user's own
                       machine, served by a data node over the same
                       connection. Without this block that table is invisible
                       here, and the form quietly demands a file this machine
                       does not have. #}
                    {% set node_tables = (node_resources or [])|selectattr("kind", "equalto", "table")|list %}
                    {% if node_tables %}
                    <div class="node-picks">
                        <span class="field-hint">or a table on a data node:</span>
                        {% for choice in node_tables %}
                        <button type="button" class="node-pick"
                                data-node-target="data_file"
                                data-node-locator="{{ choice.locator }}">{{ choice.label }}</button>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>

                {# Shown only when the store holds more than one table. #}
                <div class="import-field" id="data_table_field" hidden>
                    <label for="data_table">Table</label>
                    <select id="data_table" class="form-select" name="data_table"></select>
                    <span class="field-hint">This store holds several tables. Choose which one holds the cells.</span>
                </div>

                {# Which expression matrix to read is deliberately NOT asked here.
                   It matters only to a plugin that reads marker intensities, so
                   it is that plugin's requirement (Requires(features=True)) and
                   the modal asks it -- along with whether to log-transform --
                   the first time such a tool opens. Importing an image is not
                   the moment to answer a question about thresholding, and this
                   form only asks what registering the project cannot proceed
                   without. The layer names are still recorded from the
                   inspection above, which is what lets the modal offer them
                   without reopening the file. #}

                {# Shown only when the table spans several images. Loading them all
                   would silently mix cells from different slides onto one image. #}
                <div class="import-field" id="subset_field" hidden>
                    <label for="subset_value">Image</label>
                    <input type="hidden" id="subset_column" name="subset_column">
                    <select id="subset_value" class="form-select" name="subset_value"></select>
                    <span class="field-hint" id="subset_hint"></span>
                </div>

                <div class="import-actions">
                    <button id="upload_button" class="btn btn-primary" type="submit">Create Project</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="{{ data.base_url }}/client/src/js/services/importFormValidation.js?v=20260828_per_field_toggle" defer></script>
{% endblock %}