<% disabled = !Current.user.can_administer_board?(board) %>
<header>
  <h2 class="divider txt-medium margin-block-start">Who can access this board?</h2>
</header>

<%= access_menu_tag board, class: "settings__user-filter unpad margin-none" do %>
  <li class="flex align-center gap-half">
    <figure class="avatar fill-selected">
      <%= icon_tag "everyone" %>
      <span class="for-screen-reader">Everyone</span>
    </figure>

    <div class="min-width">
      <div class="overflow-ellipsis"><strong>Everyone</strong></div>
    </div>

    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true" />

    <label for="board_all_access" class="switch">
      <%= form.check_box :all_access, class: "switch__input", checked: board.all_access?, disabled:, data: { action: "change->toggle-class#toggle" } %>
      <span class="switch__btn round"></span>
      <span class="for-screen-reader">Give everyone access to this board</span>
    </label>
  </li>

  <input placeholder="Filter…" class="input input--transparent full-width txt-small" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">

  <div class="toggler__visible-when-off">
    <div class="flex align-center justify-end gap-half">
      <%= button_tag "Select all", type: "button", class: "btn btn--plain txt-x-small txt-link font-weight-normal", data: { action: "click->toggle-class#checkAll" }, disabled: %>
      <span class="txt-subtle">&middot;</span>
      <%= button_tag "Select none", type: "button", class: "btn btn--plain txt-x-small txt-link font-weight-normal", data: { action: "click->toggle-class#checkNone" }, disabled: %>
    </div>
  </div>

  <ul class="settings__scrollable-list" data-filter-target="list">
    <%= access_toggles_for selected_users, selected: true, disabled: %>
    <%= access_toggles_for unselected_users, selected: false, disabled: %>
  </ul>
<% end %>
