{% extends "base.html" %}

{% block scripts %}
<script>rappture._toolKey = {{ tool_xml_path | tojson }};</script>
{% endblock %}

{% block content %}
{% set has_phases = inputs | selectattr('type', 'equalto', 'phase') | list | length == inputs | length and inputs | length > 0 %}
{% set top_groups = inputs | selectattr('type', 'equalto', 'group') | list %}
{% set has_top_groups = not has_phases and top_groups | length > 1 %}
<div class="rp-layout">
    <aside class="rp-sidebar" role="complementary" aria-label="Tool inputs and controls">

        <form id="rp-form" class="rp-form" aria-label="Simulation inputs">
            {% if has_phases %}
            {# Phase tab strip with simulate button on the right #}
            <div class="rp-phase-tabs-row">
            <div class="rp-phase-tabs" role="tablist" aria-label="Simulation phases" aria-orientation="horizontal">
                {% for widget in inputs %}
                {% set panel_id = "phase-panel-" ~ (widget.path | replace('.','_') | replace('(','_') | replace(')','_')) %}
                {% set tab_id = "phase-tab-" ~ (widget.path | replace('.','_') | replace('(','_') | replace(')','_')) %}
                <button type="button"
                        id="{{ tab_id }}"
                        class="rp-phase-tab{% if loop.first %} rp-phase-tab-active{% endif %}"
                        role="tab"
                        aria-selected="{{ 'true' if loop.first else 'false' }}"
                        aria-controls="{{ panel_id }}"
                        tabindex="{{ '0' if loop.first else '-1' }}"
                        data-phase="{{ widget.path }}"
                        onclick="rappture.switchPhase('{{ widget.path }}')">
                    {{ widget.label or widget.id }}
                </button>
                {% endfor %}
            </div>
            <button type="button" class="rp-btn rp-btn-simulate" onclick="rappture.simulate()">
                Simulate
            </button>
            </div>
            {% for widget in inputs %}
            {% set panel_id = "phase-panel-" ~ (widget.path | replace('.','_') | replace('(','_') | replace(')','_')) %}
            {% set tab_id = "phase-tab-" ~ (widget.path | replace('.','_') | replace('(','_') | replace(')','_')) %}
            <div class="rp-phase-panel"
                 id="{{ panel_id }}"
                 role="tabpanel"
                 aria-labelledby="{{ tab_id }}"
                 {% if not loop.first %}hidden{% endif %}>
                {% include "widgets/phase.html" ignore missing %}
            </div>
            {% endfor %}
            {% elif has_top_groups %}
            {# Top-level groups rendered as phase-style tabs, visually grouped with non-group inputs #}
            <fieldset class="rp-top-groups-container">
            <div class="rp-phase-tabs" role="tablist" aria-label="Input sections" aria-orientation="horizontal">
                {% for widget in top_groups %}
                {% set panel_id = "phase-panel-" ~ (widget.path | replace('.','_') | replace('(','_') | replace(')','_')) %}
                {% set tab_id = "phase-tab-" ~ (widget.path | replace('.','_') | replace('(','_') | replace(')','_')) %}
                <button type="button"
                        id="{{ tab_id }}"
                        class="rp-phase-tab{% if loop.first %} rp-phase-tab-active{% endif %}"
                        role="tab"
                        aria-selected="{{ 'true' if loop.first else 'false' }}"
                        aria-controls="{{ panel_id }}"
                        tabindex="{{ '0' if loop.first else '-1' }}"
                        data-phase="{{ widget.path }}"
                        onclick="rappture.switchPhase('{{ widget.path }}')">
                    {{ widget.label or widget.id }}
                </button>
                {% endfor %}
            </div>
            {% for widget in top_groups %}
            {% set panel_id = "phase-panel-" ~ (widget.path | replace('.','_') | replace('(','_') | replace(')','_')) %}
            {% set tab_id = "phase-tab-" ~ (widget.path | replace('.','_') | replace('(','_') | replace(')','_')) %}
            <div class="rp-phase-panel"
                 id="{{ panel_id }}"
                 role="tabpanel"
                 aria-labelledby="{{ tab_id }}"
                 {% if not loop.first %}hidden{% endif %}>
                <div class="rp-phase-content">
                    {% for child in widget.children %}
                        {% set widget = child %}
                        {% include "widgets/" + child.type + ".html" ignore missing %}
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
            </fieldset>
            {# Non-group inputs rendered outside the tab container, in their XML order #}
            {% for widget in inputs %}
                {% if widget.type != 'group' %}
                    {% include "widgets/" + widget.type + ".html" ignore missing %}
                {% endif %}
            {% endfor %}
            {% else %}
            {% for widget in inputs %}
                {% include "widgets/" + widget.type + ".html" ignore missing %}
            {% endfor %}
            {% endif %}
            <div class="rp-actions">
                <button type="button" id="rp-simulate-btn" class="rp-btn rp-btn-simulate" onclick="rappture.simulate()">
                    Simulate
                </button>
                {% if not is_nanohub %}
                <input type="file" id="rp-upload-run-input" accept=".xml" style="display:none" aria-label="Upload run XML file" onchange="rappture.uploadRunFile(this)">
                {% endif %}
                <span id="rp-status" class="rp-status" role="status" aria-live="polite" aria-atomic="true"></span>
            </div>
        </form>

        <!-- Run history -->
        <section class="rp-run-history-panel" aria-label="Run history">
            <div class="rp-run-history-header">
                <label class="rp-run-select-all-label">
                    <input type="checkbox" id="rp-select-all" onchange="rappture.toggleSelectAll(this)" aria-label="Select all runs">
                    Run History
                </label>
            </div>
            <div id="rp-run-history" class="rp-run-history" role="list" aria-label="Simulation runs">
                <span class="rp-run-empty">No runs yet</span>
            </div>
        </section>
    </aside>
    <section class="rp-content" aria-label="Simulation results">
        <div id="rp-results" class="rp-results" aria-live="polite" aria-label="Output results">
            <div class="rp-results-placeholder">
                {% if tool.about %}
                <div class="rp-results-about">{{ tool.about }}</div>
                {% endif %}
                <p>Click <strong>Simulate</strong> to run the tool and see results here.</p>
            </div>
        </div>
    </section>
</div>
{% endblock %}