{# Bayesian optimization tab component #}
<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">


    {#            <div class="row align-items-center mb-3">#}
{#                <div class="col-6">#}
{#                    <form method="POST" id="loadHistory" name="loadHistory" action="{{ url_for('execute.execute_files.upload_history') }}" enctype="multipart/form-data">#}
{#                        <div class="input-group">#}
{#                            <input class="form-control" name="historyfile" id="historyfile" type="file" accept=".csv" onchange="var f=document.getElementById('loadHistory'); if(f) f.submit();">                        </div>#}
{#                    </form>#}
{#                </div>#}
{#            </div>#}
            <h6 class="fw-bold mt-2 mb-1">Load Previous Data</h6>

    <form method="POST" name="bo" action="{{ url_for('execute.experiment_run') }}">
        <div class="container py-2">
            <!-- Data Loading Section -->
            <div class="input-group">
                <label class="input-group-text"><i class="bi bi-folder2-open"></i></label>
                <select class="form-select" id="existing_data" name="existing_data">
                    <option value="">Load existing data...</option>
                    {% for data in data_list %}
                        <option value="{{ data }}">{{ data }} </option>
                    {% endfor %}
                </select>
            </div>
            <!-- Custom path input -->
            <div class="row align-items-center mb-3" id="custom_path_row" style="display: none;">
                <div class="col-3 col-form-label-sm">
                    Custom Path:
                </div>
                <div class="col-7">
                    <input type="text" class="form-control form-control-sm" id="custom_path" name="custom_path" placeholder="/path/to/data/folder">
                </div>
                <div class="col-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="validateCustomPath()">Validate</button>
                </div>
            </div>

            <!-- Data preview section -->
            <div class="row mb-3" id="data_preview_section" style="display: none;">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header py-2">
                            <small class="fw-bold">Data Preview</small>
                        </div>
                        <div class="card-body py-2">
                            <div id="data_preview_content">
                                <small class="text-muted">Select a data source to preview</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <hr class="my-3">

            <!-- Parameters -->
            <h6 class="fw-bold mt-2 mb-1">Parameters</h6>
            {% for config in config_list %}
                <div class="row align-items-center mb-2">
                    <div class="col-3 col-form-label-sm">
                        {{ config }}:
                    </div>
                    <div class="col-6">
                        <select class="form-select form-select-sm" id="{{config}}_type" name="{{config}}_type">
                            <option selected value="range">range</option>
                            <option value="choice">choice</option>
                            <option value="fixed">fixed</option>
                        </select>
                    </div>
                    <div class="col-3">
                        <input type="text" class="form-control form-control-sm" id="{{config}}_value" name="{{config}}_value" placeholder="1, 2, 3">
                    </div>
                </div>
            {% endfor %}
            <!-- Objective -->
            <h6 class="fw-bold mt-3 mb-1">Objectives</h6>
            {% for objective in return_list %}
                <div class="row align-items-center mb-2">
                    <div class="col-3 col-form-label-sm">
                        {{ objective }}:
                    </div>
                    <div class="col-6">
                        <select class="form-select form-select-sm" id="{{objective}}_min" name="{{objective}}_min">
                            <option selected>minimize</option>
                            <option>maximize</option>
                            <option>none</option>
                        </select>
                    </div>
                </div>
            {% endfor %}
            <h6 class="fw-bold mt-3 mb-1">Budget</h6>
            <div class="input-group mb-3">
                <label class="input-group-text" for="repeat">Max iteration </label>
                <input class="form-control" type="number" id="repeat" name="repeat" min="1" max="1000" value="25">
            </div>
            {% if not no_deck_warning%}
                <div class="input-group mb-3">
                    <button class="form-control" type="submit" name="bo">Run</button>
                </div>
            {% endif %}
        </div>
    </form>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const dataSelect = document.getElementById('existing_data');
        const previewSection = document.getElementById('data_preview_section');
        const previewContent = document.getElementById('data_preview_content');

        dataSelect.addEventListener('change', function() {
            const filename = dataSelect.value;
            if (!filename) {
                previewSection.style.display = 'none';
                previewContent.innerHTML = '<small class="text-muted">Select a data source to preview</small>';
                return;
            }
            fetch('{{ url_for("execute.data_preview", filename="FILENAME") }}'.replace('FILENAME', encodeURIComponent(filename)))
                .then(response => {
                    if (!response.ok) throw new Error('Network response was not ok');
                    return response.json();
                })
                .then(data => {
                    previewSection.style.display = '';
                    if (!data.rows || data.rows.length === 0) {
                        previewContent.innerHTML = '<small class="text-muted">No data found in file.</small>';
                        return;
                    }
                    let html = '<table class="table table-sm table-bordered mb-0"><thead><tr>';
                    data.columns.forEach(col => html += `<th>${col}</th>`);
                    html += '</tr></thead><tbody>';
                    data.rows.forEach(row => {
                        html += '<tr>';
                        data.columns.forEach(col => html += `<td>${row[col] || ''}</td>`);
                        html += '</tr>';
                    });
                    html += '</tbody></table>';
                    previewContent.innerHTML = html;
                })
                .catch(() => {
                    previewSection.style.display = '';
                    previewContent.innerHTML = '<small class="text-danger">Failed to load preview.</small>';
                });
        });
    });
</script>