{% extends 'base.html.twig' %}

{% block title %}{{ territory.name }} | View Territory | {{ parent() }}{% endblock %}

{% block body %}
    <h1><a href="{{ path('factory_territory_list') }}">Territories</a> > View: {{ territory.name }}</h1>
    <hr>
    <form method="GET">
        <div class="form-row align-items-center">
            <div class="col-auto"><a class="btn btn-primary" href="{{ path('factory_territory_edit', {'id' : territory.id}) }}">Edit This Territory</a>
            </div>
        </div>
    </form>
    <hr>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Active Dealers</a></li>
            <li><a href="#tabs-2">Prospective Dealers</a></li>
            <li><a href="#tabs-3">Inactive Dealers</a></li>
            <li><a href="#tabs-4">Area Representatives</a></li>
        </ul>
        <div id="tabs-1">
            {% include('factory_admin/territory/_active_dealers_table.html.twig') %}
        </div>
        <div id="tabs-2">
            {% include('factory_admin/territory/_prospective_dealers_table.html.twig') %}
        </div>
        <div id="tabs-3">
            {% include('factory_admin/territory/_inactive_dealers_table.html.twig') %}
        </div>
        <div id="tabs-4">
            {% include('factory_admin/territory/_area_representatives_table.html.twig') %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script>
        $(document).ready(function () {
            $("#tabs").tabs();
        });
    </script>
{% endblock %}