{% extends "allianceauth/base-bs5.html" %}
{% load static %}
{% load i18n %}

{% block page_title %}{% translate "Available Groups" %}{% endblock page_title %}
{% block header_nav_brand %}{% translate "Available Groups" %}{% endblock header_nav_brand %}

{% if manager_perms %}
{% block header_nav_collapse_left %}
<li class="nav-item">
    <a class="nav-link" href="{% url 'groupmanagement:management' %}">{% translate "Group Management" %}
        {% if req_count %}
            <span class="badge bg-secondary">{{ req_count }}</span>
        {% endif %}
    </a>
</li>
{% endblock %}
{% endif %}
{% block content %}
    {% if groups %}
        <table class="table" id="groupsTable" >
            <thead>
                <tr>
                    <th>{% translate "Name" %}</th>
                    <th>{% translate "Description" %}</th>
                    <th>{% translate "Leaders" %}<span class="m-1 fw-lighter badge bg-primary">{% translate "User" %}</span><span class="m-1 fw-lighter badge bg-secondary ">{% translate "Group" %}</span></th>
                    <th></th>
                </tr>
            </thead>

            <tbody class>
                {% for g in groups %}
                    <tr>
                        <td>{{ g.group.name }}</td>
                        <td>{{ g.group.authgroup.description|linebreaks|urlize }}</td>
                        <td style="max-width: 30%;">
                            {% if g.group.authgroup.group_leaders.all.count %}
                                {% for leader in g.group.authgroup.group_leaders.all %}{% if leader.profile.main_character %}<span class="m-1 badge bg-primary">{{leader.profile.main_character}}</span>{% endif %}{% endfor %}
                            {% endif %}
                            {% if g.group.authgroup.group_leaders.all.count %}
                                {% for group in g.group.authgroup.group_leader_groups.all %}<span class="badge bg-secondary">{{group.name}}</span>{% endfor %}
                            {% endif %}
                        </td>
                        <td class="text-end">
                            {% if g.group in user_groups %}
                                {% if not g.request %}
                                    <a href="{% url 'groupmanagement:request_leave' g.group.id %}" class="btn btn-danger">
                                        {% translate "Leave" %}
                                    </a>
                                {% else %}
                                    <button type="button" class="btn btn-primary" disabled>
                                        {% translate "Pending" %}
                                    </button>
                                {% endif %}
                            {% elif not g.request %}
                                {% if g.group.authgroup.open %}
                                    <a href="{% url 'groupmanagement:request_add' g.group.id %}" class="btn btn-success">
                                        {% translate "Join" %}
                                    </a>
                                {% else %}
                                    <a href="{% url 'groupmanagement:request_add' g.group.id %}" class="btn btn-primary">
                                        {% translate "Request" %}
                                    </a>
                                {% endif %}
                            {% else %}
                                <button type="button" class="btn btn-primary" disabled>
                                    {% translate "Pending" %}
                                </button>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <div class="alert alert-warning text-center">
            {% translate "No groups available." %}
        </div>
    {% endif %}
{% endblock content %}
{% block extra_javascript %}
    {% include 'bundles/datatables-js-bs5.html' %}
{% endblock %}

{% block extra_css %}
    {% include 'bundles/datatables-css-bs5.html' %}
{% endblock %}

{% block extra_script %}
    $(document).ready(function () {
        $('#groupsTable').DataTable();
    });
{% endblock extra_script %}
