{# alerts/_rule_target.html — what one rule watches (#5475). For a host
   source: the Host, then its Part ("the whole host", then mounts, cores and
   so on), so a host's parts never crowd the list of hosts. Any other source:
   one Resource picker. Then the metrics that resource reports, and a preview
   of the chosen one. Picking a host or part swaps this block alone
   (/alerts/api/rule_target); picking a metric swaps the preview, which
   is read in its own request after the block is drawn (#5485). #}
{% set one = current_covers|default("resource") == "resource" %}
<div data-cover-resource {% if not one %}hidden{% endif %}>
  {% if host_source %}
  <div class="form-pair">
    <div class="form-group">
      <label for="rule-host">Host</label>
      {% if hosts %}
      <select id="rule-host" name="pick_host" {% if not one %}disabled{% endif %}
              hx-get="/alerts/api/rule_target" hx-trigger="change" hx-target="#rule-target"
              hx-include="closest form" hx-params="source_module,pick_host,metric_name,covers">
        {% for h in hosts %}<option value="{{ h }}" {% if h == host %}selected{% endif %}>{{ h }}</option>{% endfor %}
      </select>
      {% else %}
      <select id="rule-host" disabled data-none="1"><option>No host has reported yet</option></select>
      {% endif %}
    </div>
    <div class="form-group">
      <label for="rule-part">Part</label>
      <select id="rule-part" name="resource_name" required {% if not one or not parts %}disabled{% endif %} {% if not parts %}data-none="1"{% endif %}
              hx-get="/alerts/api/rule_target" hx-trigger="change" hx-target="#rule-target"
              hx-include="closest form" hx-params="source_module,pick_host,resource_name,metric_name,covers">
        {% for heading, items in parts %}
        {% if heading %}<optgroup label="{{ heading }}">{% endif %}
          {% for value, label in items %}<option value="{{ value }}" {% if value == resource %}selected{% endif %}>{{ label }}</option>{% endfor %}
        {% if heading %}</optgroup>{% endif %}
        {% endfor %}
      </select>
    </div>
  </div>
  {% if not hosts %}<p class="field-hint" style="margin-top:-0.5rem;">The list fills once an agent reports.</p>{% endif %}
  {% else %}
  <div class="form-group">
    <label for="rule-resource">Resource</label>
    {% if resources %}
    <select id="rule-resource" name="resource_name" required {% if not one %}disabled{% endif %}
            hx-get="/alerts/api/rule_target" hx-trigger="change" hx-target="#rule-target"
            hx-include="closest form" hx-params="source_module,resource_name,metric_name,covers">
      {% if not resource %}<option value="" disabled selected>— pick a resource —</option>{% endif %}
      {% for r in resources %}<option value="{{ r }}" {% if r == resource %}selected{% endif %}>{{ r }}</option>{% endfor %}
    </select>
    {% else %}
    <select id="rule-resource" name="resource_name" required disabled data-none="1">
      <option value="">Nothing has reported from this source yet</option>
    </select>
    <p class="field-hint">The list fills from readings this source has recorded. Come back once it has reported.</p>
    {% endif %}
  </div>
  {% endif %}
</div>

<div class="form-group">
  <label for="rule-metric">Metric</label>
  <select id="rule-metric" name="metric_name" required data-metric-picker
          hx-get="/alerts/api/metric_preview" hx-trigger="change" hx-target="#metric-preview"
          hx-include="closest form" hx-params="source_module,resource_name,pick_host,metric_name,covers">
    {% if not metric %}<option value="" disabled selected>— pick a metric —</option>{% endif %}
    {% for m in metrics %}
    <option value="{{ m }}" data-unit="{{ metric_unit(m) }}" data-about="{{ metric_about(m) }}" {% if m in ("is_up", "is_healthy") %}data-binary{% endif %}
            {% if m == metric %}selected{% endif %}>{{ metric_label(m) }}</option>
    {% endfor %}
  </select>
  {% if metric and metric_about(metric) %}
  <p class="field-hint" data-metric-about>{{ metric_about(metric) }}</p>
  {% else %}<p class="field-hint" data-metric-about hidden></p>{% endif %}
  {# The preview comes in its own request once the page is up (#5485). #}
  <div id="metric-preview" aria-live="polite"
       {%- if metric and resource %} hx-get="/alerts/api/metric_preview" hx-trigger="load"
       hx-include="closest form" hx-params="source_module,resource_name,pick_host,metric_name,covers"{% endif %}>
    {%- include "alerts/_metric_preview.html" -%}
  </div>
</div>