{% extends layout|default('base.html', true) %}

{% block style %}
<link rel="stylesheet" href="{{ data.base_url }}/client/src/css/viewer.css?v=20260825_channel_rename_state">
<link rel="stylesheet" href="{{ data.base_url }}/client/src/css/quickView.css?v=20260828_row_alignment">
{% endblock %}

{% block content %}

{% if data.datasource %}
<div id="container" class="container">
    <div id="bodyDiv" class="viewer-shell">
        <aside id="viewer_sidebar" class="viewer-sidebar">
            <div class="sidebar-header">
                <div>
                    <span class="sidebar-kicker">Plexora</span>
                    <h1>Viewer</h1>
                </div>
                <button id="sidebar_collapse_button" class="icon-button" title="Collapse controls" type="button">
                    <span class="fas fa-chevron-left"></span>
                </button>
            </div>

            {% if data.image_kind != 'rgb' %}
            {# Foldable, like a plugin's card, but fixed in place: this is core's
               own section, so it has no grip and no remove button. Only the
               chevron the plugin cards also carry, because a long channel list
               is the thing that pushes the plugin stack off the bottom of the
               sidebar. The whole title row is the toggle -- a 24px chevron is a
               small target for something the user reaches for repeatedly. #}
            <section class="sidebar-section" id="image_channel_section">
                <div class="section-heading">
                    <h2>
                        <button id="image_channel_collapse" class="section-collapse" type="button"
                                aria-expanded="true" aria-controls="image_channel_body"
                                title="Collapse or expand image channels">
                            <span class="fas fa-chevron-down section-collapse-chevron"></span>
                            <span class="fas fa-layer-group section-heading-icon"></span>
                            Image Channels
                        </button>
                    </h2>
                    <div class="section-actions">
                        <button id="channels_upload_icon" class="icon-button" title="Name these channels from a CSV or spreadsheet" type="button">
                            <span class="fas fa-file-arrow-up"></span>
                        </button>
                    </div>
                </div>
                {# Everything the chevron folds away. A wrapper rather than
                   hiding the section's children one by one, so the heading --
                   and the CSV-rename button that sits in it -- stay reachable
                   while folded. #}
                <div id="image_channel_body" class="section-body">
                    {# The channel-name upload's hidden <input type="file"> and
                       its wrapper form were here. They are built and thrown
                       away by the dialog that uses them now
                       (views/channelNamesUpload.js), which is also the only
                       thing that ever reached for them -- a file input parked
                       in the sidebar is a control that looks like it does
                       something, and it could only ever offer one way in.
                       The dialog offers two, because on a cluster the file is
                       on the server and there is nothing local to upload. #}
                    <div class="selected-count">
                        <span id="num-selected-channels">0</span>
                        <span>active</span>
                        <span class="selected-count-max">· <span id="max-channels">15</span> max</span>
                    </div>
                    <div id="channel_slot_list" class="channel-slot-list"></div>
                    <button id="add_channel_button" class="sidebar-action secondary" type="button">
                        <span class="fas fa-plus"></span>
                        Add Channel
                    </button>
                </div>
            </section>
            {% endif %}

            {# Plugin sidebar mount point: rendered server-side on a direct or
               bookmarked ?tool=<name> load; otherwise left empty and filled
               client-side by toolLoader.js on first open, via the
               /tools/<tool>/panel endpoint, so opening or closing mid-session
               never requires a page navigation.

               Which template lands here comes from the active plugin's own
               Plugin.panels mapping, keyed by this slot id. Applicability is
               already decided in page_routes (a tool is only active if this
               datasource satisfies what the plugin declared it needs), so
               there is nothing image-kind-specific to test here. #}
            <div id="tool_panel_slot" data-tool-mount="{{ data.active_tool }}"{% if not data.active_tool_panels.tool_panel_slot %} class="tool-panel-hidden"{% endif %}>
                {% if data.active_tool_panels.tool_panel_slot %}
                {% include data.active_tool_panels.tool_panel_slot %}
                {% endif %}
            </div>

            {% if data.image_kind != 'rgb' %}
            <section class="sidebar-section compact">
                {# How cells are drawn, as one choice rather than two toggles.
                   Exactly one representation is active at a time -- there is no
                   meaningful "filled AND outlined" state, and the two checkboxes
                   this replaced could express one ("Outlines" plus "Centroids")
                   that the renderer then had to arbitrate.

                   Geometry is core's, deliberately: a plugin that colours cells
                   supplies the colours and nothing else, so every such plugin
                   gets these three representations without shipping three
                   renderers of its own.

                   Every option but None starts disabled AND hidden, and
                   viewerControls.init() shows what this project can actually
                   draw. Rendering them live and switching them off a moment
                   later would offer, briefly, a Filled button that cannot fill.

                   One line, with HD. The "Cells" caption this row used to carry
                   is on the group's aria-label instead: four buttons reading
                   None/Centroids/Outlines/Filled do not need a word above them
                   to say what they are about, and the space it was taking is the
                   space HD now sits in. #}
                <div class="cell-display-row">
                    <div class="cell-mode-control" id="cell_display_control" role="radiogroup" aria-label="Cells" hidden>
                        <div class="cell-mode-options">
                            <button type="button" id="cell_mode_none" class="cell-mode-option is-active"
                                    data-cell-mode="none" role="radio" aria-checked="true"
                                    style="display: none">None</button>
                            <button type="button" id="cell_mode_centroids" class="cell-mode-option"
                                    data-cell-mode="centroids" role="radio" aria-checked="false" disabled
                                    style="display: none">Centroids</button>
                            <button type="button" id="cell_mode_outlines" class="cell-mode-option"
                                    data-cell-mode="outlines" role="radio" aria-checked="false" disabled
                                    style="display: none">Outlines</button>
                            <button type="button" id="cell_mode_filled" class="cell-mode-option"
                                    data-cell-mode="filled" role="radio" aria-checked="false" disabled
                                    style="display: none">Filled</button>
                        </div>
                    </div>
                    {# The way out of a project that cannot draw cells yet.
                       A greyed "Outlines" states the problem and leaves the user
                       to work out that a mask is attached from the edit page; a
                       link that says "Add Seg Mask" is the same fact plus the
                       fix, in less room.

                       It names only what is MISSING, and viewerControls decides
                       that -- so the label is empty here rather than wrong for
                       the three projects out of four it does not describe. The
                       href is Jinja's because only the server knows the base
                       URL; a plain <a> so appRouter picks it up and swaps the
                       page in without tearing the viewer down.

                       The edit page rather than /upload_page deliberately:
                       upload has no "attach to an existing project" mode (see
                       page_routes.upload_page), and edit_config renders the
                       Segmentation Mask and Data fields for THIS project. #}
                    <a id="cell_data_cta" class="cell-mode-cta"
                       href="{{ data.base_url }}/edit_config/{{ data.datasource|urlencode }}"
                       title="Opens this project's edit page, where a mask or a data file is attached"
                       hidden></a>
                    {# HD reads as one more button in the row rather than a
                       stray checkbox beside a segmented control. The input is
                       still a real checkbox -- everything that reads
                       #viewer_controls_hd.checked is unchanged -- it is just
                       drawn as the <span> next to it, which is why the span is
                       a sibling and not a wrapper. #}
                    <div id="viewer_controls_panel">
                        <label class="cell-toggle" data-tooltip="Reloads the image in high resolution -- may be slower.">
                            <input id="viewer_controls_hd" type="checkbox">
                            <span>HD</span>
                        </label>
                    </div>
                </div>

                {# Only while centroids are what is drawn. Size is meaningless
                   for the other three, and a control that is present but inert
                   reads as broken rather than as not applicable. #}
                <div id="cell_point_size_row" class="cell-point-size" hidden>
                    <label class="control-label" for="cell_point_size">Point size</label>
                    <input id="cell_point_size" type="range"
                           min="0.4" max="3" step="0.1" value="1">
                </div>

                {# How strongly the ACTIVE plugin's layer sits over what is under
                   it -- the tissue, and any layer stacked below it. Core's and
                   shared, for the same reason the mode buttons are: compositing
                   belongs to the viewer, so every plugin that colours cells gets
                   this without shipping a slider of its own. Hidden until a
                   plugin registers a layer; there is nothing to fade a plain
                   white cell layer against. #}
                <div id="cell_layer_opacity_row" class="cell-layer-opacity" hidden>
                    <label class="control-label" for="cell_layer_opacity">Opacity</label>
                    <input id="cell_layer_opacity" type="range"
                           min="0" max="100" step="1" value="70">
                    <span id="cell_layer_opacity_value" class="cell-layer-opacity-value">70%</span>
                </div>
            </section>
            {% endif %}
        </aside>

        <div id="openseadragon_wrapper">
            <button id="sidebar_expand_button" class="sidebar-expand-button" title="Show controls" type="button">
                <span class="fas fa-chevron-right"></span>
            </button>
            <div id="openseadragon">
                <div id="openseadragon_loader" class="viewer-loader">
                    <div class="lds-ellipsis">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>

        <div id="legacy_controls_mount" aria-hidden="true">
            <div id="channel_list_wrapper">
                <div id="lowRow1" class="row">
                    <div id="boxHeading1" class="col-auto">
                        <span class="box-heading">Channels</span>
                    </div>
                    <div id="download-channels-header-div"></div>
                    <div class="col-auto" id="selected-channels-header-div"></div>
                </div>
                <div class="list" id="channel_list">
                    <div class="row">
                        <div class="col-auto">
                            <div class="lds-ellipsis" id="channel_list_loader"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="tool_panel_legacy_slot" data-tool-mount="{{ data.active_tool }}">
                {% if data.active_tool_panels.tool_panel_legacy_slot %}
                {% include data.active_tool_panels.tool_panel_legacy_slot %}
                {% endif %}
            </div>
        </div>
    </div>
</div>
{# Before main.js and deferred like it, so it is defined by the time init()
   sees a pending mask job. Loaded here rather than in base.html because the
   pending state belongs to a viewer looking at the project whose mask is
   converting -- every other page would carry a listener with nothing to
   listen for. #}
<script src="{{ data.base_url }}/client/src/js/views/segmentationWait.js?v=20260825_mask_wait_in_viewer" defer></script>
{# Here rather than base.html for the same reason: the channel list is the only
   thing that opens it, and the channel list is the viewer's. Only has to exist
   by the time the user clicks the sidebar's upload icon, so deferred is ample.
   #}
<script src="{{ data.base_url }}/client/src/js/views/channelNamesUpload.js?v=20260829_channel_names_switch" defer></script>
<script src="{{ data.base_url }}/client/src/js/main.js?v=20260830_reconnect_repair" defer></script>
{% else %}
<div id="quick_view_landing" class="quick-view-landing">
    <div class="quick-view-card">
        <span class="sidebar-kicker">Plexora</span>
        <h1>Take a Quick Look</h1>
        <p class="quick-view-subtitle">Open an image locally no setup required.</p>

        <div id="quick_view_dropzone" class="quick-view-dropzone" tabindex="0">
            <span class="fas fa-folder-open quick-view-dropzone-icon"></span>
            <div class="quick-view-dropzone-text">Click here to open an image</div>
            <div class="quick-view-dropzone-hint">Opens a file browser on this machine</div>
        </div>

        {# Not hidden any more. It used to appear only once the native dialog
           had failed, which made sense while every image was on this machine
           -- but the Local/Remote switch mounts into `.quick-view-path-row`,
           and a control nobody can see is a choice nobody is offered. The
           dropzone above is still the fast path for the ordinary case. #}
        <div id="quick_view_path_fallback" class="quick-view-path-fallback">
            <label for="quick_view_path_input" class="quick-view-path-label">Or type an image path</label>
            <div class="quick-view-path-row">
                <input id="quick_view_path_input" type="text" autocomplete="off" spellcheck="false" placeholder="/path/to/image.ome.tif">
                {# Secondary: Load is the action this row is for, and two
                   accent-filled buttons side by side give it no primary. #}
                <button id="quick_view_path_browse" class="sidebar-action secondary" type="button">Browse&hellip;</button>
                <button id="quick_view_path_load" class="sidebar-action" type="button" disabled>Load</button>
            </div>
        </div>

        <div id="quick_view_status" class="quick-view-status" hidden></div>

        <p class="quick-view-footer">Need segmentation, gating, or a feature table? Use the <a href="{{ data.base_url }}/upload_page">full import wizard</a> instead.</p>
    </div>
</div>
<script src="{{ data.base_url }}/client/src/js/views/quickViewLanding.js?v=20260828_picker_nav" defer></script>
{% endif %}
{% endblock %}