{% extends 'base.html' %}
{% load i18n fontawesome_5 %}

{% block head %}

    {% comment %}
        dal documentation (django-autocomplete-light) states using form.media for adding needed scripts.
        This does not work properly with modal forms, as the scripts are not loaded properly inside the modal.
        Therefore the script linkages from form.media have been extracted and put inside dal/scripts.html to ensure
        these scripts are loaded when needed.
    {% endcomment %}
    {% include 'dal/scripts.html' %}
{% endblock %}

{% block body %}
<div class="container">
    <div class="col-md">
        <h4>{% trans 'Teams' %}</h4>
        <button class="btn rlp-r btn-modal" data-form-url="{% url 'user:team-new' %}" title="{% trans 'Add new team' %}">
            {% fa5_icon 'plus' %}
            {% trans 'New' %}
        </button>
    </div>
    <div class="table-container">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col" class="align-middle">{% trans 'Name' %}</th>
                    <th scope="col" class="align-middle w-20">{% trans 'Description' %}</th>
                    <th scope="col" class="align-middle">{% trans 'Members' %}</th>
                    <th scope="col" class="align-middle">{% trans 'Administrator' %}</th>
                    <th scope="col" class="align-middle">{% trans 'Action' %}</th>
                </tr>
            </thead>
            <tbody>
                {% for team in teams %}
                    <tr>
                        <td>{{team.name}}</td>
                        <td>
                            <div class="scroll-150">
                                {{team.description}}
                            </div>
                        </td>
                        <td>
                            {% for member in team.users.all %}
                                <span class="badge badge-pill rlp-r">{{member.username}}</span>
                            {% endfor %}
                        </td>
                        <td>
                            {% for admin in team.admins.all %}
                                <span class="badge badge-pill rlp-r">{{admin.username}}</span>
                            {% endfor %}
                        </td>
                        <td>
                            <button class="btn rlp-r btn-modal" data-form-url="{% url 'user:team-leave' team.id %}" title="{% trans 'Leave team' %}">
                                {% fa5_icon 'sign-out-alt' %}
                            </button>
                            {% if user in team.admins.all  %}
                                <button class="btn rlp-r btn-modal" data-form-url="{% url 'user:team-edit' team.id %}" title="{% trans 'Edit team' %}">
                                    {% fa5_icon 'edit' %}
                                </button>
                                <button class="btn rlp-r btn-modal" data-form-url="{% url 'user:team-remove' team.id %}" title="{% trans 'Remove team' %}">
                                    {% fa5_icon 'trash' %}
                                </button>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% with 'btn-modal' as btn_class %}
    {% include 'modal/modal_form_script.html' %}
{% endwith %}

{% endblock %}