{% extends "base.html" %}

{% block title %}PANTHER - Configuration{% endblock %}

{% block content %}
<div class="container-fluid">
    <h1 class="mb-4">Configuration</h1>

    <ul class="nav nav-tabs mb-4" id="configTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="global-tab" data-bs-toggle="tab" data-bs-target="#global" type="button"
                role="tab" aria-controls="global" aria-selected="true">Global Configuration</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="experiment-tab" data-bs-toggle="tab" data-bs-target="#experiment" type="button"
                role="tab" aria-controls="experiment" aria-selected="false">Experiment Configuration</button>
        </li>
    </ul>

    <div class="tab-content" id="configTabsContent">
        <!-- Global Configuration Tab -->
        <div class="tab-pane fade show active" id="global" role="tabpanel" aria-labelledby="global-tab">
            <div class="row">
                <!-- Logging Configuration -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">Logging</h5>
                        </div>
                        <div class="card-body">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <th scope="row">Level</th>
                                        <td>{{ global_config.logging.level }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Format</th>
                                        <td><code>{{ global_config.logging.format }}</code></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Paths Configuration -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">Paths</h5>
                        </div>
                        <div class="card-body">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <th scope="row">Output Directory</th>
                                        <td>{{ global_config.paths.output_dir }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Log Directory</th>
                                        <td>{{ global_config.paths.log_dir }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Config Directory</th>
                                        <td>{{ global_config.paths.config_dir }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Plugin Directory</th>
                                        <td>{{ global_config.paths.plugin_dir }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Docker Configuration -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">Docker</h5>
                        </div>
                        <div class="card-body">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <th scope="row">Build Docker Image</th>
                                        <td>
                                            <i
                                                class="fas fa-{{ 'check text-success' if global_config.docker.force_build_docker_image else 'times text-danger' }}"></i>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Remove Docker Image</th>
                                        <td>
                                            <i
                                                class="fas fa-{{ 'check text-success' if global_config.docker.remove_docker_image else 'times text-danger' }}"></i>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Remove Docker Container</th>
                                        <td>
                                            <i
                                                class="fas fa-{{ 'check text-success' if global_config.docker.remove_docker_container else 'times text-danger' }}"></i>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Remove Docker Network</th>
                                        <td>
                                            <i
                                                class="fas fa-{{ 'check text-success' if global_config.docker.remove_docker_network else 'times text-danger' }}"></i>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Remove Docker Volume</th>
                                        <td>
                                            <i
                                                class="fas fa-{{ 'check text-success' if global_config.docker.remove_docker_volume else 'times text-danger' }}"></i>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Features Configuration -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">Features</h5>
                        </div>
                        <div class="card-body">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <th scope="row">Logger Observer</th>
                                        <td>
                                            <i
                                                class="fas fa-{{ 'check text-success' if global_config.features.logger_observer else 'times text-danger' }}"></i>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Storage Handler</th>
                                        <td>
                                            <i
                                                class="fas fa-{{ 'check text-success' if global_config.features.storage_handler else 'times text-danger' }}"></i>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Fast Fail</th>
                                        <td>
                                            <i
                                                class="fas fa-{{ 'check text-success' if global_config.features.fast_fail else 'times text-danger' }}"></i>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Experiment Configuration Tab -->
        <div class="tab-pane fade" id="experiment" role="tabpanel" aria-labelledby="experiment-tab">
            <div class="code-block">
                <pre>{{ experiment_config_yaml }}</pre>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function () {
        // Load experiment config YAML
        $.ajax({
            url: '/api/experiments',
            method: 'GET',
            success: function (data) {
                // Format the JSON as YAML-like
                let yamlText = JSON.stringify(data, null, 2)
                    .replace(/"([^"]+)":/g, '$1:') // Remove quotes from keys
                    .replace(/"/g, '\'');          // Replace double quotes with single quotes for values

                $('#experiment').find('pre').text(yamlText);
            },
            error: function (xhr, status, error) {
                $('#experiment').find('pre').text('Error loading experiment configuration: ' + error);
            }
        });
    });
</script>
{% endblock %}