.modal-container{data: {controller: "modal media-picker infinite-scroll", mode: @mode}}
  .modal.modal-large{data: {target: "infinite-scroll.scrollContainer"}}
    %header
      = button_tag type: :default, class: 'modal-close-cross', data: {action: "modal#close"} do
        = icon('cross')
      - if @mode == "multiple"
        %h3=t "spina.images.choose_images"
      - else
        %h3=t "spina.images.choose_image"
    %section.media-picker
      = hidden_field_tag :input, params[:input], data: {target: "media-picker.input"}
  
      %div{data: {target: "media-picker.grid"}}
        = render 'media_picker_grid'

    - if @mode == "trix"
      %section.media-picker-footer
        = text_field_tag :alt, nil, placeholder: "✍️ Alt", data: {target: "media-picker.alt"}
        = text_field_tag :link_to_url, nil, placeholder: "🔗 Link to URL", data: {target: "media-picker.linkToUrl"}

        = button_tag type: :button, class: 'pull-right button button-primary', data: {action: "media-picker#insert_trix"} do
          =t "spina.images.insert_image"

    - if @mode == "multiple"
      %section.media-picker-footer
        .media-picker-selected-images{data: {target: "media-picker.selectedImages"}}
          - @selected_images.each do |image|
            = image_tag thumbnail_url(image), data: {target: "media-picker.selectedImage", image_id: image.id, signed_blob_id: image.file.blob.signed_id}

        = button_tag type: :button, class: 'pull-right button button-primary', data: {action: "media-picker#choose_multiple"} do
          =t "spina.images.confirm_selection"
          %span{data: {target: "media-picker.selectedCount"}} (#{@selected_images.size})