{{define "page:content"}}
<div id="item">
  <div class="page-container">
    <h5 class="title">{{ .item.Title }}</h5>
    {{ if gt (len .item.Summary) 0}}
    <div>
      {{.item.Summary_rendered | safeHTML}}
    </div>
    {{ end }}

    {{.item.Description_rendered | safeHTML}}

    {{ if gt (len .fields) 0}}
      <ul class="fields">
        {{ range .fields }}
          <li><span style="font-weight: bold;">{{.Title}}</span> : {{ renderFieldValue .Value .Widget}}</li>
        {{ end }}
      </ul>
    {{ end }}

    {{ template "item:relations_view" .}}
    
    <div class="row">
      <div class="col s6">
        {{if gt (len .item.Categories) 0 }}
          <p><i class="bi bi-tags-fill"></i><strong>Categories</strong></p>
        {{ range (stringToArray .item.Categories "|")}}
        {{ $category_name := index $.categoriesMap .}}
        <div class="tag" style="padding: 3px">
          <a hx-post="/items" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{&quot;category_id&quot; : &quot;{{ . }}&quot;}">{{ $category_name }}</a>
        </div>
        {{ end }}
        {{ end }}
      </div>
      <div class="col s6">
        {{if gt (len .item.Tags) 0 }}
          <p><i class="bi bi-tags"></i><strong>Tags</strong></p>
        {{ range (stringToArray .item.Tags ",")}}
        <div class="tag" style="padding: 3px">
        <a hx-post="/items" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{&quot;Tags&quot; : &quot;{{.}}&quot;}">{{ . }}</a>
        </div>
        {{ end }}
        {{ end }}
      </div>
    </div>

  </div>
</div>
<div id="footer-navbar">
      <a class="button main" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i></a>
      <a class="button main" hx-get="/item/share/{{.item.Id}}" hx-target="#modal-container" title="Share" href="#"><i class='bi bi-share-fill'></i></a>
      <a class="button secondary" onclick="history.back()" ><i class="bi bi-arrow-left-circle"></i></a>
</div>
{{ end }}
