{% extends "common/base.html" %}
{% from "components/header.html" import header %}
{% from "settings/tabs/colors.html" import colors_tab %}
{% from "settings/tabs/general.html" import general_tab %}
{% from "settings/tabs/security.html" import security_tab %}
{% from "settings/components/reset_colors_modal.html" import reset_colors_modal %}

{% block title %}Settings - DocuPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/settings.css') }}">
{% endblock %}

{% block content %}
{{ header(
    title="Settings",
    description="Manage your docupulse settings",
    button_text="",
    button_url="",
    icon="fa-cog"
) }}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card-header bg-white">
                <ul class="nav nav-tabs card-header-tabs" id="settingsTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if active_tab == 'colors' %}active{% endif %}" id="colors-tab" data-bs-toggle="tab" data-bs-target="#colors" type="button" role="tab" aria-controls="colors" aria-selected="{{ 'true' if active_tab == 'colors' else 'false' }}">
                            <i class="fas fa-palette me-2"></i>Theme Colors
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if active_tab == 'general' %}active{% endif %}" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="{{ 'true' if active_tab == 'general' else 'false' }}">
                            <i class="fas fa-sliders me-2"></i>General
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if active_tab == 'security' %}active{% endif %}" id="security-tab" data-bs-toggle="tab" data-bs-target="#security" type="button" role="tab" aria-controls="security" aria-selected="{{ 'true' if active_tab == 'security' else 'false' }}">
                            <i class="fas fa-shield-alt me-2"></i>Security
                        </button>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content" id="settingsTabsContent">
                    <!-- Colors Tab -->
                    <div class="tab-pane fade {% if active_tab == 'colors' %}show active{% endif %}" id="colors" role="tabpanel" aria-labelledby="colors-tab">
                        {{ colors_tab(primary_color, secondary_color, csrf_token) }}
                    </div>

                    <!-- General Tab -->
                    <div class="tab-pane fade {% if active_tab == 'general' %}show active{% endif %}" id="general" role="tabpanel" aria-labelledby="general-tab">
                        {{ general_tab(site_settings, csrf_token) }}
                    </div>

                    <!-- Security Tab -->
                    <div class="tab-pane fade {% if active_tab == 'security' %}show active{% endif %}" id="security" role="tabpanel" aria-labelledby="security-tab">
                        {{ security_tab() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{ reset_colors_modal(csrf_token) }}

{% endblock %}

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