:ruby
  @pagetitle = 'Architectures'

.card.mb-3
  = render partial: 'webui/configuration/tabs'
  .card-body#architectures
    %h3
      Architecture Availability
    %p
      Toggle the availability of architectures.
    .mb-3
      = button_tag('All', type: 'submit', class: 'btn btn-outline-primary filter-button me-1', value: true,
        data: { remote: true, url: bulk_update_availability_path(archs: { all: true }), method: :patch })
      = button_tag('None', type: 'submit', class: 'btn btn-outline-primary filter-button me-1', value: false,
        data: { remote: true, url: bulk_update_availability_path(archs: { all: false }), method: :patch })
      %i.fas.fa-spinner.invisible
    .mb-3.d-flex.flex-wrap
      - @architectures.each do |arch|
        .form-check.custom-control-inline
          = check_box_tag('available', true, arch.available, class: 'form-check-input', id: "arch-#{arch}",
            onchange: "this.setAttribute('data-params', this.name + '=' + this.checked)",
            data: { remote: true, url: architecture_path(arch.id), method: :patch })
          %label.form-check-label.pe-2{ for: "arch-#{arch}" }
            = arch.name
          %i.fas.fa-spinner.invisible

- content_for :ready_function do
  :plain
    $('#architectures').on('ajax:before ajax:complete', '.form-check-input, .filter-button', function() {
      $(this).prop('disabled', function(_, previousValue) { return !previousValue; });
      $(this).siblings('i.fa-spinner').toggleClass('fa-spin invisible');
    });
    $('.filter-button').on('ajax:success', function() {
      $('#architectures').find('input').prop('checked', $(this).val() === 'true');
    });
