<div class="buttons is-centered is-fullwidth">
  <button class="button"
          id="generate-cover-images"
          hx-get="/decks/{{ id }}/generate-cover-images"
          hx-ext="loading-states"
          data-loading-class="is-loading"
          data-loading-target="#generate-cover-images"
          hx-target="#deck-image-listing"
          hx-trigger="click">
    <span class="icon"><i class="fa-solid fa-image"></i></span>
    <span>Generate Deck Images</span>
  </button>
  <a class="button"
     href="/decks/kde/{{ id }}">
    <span class="icon"><i class="fa-solid fa-list"></i></span>
    <span>KDE Team Deck List</span>
  </a>
  <a class="button"
          href="/construct/{{ id }}/select-sets">
    <span class="icon"><i class="fa-solid fa-wrench"></i></span>
    <span>Construct Deck</span>
  </a>
  <button class="button is-warning"
          hx-delete="/decks/{{ id }}/delete-generated-images"
          hx-confirm="Are you sure you want to delete images for this deck?"
          hx-include="[name='deck-form']"
          hx-target="#deck-image-listing"
          hx-trigger="click">
    <span class="icon"><i class="fa-solid fa-trash"></i></span>
    <span>Delete Card Images</span>
  </button>
  <button class="button is-danger"
          hx-confirm="Are you sure you want to delete this deck: {{ id }}?"
          hx-delete="/decks/{{ id }}/delete"
          hx-include="[name='deck-form']"
          hx-target="#results"
          hx-trigger="click"
          type="submit">
    <span>Delete Deck</span>
  </button>
</div>
