{% extends 'layouts/base.html' %}
{% block subtitle %}<p class="text-secondary">Read-only inventory navigation. Host variables and Vault values are not exposed.</p>{% endblock %}
{% block content %}<nav class="context-links" aria-label="Inventory views"><a href="{{ explorer_url(customer) }}">Inventory map &amp; outline</a><a href="/insights?customer={{ customer|urlencode }}">Playbook insights</a></nav><form class="filter-toolbar" method="get" action="/customers/{{ customer|urlencode }}/hosts" hx-get="/_partials/hosts" hx-target="#host-results">
<input type="hidden" name="customer" value="{{ customer }}">
<label for="search">Find hosts<input id="search" type="search" class="form-control" name="q" value="{{ q }}" placeholder="Hostname, address or group"></label>
<label for="group-filter">Group<select id="group-filter" class="form-select" name="group"><option value="">All groups</option>{% for g in groups %}<option {% if g == group %}selected{% endif %}>{{ g }}</option>{% endfor %}</select></label>
<label for="sort-hosts">Sort<select id="sort-hosts" name="sort" class="form-select">{% for v,label in [('name','Hostname'),('address','Address'),('group','Group')] %}<option value="{{ v }}" {% if v == sort %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></label>
<button type="submit" class="btn btn-outline-primary">Filter</button><a class="btn btn-primary" href="/plan?customer={{ customer|urlencode }}">Prepare selection</a></form>
<section class="card" id="host-results" aria-live="polite">{% include 'partials/hosts.html' %}</section>{% endblock %}