{% extends 'dashboard/base.html' %}
{% load i18n %}
{% block content-header %}
    <h1>{% trans "Locations" %}</h1>
{% endblock %}
{% block content %}

    <a href="{% url 'add-sector' %}" class="btn btn-info btn-flat">{% trans "Add New" %}</a>
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">{% trans "Locations" %}</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body table-responsive">
            <div id="sectors_wrapper" class="dataTables_wrapper form-inline" role="grid">
                <div class="row">
                    <div class="col-xs-6"></div>
                    <div class="col-xs-6"></div>
                </div>
                <table id="sectors" class="table table-bordered table-hover dataTable"
                       aria-describedby="sectors_info">
                    <thead>
                    <tr role="row">
                        <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="sectors" rowspan="1"
                            colspan="1" aria-sort="ascending"
                            aria-label="Rendering engine: activate to sort column descending"> {% trans "ID" %}
                        </th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="sectors" rowspan="1"
                            colspan="1" aria-label="Browser: activate to sort column ascending">{% trans "Name" %}
                        </th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="sectors" rowspan="1"
                            colspan="1" aria-label="Platform(s): activate to sort column ascending">{% trans "City" %}
                        </th>
                    </tr>
                    </thead>

                    <tfoot>
                    <tr>
                        <th rowspan="1" colspan="1">{% trans "ID" %}</th>
                        <th rowspan="1" colspan="1">{% trans "Name" %}</th>
                        <th rowspan="1" colspan="1">{% trans "City" %}</th>
                    </tr>
                    </tfoot>
                    <tbody role="alert" aria-live="polite" aria-relevant="all">
                    {% for sector in object_list %}
                        <tr class="{% cycle 'even' 'odd' %}">
                            <td class="sorting_1"><a href="{% url 'update-sector' sector.id %}">{{ sector.id }}</a>
                            </td>
                            <td><a href="{% url 'update-sector' sector.id %}">{{ sector.name }}</a></td>
                            <td>{{ sector.city.name }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.box-body -->
    </div>

{% endblock %}