<form method="post" id="catList" class="container" hx-target="this" hx-swap="outerHTML show:window:top">
  <input type="hidden" name="{{ csrf.form_field_name }}" value="{{ csrf.request_token }}">
  <div class="row mwl-table-detail" id="cat_new"></div>
  {%- assign cat_count = categories | size -%}
  {% if cat_count > 0 %}
    {%- assign cat_col  = "col-12 col-md-6 col-xl-5 col-xxl-4" -%}
    {%- assign desc_col = "col-12 col-md-6 col-xl-7 col-xxl-8" -%}
    {% for cat in categories -%}
      <div class="row mwl-table-detail" id="cat_{{ cat.id }}">
        <div class="{{ cat_col }} no-wrap">
          {%- if cat.parent_names %}
            <small class="text-muted">{% for name in cat.parent_names %}{{ name }} &rang; {% endfor %}</small>
          {%- endif %}
          {{ cat.name }}<br>
          <small>
            {%- if cat.post_count > 0 %}
              <a href="{{ cat | category_link }}" target="_blank">
                View {{ cat.post_count }} Post{% unless cat.post_count == 1 %}s{% endunless -%}
              </a>
              <span class="text-muted"> &bull; </span>
            {%- endif %}
            {%- capture cat_edit %}admin/category/{{ cat.id }}/edit{% endcapture -%}
            <a href="{{ cat_edit | relative_link }}" hx-target="#cat_{{ cat.id }}"
               hx-swap="innerHTML show:#cat_{{ cat.id }}:top">
              Edit
            </a>
            <span class="text-muted"> &bull; </span>
            {%- capture cat_del %}admin/category/{{ cat.id }}/delete{% endcapture -%}
            {%- capture cat_del_link %}{{ cat_del | relative_link }}{% endcapture -%}
            <a href="{{ cat_del_link }}" hx-post="{{ cat_del_link }}" class="text-danger"
               hx-confirm="Are you sure you want to delete the category &ldquo;{{ cat.name }}&rdquo;? This action cannot be undone.">
              Delete
            </a>
          </small>
        </div>
        <div class="{{ desc_col }}">
          {%- if cat.description %}{{ cat.description.value }}{% else %}<em class="text-muted">none</em>{% endif %}
        </div>
      </div>
    {%- endfor %}
  {%- else -%}
    <div class="row">
      <div class="col-12 text-muted fst-italic text-center">This web log has no categores defined</div>
    </div>
  {%- endif %}
</form>
