{% extends "base.html" %}
{% import "_macros.html" as ui %}
{% block title %}Manage machines · Lab RDP{% endblock %}
{% block page %}manage{% endblock %}
{% block content %}
<script>
  // Before the table draws, so hidden columns never flash.
  (function () {
    var hidden = {{ default_hidden|tojson }};
    try {
      var saved = localStorage.getItem("labrdp-manage-hidden");
      if (saved) { hidden = JSON.parse(saved); }
    } catch (e) {}
    var style = document.createElement("style");
    style.id = "column-style";
    style.textContent = hidden.filter(function (key) { return /^[a-z_]+$/.test(key); })
      .map(function (key) { return '[data-col="' + key + '"]{display:none}'; }).join("");
    document.head.appendChild(style);
    window.labrdpHiddenColumns = hidden;
    window.labrdpDefaultHidden = {{ default_hidden|tojson }};
  })();
</script>

<header class="page-head">
  <div>
    <h1>Manage machines</h1>
    <p class="sub">Add, change and remove lab PCs. Click any cell to edit it, or select rows to change many at once.</p>
  </div>
  <div class="actions">
    <a class="btn btn-ghost" href="/manage/export.csv">{{ icon('download', 15) }}Export CSV</a>
    <a class="btn btn-ghost" href="/machines/import" hx-get="/machines/import" hx-target="#drawer-body" hx-swap="innerHTML">{{ icon('upload', 15) }}Import CSV</a>
    <a class="btn btn-primary" href="/machines/new" hx-get="/machines/new" hx-target="#drawer-body" hx-swap="innerHTML">{{ icon('plus', 15) }}Add machine</a>
  </div>
</header>

<form id="manage-filters" class="toolbar" onsubmit="return false"
      hx-get="/manage/rows" hx-target="#manage-rows" hx-swap="innerHTML" hx-trigger="change, input changed delay:250ms from:#mq">
  <div class="search">
    {{ icon('search', 15) }}
    <input id="mq" type="search" name="q" value="{{ params.q }}" placeholder="Search every detail" 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="firewall" aria-label="Firewall">
    <option value="">Any firewall</option>
    <option value="issues" {{ 'selected' if params.firewall == 'issues' }}>Firewall issues</option>
  </select>
  <div class="seg" role="radiogroup" aria-label="Status">
    <label><input type="radio" name="status" value="all" {{ 'checked' if params.status == 'all' }}>All <em id="count-all">{{ counts.all }}</em></label>
    <label><input type="radio" name="status" value="active" {{ 'checked' if params.status == 'active' }}>Active <em id="count-active">{{ counts.active }}</em></label>
    <label><input type="radio" name="status" value="maintenance" {{ 'checked' if params.status == 'maintenance' }}>Maintenance <em id="count-maintenance">{{ counts.maintenance }}</em></label>
    <label><input type="radio" name="status" value="retired" {{ 'checked' if params.status == 'retired' }}>Retired <em id="count-retired">{{ counts.retired }}</em></label>
  </div>
  <button type="button" class="btn btn-ghost" style="margin-left:auto" data-columns-open aria-haspopup="true">{{ icon('columns', 15) }}Columns</button>
</form>

<div class="panel grid-wrap">
  <table class="t grid">
    <thead>
      <tr>
        <th class="pick"><input type="checkbox" data-select-all aria-label="Select all"></th>
        <th data-col="hostname" data-sort="hostname">Hostname</th>
        {% for c in columns %}<th data-col="{{ c.key }}" data-sort="{{ c.key }}">{{ c.label }}</th>{% endfor %}
        <th class="row-actions" aria-label="Actions"></th>
      </tr>
    </thead>
    <tbody id="manage-rows" hx-get="/manage/rows" hx-include="#manage-filters" hx-trigger="labrdp-changed from:body" hx-swap="innerHTML" hx-headers='{"X-Background": "1"}'>
      {% include "manage/_rows.html" %}
    </tbody>
  </table>
</div>
<p class="grid-foot soft"><span id="manage-count"></span> · Enter saves and moves down, Tab moves across, Esc cancels.</p>

<div hx-get="/manage/live" hx-include="#manage-filters" hx-trigger="every 8s, labrdp-changed from:body" hx-swap="none" hx-headers='{"X-Background": "1"}'></div>
{% endblock %}

{% block dialogs %}
<div id="columns-menu" class="popmenu columns-menu" hidden>
  <div class="columns-grid">
    {% for group in groups %}
    <div>
      <h3>{{ group }}</h3>
      {% for c in columns if c.group == group %}
      <label><input type="checkbox" data-col-toggle="{{ c.key }}">{{ c.label }}</label>
      {% endfor %}
    </div>
    {% endfor %}
  </div>
  <div class="columns-foot">
    <button type="button" class="btn-link" data-columns-all>Show all</button>
    <button type="button" class="btn-link" data-columns-reset>Reset</button>
  </div>
</div>

<div id="selbar" class="selbar" hidden>
  <span data-selbar-count></span>
  <span class="selbar-sep"></span>
  <button type="button" class="selbar-btn" data-bulk-edit>{{ icon('pencil', 14) }}Change a field</button>
  <button type="button" class="selbar-btn" data-bulk="check">{{ icon('shield-check', 14) }}Check firewall</button>
  <button type="button" class="selbar-btn" data-bulk="push">{{ icon('shield', 14) }}Push rule</button>
  <button type="button" class="selbar-btn" data-bulk="retire">{{ icon('archive', 14) }}Retire</button>
  <button type="button" class="selbar-btn" data-bulk="reactivate">{{ icon('check', 14) }}Put back</button>
  <button type="button" class="selbar-btn" data-bulk-export>{{ icon('download', 14) }}Export</button>
  <span class="selbar-sep"></span>
  <button type="button" class="btn btn-danger btn-sm" data-selbar-delete>{{ icon('trash', 14) }}Delete</button>
  <button type="button" class="icon-btn selbar-x" data-selbar-clear aria-label="Clear selection">{{ icon('x', 15) }}</button>
</div>

<dialog id="bulk-edit-dialog" class="modal" aria-labelledby="bulk-title">
  <div class="modal-head">
    <span class="modal-icon info">{{ icon('pencil', 18) }}</span>
    <h2 id="bulk-title" data-bulk-title></h2>
  </div>
  <div class="stack" style="margin-top:6px">
    <label class="field">
      <span class="field-label">Field</span>
      <select data-bulk-field>
        {% for c in bulk_fields %}<option value="{{ c.key }}">{{ c.label }}</option>{% endfor %}
      </select>
    </label>
    <label class="field" data-bulk-text>
      <span class="field-label">New value</span>
      <input data-bulk-value placeholder="Leave empty to clear it">
    </label>
    <label class="field" data-bulk-select hidden>
      <span class="field-label">New value</span>
      <select data-bulk-option>
        <option value=""></option>
        {% for c in connection_types %}<option>{{ c }}</option>{% endfor %}
      </select>
    </label>
  </div>
  <div class="notice bad" data-bulk-error hidden></div>
  <div class="modal-foot">
    <button type="button" class="btn btn-ghost" data-close-dialog>Cancel</button>
    <button type="button" class="btn btn-primary" data-bulk-apply>Apply</button>
  </div>
</dialog>
{% endblock %}