{% extends "base.html" %}
{% block title %}Настройки — TG Agent{% endblock %}
{% block content %}
<h1 class="mb-4">Настройки</h1>

<ul class="nav nav-pills mb-4" id="settings-tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tab-accounts" data-bs-toggle="pill"
                data-bs-target="#pane-accounts" type="button" role="tab"
                aria-controls="pane-accounts" aria-selected="true">
            <i class="bi bi-phone me-1"></i>Аккаунты
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-credentials" data-bs-toggle="pill"
                data-bs-target="#pane-credentials" type="button" role="tab"
                aria-controls="pane-credentials" aria-selected="false">
            <i class="bi bi-key me-1"></i>API
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-scheduler" data-bs-toggle="pill"
                data-bs-target="#pane-scheduler" type="button" role="tab"
                aria-controls="pane-scheduler" aria-selected="false">
            <i class="bi bi-clock me-1"></i>Планировщик
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-devmode" data-bs-toggle="pill"
                data-bs-target="#pane-devmode" type="button" role="tab"
                aria-controls="pane-devmode" aria-selected="false">
            <i class="bi bi-code-slash me-1"></i>Разработчик
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-filters" data-bs-toggle="pill"
                data-bs-target="#pane-filters" type="button" role="tab"
                aria-controls="pane-filters" aria-selected="false">
            <i class="bi bi-funnel me-1"></i>Фильтры
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab-notifications" data-bs-toggle="pill"
                data-bs-target="#pane-notifications" type="button" role="tab"
                aria-controls="pane-notifications" aria-selected="false">
            <i class="bi bi-bell me-1"></i>Уведомления
        </button>
    </li>
</ul>

<div class="tab-content" id="settings-tab-content">
    <div class="tab-pane fade show active" id="pane-accounts" role="tabpanel" aria-labelledby="tab-accounts">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Telegram-аккаунты</div>
            <div class="card-body">
                {% include "settings/_accounts.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-credentials" role="tabpanel" aria-labelledby="tab-credentials">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Telegram API credentials</div>
            <div class="card-body">
                {% include "settings/_credentials.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-scheduler" role="tabpanel" aria-labelledby="tab-scheduler">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Планировщик</div>
            <div class="card-body">
                {% include "settings/_scheduler.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-devmode" role="tabpanel" aria-labelledby="tab-devmode">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">
                Режим разработчика{% if agent_dev_mode_enabled %} & AI Agent{% endif %}
            </div>
            <div class="card-body">
                {% include "settings/_devmode.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-filters" role="tabpanel" aria-labelledby="tab-filters">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Фильтры каналов</div>
            <div class="card-body">
                {% include "settings/_filters.html" %}
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="pane-notifications" role="tabpanel" aria-labelledby="tab-notifications">
        <div class="card shadow-sm">
            <div class="card-header bg-body-secondary fw-semibold">Уведомления</div>
            <div class="card-body">
                {% include "settings/_notifications.html" %}
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block head_scripts %}
<script src="/static/settings.js?v={{ app_version }}" defer></script>
{% endblock %}