{% extends "base_site.html" %}
{% load staticfiles %}
{% block title %}Areas{% endblock %}

{% block extrahead %}{{ block.super }}
    <script src="{% static 'secr/js/utils.js' %}"></script>
{% endblock %}

{% block breadcrumbs %}{{ block.super }}
    &raquo; Areas
{% endblock %}

{% block content %}

    <div class="module">
        <h2>Areas</h2>
        <table id="areas-list-table" class="full-width">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Acronym</th>
                    <th scope="col">Status</th>
                </tr>
            </thead>
            <tbody>
                {% for item in results %}
                    <tr class="{% cycle 'row1' 'row2' %} {{ item.state|lower }}">
                        <td><a href="{% url "ietf.secr.areas.views.view" name=item.acronym %}">{{ item.name }}</a></td>
                        <td>{{ item.acronym }}</td>
                        <td>{{ item.state }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        <div class="button-group">
            <ul id="areas-button-list">
            </ul>
        </div> <!-- button-group -->
    </div> <!-- module -->

{% endblock %}