<% @title = t('.header') %>

<%= render 'account/shared/workflow/box' do |box| %>
  <% box.title @title %>
  <% box.body do %>
    <% within_fields_namespace(:self) do %>
      <%= form_for @user, url: account_onboarding_user_detail_path(@user), method: :put, html: {class: 'form'} do |f| %>
        <%= render 'account/shared/forms/errors', form: f %>
        <%= render 'account/shared/notices', form: f %>

        <div class="grid grid-cols-1 gap-y gap-x sm:grid-cols-2">
          <div class="sm:col-span-1">
            <%= render 'shared/fields/text_field', form: f, method: :first_name, other_options: {required: true}, options: {autofocus: true} %>
          </div>

          <div class="sm:col-span-1">
            <%= render 'shared/fields/text_field', form: f, method: :last_name, other_options: {required: true} %>
          </div>

          <% # only edit the team name if this user is an admin and they are the first user. %>
          <% # yes, that's redundant. %>
          <% if can?(:edit, f.object.current_team) && f.object.current_team.users.count == 1 %>
            <div class="sm:col-span-2">
              <%= f.fields_for :current_team do |tf| %>
                <%= render 'shared/fields/text_field', form: tf, method: :name %>
              <% end %>
            </div>
          <% end %>

          <div class="sm:col-span-2">
            <%= render 'shared/fields/super_select', form: f, method: :time_zone,
              choices: time_zone_options_for_select(@user.time_zone, nil, ActiveSupport::TimeZone),
              other_options: {search: true, required: true, use_browser_time_zone: true} %>
          </div>
        </div>

        <div class="buttons">
          <%= f.submit t('.buttons.next'), class: first_button_primary %>
          <% if other_teams.any? %>
            <%= link_to t('global.buttons.back'), main_app.account_teams_path, class: first_button_primary %>
          <% else %>
            <%= link_to t('menus.main.labels.logout'), main_app.destroy_user_session_path(@user, onboard_logout: true), class: first_button_primary, method: 'delete' %>
          <% end %>
        </div>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<script type="text/javascript">
  function btSetUserTimeZone(){

    // generate a mapping of js timezones compared to rails timezones.
    var jsTimezoneMapping = {
      <% ActiveSupport::TimeZone::MAPPING.each do |key, value| %>
      "<%= value.html_safe %>": "<%= key.html_safe %>",
      <% end %>
    }

    // figure out the rails timezone value.
    var railsValue = jsTimezoneMapping[jstz.determine().name()];

    var useBrowserTimeZone = document.querySelector("#user_time_zone").dataset.useBrowserTimeZone

    if (useBrowserTimeZone == "true") {
      // set the form accordingly if we can find a matching option in the dropdown
      var option = document.querySelector("#user_time_zone option[value=\"" + railsValue + "\"]")
      if(option){
        document.querySelector("#user_time_zone").value = railsValue;

        // update the select2 as well. is there a better way to handle this?
        // why don't _they_ handle this for us?
        var select2 = document.querySelector("#select2-user_time_zone-container");
        select2.attributes.title = option.text;
        select2.textContent = option.text;
      }else{
        console.log('We were unable to find a timezone matching the rails detected value of ', railsValue);
      }
    }

  }
  document.addEventListener('turbo:load', btSetUserTimeZone, { once: true });
</script>