{% extends layout|default('base.html', true) %}
{% block style %}
    <link rel="stylesheet" href="{{ data.base_url }}/client/src/css/import.css?v=20260901_compact_rows">
{% endblock %}
{% block content %}
<title>Plexora - Edit {{ data.datasetName }}</title>
{#
  Generated from the project record: every section below is gated on
  `project.has`, so a project sees only the fields it actually has. The old
  edit page rendered the CSV column-matching screen for every project
  regardless of format, which is what made editing an AnnData project destroy
  it.
#}
{% set project = data.project %}
<div class="import-page">
    <div id="upload-parent">
        {# Single quotes, and they matter. `tojson` escapes < > & and ' but NOT
           the double quotes JSON is built out of, so in a double-quoted
           attribute the value ends at the record's first key and the rest
           spills into the tag as garbage attributes. `id` still parsed, so the
           page looked completely normal -- and projectEdit.js threw on
           JSON.parse("{"), which is where the Save button lost its listener. #}
        <div class="import-card import-card-wide" id="project-edit"
             data-project='{{ project|tojson }}'
             {% if data.needs %}data-needs='{{ data.needs|tojson }}'{% endif %}>
            <span class="import-kicker">Edit Project</span>
            <h1>{{ data.datasetName }}</h1>

            <div id="edit_needs" class="import-alert" role="status" hidden></div>

            {# Image: read-only. Everything the project derives is keyed to it. #}
            <div class="config-section">
                <div class="config-section-title">Image</div>
                <p class="config-summary">
                    <strong>{{ project.image.src }}</strong><br>
                    {# "3 channel(s)" is true of a brightfield image's storage
                       and wrong about what it is: three samples of one colour
                       picture are not three markers. #}
                    {% if project.imageType == 'brightfield' %}Colour (RGB)
                    {% else %}{{ project.image.channelCount or 0 }} channel(s)
                    {% endif %}
                    {% if project.image.size[0] %}
                        &middot; {{ project.image.size[0] }} &times; {{ project.image.size[1] }} px
                    {% endif %}
                </p>
                <span class="field-hint">The image cannot be changed — import a new project to use a different one.</span>
            </div>

            <div class="config-section">
                <div class="config-section-title">Segmentation Mask</div>
                <div class="import-field">
                    <div class="import-field-row">
                        <input type="text" id="edit_segmentation" class="form-control"
                               value="{{ project.segmentation.src or '' }}"
                               placeholder="/path/to/segmentation.ome.tif">
                        {# "any" rather than "file": a .zarr mask is a directory,
                           which the server has read since
                           LocalSegmentationProvider was written and which this
                           button could not pick at all. #}
                        <button type="button" class="browse-button" data-browse-target="edit_segmentation"
                                data-browse-mode="any" data-browse-filter="image">Browse&hellip;</button>
                    </div>
                    <span class="field-hint">
                        {% if project.segmentation.pending %}
                            Converting — the mask will be ready shortly.
                        {% else %}
                            Clear the box to remove the mask.
                        {% endif %}
                    </span>
                </div>
            </div>

            {# Mounted by projectEdit.js from the shared control
               (dataSourceField.js), not written out here: swapping in a .zarr
               store with several tables needs a table picker, and the two
               static Browse buttons this used to carry were never wired to
               anything -- only the upload page's script attaches
               [data-browse-target], and it does not load on this page. #}
            <div class="config-section">
                <div class="config-section-title">Data</div>
                {# The path itself comes from the project record the page is
                   already carrying; only the note needs saying here. #}
                <div class="import-field" id="edit_data_field"
                     data-hint="{% if project.data %}Detected as {{ project.data.type }}{% if project.data.table %} &middot; table &ldquo;{{ project.data.table }}&rdquo;{% endif %}. Replacing the file re-detects its format.{% else %}CSV, AnnData (.h5ad) or SpatialData (.zarr).{% endif %}">
                </div>
            </div>

            {# What the numbers in this project actually are. The select is shown
               only when the file carries more than one matrix -- raw counts and a
               log-transformed copy live side by side in one .h5ad, and which was
               read decides what every marker histogram is a histogram of. The
               log1p switch is offered either way: a file may carry raw counts and
               nothing else, and thresholds on those are unreadable untransformed. #}
            {% if project.has.features %}
            <div class="config-section">
                <div class="config-section-title">Expression Values</div>
                {% if project.data.layers %}
                <div class="import-field">
                    <select id="edit_features_layer" class="form-select">
                        {% for option in project.featureOptions %}
                        <option value="{{ option.value }}"
                                {% if project.featureSource == option.value %}selected{% endif %}>
                            {{ option.label }}
                        </option>
                        {% endfor %}
                    </select>
                    <span class="field-hint">Which matrix the marker intensities are read from.
                        Thresholds set against one do not carry to another.</span>
                </div>
                {% endif %}
                <div class="import-field">
                    <label class="config-check">
                        <input type="checkbox" class="form-check-input" id="edit_features_log"
                               {% if project.featureLog %}checked{% endif %}>
                        <span class="form-check-label">Log-transform (log1p)</span>
                        <span class="field-hint">Turn this on when the values above are raw counts.</span>
                    </label>
                </div>
            </div>
            {% endif %}

            {# The read spec is how the adapter gets from file to table. Shown
               so the user can see what was auto-detected; changing it means
               replacing the data file above, which re-detects it. #}
            {% if project.has.readSpec %}
            <div class="config-section">
                <div class="config-section-title">How this file is read</div>
                {# Coordinates are no longer summarised here: they are a real
                   control in the Columns section below, because which array
                   holds a cell's position is a choice and not a detail. This
                   line read "auto-detected" for a project whose source was
                   picked by matching an obsm key against a hardcoded list of
                   names -- accurate, and no help to anyone it was wrong for. #}
                <p class="config-summary">
                    Features: <strong>{{ project.data.features.get('layer') or project.data.features.get('source') or 'X' }}</strong>
                    {% if project.data.subset.get('column') %}
                        <br>Image: <strong>{{ project.data.subset['column'] }} = {{ project.data.subset['value'] }}</strong>
                    {% endif %}
                </p>
            </div>
            {% endif %}

            {# CSV only: the marker/metadata split, which also owns the roles. #}
            {% if project.has.columns %}
            <div class="config-section">
                <div class="config-section-title">Columns</div>
                <div id="edit_classifier"></div>
            </div>
            {% endif %}

            {# Everything else with a table: only the roles backed by real
               columns (the adapter synthesizes the rest). #}
            {% if project.has.data and not project.has.columns %}
            <div class="config-section">
                <div class="config-section-title">Columns</div>
                <div id="edit_roles"></div>
            </div>
            {% endif %}

            {# Whether this image's pixels are one colour picture or a stack of
               marker channels. Detected from the file at import and shown here
               with the reason, because the one case that needs a human is a
               file whose metadata says nothing -- and the person who ran the
               scan is the only one who knows.

               Changing it re-reads the image. It never rewrites it: the two
               modes are two readings of the same bytes, and switching back and
               forth is free.

               Hidden for a flat PNG/JPEG, which has no second reading, and for
               an image on a data node, where the file is not here to re-read. #}
            {% if project.image.kind != 'rgb' and project.image.src %}
            <div class="config-section">
                <div class="config-section-title">Image Type</div>
                <div class="import-field">
                    <select id="edit_image_type" class="form-select"
                            data-stored="{{ project.imageTypeChoice or '' }}">
                        {# Short options. The detector's reason is a sentence,
                           and a sentence inside a <select> is clipped at the
                           control's width with no way to read the rest -- so it
                           goes in the hint below, where the Cell Layer section
                           also puts what its choice currently resolves to. #}
                        <option value="" {% if not project.imageTypeChoice %}selected{% endif %}>
                            Automatic — detect it from the file
                        </option>
                        <option value="brightfield" {% if project.imageTypeChoice == 'brightfield' %}selected{% endif %}>
                            H&amp;E / brightfield — one true-colour image
                        </option>
                        <option value="fluorescence" {% if project.imageTypeChoice == 'fluorescence' %}selected{% endif %}>
                            Fluorescence — independent marker channels
                        </option>
                    </select>
                    <span class="field-hint">Currently reading it as
                        {%- if project.imageType == 'brightfield' %} one true-colour image
                        {%- else %} {{ project.image.channelCount }} marker channel{{ '' if project.image.channelCount == 1 else 's' }}
                        {%- endif %}{% if project.imageTypeReason %}, because {{ project.imageTypeReason }}{% endif %}.
                        Changing this re-reads the image; the file on disk is never modified.</span>
                </div>
            </div>
            {% endif %}

            {# How tools draw per-cell results. Defaulted rather than asked --
               the mask if there is one, centroids otherwise -- so this is an
               override.

               "Automatic" is a real option and the one an untouched project is
               on, because the alternative is that saving this page for any
               other reason records a choice nobody made. That mattered: a
               project whose mask was still converting could only offer
               centroids here, and the save froze centroids in place for good
               -- the mask landed minutes later and every tool went on drawing
               points. #}
            {% if project.has.cellLayer %}
            <div class="config-section">
                <div class="config-section-title">Cell Layer</div>
                <div class="import-field">
                    <select id="edit_cell_layer" class="form-select"
                            data-stored="{{ project.cellLayerChoice or '' }}">
                        <option value="" {% if not project.cellLayerChoice %}selected{% endif %}>
                            Automatic — the mask if there is one, otherwise centroids
                        </option>
                        {% for option in project.cellLayerOptions %}
                        <option value="{{ option }}" {% if project.cellLayerChoice == option %}selected{% endif %}>
                            {% if option == 'segmentation' %}Segmentation mask — real cell outlines
                            {% else %}Centroids — one point per cell{% endif %}
                        </option>
                        {% endfor %}
                    </select>
                    <span class="field-hint">Used by tools that colour cells, such as Cell Explorer
                        and Thresholding. Currently drawing:
                        {% if project.cellLayer == 'segmentation' %}the segmentation mask{% else %}centroids{% endif %}.</span>
                </div>
            </div>
            {% endif %}

            {# Where each piece of this project's data is read from. Rendered by
               projectEdit.js from /project/<name>/resources rather than here,
               because the choices depend on which nodes are answering right now
               -- and that is a question the page has to be able to re-ask after
               an attach without a reload.

               Applied immediately rather than on Save, unlike everything above.
               Attaching is not an edit to a field: it re-reads the resource, and
               a form that queued that up alongside a role change would make one
               button mean two very different sizes of thing. #}
            <div class="config-section" id="edit_resources_section" hidden>
                <div class="config-section-title">Where the data lives</div>
                <div id="edit_resources"></div>
                <span class="field-hint">
                    Register a machine under Settings &rarr; Data nodes first.
                    Changes here take effect immediately.
                </span>
                <div id="edit_resources_error" class="import-alert" role="alert" hidden></div>
            </div>

            <div class="import-actions">
                <button id="edit_save" class="btn btn-primary" type="button">Save</button>
            </div>
            <div id="edit_error" class="import-alert" role="alert" hidden></div>
        </div>
    </div>
</div>
<script src="{{ data.base_url }}/client/src/js/views/columnClassifier.js?v=20260820_csv_markers_log1p"></script>
<script src="{{ data.base_url }}/client/src/js/views/coordinateField.js?v=20260819_ask_cell_id"></script>
{# segmentationProgress.js was here. It is the IMPORT pages' wait -- a blocking
   overlay that holds the page until the mask pyramid is built -- and this page
   no longer waits: saving goes straight to the viewer, which shows the job over
   the image (views/segmentationWait.js). project_columns.html still loads it,
   because an import has no viewer to hand the wait to yet. #}
<script src="{{ data.base_url }}/client/src/js/views/projectEdit.js?v=20260901_job_progress" defer></script>
{% endblock %}