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

    {{.item.Description_rendered | safeHTML}}

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

    {{ template "item:relations_view" .}}
    
    <div class="w3-row">
      <div class="w3-half">
        {{if gt (len .item.Categories) 0 }}
        <i class="w3-hide-medium w3-hide-large bi bi-tags-fill"></i>
        <strong class="w3-hide-small">Categories</strong> 
        {{ 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="w3-half">
        {{if gt (len .item.Tags) 0 }}
        <i class="w3-hide-medium w3-hide-large bi bi-tags"></i>
        <strong class="w3-hide-small">Tags</strong> {{ 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>

    <a
      class="w3-btn w3-metro-dark-blue w3-round-large w3-hide-small"
      hx-get="/item/update/{{.item.Id}}"
      hx-push-url="true"
      hx-target="#page-content"
      href="#"
      ><i class="bi bi-pencil"></i> Edit</a
    >
    <a
    class="w3-btn w3-metro-blue w3-round-large  w3-hide-small"
    href="#"
    hx-target="#modal-container"
    hx-get="/item/share/{{.item.Id}}"
    title="Share"
    ><i class='bi bi-share-fill'></i> Share</a>
  </div>
</div>
<div class="footerNavbar-container">
<div class="w3-bar footerNavbar w3-hide-medium w3-hide-large w3-round-large">
  <div class="w3-bar-item">
  <a
  class="w3-btn w3-metro-dark-blue "
  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>
  </div>
  <div class="w3-bar-item">
    <a
    class="w3-btn w3-metro-dark-blue "
    hx-get="/item/share/{{.item.Id}}"
    hx-target="#modal-container"
    title="Share"
    href="#"><i class='bi bi-share-fill'></i>
    </a>
    </div>
  </div>
</div> 
{{ end }}