{% extends "base.html" %}
{% block title %}VK{% endblock %}

{% block styles %}
<link rel="stylesheet" href="/static/css/vk.css">
{% endblock %}

{% block content %}
<!-- Заголовок -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1"><i class="bi bi-megaphone vk-icon me-2"></i>VK Настройки</h2>
        <p class="text-muted mb-0">Настройки для работы с VK API и сообществом</p>
    </div>
    <div class="badge bg-primary fs-6 px-3 py-2">
        <i class="bi bi-bell me-1"></i>Социальная сеть
    </div>
</div>

<!-- Настройки VK -->
<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="card setting-card fade-in">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-gear vk-icon me-2"></i>Настройки VK</h5>
                <span id="vkStatus" class="status-badge">
                    {% if data.vk_settings %}
                    <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Настроено</span>
                    {% else %}
                    <span class="badge bg-warning"><i class="bi bi-exclamation-triangle me-1"></i>Не
                        настроено</span>
                    {% endif %}
                </span>
            </div>
            <div class="card-body">
                <form id="vkForm">
                    <!-- Access Token группы -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-key vk-icon me-1"></i>Access Token группы
                        </label>
                        <div class="input-group">
                            <span class="input-group-text bg-light"><i class="bi bi-shield-lock"></i></span>
                            <input type="password" class="form-control" id="access_token"
                                placeholder="Введите Access Token вашей группы"
                                value="{{ data.vk_settings.access_token if data.vk_settings else '' }}">
                            <button class="btn btn-outline-secondary" type="button"
                                onclick="togglePassword('access_token')">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                        <div class="form-text small">
                            <i class="bi bi-info-circle me-1"></i>
                            Access Token с правами: groups, wall
                        </div>
                    </div>

                    <!-- ID сообщества -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-people vk-icon me-1"></i>ID сообщества
                        </label>
                        <div class="input-group">
                            <span class="input-group-text bg-light"><i class="bi bi-hash"></i></span>
                            <input type="number" class="form-control" id="group_id" placeholder="Например: 123456789"
                                step="1" min="0" value="{{ data.vk_settings.group_id if data.vk_settings else '' }}">
                        </div>
                        <div class="form-text small">
                            <i class="bi bi-info-circle me-1"></i>
                            Числовой ID вашего сообщества VK (без знака минус)
                        </div>
                    </div>

                    <!-- ID Базового фото -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-image vk-icon me-1"></i>ID Базового фото
                        </label>
                        <div class="input-group">
                            <span class="input-group-text bg-light"><i class="bi bi-image-alt"></i></span>
                            <input type="number" class="form-control" id="base_photo_url"
                                placeholder="Например: 12345689123" step="1" min="0"
                                value="{{ data.vk_settings.base_photo_url if data.vk_settings else '' }}">
                        </div>
                        <div class="form-text small">
                            <i class="bi bi-info-circle me-1"></i>
                            ID фото в формате: <code>photo_id</code>
                        </div>
                    </div>

                    <!-- Кнопки действий -->
                    <div class="d-flex gap-3 pt-3 border-top">
                        <button type="button" class="btn btn-outline-secondary" onclick="resetForm()">
                            <i class="bi bi-x-lg me-1"></i>Сбросить
                        </button>
                        <button type="button" class="btn btn-primary" onclick="saveVkSettings()" id="saveButton">
                            <i class="bi bi-save me-1"></i>Сохранить настройки
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Информация о текущих настройках -->
        {% if data.vk_settings %}
        <div class="card mt-4 fade-in">
            <div class="card-header bg-success bg-opacity-10 text-success">
                <h6 class="mb-0"><i class="bi bi-check-circle me-2"></i>Текущие настройки</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h6 class="card-title"><i class="bi bi-key me-2"></i>Access Token</h6>
                                <p class="card-text small text-truncate" id="tokenPreview">
                                    {{ data.vk_settings.access_token[:25] }}...
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h6 class="card-title"><i class="bi bi-people me-2"></i>ID сообщества</h6>
                                <p class="card-text">-{{ data.vk_settings.group_id }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h6 class="card-title"><i class="bi bi-image me-2"></i>ID Базового фото</h6>
                                <p class="card-text">photo-{{ data.vk_settings.group_id }}_{{
                                    data.vk_settings.base_photo_url }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Контейнер для уведомлений -->
<div id="alertContainer" class="alert-fixed"></div>
{% endblock %}

{% block scripts %}
<script>
    const pageData = {{ data | tojson }};
</script>
<script src="/static/js/vk.js"></script>
{% endblock %}