{% extends "base.html" %}

{% block title %}Менеджер аккаунтов{% endblock %}

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


{% block content %}
<div class="proxy-container">
    <div class="header-section">
        <div class="table-controls">
            <div class="account-folder-selector">
                <div class="folder-indicator" id="folder-indicator"></div>
                
                <button class="account-folder-btn active" id="all-folder">
                    <div class="account-count" data-count="0">0</div>
                    <div class="account-label">Все аккаунты</div>
                    <div class="active-indicator"></div>
                </button>
                <button class="account-folder-btn" id="working-folder">
                    <div class="account-count" data-count="0">0</div>
                    <div class="account-label">Для работы</div>
                    <div class="active-indicator"></div>
                </button>
                <button class="account-folder-btn" id="archive-folder">
                    <div class="account-count" data-count="0">0</div>
                    <div class="account-label">Архив</div>
                    <div class="active-indicator"></div>
                </button>
                <button class="account-folder-btn" id="no-spam-folder">
                    <div class="account-count" data-count="0">0</div>
                    <div class="account-label">Живые</div>
                    <div class="active-indicator"></div>
                </button>
                <button class="account-folder-btn" id="with-spam-folder">
                    <div class="account-count" data-count="0">0</div>
                    <div class="account-label">Мертвые</div>
                    <div class="active-indicator"></div>
                </button>
            </div>
            <div class="controls-group">
                <button class="control-button delete-selected" data-tooltip="Удалить выбранное" onclick="deleteSelected()">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                </button>
                <button class="control-button add-new" id="add-account-btn" data-tooltip="Добавить аккаунты" onclick="showAddAccountForm()">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                </button>
            </div>
        </div>
    </div>

    <table id="accounts-table" class="proxy-table">
        <thead>
            <tr>
                <th><input type="checkbox" id="select-all-checkbox"></th>
                <th>№</th>
                <th>Телефон</th>
                <th>Гео</th>
                <th>Роль</th>
                <th>Имя</th>
                <th>Фамилия</th>
                <th>Статус</th> 
                <th>Разное</th>
            </tr>
        </thead>
        <tbody id="accounts-table-body">
            
        </tbody>
    </table>
</div>

<div id="selection-actions" class="selection-actions">
    <div class="action-icons-group">
      <button class="action-btn" data-tooltip="Проверить аккаунты" onclick="runAccountChecker()">
        <i class="fa-solid fa-bolt"></i>
      </button>
      <button class="action-btn" data-tooltip="Изменить роль" onclick="changeRole()">
        <i class="fa-solid fa-tags"></i>
      </button>
      <button class="action-btn" data-tooltip="Переместить аккаунты" onclick="moveAccounts()">
        <i class="fa-solid fa-compass"></i>
      </button>
    </div>
  
    <button class="action-button" id="action-menu-button" onclick="toggleActionMenu(event)">
      Выбрать действие
    </button>
</div>
  

<div id="action-menu" class="action-menu">
    <button class="action-menu-item" onclick="runAccountChecker()">
        <i class="fa-solid fa-bolt"></i> Проверить аккаунты
    </button>
    <button class="action-menu-item" onclick="openInWeb()">
        <img src="static/images/web.png" alt="Открыть в вебе" class="menu-icon" /> Открыть в вебе
    </button>
    <button class="action-menu-item" onclick="changePassword()">
        <i class="fa-solid fa-lock"></i> Изменить пароль
    </button>
    <button class="action-menu-item" onclick="window.location='/post_profile'">
        <i class="fa-solid fa-user"></i> Изменить профиль
    </button>
    <button class="action-menu-item" onclick="moveAccounts()">
        <img src="static/images/move.png" alt="Переместить аккаунты" class="menu-icon" /> Переместить аккаунты
    </button>
    <button class="action-menu-item" onclick="changeRole()">
        <i class="fa-solid fa-tag"></i> Изменить роль
    </button>
        <button class="action-menu-item" onclick="showCleanAccountModal()">
        <i class="fa-solid fa-broom"></i> Чистка аккаунта
    </button>
</div>


<div id="clean-account-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeCleanAccountModal()">&times;</span>
        <h2>Чистка аккаунта</h2>
        <p>Выберите элементы для удаления:</p>
        <div class="clean-options">
            <label class="checkbox-container">
                <input type="checkbox" id="clean-avatars" checked>
                <span class="checkmark"></span>
                Все аватарки
            </label>
            <label class="checkbox-container">
                <input type="checkbox" id="clean-posts" checked>
                <span class="checkmark"></span>
                Все посты
            </label>
            <label class="checkbox-container">
                <input type="checkbox" id="clean-photos" checked>
                <span class="checkmark"></span>
                Все фото
            </label>
            <label class="checkbox-container">
                <input type="checkbox" id="clean-descriptions" checked>
                <span class="checkmark"></span>
                Описания
            </label>
            <label class="checkbox-container">
                <input type="checkbox" id="clean-birthdate" checked>
                <span class="checkmark"></span>
                Дату рождения
            </label>
            <label class="checkbox-container">
                <input type="checkbox" id="clean-media" checked>
                <span class="checkmark"></span>
                Музыку и видео
            </label>
            <label class="checkbox-container">
                <input type="checkbox" id="clean-friends" checked>
                <span class="checkmark"></span>
                Друзей
            </label>
        </div>
        <div class="modal-actions">
            <button class="btn-secondary" onclick="closeCleanAccountModal()">Отмена</button>
            <button class="btn-primary" onclick="performAccountCleaning()">Выполнить чистку</button>
        </div>
    </div>
</div

<div id="edit-photo-modal" class="modal">
    </div>
<div id="edit-first-name-modal" class="modal">
    </div>
<div id="edit-last-name-modal" class="modal">
    </div>
<!-- Обновленное модальное окно добавления аккаунтов -->
<div id="add-account-modal" class="modal-add">
    <div class="modal-content">
        <span class="close" onclick="closeAddAccountForm()">&times;</span>
        <h2>Добавление аккаунтов</h2>
        <div class="add-form">
            <textarea id="new-accounts" placeholder="Введите аккаунты в формате логин:пароль (каждый с новой строки)"></textarea>
            <button onclick="addNewAccounts()">Добавить</button>
        </div>
    </div>
</div>
{% endblock %}

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