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

{% block title %}State List | {{ parent() }}{% endblock %}

{% block body %}
    {# @var states \Knp\Component\Pager\Pagination\PaginatorInterface #}
    <h1>States</h1>
    <hr>
    <form method="GET">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <a class="btn btn-primary pull-right" href="{{ path('territory_dealer_list', { 'id' : territory.id }) }}">Dealers</a>
            </div>
            <div class="col-auto">
                <label for="stateFilterInput" class="sr-only">Search States</label>
                <input class="form-control" placeholder="Search States" type="text" id="stateFilterInput" name="filter" value="{% if app.request.get('filter') is not empty %}{{ app.request.get('filter') }}{% endif %}">
            </div>
        </div>
    </form>
    <hr>
    <h5>{{ states.getTotalItemCount }} States Found</h5>
    <div class="navigation">
        {{ knp_pagination_render(states) }}
    </div>
    <table class="table table-hover table-striped">
        <thead>
        <tr>
            <th>{{ knp_pagination_sortable(states, 'State', 'state.longName') }}</th>
            <th># of Postal Zones</th>
        </tr>
        </thead>
        <tbody>
        {% for state in states %}
            {# @var state \App\Entity\State #}
            {# TODO: add canadian states and separate here #}
            <tr>
                <td>
                    <a href="{{ path('territory_state_edit', { 'id' : territory.id, 'state' : state.id }) }}">
                        {{ state.longName }}: {{ state.postalCodePrefixes.first }} - {{ state.postalCodePrefixes.last }}
                    </a>
                </td>
                <td>{{ state.postalCodePrefixes|length }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <h5>{{ states.getTotalItemCount }} States Found</h5>
    <div class="navigation">
        {{ knp_pagination_render(states) }}
    </div>
{% endblock %}