{% extends "base.html" %}
{% block title %}Devices — rosbackup-ng{% endblock %}
{% block page_title %}Devices{% endblock %}
{% block head_actions %}
<div class="viewtoggle">
  <a class="seg{% if view != 'grid' %} active{% endif %}" href="/targets?view=table">Table</a>
  <a class="seg{% if view == 'grid' %} active{% endif %}" href="/targets?view=grid">Cards</a>
</div>
<a class="btn" href="/run">Run a backup</a>
<a class="btn primary" href="/targets/new">+ Add device</a>
{% endblock %}
{% import "_macros.html" as m %}
{% block content %}
<div class="card">
  <form class="filters stacked" id="tgt-filters" hx-get="/ui/targets/rows" hx-target="#targets-result"
        hx-swap="innerHTML" hx-trigger="change, keyup delay:300ms from:find input[name=q]">
    <input type="hidden" name="view" value="{{ view }}">
    <div class="filter-row">
      <select name="group">
        <option value="">All groups</option>
        {% for g in groups %}<option value="{{ g.name }}" {{ 'selected' if g.name == selected_group }}>{{ g.name }} ({{ g.count }})</option>{% endfor %}
      </select>
      <select name="tag">
        <option value="">All tags</option>
        {% for t in tags %}<option value="{{ t.name }}" {{ 'selected' if t.name == selected_tag }}>{{ t.name }} ({{ t.count }})</option>{% endfor %}
      </select>
      <select name="enabled">
        <option value="">All status</option>
        <option value="1" {{ 'selected' if selected_enabled == '1' }}>Enabled</option>
        <option value="0" {{ 'selected' if selected_enabled == '0' }}>Disabled</option>
        {% if latency_enabled %}
        <option value="online" {{ 'selected' if selected_enabled == 'online' }}>Online</option>
        <option value="offline" {{ 'selected' if selected_enabled == 'offline' }}>Offline</option>
        {% endif %}
      </select>
      <select name="version">
        <option value="">All versions</option>
        {% for v in versions %}<option value="{{ v }}" {{ 'selected' if v == selected_version }}>{{ v }}</option>{% endfor %}
      </select>
      {{ m.pagesize(pg.per) }}
    </div>
    <div class="filter-row">
      <input type="search" name="q" value="{{ q }}" placeholder="Search name / host / description">
    </div>
  </form>
  <form class="bulk-bar" id="tgt-bulk" data-bulk-bar hidden
        hx-post="/ui/targets/bulk" hx-target="#targets-result" hx-swap="innerHTML"
        hx-include="#tgt-filters">
    <span class="bulk-count" data-bulk-count>0 selected</span>
    <input type="hidden" name="names" data-bulk-names value="">
    <span class="bulk-actions">
      <button type="submit" class="btn sm act-run" name="action" value="enable">Enable</button>
      <button type="submit" class="btn sm act-danger" name="action" value="disable">Disable</button>
      <button type="button" class="btn sm act-ghost" data-bulk-clear>Clear</button>
    </span>
  </form>
  <div id="targets-result">
    {% if view == 'grid' %}{% include "_targets_grid.html" %}{% else %}{% include "_targets_table.html" %}{% endif %}
  </div>
</div>
{% endblock %}