{% extends "base.j2" %}

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

{% block main %}
<form method="post" action="/test" class="container">
    <div class="row">
        <!-- Actions -->
        <section class="col-lg mb-3">
            <div class="separator">
                <h2>Действия</h2>
                <hr class="divider">
            </div>
            <nav class="mb-3">
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#actions-parse-section" type="button" role="tab" aria-controls="actions-parse-section" aria-selected="true">Сбор</button>
                    <button class="nav-link" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#actions-add-section" type="button" role="tab" aria-controls="actions-add-section" aria-selected="false">Добавление</button>
                    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#actions-message-section" type="button" role="tab" aria-controls="actions-message-section" aria-selected="false">Рассылка</button>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                
                <section class="tab-pane fade show active" id="actions-parse-section">
                        <div class="form-floating">
                            <input type="text" class="form-control" name="group" id="group-from-input" placeholder="Группа для парсинга">
                            <label for="group-from-input">Группа для парсинга</label>
                        </div>
                </section>
                
                <section class="tab-pane fade" id="actions-add-section">
                    <div class="form-floating">
                        <input type="text" name="url" class="form-control" id="group-to-input"
                            placeholder="Группа для добавлнеия">
                        <label for="group-to-input">Группа для добавления</label>
                    </div>
                </section>

                
                <section class="tab-pane fade" id="actions-message-section">
                        <div class="d-flex flex-column gap-3">
                            <div>
                                <textarea class="form-control" name="message" rows="8" id="message-textarea"
                                    placeholder="Напишите здесь своё сообщение"></textarea>
                            </div>
                            <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>
                </section>
            </div>
        </section>

        <section class="col-lg mb-3">
            <div class="separator">
                <h2>Настройки</h2>
                <hr class="divider">
            </div>

            <div class="mb-3 form-floating">
                <input
                    type="text"
                    class="form-control"
                    name="collection"
                    id="task-name-input"
                    placeholder="Название задачи"
                >
                <label for="task-name-input">Название задачи</label>
            </div>
            
            <section class="d-flex flex-column gap-3 mb-3">
                <div class="input-group">
                    <div class="form-floating">
                        <input
                            type="text"
                            class="form-control"
                            name="collection"
                            id="collection-name-input"
                            placeholder="Группа для парсинга"
                        >
                        <label for="collection-name-input">Название базы пользователей</label>
                    </div>
                    <button type="submit" class="btn btn-outline-primary">Добавить</button>
                </div>

                <select class="form-select flex-fill" size="3">
                    {% for collection in collections %}
                        <option value="{{collection.id}}">{{ collection.name }}</option>
                    {% endfor %}
                </select>
            </section>
            <button type="submit" class="w-100 btn btn-primary">Создать задачу</button>
        </section>
    </div>
</form>
{% endblock main %}

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