{% extends "aa_kanban/base.html" %}
{% load i18n %}

{% block page_title %}{% trans "Kanban Settings" %}{% endblock %}

{% block aa_kanban_content %}
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1"><i class="fas fa-cog me-2 text-secondary"></i>{% trans "Kanban Settings" %}</h2>
            <p class="text-muted mb-0">{% trans "Manage Kanban specific groups." %}</p>
        </div>
        <div>
            <a href="{% url 'aa_kanban:index' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>{% trans "Back to Boards" %}
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0 pt-4 pb-0">
                    <h5 class="card-title mb-0"><i class="fas fa-users-cog me-2 text-primary"></i>{% trans "Create Group" %}</h5>
                </div>
                <div class="card-body">
                    <form hx-post="{% url 'aa_kanban:create_group' %}" hx-target="#group-list-container" hx-swap="innerHTML" class="d-flex flex-column gap-3">
                        {% csrf_token %}
                        <div>
                            <label for="groupName" class="form-label">{% trans "Group Name" %}</label>
                            <input type="text" class="form-control" id="groupName" name="name" required placeholder="e.g. Kanban Marketing">
                        </div>
                        <button type="submit" class="btn btn-primary" onclick="setTimeout(() => { document.getElementById('groupName').value = ''; }, 100)">
                            <i class="fas fa-plus me-1"></i>{% trans "Create" %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-8">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0 pt-4 pb-0 d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0"><i class="fas fa-list me-2 text-primary"></i>{% trans "Existing Groups" %}</h5>
                </div>
                <div class="card-body">
                    <div id="group-list-container">
                        {% include "aa_kanban/partials/group_list.html" %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# Modal container for User Management #}
<div class="modal fade" id="groupUsersModal" tabindex="-1" aria-labelledby="groupUsersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" id="groupUsersModalBody">
            <div class="modal-body text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">{% trans "Loading..." %}</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}