{{template "head" .}}
{{template "topbar" .}}
<div class="center">
  <div class="float can-page">
    <div class="inner">
      <h1>{{.Title}} <span class="badge" title="This is a can — a bundle of pastes">can</span></h1>
      {{if .HasDescription}}<p class="sub">{{.Description}}</p>{{end}}
      <p class="hint">{{.ItemCount}} item{{if ne .ItemCount 1}}s{{end}} · {{.SizeHuman}} · created <span data-ts="{{.CreatedAtUnix}}">{{.CreatedAgo}}</span>{{if .ExpiresAt}} · expires in {{.ExpiresIn}}{{end}}{{if .HasPassword}} · password protected{{end}}</p>

      <div class="can-items">
        {{range .Items}}
        <div class="can-item float">
          <div class="can-item-head">
            <strong>{{.Title}}</strong>
            <span class="dim">{{.Size}}</span>
            {{if .IsFile}}
              <a class="btn btn-icon" href="/api/cans/{{$.ID}}/items/{{.ID}}" download="{{.Title}}" title="Download file" aria-label="Download {{.Title}}">↓</a>
            {{else}}
              <a class="btn btn-icon" href="/api/cans/{{$.ID}}/items/{{.ID}}" title="Raw item" aria-label="Raw {{.Title}}">⧉</a>
            {{end}}
          </div>
          {{if not .IsFile}}
          <details class="can-item-body">
            <summary>Show content</summary>
            <pre class="code"><code>{{.ContentHTML}}</code></pre>
          </details>
          {{else}}
          <div class="hint">Attached file — use the download button above.</div>
          {{end}}
        </div>
        {{end}}
      </div>
    </div>
  </div>
</div>
{{template "foot" .}}