{% extends "base.html" %}
{% import "_macros.html" as ui %}
{% block title %}Machines · Lab RDP{% endblock %}
{% block page %}machines{% endblock %}
{% block content %}
{% if relay_error %}<div class="notice bad">{{ icon('alert', 15) }}<span>{{ relay_error }}</span></div>{% endif %}
<header class="page-head">
  <div>
    <h1>Machines</h1>
    <p class="sub">Pick a free machine and connect.</p>
  </div>
  {% if current_user.is_admin %}
  <div class="actions">
    <a class="btn btn-ghost" href="/manage">{{ icon('server', 15) }}Manage machines</a>
  </div>
  {% endif %}
</header>

{% include "machines/_stats.html" %}

<form id="filters" class="toolbar" onsubmit="return false"
      hx-get="/machines/table" hx-target="#machines" hx-trigger="change, input changed delay:250ms from:#q">
  <div class="search">
    {{ icon('search', 15) }}
    <input id="q" type="search" name="q" value="{{ params.q }}" placeholder="Search host, IP, serial, build or user" aria-label="Search">
  </div>
  <select name="team" aria-label="Team">
    <option value="">All teams</option>
    {% for v in facets.teams %}<option {{ 'selected' if params.team == v }}>{{ v }}</option>{% endfor %}
  </select>
  <select name="location" aria-label="Location">
    <option value="">All locations</option>
    {% for v in facets.locations %}<option {{ 'selected' if params.location == v }}>{{ v }}</option>{% endfor %}
  </select>
  <select name="platform" aria-label="Target platform">
    <option value="">All platforms</option>
    {% for v in facets.platforms %}<option {{ 'selected' if params.platform == v }}>{{ v }}</option>{% endfor %}
  </select>
  <select name="status" aria-label="Status">
    <option value="">In service</option>
    {% for v in facets.statuses %}<option value="{{ v }}" {{ 'selected' if params.status == v }}>{{ v|capitalize }}</option>{% endfor %}
  </select>
  <div class="seg" role="radiogroup" aria-label="Availability">
    <label><input type="radio" name="availability" value="" {{ 'checked' if not params.availability }}>All</label>
    <label><input type="radio" name="availability" value="free" {{ 'checked' if params.availability == 'free' }}>Free</label>
    <label><input type="radio" name="availability" value="in_use" {{ 'checked' if params.availability == 'in_use' }}>In use</label>
  </div>
  <input type="hidden" name="health" value="{{ params.health }}">
  <input type="hidden" name="firewall" value="{{ params.firewall }}">
  {% if filtered %}<a class="clear-link" href="/">Clear filters</a>{% endif %}
  <div class="seg" style="margin-left:auto" aria-label="View">
    <a class="{{ 'on' if view == 'cards' }}" href="/?view=cards{{ '&' ~ query if query }}" title="Cards" aria-label="Cards">{{ icon('grid', 15) }}</a>
    <a class="{{ 'on' if view == 'table' }}" href="/?view=table{{ '&' ~ query if query }}" title="Table" aria-label="Table">{{ icon('list', 15) }}</a>
  </div>
</form>

<div id="machines" hx-get="/machines/table" hx-include="#filters" hx-trigger="every 5s, labrdp-changed from:body"
     hx-headers='{"X-Background": "1"}'>
  {% include "machines/_grid.html" %}
</div>
{% endblock %}