{% extends "base.html" %}
{% import "_macros.html" as m %}
{% block title %}Versions — rosbackup-ng{% endblock %}
{% block page_title %}Firmware upgrade / downgrade{% endblock %}
{% block head_actions %}
<form method="post" action="/ui/upgrade/refresh" hx-post="/ui/upgrade/refresh"
      hx-swap="none" hx-disabled-elt="find button">
  <input type="hidden" name="csrf_token" value="{{ request.state.session.csrf_token }}">
  <button type="submit" class="btn" title="Re-fetch the MikroTik version index + changelogs">
    <span class="hx-idle">↻ Refresh versions</span>
    <span class="hx-busy"><span class="mini-spin"></span> Refreshing…</span>
  </button>
</form>
{% endblock %}
{% block content %}
<div class="banner banner-warn">Applying a change <strong>reboots</strong> the selected routers.
  A downgrade rolls RouterOS back and needs extra confirmation. Review the plan before executing.
  {% if fetched_at %}<span class="muted">· version index fetched {{ fetched_at | datetime }}</span>{% endif %}</div>

<form id="upg-form" hx-post="/ui/upgrade/plan" hx-target="#plan-result" hx-swap="innerHTML">
  <input type="hidden" name="csrf_token" value="{{ request.state.session.csrf_token }}">

  <div class="card step">
    <h2><span class="step-n">1</span> Choose the target version</h2>
    <div class="form-rows">
      <label for="mode">Action</label>
      <select id="mode" name="mode" data-type-switch="upg-mode"
              hx-get="/ui/upgrade/rows" hx-include="#upg-form" hx-target="#upg-rows" hx-swap="innerHTML">
        <option value="channel">Latest on a channel (upgrade)</option>
        <option value="version">Specific version (upgrade or downgrade)</option>
      </select>

      <div class="form-rows full" data-type-group="upg-mode" data-type-value="channel">
        <label for="channel">Channel</label>
        <select id="channel" name="channel"
                hx-get="/ui/upgrade/rows" hx-include="#upg-form" hx-target="#upg-rows" hx-swap="innerHTML">
          {% for ch in channels %}<option value="{{ ch }}" {{ 'selected' if ch == channel }}>{{ ch }}{% if versions.get(ch) %} — latest {{ versions[ch] }}{% endif %}</option>{% endfor %}
        </select>
      </div>

      <div class="form-rows full" data-type-group="upg-mode" data-type-value="version">
        <label for="version">Version</label>
        {% if have_index %}
        <select id="version" name="version"
                hx-get="/ui/upgrade/rows" hx-include="#upg-form" hx-target="#upg-rows" hx-swap="innerHTML">
          {% for e in version_list %}<option value="{{ e.version }}">{{ e.version }} · {{ e.channel }} · {{ e.date }}</option>{% endfor %}
        </select>
        {% else %}
        <span class="muted">No version history cached yet — click <strong>↻ Refresh versions</strong> above.</span>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="card step">
    <h2><span class="step-n">2</span> Select routers</h2>
    <div class="filters stacked">
      <div class="filter-row">
        <select name="group" hx-get="/ui/upgrade/rows" hx-include="#upg-form" hx-target="#upg-rows" hx-swap="innerHTML">
          <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" hx-get="/ui/upgrade/rows" hx-include="#upg-form" hx-target="#upg-rows" hx-swap="innerHTML">
          <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>
      </div>
      <div class="filter-row">
        <input type="search" name="q" value="{{ q }}" placeholder="Search name / host"
               hx-get="/ui/upgrade/rows" hx-include="#upg-form" hx-target="#upg-rows" hx-swap="innerHTML"
               hx-trigger="keyup changed delay:300ms">
      </div>
    </div>
    <div id="upg-rows">{% include "_upgrade_rows.html" %}</div>
    <div class="form-actions-bar">
      <button type="submit" class="btn primary">Build plan →</button>
    </div>
  </div>
</form>

<div class="card step">
  <h2><span class="step-n">3</span> Review &amp; execute</h2>
  <div id="plan-result"><p class="muted">Choose a target and routers above, then build a plan to see
    the exact per-router commands and confirm.</p></div>
</div>
{% endblock %}