- content_for :page_title do
  = t('settings.edit_profile')

- content_for :heading do
  %h2= t('settings.profile')
  = render partial: 'settings/shared/profile_navigation'

= simple_form_for @account, url: settings_profile_path, html: { id: :edit_profile } do |f|
  = render 'shared/error_messages', object: @account

  %p.lead= t('edit_profile.hint_html')

  %h4= t('edit_profile.basic_information')

  .fields-row
    .fields-row__column.fields-row__column-6
      .fields-group
        = f.input :display_name, wrapper: :with_block_label, input_html: { maxlength: Account::DISPLAY_NAME_LENGTH_LIMIT, data: { default: @account.username } }

      .fields-group
        = f.input :note, wrapper: :with_block_label, input_html: { maxlength: Account::NOTE_LENGTH_LIMIT }

    .fields-row__column.fields-group.fields-row__column-6
      .input.with_block_label
        %label= t('simple_form.labels.defaults.fields')
        %span.hint= t('simple_form.hints.account.fields')

        = f.simple_fields_for :fields do |fields_f|
          .row
            = fields_f.input :name, placeholder: t('simple_form.labels.account.fields.name'), input_html: { maxlength: Account::Field::MAX_CHARACTERS_LOCAL }
            = fields_f.input :value, placeholder: t('simple_form.labels.account.fields.value'), input_html: { maxlength: Account::Field::MAX_CHARACTERS_LOCAL }

  .fields-row
    .fields-row__column.fields-row__column-6
      .fields-group
        = f.input :avatar,
                  hint: t('simple_form.hints.defaults.avatar', dimensions: Account::Avatar::AVATAR_GEOMETRY, size: number_to_human_size(Account::Avatar::AVATAR_LIMIT)),
                  input_html: { accept: Account::Avatar::AVATAR_IMAGE_MIME_TYPES.join(',') },
                  wrapper: :with_block_label

    .fields-row__column.fields-row__column-6
      .fields-group
        = image_tag @account.avatar.url, class: 'fields-group__thumbnail', id: 'account_avatar-preview'
        - if @account.avatar.present?
          = link_to settings_profile_picture_path('avatar'), data: { method: :delete }, class: 'link-button link-button--destructive' do
            = material_symbol 'delete'
            = t('generic.delete')

  .fields-row
    .fields-row__column.fields-row__column-6
      .fields-group
        = f.input :header,
                  hint: t('simple_form.hints.defaults.header', dimensions: Account::Header::HEADER_GEOMETRY, size: number_to_human_size(Account::Header::HEADER_LIMIT)),
                  input_html: { accept: Account::Header::HEADER_IMAGE_MIME_TYPES.join(',') },
                  wrapper: :with_block_label

    .fields-row__column.fields-row__column-6
      .fields-group
        = image_tag @account.header.url, class: 'fields-group__thumbnail', id: 'account_header-preview'
        - if @account.header.present?
          = link_to settings_profile_picture_path('header'), data: { method: :delete }, class: 'link-button link-button--destructive' do
            = material_symbol 'delete'
            = t('generic.delete')

  %h4= t('edit_profile.other')

  .fields-group
    = f.input :bot, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.bot')

  .actions
    = f.button :button, t('generic.save_changes'), type: :submit