{{define "home:items"}}

{{ $itemCount := 0 }}

{{ range.items }}
  <div class="w3-col l4 m6 s12 item" style="margin-bottom: 10px;"
  {{ $itemCount = incr $itemCount}}
    {{ if eq $itemCount 10 }}
    {{ $offset := addI $.offset $itemCount}}
    hx-get="/?offset={{ $offset }}&out=items"
    hx-trigger="revealed"
    hx-swap="afterend"
    {{ end }}
  >
    <div class="w3-card w3-display-container w3-round-large" style="padding: 10px; background-color: #fff;">
      <div class="w3-row">
        <div class="w3-col l11 m11 s11">
          <h5>
            <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#modal-container"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
            <a class="hide-medium hide-large" href="/item/read/{{.Id}}" hx-get="/item/read/{{.Id}}" hx-target="#page-content" hx-push-url="true"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
          </h5>
          <div class="home-card-summary">{{.Summary | markdownfy | safeHTML}}</div>
        </div>
        <div class="w3-col l1 m1 s1">
          <a
          class="w3-btn w3-medium w3-round-large"
          style="float: right; padding: 8px 8px"
          hx-get="/item/update/{{.Id}}"
          hx-push-url="true"
          hx-target="#page-content"
          href="/item/update/{{.Id}}"
          title="Edit"><i class="bi bi-pencil"></i>
        </a>
        
        <a
        class="w3-btn w3-medium w3-round-large"
        style="float: right; padding: 8px 8px"
        href="#"
        hx-target="#modal-container"
        hx-get="/item/share/{{.Id}}"
        title="Share"><i class="bi bi-share-fill"></i>
        </a>
        
        <a
        class="w3-btn w3-medium w3-round-large"
        style="float: right; padding: 8px 8px"
        href="#"
        hx-delete="/item/remove-from-dashboard/{{.Id}}"
        hx-target="closest .item"
        hx-swap="outerHTML swap:1s"
        hx-trigger="confirmed"
        onClick="bm_show_confirm(this, 'Dashboard', 'Remove this item from the dashboard ?')"
        title="Remove from dashboard"> <i class="bi bi-pin"></i>
        </a>
        </div>
      </div>

    </div>
  </div>
  {{ end }}

  {{ end }}