<div class="max-w-xl mx-auto px-2">
  <h1 class="flex text-4xl font-bold items-center justify-center my-8 space-x-2">
    <span><%= t('initial_setup') %></span>
    <%= svg_icon('waving_hand', class: 'h-10 w-10') %>
  </h1>
  <%= form_for '', html: { class: 'space-y-6' }, url: setup_index_path do |f| %>
    <div class="space-y-2">
      <%= fields_for @user do |ff| %>
        <div class="grid gap-2 md:grid-cols-2 md:gap-4">
          <div class="form-control">
            <%= ff.label :first_name, t('first_name'), class: 'label' %>
            <%= ff.text_field :first_name, required: true, class: 'base-input' %>
          </div>
          <div class="form-control">
            <%= ff.label :last_name, t('last_name'), class: 'label' %>
            <%= ff.text_field :last_name, required: true, class: 'base-input' %>
          </div>
        </div>
      <% end %>
      <%= fields_for @user do |ff| %>
        <div class="form-control">
          <%= ff.label :email, t('email'), class: 'label' %>
          <%= ff.email_field :email, required: true, class: 'base-input' %>
        </div>
      <% end %>
      <%= fields_for @account do |ff| %>
        <set-timezone data-input-id="account_timezone"></set-timezone>
        <%= ff.hidden_field :timezone %>
        <div class="form-control">
          <%= ff.label :name, t('company_name'), class: 'label' %>
          <%= ff.text_field :name, required: true, class: 'base-input' %>
        </div>
      <% end %>
      <%= fields_for @user do |ff| %>
        <div class="form-control">
          <%= ff.label :password, t('password'), class: 'label' %>
          <password-input class="block relative">
            <%= ff.password_field :password, required: true, placeholder: '************', class: 'base-input w-full pr-10', data: { target: 'password-input.passwordInput' } %>
            <button data-target="password-input.togglePasswordVisibility" type="button" class="absolute inset-y-0 h-12 right-0 pr-3 flex items-center">
              <span data-target="password-input.hiddenPasswordIcon">
                <%= svg_icon('eye', class: 'w-6 h-6 shrink-0 bg-white') %>
              </span>
              <span data-target="password-input.visiblePasswordIcon" class="hidden">
                <%= svg_icon('eye_off', class: 'w-6 h-6 shrink-0 bg-white') %>
              </span>
            </button>
          </password-input>
        </div>
      <% end %>
      <%= fields_for @encrypted_config do |ff| %>
        <div class="form-control">
          <% if @encrypted_config.value.blank? %>
            <set-origin-url data-input-id="encrypted_config_value"></set-origin-url>
          <% end %>
          <%= ff.label :value, t('app_url'), class: 'label' %>
          <%= ff.text_field :value, required: true, class: 'base-input' %>
        </div>
      <% end %>
      <%= fields_for @account do |ff| %>
        <div class="form-control">
          <%= ff.label :locale, t('language'), class: 'label' %>
          <%= ff.select :locale, options_for_select(AccountsController::LOCALE_OPTIONS.invert, @account.locale), {}, class: 'base-select' %>
        </div>
      <% end %>
    </div>
    <div class="form-control">
      <%= f.button button_title, class: 'base-button' %>
    </div>
  <% end %>
</div>
