<!-- Search accordion for /api/v1/hosts/<id> (filtering task results) -->
{% load datetime_formatting %}

{% if not static_generation %}
<div class="col-xl-6 offset-xl-3">
  <div class="accordion" id="search_accordion">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button text-bg-ara {% if not expand_search %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#search_host_results" aria-expanded="{% if expand_search %}true{% else %}false{% endif %}" aria-controls="search_host_results">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
          </svg>
          &nbsp; Search and filter host results
        </button>
      </h2>

      <div id="search_host_results" class="accordion-collapse collapse {% if expand_search %}show{% endif %}" data-bs-parent="#search_host_results">
        <div class="accordion-body">
          <form method="get" action="{% url 'ui:host' host.id %}#results">
            <!-- task name -->
            <div class="row g-2">
              <div class="col-md">
                <div class="form-floating">
                  <input type="text" class="form-control" id="task_name" name="task_name" placeholder="ex: Install httpd" value="{{ search_form.task_name.value | default_if_none:'' }}">
                  <label for="task_name" {% if request.GET.task_name %}style="font-weight:bold;"{% endif %}>Task name</label>
                </div>
              </div>
            </div>
            <br />

            <!-- Result status -->
            <div class="row g-2">
              <div class="col-md">
                <label for="status" {% if request.GET.status %}style="font-weight:bold;"{% endif %}>Status: </label>
                {% for value, text in search_form.status.field.choices %}
                {% if value != "unknown" %}
                  <div class="form-check form-check-inline {% if value == 'completed' %}text-success{% elif value == 'failed' %}text-danger{% elif value == 'running' %}text-info{% else %}text-warning{% endif %}">
                    <input class="form-check-input" type="checkbox" id="{{ value }}" value="{{ value }}" name="status" {% if value in search_form.status.data %}checked{% endif %}>
                    <label class="form-check-label" for="{{ value }}">
                        {% include "partials/result_status_icon.html" with status=value %}
                    </label>
                  </div>
                {% endif %}
                {% endfor %}
              </div>
            </div>
            <br />

            <!-- include only changes -->
            <div class="row g-2">
              <div class="col-md">
                <label class="align-middle" for="changed" {% if request.GET.changed %}style="font-weight:bold;"{% endif %}>Changed: </label>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="checkbox" id="changed" value="true" name="changed" {% if search_form.changed.value %}checked{% endif %}/>
                  <label class="form-check-label" for="changed">
                    <span class="btn btn-warning btn-sm ara-result-status-badge" title="Search changed results">
                      CHANGED
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <br />

            <!-- submit -->
            <div class="row g-2">
              <div class="col-md">
                <button type="submit" class="btn btn-primary">Submit</button>
              </div>
            </div>
          </form>

          <!-- reset button -->
          {% if request.GET %}
          <br />
          <div class="row g-2">
            <div class="col-md">
              <a class="btn btn-outline-danger" href="{% url 'ui:host' host.id %}#results" role="button">Reset</a>
            </div>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}
