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

{% block title %}Invite Members · {{ team.name }}  · {{ site_title }}{% endblock %}

{% block content %}



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

    <div class="m-4 max-w-4xl flex-auto">
        <form action="." method="post">
        {% csrf_token %}

        {% if messages %}
        <ul>
            {% 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>
            <h1 class="text-4xl mt-4 font-bold">Invite members ({{ team.name }})</h1>
        </div>

        <div class="mt-4 mb-4">
            Invite a member to join the team "{{ team.name }}". They will receive an email with a link to join.
        </div>

        {% tailwind_formfield_implicit form.email %}

        <div class="text-lg ml-1 mb-8">  {# ml-1 is strictly speaking not aligned, but visually it looks better "to me"; perhaps because of all of the round elements? #}
            <div class="text-slate-800 font-bold">{{ form.role.label }}</div>
            <div class="flex items-center">
                {{ form.role }}

            </div>
            {% if form.role.errors %}
            {% for error in form.role.errors %}
                <div class="text-red-500 pt-1 px-2 text-sm">{{ error }}</div>
            {% endfor %}
            {% elif form.role.help_text %}
                <div class="text-gray-500 pt-1 px-2 text-sm">{{ form.role.help_text|safe }}</div>
            {% endif %}
        </div>

        <button name="action" value="invite" class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 border-2 bg-cyan-200 hover:bg-cyan-400 active:ring rounded-md">Invite Member</button>
        <button name="action" value="invite_and_add_another" 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">Invite and add another</button>
        <a href="{% url "team_members" team_pk=team.pk %}" class="font-bold text-slate-500 ml-4">Cancel</a>

        </form>

    </div>
</div>

{% endblock %}
