{% extends 'base.html' %}
{% block style %}
    <link rel="stylesheet" href="{{ data.base_url }}/client/src/css/import.css?v=20260819_data_table_pick">
{% 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>
                </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>
                </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>
                </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=20260819_feature_source" defer></script>
{% endblock %}