{{define "card"}}
<article class="card" id="card-{{.Key}}" data-title="{{.Title}}">
  <a class="cover" href="{{.ContinueURL}}" target="_blank" rel="noopener noreferrer">
    {{if .Cover}}<img src="{{.Cover}}" alt="" loading="lazy">{{end}}
  </a>
  <div class="body">
    <h3 class="title">{{.Title}}</h3>
    <p class="meta">
      <span class="site site-{{.Site}}">{{.Site}}</span>
      <span class="chapter">Ch {{.LastChapter}}</span>
      {{if .HasNewChapter}}<span class="new">NEW {{.LatestChapter}}</span>{{end}}
    </p>
    <div class="actions">
      <a class="primary" href="{{.ContinueURL}}" target="_blank" rel="noopener noreferrer">Continue</a>
      <button class="icon {{if .Favorite}}on{{end}}"
              title="Favourite" aria-label="Toggle favourite"
              hx-post="/ui/bookmarks/{{.Key}}/favorite"
              hx-target="[id='card-{{.Key}}']" hx-swap="outerHTML">
        {{if .Favorite}}★{{else}}☆{{end}}
      </button>
      <button class="icon" title="Set chapter" aria-label="Set chapter"
              onclick="toggleChapterForm('{{.Key}}')">✎</button>
      <button class="icon danger" title="Remove" aria-label="Remove"
              hx-delete="/ui/bookmarks/{{.Key}}"
              hx-target="[id='card-{{.Key}}']" hx-swap="outerHTML"
              hx-confirm="Remove {{.Title}} from the list?">🗑</button>
    </div>
    <form class="chapter-form" id="chapter-form-{{.Key}}" hidden
          hx-post="/ui/bookmarks/{{.Key}}/chapter"
          hx-target="[id='card-{{.Key}}']" hx-swap="outerHTML">
      <input name="chapter" type="number" step="0.1" min="0"
             value="{{.LastChapterNum}}" aria-label="Chapter number" required>
      <button type="submit">Save</button>
    </form>
  </div>
</article>
{{end}}