{% if id.is_none() %}<a class="panel-block is-active">{% endif %}
  <form hx-post="/clothing{% if let Some(id) = id %}/{{ id }}{% endif %}" hx-target="closest a" hx-target-422="find p">
    <div class="level">
      <div class="level-left">
        <div class="level-item">
          <div class="field">
            <label class="label"></label>
            <div class="control">
              <input class="input" name="name" type="text" {{ name|insert_value|safe }}
                     _="on input put '' into the next <p/>" placeholder="Tuchuniform" minlength="3" />
            </div>
            <p class="help is-danger"></p>
          </div>
        </div>

        <div class="level-item buttons are-small">
          <button class="button is-success">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#check-circle" />
            </svg>
          </button>
          {% if let Some(id) = id %}
          <button class="button is-warning is-light" type="button" hx-get="/clothing/{{ id }}" hx-target="closest a">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#x-circle" />
            </svg>
          </button>
          {% else %}
          <button class="button is-warning" type="button" _="on click remove the closest <a/>">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#x-circle" />
            </svg>
          </button>
          {% endif %}
        </div>
      </div>
    </div>
  </form>
  {% if id.is_none() %}
</a>{% endif %}