= render NestedForms::FormOwnerComponent.new
= form_for(commentaire, url: form_url, html: { multipart: true, data: { controller: 'persisted-form', persisted_form_key_value: dom_id(@dossier) } }) do |f|
  - dossier = commentaire.dossier
  - placeholder = t('views.shared.dossiers.messages.form.write_message_to_administration_placeholder')
  - if instructeur_signed_in? || administrateur_signed_in? || expert_signed_in?
    - placeholder = t('views.shared.dossiers.messages.form.write_message_placeholder')
  %p.mandatory-explanation= t('asterisk_html', scope: [:utils])

  = render Dsfr::InputComponent.new(form: f, attribute: :body, input_type: :text_area, opts: { rows: 5, placeholder: placeholder, title: placeholder, class: 'fr-input message-textarea'})

  .fr-mt-3w{ data: { controller: "file-input-reset" } }
    %button.hidden.fr-btn.fr-btn--tertiary.fr-btn--sm.fr-icon-delete-line.fr-mr-1w{ 'aria-label': t('views.shared.messages.remove_file'), data: { 'file-input-reset-target': 'reset', action: 'file-input-reset#reset' } }
    = f.file_field :piece_jointe, direct_upload: true, data: { 'file-input-reset-target': 'input', action: 'change->file-input-reset#showResetButton' }

  .fr-mt-3w
    = f.submit t('views.shared.dossiers.messages.form.send_message'), class: 'fr-btn', data: { disable: true }