{% extends "base.html" %}
{% load static %}

{% block title %}Members · {{ project.name }}  · {{ site_title }}{% endblock %}

{% block content %}



<div class="flex items-center justify-center">

    <div class="m-4 max-w-4xl flex-auto">

        {% if messages %}
        <ul class="mb-4">
            {% for message in messages %}
                {# if we introduce different levels we can use{% message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %} #}
                <li class="bg-cyan-50 border-2 border-cyan-800 p-4 rounded-lg">{{ message }}</li>
            {% endfor %}
        </ul>
        {% endif %}

        <div class="flex">
            <h1 class="text-4xl mt-4 font-bold">Project Members</h1>

            <div class="ml-auto mt-6">
                <a class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 bg-cyan-200 hover:bg-cyan-400 active:ring rounded-md" href="{% url "project_members_invite" project_pk=project.pk %}">Invite Member</a>
            </div> 
        </div>

        <div>
          <form action="." method="post">
          {% csrf_token %}

          <table class="w-full mt-8">
          <tbody>
                <thead>
                <tr class="bg-slate-200">
                    <th class="w-full p-4 text-left text-xl" colspan="2">{{ project.name }}</th>
                </tr>

                {% for member in members %}
                <tr class="bg-white border-slate-200 border-b-2">
                <td class="w-full p-4">
                    <div>
                        <a href="{% url "project_member_settings" project_pk=project.pk user_pk=member.user_id %}" class="text-xl text-cyan-500 font-bold">{{ member.user.email }}</a>  {# "best name" perhaps later? #}
                        {% if not member.accepted %}
                        <span class="bg-slate-100 rounded-2xl px-4 py-2 ml-2 text-sm">Invitation pending</span>
                        {% elif member.is_admin %} {# NOTE: we intentionally hide admin-ness for non-accepted users #}
                        <span class="bg-cyan-100 rounded-2xl px-4 py-2 ml-2 text-sm">Admin</span>
                        {% endif %}
                    </div>
                </td>

                <td class="p-4">
                    <div class="flex justify-end">
                        {% if not member.accepted %}
                            <button name="action" value="reinvite:{{ member.user_id }}" class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 ml-2 border-2 hover:bg-slate-200 active:ring rounded-md">Reinvite</button>
                        {% endif %}
                        {% if request.user == member.user %}
                            <button name="action" value="remove:{{ member.user_id }}" class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 ml-2 border-2 hover:bg-slate-200 active:ring rounded-md">Leave</button>
                        {% else %}  {# NOTE: in our setup request_user_is_admin is implied because only admins may view the membership page #}
                            <button name="action" value="remove:{{ member.user_id }}" class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 ml-2 border-2 hover:bg-slate-200 active:ring rounded-md">Remove</button>
                        {% endif %}
                    </div> 
                </td>

                </tr>
                {% empty %}
                <tr class="bg-white border-slate-200 border-b-2">
                <td class="w-full p-4">
                    <div>
                        {# Note: this is already somewhat exceptional, because the usually you'll at least see yourself here (unless you're a superuser and a project has become memberless) #}
                        No members yet. <a href="{% url "project_members_invite" project_pk=project.pk %}" class="text-cyan-500 font-bold">Invite someone</a>. 
                    </div>
                </td>
                </tr>

                {% endfor %}
            </tbody>
            </table>

            </form>
        </div>

    <div class="flex flex-direction-row">
        <div class="ml-auto py-8 pr-4">
            <a href="{% url "team_members" team_pk=project.team_id %}" class="text-cyan-500 font-bold">{{ project.team.name }} Members</a>
            <span class="font-bold text-slate-500">|</span> <a href="{% url "project_list" %}" class="text-cyan-500 font-bold">Back to Projects</a>
        </div>
    </div>
</div>

{% endblock %}
