{{define "items:list-for-relations"}}
  <table class="w3-table-all w3-striped responsive">
    <thead>
      <tr>
        <th>Item</th>
        <th>Categories</th>
        <th>Tags</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
  {{ range .items}}
  {{ $relation_name := printf "%s%v%s" "ItemRelation-"  .Id  }}
  <tr>
    <td class="no-label">
    <a
    href="/item/view/{{.Id}}"
    hx-get="/item/view/{{.Id}}"
    hx-target="#modal-container"
      ><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a
    >
    </td>
    <td class="no-label">
      {{ if gt (len .Categories) 0 }}
        <i class="w3-hide-medium w3-hide-large bi bi-tags-fill"></i>
        {{ range (stringToArray .Categories "|")}}
          {{ $category_name := index $.categoriesMap .}}
          <div class="tag" style="padding: 3px">
            {{ $category_name }}
          </div>
        {{ end }}
      {{ end }}
    </td>
    <td class="no-label">
      {{ if gt (len .Tags) 0 }}
        <i class="w3-hide-medium w3-hide-large bi bi-tags"></i>
        {{ range (stringToArray .Tags ",")}}
          <div class="tag" style="padding: 3px">
            {{ . }}
          </div>
        {{ end }}
      {{ end }}
    </td>
    <td class="no-label">
      <div class="w3-bar">
      <a
          class="w3-right w3-btn w3-metro-dark-blue w3-round-large"
          href="#"
          hx-on::before-request=" if(document.getElementById('ItemRelation-New-{{.Id}}-Row') != null) {event.preventDefault()}"
          hx-get="/item/relation/add/{{.Id}}"
          hx-target="#relations-items"
          hx-swap="beforeend"
          ><i class="bi bi-link" title="Add relation"></i><span class="w3-hide-small"> Add</span></a
        >
        </div>
    </td>
  </tr>
  {{ end }}
</tbody>
</table>
{{ end }}