{% extends "base_site.html" %}
{% load staticfiles %}
{% block title %}Areas - 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="../../">Areas</a>
    &raquo; <a href="../">{{ area.acronym }}</a>
    &raquo; People
{% endblock %}

{% block content %}

    <div class="module">
        <h2>Area Directors ({{ area.acronym }})</h2>
        <table class="center">
            {% for director in directors %}
                <form action="modify/" method="post">{% csrf_token %}
                    <input type="hidden" name="tag" value="{{ director.person.id }}">
                    <tr>
                        <td id="id-ad-name"><a href="#">{{ director.person.name }}</a></td>
                        <td>{% if director.name.slug == "ad" %}
                            Voting Enabled
                        {% else %}
                            <button type="submit" name="submit">Enable Voting</button></td>
                        {% endif %}
                            <td><button type="submit" name="submit">Retire</button></td>
                        </tr>
                    </form>
            {% endfor %}
        </table>

        <div class="inline-related">
            <h3><b>Add new Director</b></h3>
            <p>
                <form action="." method="post">{% csrf_token %}
                    <table class="center">
                        <tbody>
                        <!-- [html-validate-disable-block element-required-attributes -- FIXME: as_table renders without scope] -->
                        {{ form.as_table }}
                        <tr>
                            <td></td>
                            <td><button type="submit" name="submit">Add</button></td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div> <!-- iniline-related -->

            <div class="button-group">
                <ul>
                    <li><button type="button" onclick="history.go(-1);return true">Back</button></li>
                </ul>
            </div> <!-- button-group -->
        </div> <!-- module -->

{% endblock %}