= render "worlds_nav"

= form_with model: @world_bet, url: "/wjpc_bets/new", method: :post do |form|
  .alert.alert-primary role="alert"
    = t("worlds.new.message")
  
  .row.mt-4
    .col
      .form-floating
        = form.text_field :name, autocomplete: "off", class: "form-control"
        = form.label :name, class: "required"

  .row.mt-4
    .col
      h4 = t("worlds.new.world_section")

  - (1..10).each do |i|
    .row.mt-3
      .col
        .input-group
          .input-group-text ##{i} <i class="ms-2" style="color: cadetblue;">(x#{WorldBet.multiplier(i - 1)})</i>
          = form.select "w_bet_#{i}", @world_participants.map { |p| [Flags.get_flag(p.world_country.code) + " " + p.name, p.id] }, {}, class: "form-select"

  .row.mt-4
    .col
      h4 = t("worlds.new.french_section")
  
  - (1..10).each do |i|
    .row.mt-3
      .col
        .input-group
          .input-group-text ##{i} <i class="ms-2" style="color: cadetblue;">(x#{WorldBet.multiplier(i - 1)})</i>
          = form.select "f_bet_#{i}", @french_participants.map { |p| [Flags.get_flag(p.world_country.code) + " " + p.name, p.id] }, {}, class: "form-select"

  - if @w_array && @f_array
    - (1..10).each do |i|
      javascript:
        el = document.querySelector('select[name="world_bet[w_bet_#{i}]"]');
        el.value = "#{@w_array[i - 1]}"
        el = document.querySelector('select[name="world_bet[f_bet_#{i}]"]');
        el.value = "#{@f_array[i - 1]}"

  .row.mt-4.mb-5
    .col
      = form.submit t("helpers.buttons.validate"), class: "btn btn-primary"