<% require_phone_2fa = @template.preferences['require_phone_2fa'] == true %>
<%= render 'shared/turbo_modal_large', title: params[:selfsign] ? t('add_recipients') : t('add_new_recipients') do %>
  <% options = [require_phone_2fa ? nil : [t('via_email'), 'email'], require_phone_2fa ? nil : [t('via_phone'), 'phone'], [t('detailed'), 'detailed'], [t('upload_list'), 'list']].compact %>
  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center px-2 mt-4 block">
    <div class="flex justify-center">
      <% options.each_with_index do |(label, value), index| %>
        <div>
          <%= radio_button_tag 'option', value, value == (require_phone_2fa ? 'detailed' : 'email'), class: 'peer hidden', data: { action: 'change:toggle-visible#trigger' } %>
          <label for="option_<%= value %>" class="block bg-base-200 md:min-w-[112px] text-sm font-semibold whitespace-nowrap py-1.5 px-4 peer-checked:bg-base-300 <%= 'hidden sm:inline-block' if value == 'list' %> <%= 'rounded-l-3xl' if index.zero? %> <%= 'rounded-r-3xl sm:rounded-r-none' if value == 'detailed' %> <%= 'rounded-r-3xl' if index == options.size - 1 %>">
            <%= label %>
          </label>
        </div>
      <% end %>
    </div>
  </toggle-visible>
  <div class="px-5 mb-5 mt-4">
    <% unless require_phone_2fa %>
      <div id="email">
        <%= render 'email_form', template: @template %>
      </div>
      <div id="phone" class="hidden">
        <%= render 'phone_form', template: @template %>
      </div>
    <% end %>
    <div id="detailed" class="<%= 'hidden' unless require_phone_2fa %>">
      <%= render 'detailed_form', template: @template, require_phone_2fa: %>
    </div>
    <div id="list" class="hidden">
      <%= render 'list_form', template: @template %>
    </div>
    <%= render 'submissions/error' %>
  </div>
  <%= content_for(:modal_extra) %>
<% end %>
