{# Add a server, step 2: what the document contains, and what to do with it.

   Nothing is saved until the button at the bottom is pressed, and then all of
   it is (spec §7.1). The operator sees the list before the row exists, warnings
   and all, because exposing somebody else's API as tools is not a thing to find
   out about afterwards.

   One form around everything. The filter controls post to the picker route and
   swap the table back in; the submit button posts to the same URL this page has
   and saves. Every control carries a ``formaction`` as well as its htmx
   attributes, so a browser with no JavaScript does the same thing a page at a
   time — and the controls only that browser needs, Apply and the two bulk
   buttons, are the ones inside ``<noscript>`` (task 115). #}
{% extends "base.html" %}
{% from "partials/empty_state.html" import empty_state %}
{% from "partials/field.html" import field %}

{% block title %}{{ picker.name }} &middot; Add a server{% endblock %}

{% block scripts %}
{# The header tick box, which ships hidden and is unhidden here. The same file
   the detail page loads: the two tables have the same shape, so a second copy
   of it would be a second thing to keep in step (task 115). #}
<script src="{{ static_url('js/table.js') }}" defer></script>
{% endblock %}

{% block content %}
{# The page's heading, in the outline and nowhere else. It sat in a bar with no
   actions in it, repeating a name the Display name row three lines below now
   states and labels — which is the whole reason that row exists (task 115).
   Kept because a page with no h1 is a page a screen reader cannot summarise,
   and worded like the title: the name, and what is being done with it. #}
<h1 class="visually-hidden">Add a server: {{ picker.name }}</h1>

{% if picker.alerts %}
<ul class="flashes" role="alert">
  {% for alert in picker.alerts %}
  <li class="flash flash--error">{{ alert }}</li>
  {% endfor %}
</ul>
{% endif %}

{% if not picker.base_url %}
<p class="flash flash--warning" role="alert">
  This document does not say where its API lives, so tool calls would have
  nowhere to go. Go back and set a base URL.
</p>
{% endif %}

{% if warnings %}
<ul class="flashes" role="status">
  {% for warning in warnings %}
  <li class="flash flash--warning">
    {{ warning.message }}
    {% if warning.location %}<code>{{ warning.location }}</code>{% endif %}
  </li>
  {% endfor %}
</ul>
{% endif %}

<dl class="summary">
  {# First, because it is the one thing on this list the operator typed, and the
     heading above shows it without saying what it is. A name that came from the
     document instead says so, the way Base URL below says "Not set" rather than
     leaving the reader to work it out. #}
  <div class="summary__pair">
    <dt class="summary__term">Display name</dt>
    <dd class="summary__value">
      {{ picker.name }}
      {% if picker.name_note %}<span class="cell-note">{{ picker.name_note }}</span>{% endif %}
    </dd>
  </div>
  <div class="summary__pair">
    <dt class="summary__term">Spec URL</dt>
    <dd class="summary__value"><code>{{ preview.requested_url }}</code></dd>
  </div>
  {% if preview.redirected %}
  <div class="summary__pair">
    <dt class="summary__term">Fetched from</dt>
    <dd class="summary__value"><code>{{ preview.fetched_url }}</code></dd>
  </div>
  {% endif %}
  <div class="summary__pair">
    <dt class="summary__term">Format</dt>
    <dd class="summary__value">
      {{ preview.spec_format }}{% if preview.version %}, version {{ preview.version }}{% endif %}
    </dd>
  </div>
  <div class="summary__pair">
    <dt class="summary__term">Base URL</dt>
    <dd class="summary__value">
      {% if picker.base_url %}<code>{{ picker.base_url }}</code>{% else %}Not set{% endif %}
    </dd>
  </div>
</dl>

{% if picker.rows %}
<form method="post" action="{{ save_path }}">
  {{ field("tool_prefix", "Tool prefix", value=picker.prefix,
           hint="Leads every tool name below. It is what keeps two services that
                 both publish getUser apart.",
           error=picker.errors.get("tool_prefix"),
           required=true) }}

  <div class="filters">
    <label class="field">
      <span class="field__label">Search</span>
      <input
        class="field__input"
        type="search"
        name="q"
        value="{{ picker.filter.text }}"
        autocomplete="off"
        hx-post="{{ picker_path }}"
        hx-target="{{ picker_target }}"
        hx-swap="outerHTML"
        hx-trigger="input changed delay:300ms, search"
      />
    </label>

    {# Apply first, so that Enter in the search box means "apply the filter"
       rather than whatever submit button happens to come next. With a script
       none of these is rendered: the filter has already run, and the tick box
       in the table header is what selects all or none of what it is showing.

       Both bulk buttons act on the rows the filter is showing, which is the
       only reading of "all" that makes a filter safe to use — and is the rule
       the header box follows too (task 115). #}
    <noscript>
      <button class="button" type="submit" formaction="{{ picker_path }}">Apply</button>
      <button
        class="button"
        type="submit"
        name="bulk"
        value="all"
        formaction="{{ picker_path }}"
      >Select all</button>
      <button
        class="button"
        type="submit"
        name="bulk"
        value="none"
        formaction="{{ picker_path }}"
      >Select none</button>
    </noscript>

    <label class="field">
      <span class="field__label">Method</span>
      <select
        class="field__select"
        name="method"
        hx-post="{{ picker_path }}"
        hx-target="{{ picker_target }}"
        hx-swap="outerHTML"
        hx-trigger="change"
      >
        <option value="">Any</option>
        {% for method in picker.methods %}
        <option value="{{ method }}"{% if method == picker.filter.method %} selected{% endif %}>
          {{ method }}
        </option>
        {% endfor %}
      </select>
    </label>

    {% if picker.tags %}
    <label class="field">
      <span class="field__label">Tag</span>
      <select
        class="field__select"
        name="tag"
        hx-post="{{ picker_path }}"
        hx-target="{{ picker_target }}"
        hx-swap="outerHTML"
        hx-trigger="change"
      >
        <option value="">Any</option>
        {% for tag in picker.tags %}
        <option value="{{ tag }}"{% if tag == picker.filter.tag %} selected{% endif %}>
          {{ tag }}
        </option>
        {% endfor %}
      </select>
    </label>
    {% endif %}
  </div>

  {% include "partials/operation_picker.html" %}

  <div class="form-actions">
    {# Carries the token, so step 1 comes back with what was typed in it rather
       than blank. Not a browser Back: this page was arrived at by a redirect
       after a POST, and what the operator wants is the form, not the history
       entry (task 115). #}
    <a class="button" href="{{ back_path }}">Back</a>
    <button class="button button--primary" type="submit">Save the server</button>
  </div>
</form>
{% else %}
{{ empty_state(
     "Nothing to expose",
     "The document parsed, but it describes no endpoints the gateway can expose.",
     href=new_server_path,
     action="Try another spec") }}
{% endif %}
{% endblock %}