{% extends "base.html" %}

{% block title %}Structure Builder - 1D Poisson Simulator{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2><i class="bi bi-tools"></i> Structure Builder</h2>
        <p class="text-muted">Design your semiconductor heterostructure</p>
        <hr>
    </div>
</div>

<div class="row">
    <!-- Left Panel - Layer List -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-layers"></i> Layers
                    <div class="btn-group btn-group-sm float-end" role="group">
                        <button class="btn btn-primary" id="addLayerBtn">
                            <i class="bi bi-plus-circle"></i> Add Layer
                        </button>
                        <button class="btn btn-success" id="addSuperlatticeBtn">
                            <i class="bi bi-stack"></i> Add Superlattice
                        </button>
                    </div>
                    </button>
                </h5>
            </div>
            <div class="card-body">
                <!-- Structure Info -->
                <div class="mb-3">
                    <label for="structureName" class="form-label">Structure Name</label>
                    <input type="text" class="form-control" id="structureName" value="Untitled Structure">
                </div>
                
                <div class="alert alert-info small mb-3">
                    <strong>Total Thickness:</strong> <span id="totalThickness">0.0</span> nm
                </div>
                
                <!-- Layer List -->
                <div id="layerList" class="list-group">
                    <!-- Layers will be added here dynamically -->
                </div>
            </div>
        </div>
        
        <!-- Actions -->
    <div class="card mt-3">
        <div class="card-header">
            <h6 class="mb-0"><i class="bi bi-lightning-charge"></i> Actions</h6>
        </div>
        <div class="card-body">
            <div class="d-grid gap-2">
                <button class="btn btn-success" id="runSimBtn">
                    <i class="bi bi-play-circle"></i> Run Simulation
                </button>
                <button class="btn btn-warning text-white" id="batchRunBtn">
                    <i class="bi bi-stack"></i> Batch Run
                </button>
                <button class="btn btn-outline-primary" id="saveStructureBtn">
                    <i class="bi bi-save"></i> Save Structure
                </button>
                <button class="btn btn-outline-secondary" id="loadStructureBtn">
                    <i class="bi bi-folder-open"></i> Load Structure
                </button>

                <!-- Export dropdown -->
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-info dropdown-toggle w-100"
                            data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi bi-download"></i> Export
                    </button>
                    <ul class="dropdown-menu w-100">
                        <li>
                            <a class="dropdown-item" href="#" id="exportInputBtn">
                                <i class="bi bi-file-text"></i> Input File (.txt)
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#" id="exportJSONBtn">
                                <i class="bi bi-filetype-json"></i> Structure (JSON)
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <a class="dropdown-item" href="#" id="exportReportBtn">
                                <i class="bi bi-file-earmark-pdf"></i> Structure Report
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
    
    <!-- Right Panel - Layer Editor & Preview -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-pencil"></i> Layer Editor</h5>
            </div>
            <div class="card-body">
                <div id="layerEditor">
                    <div class="alert alert-secondary">
                        <i class="bi bi-info-circle"></i> Select or add a layer to edit
                    </div>
                </div>
            </div>
        </div>

        <!-- Structure Preview -->
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-eye"></i> Structure Preview</h5>
            </div>
            <div class="card-body">
                <div id="structurePreview" style="min-height: 200px;">
                    <!-- Visual preview will be rendered here -->
                </div>
            </div>
        </div>

        <!-- Boundary Conditions Card -->
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-layers-half"></i> Boundary Conditions</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- Surface Boundary -->
                    <div class="col-md-6">
                        <h6 class="text-primary">Surface</h6>

                        <div class="mb-3">
                            <label for="surfaceBCType" class="form-label">Type</label>
                            <select class="form-select" id="surfaceBCType">
                                <option value="slope">Slope = 0</option>
                                <option value="schottky">Schottky Barrier</option>
                                <option value="ohmic">Ohmic Contact</option>
                            </select>
                        </div>

                        <div id="surfaceSchottkyParams" style="display: none;">
                            <div class="mb-3">
                                <label for="surfaceBarrierHeight" class="form-label">Barrier Height (eV)</label>
                                <input type="number" class="form-control" id="surfaceBarrierHeight"
                                       step="0.01" value="0.6" min="0" max="3">
                            </div>
                        </div>

                        <div id="surfaceVoltageParams" style="display: none;">
                            <div class="mb-3">
                                <label for="surfaceVoltageSource" class="form-label">Voltage Source</label>
                                <select class="form-select" id="surfaceVoltageSource">
                                    <option value="">None</option>
                                    <option value="v1">v1</option>
                                    <option value="v2">v2</option>
                                    <option value="v3">v3</option>
                                    <option value="v4">v4</option>
                                    <option value="v5">v5</option>
                                </select>
                            </div>

                            <div class="mb-3" id="surfaceVoltageValueDiv" style="display: none;">
                                <label for="surfaceVoltageValue" class="form-label">Voltage (V)</label>
                                <input type="number" class="form-control" id="surfaceVoltageValue"
                                       step="0.1" value="0.0">
                            </div>
                        </div>
                    </div>

                    <!-- Substrate Boundary -->
                    <div class="col-md-6">
                        <h6 class="text-primary">Substrate</h6>

                        <div class="mb-3">
                            <label for="substrateBCType" class="form-label">Type</label>
                            <select class="form-select" id="substrateBCType">
                                <option value="slope" selected>Slope = 0</option>
                                <option value="schottky">Schottky Barrier</option>
                                <option value="ohmic">Ohmic Contact</option>
                            </select>
                        </div>

                        <div id="substrateSchottkyParams" style="display: none;">
                            <div class="mb-3">
                                <label for="substrateBarrierHeight" class="form-label">Barrier Height (eV)</label>
                                <input type="number" class="form-control" id="substrateBarrierHeight"
                                       step="0.01" value="0.6" min="0" max="3">
                            </div>
                        </div>

                        <div id="substrateVoltageParams" style="display: none;">
                            <div class="mb-3">
                                <label for="substrateVoltageSource" class="form-label">Voltage Source</label>
                                <select class="form-select" id="substrateVoltageSource">
                                    <option value="">None</option>
                                    <option value="v1">v1</option>
                                    <option value="v2">v2</option>
                                    <option value="v3">v3</option>
                                    <option value="v4">v4</option>
                                    <option value="v5">v5</option>
                                </select>
                            </div>

                            <div class="mb-3" id="substrateVoltageValueDiv" style="display: none;">
                                <label for="substrateVoltageValue" class="form-label">Voltage (V)</label>
                                <input type="number" class="form-control" id="substrateVoltageValue"
                                       step="0.1" value="0.0">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="alert alert-info small mb-0 mt-2">
                    <i class="bi bi-info-circle"></i>
                    <strong>Slope=0:</strong> Zero band slope at boundary (default).<br>
                    <strong>Schottky:</strong> Metal-semiconductor barrier contact.<br>
                    <strong>Ohmic:</strong> Zero-resistance contact (charge neutrality at boundary).
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals -->

<!-- Add/Edit Layer Modal -->
<div class="modal fade" id="layerModal" tabindex="-1">
    <div class="modal-dialog modal-lg">  <!-- Changed to modal-lg for more space -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Layer Properties</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="layerForm">
                    <div class="mb-3">
                        <label for="layerMaterial" class="form-label">Material</label>
                        <select class="form-select" id="layerMaterial" required>
                            <option value="">Select material...</option>
                            <optgroup label="Group IV">
                                <option value="Si">Si (Silicon)</option>
                                <option value="SiO2">SiO2 (Silicon Dioxide)</option>
                            </optgroup>
                            <optgroup label="III-V Binary">
                                <option value="GaAs">GaAs (Gallium Arsenide)</option>
                                <option value="SIGaAs">SIGaAs (Semi-Insulating GaAs)</option>
                                <option value="InP">InP (Indium Phosphide)</option>
                                <option value="SIInP">SIInP (Semi-Insulating InP)</option>
                                <option value="InAs">InAs (Indium Arsenide)</option>
                            </optgroup>
                            <optgroup label="III-V Ternary (require composition x)">
                                <option value="AlGaAs" data-ternary="true">AlGaAs (Aluminum Gallium Arsenide)</option>
                                <option value="InGaAs_GaAs" data-ternary="true">InGaAs (Indium Gallium Arsenide on GaAs)</option>
                            </optgroup>
                            <optgroup label="III-N Binary">
                                <option value="GaN">GaN (Gallium Nitride)</option>
                                <option value="PGaN">PGaN (p-type GaN)</option>
                            </optgroup>
                            <optgroup label="III-N Ternary (require composition x)">
                                <option value="AlGaN" data-ternary="true">AlGaN (Aluminum Gallium Nitride)</option>
                                <option value="InGaN" data-ternary="true">InGaN (Indium Gallium Nitride)</option>
                            </optgroup>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="layerThickness" class="form-label">Thickness (nm)</label>
                        <input type="number" class="form-control" id="layerThickness"
                               min="0" step="0.1" value="10.0" required>
                    </div>

                    <!-- Composition with Grading -->
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="form-label mb-0">Composition (x)</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="enableGrading">
                                <label class="form-check-label" for="enableGrading">
                                    <small>Enable Grading</small>
                                </label>
                            </div>
                        </div>

                        <!-- Single composition (default) -->
                        <div id="singleCompositionDiv">
                            <input type="number" class="form-control" id="layerComposition"
                                   min="0" max="1" step="0.01" placeholder="Optional (e.g., 0.3)">
                            <small class="form-text text-muted">
                                For alloys (e.g., Al<sub>x</sub>Ga<sub>1-x</sub>As)
                            </small>
                        </div>

                        <!-- Graded composition -->
                        <div id="gradedCompositionDiv" style="display: none;">
                            <div class="row">
                                <div class="col-6">
                                    <label for="compositionStart" class="form-label small">Start x</label>
                                    <input type="number" class="form-control" id="compositionStart"
                                           min="0" max="1" step="0.01" placeholder="0.1">
                                </div>
                                <div class="col-6">
                                    <label for="compositionStop" class="form-label small">Stop x</label>
                                    <input type="number" class="form-control" id="compositionStop"
                                           min="0" max="1" step="0.01" placeholder="0.3">
                                </div>
                            </div>
                            <small class="form-text text-muted">
                                Linear grading from start to stop across layer thickness
                            </small>
                            <div class="alert alert-warning alert-sm mt-2 mb-0">
                                <i class="bi bi-exclamation-triangle"></i>
                                <small><strong>Note:</strong> Each mesh point becomes a separate layer.
                                Large layers with small dy may exceed 500 layer limit.</small>
                            </div>
                        </div>
                    </div>

                    <!-- Per-layer mesh spacing -->
                    <div class="mb-3">
                        <label for="layerMeshSpacing" class="form-label">
                            Custom Mesh Spacing (dy) - Optional
                        </label>
                        <input type="number" class="form-control" id="layerMeshSpacing"
                               min="1" step="1" placeholder="Default (from simulation settings)">
                        <small class="form-text text-muted">
                            Mesh spacing in Ångströms. Leave blank to use global dy.
                        </small>
                    </div>

                    <!-- Shallow Doping (existing) -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">Shallow Doping</h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="layerDopingType" class="form-label">Doping Type</label>
                                <select class="form-select" id="layerDopingType">
                                    <option value="">Undoped</option>
                                    <option value="n">n-type (Donors)</option>
                                    <option value="p">p-type (Acceptors)</option>
                                </select>
                            </div>

                            <div class="mb-0" id="layerDopingDensityDiv" style="display: none;">
                                <label for="layerDopingDensity" class="form-label">
                                    Doping Density (cm⁻³)
                                </label>
                                <input type="number" class="form-control" id="layerDopingDensity"
                                       min="0" step="1e15" placeholder="e.g., 1e18">
                            </div>
                        </div>
                    </div>

                    <!-- Deep Level Doping -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                Deep Level Doping (Optional)
                                <i class="bi bi-info-circle" data-bs-toggle="tooltip"
                                   title="Deep level traps (e.g., DX centers, EL2 centers in GaAs)"></i>
                            </h6>
                        </div>
                        <div class="card-body">
                            <!-- Deep Donors -->
                            <div class="mb-3">
                                <label class="form-label fw-bold">Deep Donors</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="deepDonorConc" class="form-label small">
                                            Concentration (Ndd) cm⁻³
                                        </label>
                                        <input type="number" class="form-control" id="deepDonorConc"
                                               min="0" step="1e15" placeholder="e.g., 1e16">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="deepDonorEnergy" class="form-label small">
                                            Ionization Energy (Edd) eV
                                        </label>
                                        <input type="number" class="form-control" id="deepDonorEnergy"
                                               min="0" max="3" step="0.01" placeholder="e.g., 0.15">
                                    </div>
                                </div>
                            </div>

                            <!-- Deep Acceptors -->
                            <div class="mb-0">
                                <label class="form-label fw-bold">Deep Acceptors</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="deepAcceptorConc" class="form-label small">
                                            Concentration (Nda) cm⁻³
                                        </label>
                                        <input type="number" class="form-control" id="deepAcceptorConc"
                                               min="0" step="1e15" placeholder="e.g., 1e16">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="deepAcceptorEnergy" class="form-label small">
                                            Ionization Energy (Eda) eV
                                        </label>
                                        <input type="number" class="form-control" id="deepAcceptorEnergy"
                                               min="0" max="3" step="0.01" placeholder="e.g., 0.15">
                                    </div>
                                </div>
                            </div>

                            <div class="alert alert-info alert-sm mt-3 mb-0">
                                <small>
                                    <i class="bi bi-lightbulb"></i>
                                    <strong>Examples:</strong> DX centers in AlGaAs (Edd ≈ 0.15 eV),
                                    EL2 centers in GaAs (Edd ≈ 0.75 eV)
                                </small>
                            </div>
                        </div>
                    </div>

                    <!-- Per-Layer Carrier Control -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                Carrier Control (Optional)
                                <i class="bi bi-info-circle" data-bs-toggle="tooltip"
                                   title="Override global carrier settings for this layer. Use to suppress artifacts like hole buildup at reverse-biased Schottky barriers."></i>
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="layerNoElectrons">
                                        <label class="form-check-label" for="layerNoElectrons">
                                            No Electrons
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="layerNoHoles">
                                        <label class="form-check-label" for="layerNoHoles">
                                            No Holes
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-0">
                                        <select class="form-select form-select-sm" id="layerIonization">
                                            <option value="">Use global setting</option>
                                            <option value="fullyionized">Fully Ionized</option>
                                            <option value="ionize">Calculate Ionization</option>
                                        </select>
                                        <small class="form-text text-muted">Ionization</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Fermi Level Override -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                Fermi Level Override (Optional)
                                <i class="bi bi-info-circle" data-bs-toggle="tooltip"
                                   title="Set a custom Fermi level for this layer to simulate biased structures. Use grading to linearly vary Ef across the layer."></i>
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="form-label mb-0">Fermi Level (eV)</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="enableEfGrading">
                                    <label class="form-check-label" for="enableEfGrading">
                                        <small>Enable Grading</small>
                                    </label>
                                </div>
                            </div>

                            <!-- Single Ef -->
                            <div id="singleEfDiv">
                                <input type="number" class="form-control" id="layerFermiLevel"
                                       step="0.01" placeholder="e.g., -1.0 (leave blank for default Ef=0)">
                                <small class="form-text text-muted">
                                    For ohmic contact with 1V bias, set Ef = -1.0 eV
                                </small>
                            </div>

                            <!-- Graded Ef -->
                            <div id="gradedEfDiv" style="display: none;">
                                <div class="row">
                                    <div class="col-6">
                                        <label for="efStart" class="form-label small">Start Ef (eV)</label>
                                        <input type="number" class="form-control" id="efStart"
                                               step="0.01" placeholder="e.g., 0.0">
                                    </div>
                                    <div class="col-6">
                                        <label for="efStop" class="form-label small">Stop Ef (eV)</label>
                                        <input type="number" class="form-control" id="efStop"
                                               step="0.01" placeholder="e.g., -1.0">
                                    </div>
                                </div>
                                <small class="form-text text-muted">
                                    Linear grading of Fermi level across layer thickness
                                </small>
                            </div>
                        </div>
                    </div>

                    <!-- Polarization -->
                    <div class="mb-3">
                        <label for="layerPolarization" class="form-label">
                            Polarization (Optional)
                            <i class="bi bi-info-circle" data-bs-toggle="tooltip"
                               title="Polarization charge in C/cm². The program calculates charge due to changes in polarization. User defines whether this includes the piezo component."></i>
                        </label>
                        <input type="number" class="form-control" id="layerPolarization"
                               step="0.001" placeholder="e.g., 0.029 (C/cm²)">
                        <small class="form-text text-muted">
                            Polarization charge density (C/cm²). Relevant for III-N heterostructures.
                        </small>
                    </div>

                    <!-- Advanced Material Property Overrides -->
                    <div class="card mb-3">
                        <div class="card-header bg-light p-2">
                            <a class="text-decoration-none d-flex justify-content-between align-items-center"
                               data-bs-toggle="collapse" href="#materialOverridesCollapse" role="button"
                               aria-expanded="false" aria-controls="materialOverridesCollapse">
                                <h6 class="mb-0">
                                    <i class="bi bi-sliders"></i> Advanced Material Overrides (Optional)
                                </h6>
                                <i class="bi bi-chevron-down"></i>
                            </a>
                        </div>
                        <div class="collapse" id="materialOverridesCollapse">
                            <div class="card-body">
                                <div class="alert alert-info alert-sm mb-3">
                                    <small>
                                        <i class="bi bi-info-circle"></i>
                                        Override default material parameters from the database.
                                        Leave blank to use defaults.
                                    </small>
                                </div>
                                <div class="row g-2">
                                    <div class="col-md-4">
                                        <label for="overrideEr" class="form-label small">
                                            Dielectric Constant (εr)
                                        </label>
                                        <input type="number" class="form-control form-control-sm"
                                               id="overrideEr" step="0.01" placeholder="e.g., 12.9">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="overrideEg" class="form-label small">
                                            Energy Gap (eV)
                                        </label>
                                        <input type="number" class="form-control form-control-sm"
                                               id="overrideEg" step="0.001" placeholder="e.g., 1.424">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="overrideDeltaEc" class="form-label small">
                                            Band Offset ΔEc (eV)
                                        </label>
                                        <input type="number" class="form-control form-control-sm"
                                               id="overrideDeltaEc" step="0.001" placeholder="e.g., 0.0">
                                    </div>
                                </div>
                                <div class="row g-2 mt-1">
                                    <div class="col-md-3">
                                        <label for="overrideMe" class="form-label small">
                                            m*e (m₀)
                                        </label>
                                        <input type="number" class="form-control form-control-sm"
                                               id="overrideMe" step="0.001" placeholder="e.g., 0.067">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="overrideMhh" class="form-label small">
                                            m*hh (m₀)
                                        </label>
                                        <input type="number" class="form-control form-control-sm"
                                               id="overrideMhh" step="0.001" placeholder="e.g., 0.51">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="overrideMlh" class="form-label small">
                                            m*lh (m₀)
                                        </label>
                                        <input type="number" class="form-control form-control-sm"
                                               id="overrideMlh" step="0.001" placeholder="e.g., 0.082">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="overrideValley" class="form-label small">
                                            CB Valleys
                                        </label>
                                        <input type="number" class="form-control form-control-sm"
                                               id="overrideValley" min="1" step="1" placeholder="e.g., 1">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="layerNote" class="form-label">Note/Label</label>
                        <input type="text" class="form-control" id="layerNote" 
                               placeholder="Optional description">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveLayerBtn">Save Layer</button>
            </div>
        </div>
    </div>
</div>

<!-- Simulation Settings Modal -->
<div class="modal fade" id="simSettingsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Simulation Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="simSettingsForm">

                    <div class="mb-3">
                        <label for="simMode" class="form-label">Mode</label>
                        <select class="form-select" id="simMode" required>
                            <option value="poisson">Poisson Only</option>
                            <option value="schrodinger_poisson">Schrödinger-Poisson</option>
                        </select>
                        <small class="form-text text-muted">
                            Schrödinger-Poisson includes quantum state calculations
                        </small>
                    </div>

                    <!-- Temperature Control -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="bi bi-thermometer-half"></i> Temperature
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-end">
                                <div class="col-md-6">
                                    <label for="simTemperature" class="form-label">Temperature</label>
                                    <input type="number" class="form-control" id="simTemperature"
                                           min="0" max="1000" step="1" value="300">
                                </div>
                                <div class="col-md-6">
                                    <label for="tempUnit" class="form-label">Unit</label>
                                    <select class="form-select" id="tempUnit">
                                        <option value="K" selected>Kelvin (K)</option>
                                        <option value="C">Celsius (°C)</option>
                                    </select>
                                </div>
                            </div>
                            <small class="form-text text-muted d-block mt-2">
                                <i class="bi bi-info-circle"></i>
                                <span id="tempInfo">300 K = 27 °C (Room temperature)</span>
                            </small>

                            <div class="mt-3">
                                <strong>Common Temperatures:</strong>
                                <div class="btn-group btn-group-sm mt-1" role="group">
                                    <button type="button" class="btn btn-outline-secondary" onclick="setTemperature(77, 'K')">
                                        77 K (LN₂)
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="setTemperature(300, 'K')">
                                        300 K (RT)
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="setTemperature(400, 'K')">
                                        400 K
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Mesh Spacing Control -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="bi bi-grid-3x3-gap"></i> Mesh Spacing
                            </h6>
                        </div>
                        <div class="card-body">
                            <label for="meshSpacing" class="form-label">Global Mesh Spacing (dy)</label>
                            <input type="number" class="form-control" id="meshSpacing"
                                   min="25" max="200" step="1" value="75">
                            <small class="form-text text-muted d-block mt-2">
                                <i class="bi bi-info-circle"></i>
                                Mesh spacing in Angstroms (minimum 25Å). Smaller = more points = better accuracy but slower.
                                <br>
                                <span id="meshPointsEstimate"></span>
                            </small>

                            <div class="mt-3">
                                <strong>Presets:</strong>
                                <div class="btn-group btn-group-sm mt-1 w-100" role="group">
                                    <button type="button" class="btn btn-outline-secondary" onclick="setMeshSpacing(100)">
                                        Coarse (100Å)
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="setMeshSpacing(75)">
                                        Normal (75Å)
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="setMeshSpacing(50)">
                                        Fine (50Å)
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="setMeshSpacing(25)">
                                        Very Fine (25Å)
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="schrodingerParams" style="display: none;">
                        <h6 class="mt-3">Schrödinger Parameters</h6>

                        <div class="mb-3">
                            <label for="schrodingerStart" class="form-label">Schrödinger Mesh Start (Å)</label>
                            <input type="number" class="form-control" id="schrodingerStart"
                                   min="0" step="10" value="20">
                            <small class="form-text text-muted">
                                Starting position for quantum calculation region (in Angstroms)
                            </small>
                        </div>

                        <div class="mb-3">
                            <label for="schrodingerStop" class="form-label">Schrödinger Mesh Stop (Å)</label>
                            <input type="number" class="form-control" id="schrodingerStop"
                                   min="0" step="10" placeholder="Auto (90% of total thickness)">
                            <small class="form-text text-muted">
                                Stopping position for quantum calculation region (leave blank for automatic)
                            </small>
                        </div>
                    </div>

                    <!-- Voltage Sources -->
                    <div class="card mt-3" id="voltageSourceCard">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="bi bi-lightning-charge"></i> Voltage Sources
                            </h6>
                        </div>
                        <div class="card-body">
                            <div id="voltageSourcesContainer">
                                <!-- Voltage sources will be dynamically added here -->
                            </div>

                            <div class="alert alert-info small mb-0 mt-2">
                                <i class="bi bi-info-circle"></i>
                                Voltage sources are defined by boundary conditions. Configure sweeps below.
                            </div>
                        </div>
                    </div>

                    <!-- Bias Sweep Settings -->
                    <div class="card mt-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="bi bi-arrow-left-right"></i> Bias Sweep (Optional)
                                <div class="form-check form-switch float-end">
                                    <input class="form-check-input" type="checkbox" id="enableBiasSweep">
                                    <label class="form-check-label" for="enableBiasSweep">Enable</label>
                                </div>
                            </h6>
                        </div>
                        <div class="card-body" id="biasSweepParams" style="display: none;">
                            <div class="mb-3">
                                <label for="sweepVoltageSource" class="form-label">Voltage Source to Sweep</label>
                                <select class="form-select" id="sweepVoltageSource">
                                    <option value="">Select voltage source...</option>
                                </select>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="sweepStart" class="form-label">Start (V)</label>
                                        <input type="number" class="form-control" id="sweepStart"
                                               step="0.1" value="0.0">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="sweepStop" class="form-label">Stop (V)</label>
                                        <input type="number" class="form-control" id="sweepStop"
                                               step="0.1" value="-2.0">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="sweepStep" class="form-label">Step (V)</label>
                                        <input type="number" class="form-control" id="sweepStep"
                                               step="0.1" value="-0.5">
                                    </div>
                                </div>
                            </div>

                            <div class="alert alert-warning small mb-0">
                                <i class="bi bi-exclamation-triangle"></i>
                                <strong>Note:</strong> Voltage sweep will create multiple output files,
                                one for each voltage step. This may take longer to simulate.
                                <div class="mt-2">
                                    <strong>Number of steps:</strong> <span id="sweepStepCount">-</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- C-V Calculation Mode -->
                    <div class="card mt-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="bi bi-bezier2"></i> C-V Calculation (Optional)
                                <div class="form-check form-switch float-end">
                                    <input class="form-check-input" type="checkbox" id="enableCV">
                                    <label class="form-check-label" for="enableCV">Enable</label>
                                </div>
                            </h6>
                        </div>
                        <div class="card-body" id="cvParams" style="display: none;">
                            <div class="mb-3">
                                <label for="cvMode" class="form-label">C-V Mode</label>
                                <select class="form-select" id="cvMode">
                                    <option value="cv">CV (full output at each voltage)</option>
                                    <option value="cv_only">CV Only (full output only at start voltage)</option>
                                </select>
                                <small class="form-text text-muted d-block mt-1">
                                    <i class="bi bi-info-circle"></i>
                                    "CV Only" is faster — generates full band diagrams only for the starting
                                    voltage, while the C-V data file contains capacitance at all voltages.
                                </small>
                            </div>
                            <div class="alert alert-warning small mb-0">
                                <i class="bi bi-exclamation-triangle"></i>
                                <strong>Requirements:</strong>
                                <ul class="mb-0 mt-1">
                                    <li>Surface boundary must be a <strong>Schottky barrier</strong></li>
                                    <li>A <strong>voltage sweep</strong> must be enabled for C-V curves</li>
                                    <li>Caution: large gate voltages may cause surface accumulation artifacts</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Ion Implants -->
                    <div class="card mt-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="bi bi-bullseye"></i> Ion Implants (Optional)
                                <i class="bi bi-info-circle" data-bs-toggle="tooltip"
                                   title="Specify up to 10 ion implants. Uses LSS theory to calculate dopant distribution. Implants add to grown-in dopants."></i>
                            </h6>
                        </div>
                        <div class="card-body">
                            <div id="implantList" class="mb-2">
                                <!-- Implant entries will be added here dynamically -->
                            </div>

                            <div id="noImplantsMsg" class="text-muted small mb-2">
                                <i class="bi bi-info-circle"></i> No implants defined. Click "Add Implant" to add one.
                            </div>

                            <button type="button" class="btn btn-outline-secondary btn-sm" id="addImplantBtn">
                                <i class="bi bi-plus-circle"></i> Add Implant
                            </button>

                            <div class="alert alert-info small mb-0 mt-2">
                                <i class="bi bi-lightbulb"></i>
                                <strong>Example:</strong> Donor implant, dose=2×10¹² cm⁻², Rp=860 Å, ΔRp=440 Å
                            </div>
                        </div>
                    </div>

                    <!-- Advanced Convergence Settings -->
                    <div class="card mt-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="bi bi-sliders"></i> Advanced Convergence (Optional)
                                <div class="form-check form-switch float-end">
                                    <input class="form-check-input" type="checkbox" id="enableAdvConvergence">
                                    <label class="form-check-label" for="enableAdvConvergence">Custom</label>
                                </div>
                            </h6>
                        </div>
                        <div class="card-body" id="advConvergenceParams" style="display: none;">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="convergenceCriteria" class="form-label">Convergence (eV)</label>
                                    <input type="number" class="form-control" id="convergenceCriteria"
                                           step="any" value="1e-5" placeholder="1e-5 (default)">
                                    <small class="form-text text-muted">
                                        Max allowed correction to band diagram for convergence
                                    </small>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="cvConvergenceCriteria" class="form-label">CV Convergence (eV)</label>
                                    <input type="number" class="form-control" id="cvConvergenceCriteria"
                                           step="any" value="1e-10" placeholder="1e-10 (default)">
                                    <small class="form-text text-muted">
                                        Convergence criteria for capacitance calculations
                                    </small>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="maxIterations" class="form-label">Max Iterations</label>
                                    <input type="number" class="form-control" id="maxIterations"
                                           min="1" max="10000" step="1" value="100" placeholder="100 (default)">
                                    <small class="form-text text-muted">
                                        Simulation terminates after this many iterations
                                    </small>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="willRobinson" class="form-label">Will Robinson Handling</label>
                                    <select class="form-select" id="willRobinson">
                                        <option value="">Default (warn &amp; continue)</option>
                                        <option value="stop">Stop on Will Robinson</option>
                                        <option value="ignore">Ignore Will Robinson</option>
                                    </select>
                                    <small class="form-text text-muted">
                                        Controls behavior when Schrödinger mesh confinement is insufficient
                                    </small>
                                </div>
                            </div>
                            <div class="alert alert-info small mb-0">
                                <i class="bi bi-lightbulb"></i>
                                <strong>Tip:</strong> If convergence fails at low temperatures (&lt;50K),
                                try enabling <em>fullyionized</em> or increasing max iterations.
                                The "Will Robinson" error means carrier wavefunctions are not
                                sufficiently confined within the Schrödinger mesh boundaries.
                            </div>
                        </div>
                    </div>

                    <!-- Global Carrier Control -->
                    <div class="card mt-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">
                                <i class="bi bi-exclude"></i> Global Carrier Control (Optional)
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="globalNoElectrons">
                                        <label class="form-check-label" for="globalNoElectrons">
                                            No Electrons (globally)
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="globalNoHoles">
                                        <label class="form-check-label" for="globalNoHoles">
                                            No Holes (globally)
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <small class="form-text text-muted d-block mt-2">
                                <i class="bi bi-info-circle"></i>
                                Sets the default carrier calculation for the entire structure.
                                Useful to suppress artifacts like hole buildup at reverse-biased
                                Schottky barriers. Individual layers can override with per-layer
                                "electrons" / "holes" flags.
                            </small>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveSettingsBtn">
                    <i class="bi bi-save"></i> Save Settings
                </button>
                <button type="button" class="btn btn-success" id="startSimBtn">
                    <i class="bi bi-play-circle"></i> Start Simulation
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Export Report Modal -->
<div class="modal fade" id="exportReportModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Export Structure Report</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Report Format</label>
                    <select class="form-select" id="reportFormat">
                        <option value="html">HTML (Web Page)</option>
                        <option value="markdown">Markdown (.md)</option>
                        <option value="text">Plain Text (.txt)</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">Include in Report</label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="includeLayerTable" checked>
                        <label class="form-check-label" for="includeLayerTable">
                            Layer Table
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="includeBoundaryConditions" checked>
                        <label class="form-check-label" for="includeBoundaryConditions">
                            Boundary Conditions
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="includeInputFile" checked>
                        <label class="form-check-label" for="includeInputFile">
                            Generated Input File
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="includeValidation">
                        <label class="form-check-label" for="includeValidation">
                            Validation Warnings
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="generateReportBtn">
                    <i class="bi bi-file-earmark-text"></i> Generate Report
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Superlattice Builder Modal -->
<div class="modal fade" id="superlatticeModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-stack"></i> Superlattice Builder
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="superlatticeForm">
                    <!-- Superlattice Info -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="slRepetitions" class="form-label">
                                Number of Repetitions
                            </label>
                            <input type="number" class="form-control" id="slRepetitions"
                                   min="1" max="1000" value="10" required>
                            <small class="form-text text-muted">
                                How many times to repeat the layer sequence
                            </small>
                        </div>
                        <div class="col-md-6">
                            <label for="slInsertPosition" class="form-label">
                                Insert Position
                            </label>
                            <select class="form-select" id="slInsertPosition">
                                <option value="end">At End</option>
                                <option value="start">At Start</option>
                                <option value="custom">Custom Position...</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3" id="slCustomPositionDiv" style="display: none;">
                        <label for="slCustomPosition" class="form-label">
                            Insert After Layer #
                        </label>
                        <input type="number" class="form-control" id="slCustomPosition"
                               min="0" value="0">
                    </div>

                    <hr>

                    <!-- Superlattice Layers -->
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="form-label mb-0 fw-bold">
                                Layer Sequence (will be repeated)
                            </label>
                            <button type="button" class="btn btn-sm btn-primary" id="addSLLayerBtn">
                                <i class="bi bi-plus"></i> Add Layer
                            </button>
                        </div>

                        <div id="slLayersList" class="border rounded p-2" style="min-height: 150px;">
                            <div class="text-muted text-center py-3">
                                <i class="bi bi-inbox"></i><br>
                                No layers added yet. Click "Add Layer" to start.
                            </div>
                        </div>
                    </div>

                    <!-- Preview -->
                    <div class="alert alert-info mb-0">
                        <strong>Total Superlattice Thickness:</strong>
                        <span id="slTotalThickness">0.0</span> nm
                        <br>
                        <strong>Single Period Thickness:</strong>
                        <span id="slPeriodThickness">0.0</span> nm
                    </div>

                    <!-- Common Superlattice Templates -->
                    <div class="mt-3">
                        <label class="form-label fw-bold">Quick Templates</label>
                        <div class="btn-group btn-group-sm w-100" role="group">
                            <button type="button" class="btn btn-outline-secondary" id="slTemplateQW">
                                Quantum Well
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="slTemplateDBR">
                                DBR Mirror
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="slTemplateMQW">
                                MQW
                            </button>
                        </div>
                        <small class="form-text text-muted d-block mt-1">
                            Templates pre-fill common superlattice structures
                        </small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="saveSuperlatticeBtn">
                    <i class="bi bi-check-circle"></i> Add Superlattice
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Superlattice Layer Edit Modal -->
<div class="modal fade" id="slLayerModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Superlattice Layer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="slLayerForm">
                    <div class="mb-3">
                        <label for="slLayerMaterial" class="form-label">Material</label>
                        <select class="form-select" id="slLayerMaterial" required>
                            <option value="">Select material...</option>
                            <optgroup label="Group IV">
                                <option value="Si">Si (Silicon)</option>
                                <option value="SiO2">SiO2 (Silicon Dioxide)</option>
                            </optgroup>
                            <optgroup label="III-V Binary">
                                <option value="GaAs">GaAs (Gallium Arsenide)</option>
                                <option value="SIGaAs">SIGaAs (Semi-Insulating GaAs)</option>
                                <option value="InP">InP (Indium Phosphide)</option>
                                <option value="SIInP">SIInP (Semi-Insulating InP)</option>
                                <option value="InAs">InAs (Indium Arsenide)</option>
                            </optgroup>
                            <optgroup label="III-V Ternary (require composition x)">
                                <option value="AlGaAs" data-ternary="true">AlGaAs (Aluminum Gallium Arsenide)</option>
                                <option value="InGaAs_GaAs" data-ternary="true">InGaAs (Indium Gallium Arsenide on GaAs)</option>
                            </optgroup>
                            <optgroup label="III-N Binary">
                                <option value="GaN">GaN (Gallium Nitride)</option>
                                <option value="PGaN">PGaN (p-type GaN)</option>
                            </optgroup>
                            <optgroup label="III-N Ternary (require composition x)">
                                <option value="AlGaN" data-ternary="true">AlGaN (Aluminum Gallium Nitride)</option>
                                <option value="InGaN" data-ternary="true">InGaN (Indium Gallium Nitride)</option>
                            </optgroup>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="slLayerThickness" class="form-label">Thickness (nm)</label>
                        <input type="number" class="form-control" id="slLayerThickness"
                               min="0" step="0.1" value="5.0" required>
                    </div>

                    <div class="mb-3">
                        <label for="slLayerComposition" class="form-label">Composition (x)</label>
                        <input type="number" class="form-control" id="slLayerComposition"
                               min="0" max="1" step="0.01" placeholder="Optional (e.g., 0.3)">
                    </div>

                    <div class="mb-3">
                        <label for="slLayerDopingType" class="form-label">Doping Type</label>
                        <select class="form-select" id="slLayerDopingType">
                            <option value="">Undoped</option>
                            <option value="n">n-type</option>
                            <option value="p">p-type</option>
                        </select>
                    </div>

                    <div class="mb-3" id="slLayerDopingDensityDiv" style="display: none;">
                        <label for="slLayerDopingDensity" class="form-label">Doping Density (cm⁻³)</label>
                        <input type="number" class="form-control" id="slLayerDopingDensity"
                               min="0" step="1e15" placeholder="e.g., 1e18">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveSLLayerBtn">Save Layer</button>
            </div>
        </div>
    </div>
</div>

<!-- Batch Run Modal -->
<div class="modal fade" id="batchRunModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-stack"></i> Batch Simulation Runner
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Model List Section -->
                <div class="mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">
                            <i class="bi bi-list-check"></i> Select Models
                            <span class="badge bg-primary ms-2" id="selectedCountBadge">0 selected</span>
                        </h6>
                        <button class="btn btn-sm btn-outline-secondary" id="refreshModelListBtn">
                            <i class="bi bi-arrow-clockwise"></i> Refresh
                        </button>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" id="selectAllModels">
                        <label class="form-check-label fw-bold" for="selectAllModels">
                            Select All
                        </label>
                    </div>
                    <div class="list-group" id="batchModelList" style="max-height: 400px; overflow-y: auto;">
                        <!-- Model list will be populated here -->
                        <div class="text-center p-4 text-muted">
                            <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                            Loading models...
                        </div>
                    </div>
                </div>

                <!-- Options Section -->
                <div class="mb-4">
                    <h6 class="mb-2"><i class="bi bi-gear"></i> Batch Options</h6>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="continueOnError" checked>
                        <label class="form-check-label" for="continueOnError">
                            Continue on error (continue batch if a simulation fails)
                        </label>
                    </div>
                </div>

                <!-- Progress Section (hidden initially) -->
                <div id="batchProgressSection" style="display: none;">
                    <h6 class="mb-2"><i class="bi bi-activity"></i> Progress</h6>
                    <div class="progress mb-2" style="height: 25px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                             id="batchProgressBar" role="progressbar" style="width: 0%">
                            0%
                        </div>
                    </div>
                    <div id="batchStatusMessage" class="text-muted mb-3">
                        <!-- Status messages will appear here -->
                    </div>
                    <div id="batchResultsList" class="list-group">
                        <!-- Results will appear here -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="startBatchBtn">
                    <i class="bi bi-play-circle"></i> Start Batch Simulation
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/builder.js') }}"></script>
{% endblock %}