{% extends "base.html.jinja" %}

{% block title %}Configuration{% endblock title %}

{% block styles %}
{{ super() }}
<style>
    .nav-tabs .nav-link {
        color: #495057;
    }

    .nav-tabs .nav-link.active {
        font-weight: bold;
    }

    .config-form {
        max-width: 800px;
        margin: 0 auto;
    }

    .form-section {
        margin-bottom: 2rem;
    }
</style>
{% endblock styles %}

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

    <ul class="nav nav-pills nav-fill mb-4">
        <li class="nav-item">
            <a class="nav-link {% if active_tab == 'general' %}active{% endif %}"
                href="{{ url_for('config.general') }}">General</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {% if active_tab == 'schedule' %}active{% endif %}"
                href="{{ url_for('config.schedule') }}">Schedule</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {% if active_tab == 'database' %}active{% endif %}"
                href="{{ url_for('config.database') }}">Database</a>
        </li>
    </ul>

    <div class="tab-content">
        {% if active_tab == 'general' %}
        {% include "config/general.html.jinja" %}
        {% elif active_tab == 'schedule' %}
        {% include "config/schedule.html.jinja" %}
        {% elif active_tab == 'database' %}
        {% include "config/database.html.jinja" %}
        {% endif %}
    </div>
</div>

<!-- Include the scraper overview modal -->
{% include "partials/scraper_overview_modal.html.jinja" %}

{% endblock content %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/scraper-overview.js') }}"></script>
{% endblock scripts %}