<div class="prerun-panel" id="prerun-panel">
    <div class="prerun-header">
        <h2>{% if workflow_title %}{{ workflow_title }}{% else %}Run Recipes{% endif %}</h2>
        <p class="prerun-recipes">{{ recipe_names | join(', ') }}</p>
        <button class="btn-close prerun-close">&times;</button>
    </div>

    <!-- Inline error banner (hidden by default) -->
    <div id="prerun-error" class="prerun-error" style="display:none;"></div>

    <form id="prerun-submit-form" onsubmit="return false;">
        <input type="hidden" name="recipes" value="{{ recipe_names | join(',') }}">
        <input type="hidden" name="_csrf" value="{{ nonce }}">

        <!-- Scope (always visible, not collapsible) -->
        <div class="form-section-static">
            <div class="form-section-static-title">Scope</div>
            {% if show_cve and show_version_fields %}
            <div class="form-hint-info">CVE and Version Comparison recipes require the fields below. Leave empty to skip those recipes.</div>
            {% endif %}
            <div class="form-group">
                <label for="pre-folder">&#128193; Folder filter</label>
                <select id="pre-folder" name="folder_filter"
                        data-value="{{ state.get('folder_filter', '') }}">
                    <option value="">(all folders)</option>
                </select>
            </div>
            <div class="form-group">
                <label for="pre-project">&#128196; Project filter</label>
                <select id="pre-project" name="project_filter"
                        data-value="{{ state.get('project_filter', '') }}">
                    <option value="">(all projects)</option>
                </select>
                {% if show_project_required %}
                <small class="form-hint-warning">Required for Remediation Package</small>
                {% endif %}
            </div>
            <div class="form-group">
                <label for="pre-version">&#127991; Version filter</label>
                <select id="pre-version" name="version_filter"
                        data-value="{{ state.get('version_filter', '') }}">
                    <option value="">(all versions)</option>
                </select>
            </div>
            <div class="form-group form-row">
                <label for="pre-cvo">Current version only</label>
                <label class="toggle">
                    <input type="checkbox" id="pre-cvo" name="current_version_only"
                           {% if state.get('current_version_only', True) %}checked{% endif %}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="form-group">
                <label for="pre-period">Period</label>
                <input type="text" id="pre-period" name="period"
                       value="{{ state.get('period', '30d') }}" placeholder="30d, 2m, 90d">
            </div>

            {% if show_cve %}
            <div class="form-group">
                <label for="pre-cve">CVE ID(s)</label>
                <input type="text" id="pre-cve" name="cve_filter"
                       value="{{ state.get('cve_filter', '') }}"
                       placeholder="CVE-2024-1234, CVE-2024-5678">
            </div>
            {% endif %}

            {% if show_finding_types %}
            <div class="form-group">
                <label>Finding types</label>
                <div class="finding-type-checkboxes">
                    {% set current_ft = state.get('finding_types', 'cve') %}
                    <label class="finding-type-cb"><input type="checkbox" name="ft_cb" value="cve" {% if 'cve' in current_ft %}checked{% endif %}> CVE</label>
                    <label class="finding-type-cb"><input type="checkbox" name="ft_cb" value="sast" {% if 'sast' in current_ft %}checked{% endif %}> SAST</label>
                    <label class="finding-type-cb"><input type="checkbox" name="ft_cb" value="thirdparty" {% if 'thirdparty' in current_ft %}checked{% endif %}> 3rd Party</label>
                    <label class="finding-type-cb"><input type="checkbox" name="ft_cb" value="binary_sca" {% if 'binary_sca' in current_ft %}checked{% endif %}> Binary SCA</label>
                    <label class="finding-type-cb"><input type="checkbox" name="ft_cb" value="source_sca" {% if 'source_sca' in current_ft %}checked{% endif %}> Source SCA</label>
                    <label class="finding-type-cb"><input type="checkbox" name="ft_cb" value="credentials" {% if 'credentials' in current_ft %}checked{% endif %}> Credentials</label>
                    <label class="finding-type-cb"><input type="checkbox" name="ft_cb" value="config_issues" {% if 'config_issues' in current_ft %}checked{% endif %}> Config</label>
                    <label class="finding-type-cb"><input type="checkbox" name="ft_cb" value="crypto_material" {% if 'crypto_material' in current_ft %}checked{% endif %}> Crypto</label>
                </div>
                <input type="hidden" id="pre-ft" name="finding_types" value="{{ current_ft }}">
            </div>
            {% endif %}

            {% if show_version_fields %}
            <div class="form-group">
                <label for="pre-bv">Baseline version</label>
                <div class="version-picker-row">
                    <select id="pre-bv-project" class="version-picker-select">
                        <option value="">(pick a project)</option>
                    </select>
                    <select id="pre-bv-version" class="version-picker-select" disabled>
                        <option value="">(select project first)</option>
                    </select>
                </div>
                <input type="text" id="pre-bv" name="baseline_version"
                       value="{{ state.get('baseline_version', '') }}"
                       placeholder="Or paste version ID directly">
            </div>
            <div class="form-group">
                <label for="pre-cv">Current version</label>
                <div class="version-picker-row">
                    <select id="pre-cv-project" class="version-picker-select">
                        <option value="">(pick a project)</option>
                    </select>
                    <select id="pre-cv-version" class="version-picker-select" disabled>
                        <option value="">(select project first)</option>
                    </select>
                </div>
                <input type="text" id="pre-cv" name="current_version"
                       value="{{ state.get('current_version', '') }}"
                       placeholder="Or paste version ID directly">
            </div>
            {% endif %}

            {% if show_triage %}
            <div class="form-group">
                <label for="pre-top">Top N findings</label>
                <input type="number" id="pre-top" name="top"
                       value="{{ state.get('top', '') }}" min="0" step="1"
                       placeholder="0 = show all">
                <small class="form-hint">Limit output to the top N findings by score. Leave empty or 0 to show all.</small>
            </div>
            <div class="form-group">
                <label for="pre-triage">Triage N findings</label>
                <input type="number" id="pre-triage" name="triage"
                       value="{{ state.get('triage', '') }}" min="0" step="1"
                       placeholder="0 = all eligible">
                <small class="form-hint">Generate VEX recommendations for only the top N findings. Full list is still shown.</small>
            </div>
            {% endif %}
        </div>

        {% if show_ai %}
        <!-- AI Settings -->
        <details open class="form-section">
            <summary class="form-section-title">AI Settings</summary>
            <div class="form-group form-row">
                <label for="pre-ai">Enable AI</label>
                <label class="toggle">
                    <input type="checkbox" id="pre-ai" name="ai"
                           {% if state.get('ai') %}checked{% endif %}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="form-group">
                <label for="pre-ai-depth">AI depth</label>
                <select id="pre-ai-depth" name="ai_depth">
                    <option value="summary" {% if state.get('ai_depth', 'summary') == 'summary' %}selected{% endif %}>Summary</option>
                    <option value="full" {% if state.get('ai_depth') == 'full' %}selected{% endif %}>Full</option>
                </select>
            </div>
            <div class="form-group form-row">
                <label for="pre-ai-prompts">Export AI prompts</label>
                <label class="toggle">
                    <input type="checkbox" id="pre-ai-prompts" name="ai_prompts"
                           {% if state.get('ai_prompts') %}checked{% endif %}>
                    <span class="toggle-slider"></span>
                </label>
            </div>

            <!-- Deployment Context (nested inside AI Settings) -->
            <details class="form-subsection">
                <summary class="form-subsection-title">Deployment Context</summary>
                <div class="form-group">
                    <label for="pre-product-type">Product type</label>
                    <select id="pre-product-type" name="product_type">
                        <option value="generic" {% if state.get('product_type', 'generic') == 'generic' %}selected{% endif %}>Generic</option>
                        <option value="firmware" {% if state.get('product_type') == 'firmware' %}selected{% endif %}>Firmware</option>
                        <option value="web_app" {% if state.get('product_type') == 'web_app' %}selected{% endif %}>Web App</option>
                        <option value="mobile_app" {% if state.get('product_type') == 'mobile_app' %}selected{% endif %}>Mobile App</option>
                        <option value="library" {% if state.get('product_type') == 'library' %}selected{% endif %}>Library</option>
                        <option value="device_driver" {% if state.get('product_type') == 'device_driver' %}selected{% endif %}>Device Driver</option>
                        <option value="container" {% if state.get('product_type') == 'container' %}selected{% endif %}>Container</option>
                        <option value="desktop_app" {% if state.get('product_type') == 'desktop_app' %}selected{% endif %}>Desktop App</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="pre-network-exposure">Network exposure</label>
                    <select id="pre-network-exposure" name="network_exposure">
                        <option value="unknown" {% if state.get('network_exposure', 'unknown') == 'unknown' %}selected{% endif %}>Unknown</option>
                        <option value="air_gapped" {% if state.get('network_exposure') == 'air_gapped' %}selected{% endif %}>Air-gapped</option>
                        <option value="internal_only" {% if state.get('network_exposure') == 'internal_only' %}selected{% endif %}>Internal Only</option>
                        <option value="internet_facing" {% if state.get('network_exposure') == 'internet_facing' %}selected{% endif %}>Internet-facing</option>
                        <option value="mixed" {% if state.get('network_exposure') == 'mixed' %}selected{% endif %}>Mixed</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="pre-regulatory">Regulatory frameworks</label>
                    <input type="text" id="pre-regulatory" name="regulatory"
                           value="{{ state.get('regulatory', '') }}"
                           placeholder="e.g. IEC-62443, FDA, NIST 800-53">
                </div>
                <div class="form-group">
                    <label for="pre-deploy-notes">Deployment notes</label>
                    <textarea id="pre-deploy-notes" name="deployment_notes"
                              maxlength="500" rows="3"
                              placeholder="Additional context about the deployment environment...">{{ state.get('deployment_notes', '') }}</textarea>
                    <small class="form-hint char-counter">
                        <span id="pre-deploy-notes-count">{{ state.get('deployment_notes', '') | length }}</span>/500
                    </small>
                </div>
            </details>
        </details>
        {% endif %}

        <!-- Advanced Options (collapsed by default) -->
        <details class="form-section">
            <summary class="form-section-title">Advanced Options</summary>
            <div class="form-group">
                <label for="pre-output">Output directory</label>
                <div class="input-with-btn">
                    <input type="text" id="pre-output" name="output_dir"
                           value="{{ state.get('output_dir', './output') }}" placeholder="./output">
                    <button type="button" id="pre-output-browse" class="btn btn-sm btn-default">Browse</button>
                </div>
            </div>
            <div class="form-group form-row">
                <label for="pre-overwrite">Overwrite existing</label>
                <label class="toggle">
                    <input type="checkbox" id="pre-overwrite" name="overwrite"
                           {% if state.get('overwrite') %}checked{% endif %}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="form-group">
                <label for="pre-cache-ttl">Cache TTL (0=off)</label>
                <input type="text" id="pre-cache-ttl" name="cache_ttl"
                       value="{{ state.get('cache_ttl', '4') }}" placeholder="4h">
                <small class="form-hint">Examples: 4h, 2d, 30m, 1h30m, or bare number (hours)</small>
            </div>
        </details>

        <div class="prerun-actions">
            <button type="button" class="btn btn-primary" id="btn-run-submit">Run {{ recipe_names | length }} recipe{{ 's' if recipe_names | length != 1 else '' }}</button>
            <button type="button" class="btn btn-default prerun-close">Cancel</button>
        </div>
    </form>
</div>
