{% extends layout|default('base.html', true) %}
{% block style %}
    <link rel="stylesheet" href="{{ data.base_url }}/client/src/css/import.css?v=20260831_brightfield">
{% 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="image_file">Image</label>
                    <div class="import-field-row">
                        <input type="text" id="image_file" class="form-control" name="image_file"
                               onkeyup="checkPathExistence(this); suggestDatasetName(this);" required
                               placeholder="/path/to/image.ome.tif"
                               value="{{ data.form_image or '' }}">
                        {# One button. An OME-Zarr image is a directory and an
                           OME-TIFF is a file, but which one you have is a fact
                           about the format rather than a question worth asking
                           -- mode "any" takes either (see native_dialog.py),
                           and what lands in the box is sniffed the moment it
                           arrives. #}
                        <button type="button" class="browse-button" data-browse-target="image_file"
                                data-browse-mode="any" data-browse-filter="image">Browse&hellip;</button>
                    </div>
                    <span class="field-hint">OME-TIFF, TIFF, QPTIFF, whole-slide (SVS, NDPI, SCN, MRXS), PNG/JPEG, or an OME-Zarr (.zarr) folder.</span>
                    <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 %}

                    {# The project's name. Not asked for at the top of the form
                       any more: the answer was always sitting in the field
                       above it -- the image's filename -- so this shows what
                       that came to and offers the pencil for the times it is
                       not what the project should be called.

                       One <input>, readonly until the pencil is clicked,
                       rather than a caption plus a hidden field: two elements
                       would mean two copies of the name to keep in step, and
                       the one that posts is not the one anybody can see.

                       Hidden until there is a name, and `required` is carried
                       on and off with it by showProjectName() -- a hidden
                       required control refuses to submit with nothing on
                       screen to explain why. #}
                    <div class="import-name" id="import_name" hidden>
                        <span class="import-name-label">Project name</span>
                        <input type="text" id="name" name="name" class="import-name-input"
                               oninput="markDatasetNameEdited(this)" readonly
                               aria-label="Project name" placeholder="e.g. patient_01"
                               value="{{ data.form_name or '' }}">
                        <button type="button" class="import-name-edit" id="import_name_edit"
                                title="Rename this project" aria-label="Rename this project">
                            <span class="fas fa-pencil" aria-hidden="true"></span>
                        </button>
                    </div>

                    {# Automatic first, and it is the right answer for almost
                       every file: a whole-slide format says what it is by
                       being one, and an OME-TIFF's storage layout says it
                       nearly as plainly. The other two options exist for the
                       file that says nothing -- a three-plane TIFF with no
                       metadata is genuinely ambiguous, and only the person who
                       ran the scan knows. Changeable afterwards on the
                       project's edit page, and it never rewrites the image. #}
                    <div class="import-subfield">
                        <label for="image_type">Image type</label>
                        <select id="image_type" name="image_type" class="form-select">
                            <option value="" {% if not data.form_image_type %}selected{% endif %}>Automatic</option>
                            <option value="brightfield" {% if data.form_image_type == 'brightfield' %}selected{% endif %}>H&amp;E / brightfield (RGB)</option>
                            <option value="fluorescence" {% if data.form_image_type == 'fluorescence' %}selected{% endif %}>Fluorescence (multichannel)</option>
                        </select>
                        <span class="field-hint">Automatic reads the file's own metadata and pixel layout.</span>
                    </div>
                </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="checkOptionalPathExistence(this)"
                               placeholder="/path/to/segmentation.ome.tif"
                               value="{{ data.form_mask or '' }}">
                        {# A .zarr mask is a directory too -- the server has read
                           one since LocalSegmentationProvider was written. #}
                        <button type="button" class="browse-button" data-browse-target="label_file"
                                data-browse-mode="any" 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 one button
                           takes both. #}
                        <button type="button" class="browse-button" data-browse-target="data_file"
                                data-browse-mode="any" data-browse-filter="data">Browse&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=20260831_brightfield" defer></script>
{% endblock %}