{% 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-secondary">
                <i class="fas fa-arrow-left me-1"></i>{% trans "Back to Boards" %}
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Global App Settings -->
        <div class="col-md-12 mb-4">
            <div class="card shadow-sm border-0">
                <div class="card-header border-bottom-0 pt-4 pb-0">
                    <h5 class="card-title mb-0"><i class="fas fa-sliders-h me-2 text-primary"></i>{% trans "Global Settings" %}</h5>
                </div>
                <div class="card-body">
                    <form action="{% url 'aa_kanban:update_global_settings' %}" method="post" class="d-flex flex-column flex-md-row align-items-md-end gap-3">
                        {% csrf_token %}
                        <div class="flex-grow-1">
                            <label for="ticketBoardSelect" class="form-label">{% trans "Ticket Boards" %}</label>
                            <select name="ticket_board_ids" id="ticketBoardSelect" class="form-select" multiple size="4">
                                {% for board in boards %}
                                    <option value="{{ board.id }}" {% if board in settings.ticket_boards.all %}selected{% endif %}>
                                        {{ board.name }}
                                    </option>
                                {% endfor %}
                            </select>
                            <div class="form-text">{% trans "Select one or more boards where member-submitted tickets can appear. Use Ctrl/Cmd + click to select multiple." %}</div>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>{% trans "Save Settings" %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card shadow-sm border-0">
                <div class="card-header 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 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 class="row mt-4">
        <div class="col-md-4 mb-4">
            <div class="card shadow-sm border-0">
                <div class="card-header border-bottom-0 pt-4 pb-0">
                    <h5 class="card-title mb-0"><i class="fas fa-tag me-2 text-primary"></i>{% trans "Create Label" %}</h5>
                </div>
                <div class="card-body">
                    <form hx-post="{% url 'aa_kanban:create_settings_label' %}" hx-target="#label-list-container" hx-swap="innerHTML" class="d-flex flex-column gap-3">
                        {% csrf_token %}
                        <div>
                            <label for="labelName" class="form-label">{% trans "Label Name" %}</label>
                            <input type="text" class="form-control form-control-sm" id="labelName" name="name" required placeholder="e.g. Bug">
                        </div>
                        <div>
                            <label for="labelColor" class="form-label">{% trans "Color" %}</label>
                            <select name="color" id="labelColor" class="form-select form-select-sm" required>
                                <option value="primary" class="text-primary">Primary (Blue)</option>
                                <option value="secondary" class="text-secondary">Secondary (Grey)</option>
                                <option value="success" class="text-success">Success (Green)</option>
                                <option value="danger" class="text-danger">Danger (Red)</option>
                                <option value="warning" class="text-warning">Warning (Yellow)</option>
                                <option value="info" class="text-info">Info (Light Blue)</option>
                                <option value="dark" class="text-body">Dark (Black)</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm" onclick="setTimeout(() => { document.getElementById('labelName').value = ''; }, 100)">
                            <i class="fas fa-plus me-1"></i>{% trans "Add Label" %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-8">
            <div class="card shadow-sm border-0">
                <div class="card-header 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-tags me-2 text-primary"></i>{% trans "Global Labels" %}</h5>
                </div>
                <div class="card-body">
                    <div id="label-list-container">
                        {% include "aa_kanban/partials/settings_label_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 %}