= turbo_frame_tag "modal_frame", target: "_top" do
  .d-flex.justify-content-between.align-items-center.mb-3
    h4.fs-20.mb-0 Map Languages to #{@asr_model.name}
    button.btn-close type="button" data-bs-dismiss="modal" aria-label="Close"

  p.text-muted.fs-12 Select the languages that this model supports for transcription.

  ruby:
    languages_json = @all_languages.map { |l| { id: l.id, name: l.name, code: l.code } }.to_json
    selected_json = @asr_model.language_ids.to_json

  div#modelLanguagesMapping v-cloak="" data-controller="model-language-mapper" data-languages="#{languages_json}" data-selected="#{selected_json}"
    = form_with model: @asr_model, url: update_languages_asr_model_path(@asr_model), method: :patch do |f|
      
      .input-group.mb-3
        span.input-group-text.bg-white.border-end-0
          i.bi.bi-search
        input.form-control.border-start-0.bg-white type="text" v-model="searchQuery" placeholder="Search languages..."

      .border.rounded.bg-light.p-3 style="max-height: 300px; overflow-y: auto;"
        .d-flex.justify-content-between.mb-2
          small.text-muted 
            | {{ filteredLanguages.length }} languages found
          small 
            a href="#" @click.prevent="selectAll" class="text-decoration-none me-3" Select All
            a href="#" @click.prevent="deselectAll" class="text-decoration-none text-danger" Clear All

        // We use hidden inputs to submit the array to Rails
        input type="hidden" name="asr_model[language_ids][]" value=""

        .row
          .col-md-6 v-for="lang in filteredLanguages" :key="lang.id"
            .form-check.mb-2
              input.form-check-input type="checkbox" :id="'lang_' + lang.id" :value="lang.id" name="asr_model[language_ids][]" v-model="selectedIds"
              label.form-check-label.fs-14 :for="'lang_' + lang.id"
                | {{ lang.name }} 
                span.text-muted.fs-10 
                  | {{ lang.code }}

      .form-actions.text-end.mt-4
        = f.submit "Save Mapping", class: "btn btn-primary px-4"