{% extends "base.j2" %}

{% block title %}
PaperParser: Парсинг
{% endblock title %}

{% block main %}
<div class="container">
    <!-- Actions -->
    <section id="actions-section" class="mb-3">
        <div class="separator">
            <h2>Действия</h2>
            <hr class="divider">
        </div>
        <section id="actions-parse-add-section">
            <label for="" class="form-label">Парсинг пользователей и добавление в группу</label>
            <div class="row row-cols-1 row-cols-sm-2">
                <div class="col mb-3">
                    <form hx-post="/api/users/parse/{{session_id}}" hx-swap="innerHTML" hx-target="#cards-grid" hx-indicator="#loading-spinner" class="input-group" id="group-from-form">
                        <div class="form-floating">
                            <input type="text" class="form-control" name="group" id="group-from-input"
                                placeholder="Группа для парсинга">
                            <label for="group-from-input">Группа для парсинга</label>
                        </div>
                        <button type="submit" class="btn btn-outline-primary">Спарсить</button>
                    </form>
                </div>
                <div class="col mb-3">
                    <form hx-post="/api/tasks/session/{{session_id}}" hx-swap="none" hx-indicator="#loading-spinner" class="input-group" id="group-to-form">
                        <div class="form-floating">
                            <input type="text" name="url" class="form-control" id="group-to-input"
                                placeholder="Группа, в которую нужно добавить">
                            <label for="group-to-input">Группа для добавления</label>
                        </div>
                        <button type="submit" name="task" value="add" class="btn btn-outline-secondary">Добавить</button>
                    </form>
                </div>
            </div>
        </section>

        <section id="actions-message-section">
            <form hx-post="/api/tasks/session/{{session_id}}" hx-swap="none" hx-indicator="#loading-spinner" id="message-form">
                <label for="" class="form-label">Сообщение для пользователей</label>
                <div class="row row-cols-1 row-cols-sm-2">
                    <div class="col">
                        <div class="mb-3">
                            <textarea class="form-control" name="message" rows="8" id="message-textarea"
                                placeholder="Напишите здесь своё сообщение"></textarea>
                        </div>
                    </div>
                    <div class="col">
                        <div class="mb-3">
                            <label for="formFile" class="form-label">Выберите изображение</label>
                            <input class="form-control" name="file" type="file" id="picture-file-input">
                        </div>
                        <div class="mb-3">
                            <button type="submit" name="task" value="message" class="btn btn-outline-primary" style="width: 100%;">
                                Отправить сообщение
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </section>
    </section>

    <!-- Users -->
    <section id="users-section" class="mb-3">
        <div id="separator">
            <div class="d-flex justify-content-between">
                <div class="d-flex gap-2 align-items-center">
                    <h2 style="margin-bottom: 0;">Пользователи</h2>
                    <div class="spinner-container htmx-indicator" id="loading-spinner">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
                <div>
                    <button class="btn btn-outline-primary disabled" onClick="exportToCSV()">Экспорт</button>
                    <button 
                        class="btn btn-outline-danger"
                        hx-delete="/api/users/{{session_id}}"
                        hx-swap="innerHTML"
                        hx-target="#cards-grid"
                        hx-confirm="Вы уверены, что хотите удалить пользователей для этой сессии?"
                        hx-indicator="#loading-spinner"
                    >
                        Удалить
                    </button>
                </div>

            </div>
            <hr class="divider">
        </div>
        <div id="cards-grid" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
            {{ users_template }}
        </div>
    </section>
</div>
{% endblock main %}