{% extends "base_site.html" %}
{% load staticfiles %}

{% block title %}Groups - People{% endblock %}

{% block extrahead %}{{ block.super }}
    <link rel="stylesheet" href="{% static 'ietf/css/jquery-ui.css' %}">
    <script src="{% static 'ietf/js/jquery-ui.js' %}"></script>
    <script src="{% static 'secr/js/utils.js' %}"></script>
{% endblock %}

{% block breadcrumbs %}{{ block.super }}
    &raquo; <a href="../../">Groups</a>
    &raquo; <a href="../">{{ group.acronym }}</a>
    &raquo; People
{% endblock %}

{% block content %}

    <div class="module">
        <h2>People</h2>
        <table class="full-width">
            <thead>
                <tr>
                    <th scope="col">Role</th>
                    <th scope="col">Name</th>
                    <th scope="col">Email</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            {% if group.role_set.all %}
                <tbody>
                    {% for role in group.role_set.all %}
                        <tr class="{% cycle 'row1' 'row2' %}">
                            <td>{{ role.name }}</td>
                            <td>{{ role.person }}</td>
                            <td>{{ role.email }}</td>
                            <td><a href="{% url 'ietf.secr.groups.views.delete_role' acronym=group.acronym id=role.id %}">Delete</a></td>
                        </tr>
                    {% endfor %}
                </tbody>
            {% endif %}
        </table>

        <div class="inline-related">
            <!-- <hr><br> -->
            <h3>Add Role</h3>
            <form id="groups-people" method="post">{% csrf_token %}
                {{ form.non_field_errors }}
                {{ form.group_acronym }}
                <table class="full-width">
                    <tbody>
                    <tr>
                        <td>{{ form.name.errors }}<label for="{{ form.name.id_for_label }}" aria-label="Name"></label>{{ form.name }}</td>
                        <td>{{ form.person.errors }}<label for="{{ form.person.id_for_label }}" aria-label="Person"></label>{{ form.person }}{% if form.person.help_text %}<br>{{ form.person.help_text }}{% endif %}</td>
                        <td>{{ form.email.errors }}<label for="{{ form.email.id_for_label }}" aria-label="Email"></label>{{ form.email }}{% if form.email.help_text %}<br>{{ form.email.help_text }}{% endif %}</td>
                        <td><button type="submit" name="submit">Add</button></td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div> <!-- inline-related -->

        <div class="button-group">
            <ul>
                <li><button type="button" onclick="window.location='../'">Back</button></li>
            </ul>
        </div> <!-- button-group -->

    </div> <!-- module -->

{% endblock %}