<div class="field is-horizontal">
  <div class="field-body">
    <div class="field is-grouped">
      <div id="saved-category-list" class="control"
           hx-get="/builder/saved-category-list"
           hx-trigger="load, saved-deck-list-changed"
           hx-target="#saved-category-list">
      </div>

      <div id="saved-deck-list" class="control is-expanded"
           hx-get="/builder/saved-deck-list"
           hx-trigger="load, saved-deck-list-changed"
           hx-target="#saved-deck-list">
      </div>
    </div>

    <div class="field is-grouped is-grouped-right is-narrow">
      <div class="control">
        <button class="button"
                hx-include="[name='search-form']"
                hx-post="/builder/load"
                hx-trigger="click"
                hx-target="#current-deck-list">Load</button>
      </div>

      <div class="control">
        <button class="button"
                hx-include="[name='search-form']"
                hx-post="/builder/clear"
                hx-trigger="click"
                hx-target="#current-deck-list">Clear</button>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-body">
    <div class="field is-grouped">
      <div class="control is-expanded">
        <input
          form="search-form"
          class="input"
          hx-include="[name='search-form']"
          hx-post="/builder/create"
          hx-target="#saved-deck-list"
          hx-trigger="submit"
          name="deck-create-name"
          placeholder="Enter deck name..."
          type="text">
      </div>

      <div class="control">
        <button class="button is-primary"
                hx-include="[name='search-form']"
                hx-post="/builder/create"
                hx-trigger="click"
                hx-target="#saved-deck-list">Create</button>
      </div>

      <div class="control">
        <button class="button is-danger"
                hx-delete="/builder/delete"
                hx-include="[name='search-form']"
                hx-trigger="click"
                hx-target="#saved-deck-list">Delete</button>
      </div>
    </div>

    <div class="field is-narrow is-grouped is-grouped-right">
      <div class="control">
        <button class="button is-info"
                hx-include="[name='search-form']"
                hx-post="/builder/rename"
                hx-trigger="click"
                hx-target="#saved-deck-list">Rename</button>
      </div>

      <div class="control">
        <button class="button is-link"
                hx-post="/builder/move-to-category"
                hx-trigger="click"
                hx-target="#current-deck-list">Move</button>
      </div>

      <!-- Save Deck -->
      <div class="control">
        <button class="button is-link"
                hx-include="[name='search-form']"
                hx-post="/builder/save"
                hx-target="#current-deck-list"
                hx-trigger="click">
          Save
        </button>
      </div>

    </div>
  </div>
</div>
