{% extends "common/base.html" %}
{% from "components/header.html" import header %}
{% from "settings/tabs/colors.html" import colors_tab %}
{% from "settings/tabs/company_info.html" import company_info_tab %}
{% from "settings/tabs/security.html" import security_tab %}
{% from "settings/tabs/debugging.html" import debugging_tab %}
{% from "settings/tabs/events.html" import events_tab %}
{% from "settings/tabs/email_templates.html" import email_templates_tab %}
{% from "settings/tabs/mails.html" import mails_tab %}
{% from "settings/tabs/smtp_settings.html" import smtp_settings_tab %}
{% from "settings/tabs/connections.html" import connections_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') }}?v={{ 'css/settings.css'|asset_version }}">
{% 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>
                    {% if not is_master %}
                    <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-building me-2"></i>Company Info
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if active_tab == 'email_templates' %}active{% endif %}" id="email-templates-tab" data-bs-toggle="tab" data-bs-target="#email-templates" type="button" role="tab" aria-controls="email-templates" aria-selected="{{ 'true' if active_tab == 'email_templates' else 'false' }}">
                            <i class="fas fa-envelope me-2"></i>Email Templates
                        </button>
                    </li>
                    {% endif %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if active_tab == 'mails' %}active{% endif %}" id="mails-tab" data-bs-toggle="tab" data-bs-target="#mails" type="button" role="tab" aria-controls="mails" aria-selected="{{ 'true' if active_tab == 'mails' else 'false' }}">
                            <i class="fas fa-paper-plane me-2"></i>Mail Log
                        </button>
                    </li>
                    {% if not is_master %}
                    <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>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if active_tab == 'events' %}active{% endif %}" id="events-tab" data-bs-toggle="tab" data-bs-target="#events" type="button" role="tab" aria-controls="events" aria-selected="{{ 'true' if active_tab == 'events' else 'false' }}">
                            <i class="fas fa-history me-2"></i>Event Log
                        </button>
                    </li>
                    
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if active_tab == 'debugging' %}active{% endif %}" id="debugging-tab" data-bs-toggle="tab" data-bs-target="#debugging" type="button" role="tab" aria-controls="debugging" aria-selected="{{ 'true' if active_tab == 'debugging' else 'false' }}">
                            <i class="fas fa-bug me-2"></i>Debugging
                        </button>
                    </li>
                    {% endif %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if active_tab == 'smtp' %}active{% endif %}" id="smtp-tab" data-bs-toggle="tab" data-bs-target="#smtp" type="button" role="tab" aria-controls="smtp" aria-selected="{{ 'true' if active_tab == 'smtp' else 'false' }}">
                            <i class="fas fa-server me-2"></i>SMTP
                        </button>
                    </li>
                    {% if is_master %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if active_tab == 'connections' %}active{% endif %}" id="connections-tab" data-bs-toggle="tab" data-bs-target="#connections" type="button" role="tab" aria-controls="connections" aria-selected="{{ 'true' if active_tab == 'connections' else 'false' }}">
                            <i class="fas fa-plug me-2"></i>Connections
                        </button>
                    </li>
                    {% endif %}
                </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>

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

                    <!-- Email Templates Tab -->
                    <div class="tab-pane fade {% if active_tab == 'email_templates' %}show active{% endif %}" id="email-templates" role="tabpanel" aria-labelledby="email-templates-tab">
                        {{ email_templates_tab(email_templates, csrf_token) }}
                    </div>
                    {% endif %}

                    <!-- Mails Tab -->
                    <div class="tab-pane fade {% if active_tab == 'mails' %}show active{% endif %}" id="mails" role="tabpanel" aria-labelledby="mails-tab">
                        {{ mails_tab(mails, csrf_token, users, total_pages, current_page) }}
                    </div>

                    {% if not is_master %}
                    <!-- 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>

                    <!-- Events Tab -->
                    <div class="tab-pane fade {% if active_tab == 'events' %}show active{% endif %}" id="events" role="tabpanel" aria-labelledby="events-tab">
                        {{ events_tab(events, csrf_token, users, total_pages, current_page) }}
                    </div>
                    {% endif %}

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

                    <!-- SMTP Settings Tab -->
                    <div class="tab-pane fade {% if active_tab == 'smtp' %}show active{% endif %}" id="smtp" role="tabpanel" aria-labelledby="smtp-tab">
                        {{ smtp_settings_tab(smtp_settings, csrf_token) }}
                    </div>

                    {% if is_master %}
                    <!-- Connections Tab -->
                    <div class="tab-pane fade {% if active_tab == 'connections' %}show active{% endif %}" id="connections" role="tabpanel" aria-labelledby="connections-tab">
                        {{ connections_tab(portainer_settings, nginx_settings, site_settings, git_settings) }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{{ reset_colors_modal(csrf_token) }}

{% endblock %}

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