{% extends 'base.html' %}

{% block style %}
<link rel="stylesheet" href="{{ data.base_url }}/client/src/css/viewer.css?v=20260823_viewer_refactor">
<link rel="stylesheet" href="{{ data.base_url }}/client/src/css/quickView.css?v=20260815_gating_fixes">
{% 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="Rename channels from a CSV (one name per row, in channel order)" 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">
                    <form id="channels_arrow-upload-form">
                        <input id="channels-upload-from-arrow" class="hidden" type="file">
                        <input type="hidden" id="channels_upload-arrow-datasource" name="channels_upload-arrow-datasource">
                    </form>
                    <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 viewerControls.init()
                   enables 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">
                        <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">None</button>
                            <button type="button" id="cell_mode_centroids" class="cell-mode-option"
                                    data-cell-mode="centroids" role="radio" aria-checked="false" disabled
                                    title="Needs cell coordinates">Centroids</button>
                            <button type="button" id="cell_mode_outlines" class="cell-mode-option"
                                    data-cell-mode="outlines" role="radio" aria-checked="false" disabled
                                    title="Needs a segmentation mask">Outlines</button>
                            <button type="button" id="cell_mode_filled" class="cell-mode-option"
                                    data-cell-mode="filled" role="radio" aria-checked="false" disabled
                                    title="Needs a segmentation mask">Filled</button>
                        </div>
                    </div>
                    {# 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>
<script src="{{ data.base_url }}/client/src/js/main.js?v=20260821_roi_composition_v2" 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 a local image. It loads straight into the viewer -- 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>

        <div id="quick_view_path_fallback" class="quick-view-path-fallback" hidden>
            <label for="quick_view_path_input" class="quick-view-path-label">Image file path</label>
            <div class="quick-view-path-row">
                <input id="quick_view_path_input" type="text" autocomplete="off" spellcheck="false" placeholder="C:\path\to\image.ome.tif">
                <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=20260811_selection_provider" defer></script>
{% endif %}
{% endblock %}