{% extends "base.html" %}
{% load url %}
{% load get_obj_perms from guardian_tags %}
{% load user_profile_link from profiles %}
{% load static %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a
                href="{% url 'challenges:list' %}">Challenges</a>
        </li>
        <li class="breadcrumb-item"><a
                href="{{ challenge.get_absolute_url }}">{% firstof challenge.title challenge.short_name %}</a></li>
        <li class="breadcrumb-item active"
            aria-current="page">Teams</li>
    </ol>
{% endblock %}

{% block content %}

    <h2>Teams</h2>

    <p>Teams are groups of users who compete together in a challenge.</p>

    {% if users_teams %}

        <p>You are already a member of the following teams: </p>

        <dl>
            {% for tm in users_teams %}
                <dt>Team</dt>
                <dd>
                    <a href="{{ tm.team.get_absolute_url }}">{{ tm.team.name }}</a>
                </dd>

                {% get_obj_perms user for tm.team as "team_perms" %}
                {% if "change_team" in team_perms %}
                    <dd>
                        <a href="{% url 'teams:update' challenge_short_name=challenge.short_name pk=tm.team.pk %}"
                           class="btn btn-primary">Edit
                            Team</a>
                        <form method="post"
                              action="{% url 'teams:delete' challenge_short_name=challenge.short_name pk=tm.team.pk %}">
                            {% csrf_token %}
                            <button type="submit"
                                    class="btn btn-danger">
                                Delete Team
                            </button>
                        </form>
                    </dd>
                {% else %}
                    <dd>
                        <form method="post"
                              action="{% url 'teams:member-delete' challenge_short_name=challenge.short_name pk=tm.pk %}">
                            {% csrf_token %}
                            <button type="submit"
                                    class="btn btn-danger">
                                Leave Team
                            </button>
                        </form>
                    </dd>
                {% endif %}
            {% endfor %}
        </dl>

        <p>You must leave these teams before you can join another team. The
            teams competing in {{ challenge.short_name }} are: </p>

    {% else %}

        <p>
            <a class="btn btn-primary"
               href="{% url 'teams:create' challenge_short_name=challenge.short_name %}">Create a new
                team for {{ challenge.short_name }}</a>
        </p>

        <p>Or, you can request to join an existing team: </p>

    {% endif %}


    <div class="table-responsive">
        <table class="table sortable table-hover table-borderless table-sm" id="teamsTable">
            <thead class="thead-light">
            <tr>
                <th>Team Name</th>
                <th>Team Members</th>
                {% if not users_teams %}
                    <th>Join Team</th>
                {% endif %}
            </tr>
            </thead>
            <tbody>
            {% for team in object_list %}
                <tr>
                    <td>
                        <a href="{{ team.get_absolute_url }}">{{ team.name }}</a>
                    </td>
                    <td>
                        {% for tm in team.teammember_set.all %}
                            {{ tm.user|user_profile_link }}<br/>
                        {% endfor %}
                    </td>
                    {% if not users_teams %}
                        <td>
                            <form method="post"
                                  action="{% url 'teams:member-create' challenge_short_name=challenge.short_name pk=team.pk %}">
                                {% csrf_token %}
                                <button type="submit"
                                        class="btn btn-xs btn-primary">
                                    Join Team
                                </button>
                            </form>

                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}

{% block script %}
    {{ block.super }}

    <script type="module" src="{% static "js/sort_tables.js" %}"></script>

{% endblock %}