.fr-input-group{ class: input_group_class }
  = @form.label :accreditation_number, for: @champ.accreditation_number_input_id, class: 'fr-label' do
    - safe_join [t('.accreditation_number_label'), @champ.required? ? render(EditableChamp::AsteriskMandatoryComponent.new) : ''], ' '
  %p.fr-hint-text{ id: dom_id(@champ, :accreditation_number_notice) }= t('.accreditation_number_notice')
  = @form.text_field :accreditation_number,
    required: @champ.required?,
    aria: { describedby: [dom_id(@champ, :accreditation_number_notice), @champ.accreditation_error? ? dom_id(@champ, :accreditation_number_error) : nil].compact.join(' ') },
    data: { controller: 'format', format: 'integer' },
    class: "width-33-desktop fr-input small-margin", id: @champ.accreditation_number_input_id

  - if @champ.accreditation_error?
    %p.fr-error-text{ id: dom_id(@champ, :accreditation_number_error) }= t('.accreditation_number_error')
  - elsif @champ.fetch_external_data_pending?
    %p.fr-info-text= t('.accreditation_number_verification_pending')

.fr-input-group{ class: input_group_class }
  = @form.label :accreditation_birthdate, for: @champ.accreditation_birthdate_input_id, class: 'fr-label' do
    - safe_join [t('.accreditation_birthdate_label'), @champ.required? ? render(EditableChamp::AsteriskMandatoryComponent.new) : ''], ' '
  %p.fr-hint-text{ data: { controller: 'date-input-hint' } }= t('.accreditation_birthdate_hint')
  = @form.date_field :accreditation_birthdate,
    required: @champ.required?,
    aria: { describedby: dom_id(@champ, :accreditation_birthdate) },
    class: "width-33-desktop fr-input small-margin", id: @champ.accreditation_birthdate_input_id