/ To remember
/ We have klass.columns which are the actual SQL view columns
/ We view (view metadata) columns, which is an array of hashes, each representing a column
/ with its title. and width. Its position comes from the position inthe array.
/
/ Here loop through all avail columns on klass and find the matching
/ col in view.columns. If there are columns we don't recognise (the view config is stale) they
/ will be discarded when we save. If there are new cols we given them an empty object and it will be
/ saved away.
/ We need to handle validation
/ also serialisation - see https://nandovieira.com/using-postgresql-and-jsonb-with-ruby-on-rails

ruby:
  # attribute_names = klass.columns.map(&:name) - %w(id secure_id document)
  # view.columns = attribute_names.map do |attr|
  #  view.columns.detect{ |col| col.code == attr } || Renalware::System::ColumnDefinition.new(code: attr)
  # end

  attribute_names = klass.columns.map(&:name) - %w(id secure_id document)
  attribute_names = (view.columns.map(&:code) + attribute_names).uniq
  view.columns = attribute_names.map do |attr|
    view.columns.detect{ |col| col.code == attr } || Renalware::System::ColumnDefinition.new(code: attr)
  end

= simple_form_for(view, as: "view_metadata", method: :patch) do |f|
  = f.input :id, as: :hidden
  .modal
    .modal__header
      = render "renalware/shared/modal_close_link"
      - title = [view.category&.humanize, view.scope&.humanize, view.title&.humanize].join(" / ")
      h2= "Edit columns for #{title}"
    .modal__body(style="max-height: 400px")
      .rounded-md.bg-blue-100.px-3.py-2.flex.items-start.shadow.mx-1.mb-5
        i.fas.fa-info-circle.mr-2.mt-1.text-blue-500
        | Please bear in mind that changes you make will be visible by all users.

      / Tabs - see also js stimulus tabs-controller
      div(data-controller="tabs" data-tabs-active-tab="-mb-px border-l border-t border-r rounded-t")
        ul.list-reset.flex.border-b.ml-0
          li.-mb-px.mr-1(data-target="tabs.tab" data-action="click->tabs#change")
            a.bg-white.inline-block.py-2.px-4.text-blue-500.hover:text-blue-700.font-semibold.no-underline(href="#") Columns
          li.-mb-px.mr-1(data-target="tabs.tab" data-action="click->tabs#change")
            a.bg-white.inline-block.py-2.px-4.text-blue-500.hover:text-blue-700.font-semibold.no-underline(href="#") Filters
          li.-mb-px.mr-1(data-target="tabs.tab" data-action="click->tabs#change")
            a.bg-white.inline-block.py-2.px-4.text-blue-500.hover:text-blue-700.font-semibold.no-underline(href="#") Previous versions

        .hidden.py-4.px-4.border-l.border-b.border-r(data-target="tabs.panel")
          = render "columns_table", view: view
        .hidden.py-4.px-4.border-l.border-b.border-r(data-target="tabs.panel")
          = render "filters_form", view: view
        .hidden.py-4.px-4.border-l.border-b.border-r(data-target="tabs.panel")
          = render "versions", view: view

    .modal__footer
      br
      .right
        = f.submit "Save", class: "button"
        span= " or "
        = link_to "Cancel",
                "#",
                "aria-label" => "Close",
                  class: "reveal-modal-close"

javascript:
  initSortables();