= render partial: 'administrateurs/breadcrumbs',
  locals: { steps: [['Démarches', admin_procedures_path],
                    [@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
                    ['Attestation']] }

= render NestedForms::FormOwnerComponent.new
= form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure),
  html: { multipart: true , id: "attestation-template" },
  data: { turbo: 'true',
    controller: 'autosubmit attestation',
    autosubmit_debounce_delay_value: 1000,
    attestation_logo_attachment_official_label_value: AttestationTemplate.human_attribute_name(:logo_additional),
    attestation_logo_attachment_free_label_value: AttestationTemplate.human_attribute_name(:logo) } do |f|

  #attestation-edit.fr-container.fr-my-4w{ data: { controller: 'tiptap', tiptap_insert_after_tag_value: ' ' } }
    .fr-mb-6w
      = render Dsfr::AlertComponent.new(state: :info, title: "Nouvel éditeur d’attestation", heading_level: 'h3') do |c|
        - c.with_body do
          Cette page permet la mise en forme de l’attestation avec un nouvel éditeur plus flexible
          tout en respectant la charte de l’état. Essayez-la et donnez-nous votre avis
          en nous envoyant un email à #{mail_to(Current.contact_email, subject: "Feedback attestation v2")}.
          %br
          - if !@procedure.feature_enabled?(:attestation_v2) || @procedure.attestation_templates.v1.published.any?
            %strong Les attestations délivrées suivent encore l’ancien format :
            l’activation des attestations basées sur ce format sera bientôt disponible.
            %br

            = link_to("Suivez ce lien pour revenir aux attestations actuellement délivrées", edit_admin_procedure_attestation_template_path(@procedure))

    .fr-grid-row.fr-grid-row--gutters
      .fr-col-12.fr-col-lg-7
        %fieldset.fr-fieldset{ aria: { labelledby: 'edit-attestation' } }
          %legend.fr-fieldset__legend#edit-attestation
            %h1.fr-h2 Attestation
            %p.fr-text--regular
              L’attestation est émise au moment où un dossier est accepté, elle est jointe à l’email d’accusé d’acceptation.
              Elle est également disponible au téléchargement depuis l’espace personnel de l’usager.

          .fr-fieldset__element
            = render Dsfr::CalloutComponent.new(title: "Activation de la délivrance de l’attestation", theme: :neutral) do |c|
              - c.with_html_body do
                .fr-toggle.fr-toggle--label-left
                  = f.check_box :activated, class: "fr-toggle__input", id: dom_id(@attestation_template, :activated)
                  %label.fr-toggle__label{ for: dom_id(@attestation_template, :activated),
                    data: { fr_checked_label: "Activée", fr_unchecked_label: "Désactivée" } }
                    Activer cette option permet la délivrance automatique de l’attestation dès l’acceptation du dossier.
                    Désactiver cette option arrête immédiatement l’émission de nouvelles attestations.

          .fr-fieldset__element
            %h2.fr-h4 En-tête

          .fr-fieldset__element
            .fr-toggle.fr-toggle--label-left
              = f.check_box :official_layout, class: "fr-toggle__input", id: dom_id(@attestation_template, :official_layout), data: { "attestation-target": "layoutToggle"}
              %label.fr-toggle__label{ for: dom_id(@attestation_template, :official_layout), data: { fr_checked_label: "Oui", fr_unchecked_label: "Non" } }
                Je souhaite générer une attestation à la charte de l’état (logo avec Marianne)

          .fr-fieldset__element{ class: class_names("hidden" => !@attestation_template.official_layout?), data: { "attestation-target": 'logoMarianneLabelFieldset'} }
            = render Dsfr::InputComponent.new(form: f, attribute: :label_logo, input_type: :text_area, required: @attestation_template.official_layout?, opts: { rows: 3, data: { controller: :textarea, textarea_max_rows_value: 5 } }) do |c|
              - c.with_hint { "Exemple: Ministère de la Mer. 5 lignes maximum" }

          .fr-fieldset__element{ data: { attestation_target: 'logoAttachmentFieldset' } }
            %label.fr-label{ for: dom_id(@attestation_template, :logo) }
              - if @attestation_template.official_layout?
                = AttestationTemplate.human_attribute_name(:logo_additional)
              - else
                = AttestationTemplate.human_attribute_name(:logo)

            %span.fr-hint-text
              Dimensions conseillées : au minimum 500px de largeur ou de hauteur.

            %div{ id: dom_id(@attestation_template, :logo_attachment) }
              = render Attachment::EditComponent.new(attached_file: @attestation_template.logo, direct_upload: false)

          .fr-fieldset__element
            = render Dsfr::InputComponent.new(form: f, attribute: :label_direction, input_type: :text_area, required: false, opts: { rows: 2, data: { controller: :textarea, textarea_max_rows_value: 2 } }) do |c|
              - c.with_hint { "Exemple: Direction interministérielle du numérique. 2 lignes maximum" }

          .fr-fieldset__element.fr-mt-3w
            .fr-input-group{ class: class_names("fr-input-group--error" => f.object.errors.include?(:json_body)) }
              %label.fr-label.fr-h4
                = AttestationTemplate.human_attribute_name :body
                = render EditableChamp::AsteriskMandatoryComponent.new

              .flex.flex-gap-2.fr-mb-2w
                - @buttons.each do |buttons|
                  .flex.flex-gap-1
                    - buttons.each do |(label, action, icon)|
                      %button.fr-btn.fr-btn--secondary.fr-btn--sm{ type: 'button', title: label, class: icon == :hidden ? "hidden" : "fr-icon-#{icon}", data: { action: 'click->tiptap#menuButton', tiptap_target: 'button', tiptap_action: action } }
                        = label

              #editor.tiptap-editor{ data: { tiptap_target: 'editor' }, aria: { describedby: "attestation-template-json-body-messages"} }
              = f.hidden_field :tiptap_body, data: { tiptap_target: 'input' }

              .fr-error-text{ id: "attestation-template-json-body-messages", class: class_names("hidden" => !f.object.errors.include?(:json_body)) }
                - if f.object.errors.include?(:json_body)
                  = render partial: "shared/errors_list", locals: { object: f.object, attribute: :json_body }

          .fr-fieldset__element
            %p.fr-hint-text
              Tapez le caractère
              %strong.fr-text-title--grey @
              suivi du nom de la balise, ou cliquez sur les boutons ci-dessous. Les champs conditionnés ne sont pas disponibles.

            = render TagsButtonListComponent.new(tags: @attestation_template.tags_categorized)

          .fr-fieldset__element.fr-mt-2w
            %h2.fr-h4 Pied de page

          .fr-fieldset__element
            %label.fr-label{ for: dom_id(@attestation_template, :signature) } Tampon ou signature
            %span.fr-hint-text
              Dimensions conseillées : au minimum 500px de largeur ou de hauteur.

            %div{ id: dom_id(@attestation_template, :signature_attachment) }
              = render Attachment::EditComponent.new(attached_file: @attestation_template.signature, direct_upload: false)

          .fr-fieldset__element
            = render Dsfr::InputComponent.new(form: f, attribute: :footer, input_type: :text_area, required: false, opts: { rows: 3, data: { controller: :textarea, textarea_max_rows_value: 3 } }) do |c|
              - c.with_hint { "Exemple: 20 avenue de Ségur, 75007 Paris" }

      #preview-column.fr-col-12.fr-col-lg-5.fr-background-alt--blue-france
        .sticky--top.fr-px-1w{ data: { controller: "sticky-top" } }
          .flex.justify-between.align-center
            %h2.fr-h4 Aperçu
            %p= link_to 'Prévisualiser en taille réelle', admin_procedure_attestation_template_v2_path(@procedure, format: :pdf), class: 'fr-link', target: '_blank', rel: 'noopener'
          %iframe.attestation-preview{ title: "Aperçu", src: admin_procedure_attestation_template_v2_path(@procedure, format: :pdf), data: { attestation_target: 'preview' } }
          %p.fr-hint-text
            L’aperçu est mis à jour automatiquement après chaque modification.
            Pour générer un aperçu fidèle avec champs et dates,
            = link_to("créez-vous un dossier", new_dossier_path(procedure_id: @procedure, brouillon: true), **external_link_attributes)
            et acceptez-le : l’aperçu l’utilisera.

  - if @procedure.feature_enabled?(:attestation_v2) && @attestation_template.draft?
    - content_for(:sticky_header) do
      = render partial: "sticky_header"

  .padded-fixed-footer
    .fixed-footer#fixed_footer
      = render partial: "fixed_footer", locals: { procedure: @procedure }