{%- extends 'base.html' %}
{%- import 'ul_filter.html' as filter %}
{% block title %}{{ resource_type|capitalize }}{% endblock %}

{% block head %}
{{ filter }}
{% endblock %}


{%- block body %}
<div class="filters">
    <div class="version-filter">
        <h5>Display Envoy Version</h5>
        <ul id="versions">
            {% for v in available_versions %}
            <li class="{% if v == version %}active{% else %}inactive{% endif %}">
                <a href="/ui/set-version?version={{ v }}">{{ v.replace('_', '') }}</a>
            </li>
            {% endfor %}
        </ul>
    </div>
    <div class="cluster-filter">
        <h5>Filter by Service Cluster</h5>
        <ul id="versions">
            {% for cluster in available_service_clusters %}
            <li class="{% if cluster == service_cluster %}active{% else %}inactive{% endif %}">
                <a href="/ui/set-service-cluster?service_cluster={{ cluster }}">{{ cluster.replace('*', 'any') }}</a>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

<h1>{{ resource_type|capitalize }}</h1>
<label for="search_filter">
    <input
            type="text"
            id="search_filter"
            onkeyup="filter_results('search_filter', 'resources')"
            placeholder="Filter resources by any string"
    >
</label>

{% set res = resources|selectattr('get')|list %}
{% set count = res|length %}
{% set plural = {
    0: 'resources',
    1: 'resource'
} %}
<span style="font-family: monospace; color: grey;">{{ count }} {{ plural.get(count, 'resources') }}</span>
<ul id="resources">
  {% for resource in res %}
      {% set name = resource.get('name') or resource['cluster_name'] %}
    <li id="resources">
        <a href="/ui/resources/{{ resource_type }}/{{ name }}">
            <strong>{{ name }}</strong>
        </a>
    </li>
  {% endfor %}
</ul>

{% if resource_type == 'routes' %}
    <h3>Virtual Hosts</h3>
    <label for="search_filter">
        <input
                type="text"
                id="search_filter_virtual_hosts"
                onkeyup="filter_results('search_filter_virtual_hosts', 'resources_virtual_hosts')"
                placeholder="Filter resources by any string"
        >
    </label>
    {% for resource in res %}
        <span style="font-family: monospace; color: grey;">Route configuration: "{{ resource.get('name') }}" ({{ resource['virtual_hosts']|length }} resources)</span>
        <ul id="resources_virtual_hosts">
        {% for virtualhost in resource['virtual_hosts'] %}
            <li id="resources_virtual_hosts">
                <a href="/ui/resources/routes/{{ resource['name'] }}/{{ virtualhost['name'] }}">
                    <strong>{{ virtualhost['name'] }}</strong>
                </a>
            </li>
        {% endfor %}
        </ul>
    {% endfor %}
{% endif %}
{% endblock -%}
