h1 = t('programming_groups.new.create_programming_pair')
.row
  .col-md-6
    p
      => t('programming_groups.new.own_user_id')
      b
        = current_user.id_with_type

    button.btn.btn-success data-bs-toggle= 'modal' data-bs-target= '#modal-info-pair-programming'
      i.fa-solid.fa-circle-info
      = t('programming_groups.new.pair_programming_info')

    p.mt-4
      = t('programming_groups.new.enter_partner_id', exercise_title: @exercise.title)
    = render('form')

    div.mt-4
      == t('programming_groups.new.work_alone', path: implement_exercise_path(@exercise))

  .col-md-6
    h5 = t('programming_groups.new.find_partner_title')
    p
      = t('programming_groups.new.find_partner_description')
    - if !browser.safari?
      iframe name="embed_readwrite" src="https://etherpad.xopic.de/p/find_programming_group_for_exercise_#{@exercise.id}?userName=#{CGI.escape(current_user.displayname)}&showControls=false&showChat=false&showLineNumbers=true&useMonospaceFont=false" width="100%" height="300" style='border: 1px solid black;'
    - else
      == t('programming_groups.new.safari_not_supported', url: "https://etherpad.xopic.de/p/find_programming_group_for_exercise_#{@exercise.id}?userName=#{CGI.escape(current_user.displayname)}&showControls=false&showChat=false&showLineNumbers=true&useMonospaceFont=false")


= render('shared/modal', classes: 'modal-lg', id: 'modal-info-pair-programming', template: 'programming_groups/_info_pair_programming', title: t('programming_groups.new.pair_programming_info'))