<% @page_title = "Collection Settings" %>

<% content_for :header do %>
  <nav>
    <%= link_to_back fallback_path: cards_path(collection_ids: [ @bbucket ]) %>

    <header class="center">
      <h1 class="txt-large margin-none"><%= @page_title %></h1>
    </header>

    <div class="btn btn--placeholder flex-item-justify-end"></div>
  </nav>
<% end %>

<section class="panels--two-up margin-block">
  <div class="panel shadow center flex flex-column txt-normal">
    <strong class="txt-large">Name and Access</strong>
    <p class="margin-none-block-start">Choose who can access this Collection.</p>
    <%= form_with model: @collection, class: "flex flex-column gap txt-large", data: { controller: "form" } do |form| %>

      <%= render "collections/edit/name", form: form %>
      <%= render "collections/edit/users", collection: @collection, selected_users: @selected_users, unselected_users: @unselected_users, form: form %>

      <button type="submit" id="log_in" class="btn btn--reversed center txt-normal">
        <%= icon_tag "check" %>
        <span>Save changes</span>
      </button>

      <%= link_to "Cancel and go back", cards_path(collection_ids: [ @collection ]), data: { form_target: "cancel", turbo_frame: "_top" }, hidden: true %>
    <% end %>
  </div>

  <div class="panel shadow center flex flex-column">
    <%= render "collections/edit/workflows", collection: @collection %>
    <%= render "collections/edit/auto_close", collection: @collection %>
    <%= render "collections/edit/publication", collection: @collection %>

    <hr class="separator--horizontal full-width margin-block-end margin-block-start-double" style="--border-color: var(--color-ink-light);" aria-hidden="true" />

    <%= render "collections/edit/delete", collection: @collection %>
  </div>
</section>
