.container-fluid.mt-4
  .row.mb-4
    .col
      h3.fs-24.medium ASR Models & Languages

  .row
    / Models Column
    .col-md-7
      .card.shadow-sm.border-0
        .card-header.bg-white.d-flex.justify-content-between.align-items-center.py-3
          h5.mb-0.fs-16 Models
          = link_to "+ Add Model", new_asr_model_path, class: "btn btn-primary btn-sm modal-trigger", data: { turbo_frame: "modal_frame" }
        .card-body.p-0
          ul.list-group.list-group-flush
            - @asr_models.each do |model|
              li.list-group-item.d-flex.justify-content-between.align-items-center.p-3
                div
                  strong.fs-14 = model.name
                  span.text-muted.fs-12.ms-2 = "(#{model.value})"
                  - if model.supports_translate
                    span.badge.bg-warning.text-dark.ms-2.fs-10 Translates
                  .mt-1
                    span.badge.bg-secondary.text-primary.fs-10 #{model.languages.count} Languages Supported
                
                .btn-group
                  = link_to "Map Languages", manage_languages_asr_model_path(model), class: "btn btn-outline-primary btn-sm modal-trigger", data: { turbo_frame: "modal_frame" }
                  = link_to edit_asr_model_path(model), class: "btn btn-outline-primary btn-sm modal-trigger", data: { turbo_frame: "modal_frame" } do
                    i.bi.bi-pencil
                  = link_to asr_model_path(model), data: { turbo_method: :delete, turbo_confirm: "Are you sure?" }, class: "btn btn-outline-danger btn-sm" do
                    i.bi.bi-trash

    / Languages Column
    .col-md-5
      .card.shadow-sm.border-0
        .card-header.bg-white.d-flex.justify-content-between.align-items-center.py-3
          h5.mb-0.fs-16 Languages
          = link_to "+ Add Language", new_language_path, class: "btn btn-primary btn-sm modal-trigger", data: { turbo_frame: "modal_frame" }
        .card-body.p-0
          ul.list-group.list-group-flush style="max-height: 600px; overflow-y: auto;"
            - @languages.each do |lang|
              li.list-group-item.d-flex.justify-content-between.align-items-center.px-3.py-2
                div
                  span.fs-14 = lang.name
                  span.badge.bg-light.text-dark.border.ms-2.fs-10 = lang.code
                .btn-group
                  = link_to edit_language_path(lang), class: "btn btn-sm text-primary modal-trigger", data: { turbo_frame: "modal_frame" } do
                    i.bi.bi-pencil
                  = link_to language_path(lang), data: { turbo_method: :delete, turbo_confirm: "Delete this language?" }, class: "btn btn-sm text-danger" do
                    i.bi.bi-trash