.patron
  .container
    %h1 Icônes

    %span.icon.follow
    %span.icon.unfollow
    %span.icon.unarchive
    %span.icon.edit
    %span.icon.bubble
    %span.icon.attached
    %span.icon.lock
    %span.icon.add
    %span.icon.justificatif
    %span.icon.printer
    %span.icon.account
    %span.icon.super-admin
    %span.icon.mail
    %span.icon.reply
    %span.icon.search
    %span.icon.sign-out
    %span.icon.info
    %span.icon.help
    %span.icon.phone
    %span.icon.clock
    %span.icon.preview
    %span.icon.retry
    %span.icon.download
    %span.icon.frown
    %span.icon.meh
    %span.icon.smile

    %h1 Formulaires

    %form.form
      = form_for @dossier, url: '', html: { class: 'form' } do |f|
        = render EditableChamp::SectionComponent.new(dossier: @dossier, types_de_champ: @dossier.revision.types_de_champ_public)

        .editable-champ.editable-champ-text
          %label Mot de passe
          %input{ type: "password", value: "12345678" }

        %h3.fr-h5 Bouton radio verticaux
        .radios.vertical
          = f.label :archived, value: true do
            = f.radio_button :archived, true
            Option A
            %p.notice Une option tout à fait valable.
          = f.label :archived, value: false do
            = f.radio_button :archived, false
            Option B
            %p.notice Une autre option, pas mal non plus.

        %h3.fr-h5 Interrupteur
        %label.toggle-switch
          = f.check_box :archived, class: 'toggle-switch-checkbox'
          %span.toggle-switch-control.round
          %span.toggle-switch-label.on Activé
          %span.toggle-switch-label.off Désactivé

        .send-wrapper
          = f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'
          = f.submit 'Envoyer', class: 'button send primary'

        %hr

    %h1 Boutons

    .patron-section
      = link_to ".button", "#", class: "button"

      = link_to ".button.primary", "#", class: "button primary"

      = link_to ".button.secondary", "#", class: "button secondary"

      = link_to ".button.danger", "#", class: "button danger"

      = link_to "#", class: "button" do
        %span.icon.follow
        = "Bouton avec icone et texte"

      = link_to "#", class: "button icon-only" do
        %span.icon.follow

    .patron-section
      %button.button{ disabled: true } .button.disabled

      %button.button.primary{ disabled: true } .button.primary.disabled

      %button.button.secondary{ disabled: true } .button.secondary.disabled

      %button.button.danger{ disabled: true } .button.danger.disabled

    .patron-section
      = link_to ".button.accepted", "#", class: "button accepted"

      = link_to ".button.refused", "#", class: "button refused"

      = link_to ".button.without-continuation", "#", class: "button without-continuation"

    .patron-section
      = link_to ".button.small", "#", class: "button small"

      = link_to ".button.small.primary", "#", class: "button small primary"

    .patron-section
      = link_to ".button.large", "#", class: "button large"

      = link_to ".button.large.primary", "#", class: "button large primary"

    .patron-section
      = link_to ".button.primary.expand", "#", class: "button primary expand"

    %h1 Dropdown

    .dropdown
      .button.primary.dropdown-button .button.primary.dropdown-button
      .dropdown-content.fade-in-down
        %ul.dropdown-items
          %li .dropdown-content ul.dropdown-items li
          %li .dropdown-content ul.dropdown-items li

    .dropdown
      .button.dropdown-button .button.dropdown-button
      .dropdown-content.fade-in-down
        %ul.dropdown-items
          %li
            %a{ href: '#' }
              %span.icon.mail
              .dropdown-description
                %h4 Action
                %p Explanation
          %li
            %a{ href: '#' }
              %span.icon.edit
              .dropdown-description
                %h4 Other action
                %p Explanation

    .dropdown
      .button.dropdown-button .button.dropdown-button (left)
      .dropdown-content.fade-in-down.left-aligned
        %ul.dropdown-items
          %li .dropdown-content.left-aligned ul.dropdown-items li
          %li .dropdown-content.left-aligned ul.dropdown-items li

    %h1 Labels

    %span.label .label
    %span.label.brouillon .label.brouillon
    %span.label.instruction .label.instruction
    %span.label.construction .label.construction
    %span.label.accepted .label.accepted
    %span.label.refused .label.refused
    %span.label.without-continuation .label.without-continuation

    %h1 Cards

    .card
      .card-title
        Titre de la carte
      %p Et voici le contenu de la carte

    .card.feedback
      .card-title
        Titre de la carte pour demander un avis
      %p Utilisez cette carte pour informer d’une nouveauté produit ou demander l’avis des utilisateurs.

    %h1 Table

    %table.table
      %thead
        %tr
          %th Header 1
          %th Header 2
      %tbody
        %tr
          %td Table Data 1
          %td Table Data 2
        %tr
          %td Table Data 3
          %td Table Data 4

    %h2 Vertical layout (.table.vertical)

    %table.table.vertical
      %tbody
        %tr
          %th Header 1
          %td Table Data 1
        %tr
          %th Header 2
          %td Table Data 2
        %tr
          %th.header-section{ colspan: 2 } Header section
        %tr
          %th Header 3
          %td Table Data 3

    %h1 Header
  .sub-header
    .container
      Titre
      %nav.fr-tabs
        %ul.fr-tabs__list{ role: 'tablist' }
          = tab_item("Onglet actif", "#", active: true)
          = tab_item("Onglet inactif", "#")
          = tab_item("Onglet avec badge", "#", badge: 2)
          = tab_item("Onglet avec notification", "#", notification: true)

  .container
    %h1 Breadcrumbs

    %ul.breadcrumbs
      %li
        = link_to "Démarche 123", "#"
      %li
        = "Dossier n° 38"


    %h1 Layout deux colonnes

  .two-columns
    .columns-container
      .column
        Insérer ici le contenu de la colonne 1
      .column
        Insérer ici le contenu de la colonne 2

  .container
    %section.ask-avis
      %h1 Inviter une personne à donner son avis
      %p.avis-notice L’invité pourra consulter, donner un avis sur le dossier et contribuer au fil de messagerie, mais il ne pourra le modifier.

      = form_for Avis.new, url: '/', html: { class: 'form' } do |f|
        = f.email_field :email, placeholder: 'Adresse email', required: true
        = f.text_area :introduction, rows: 3, value: 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true
        .send-wrapper
          = f.submit 'Demander un avis', class: 'button send'

    %section.list-avis
      %h1.title
        Avis des invités
        %span.fr-badge 1

      %ul
        %li.one-avis
          %h2.claimant
            Vous
            %span.date Demande d’avis envoyée le 12/01/2012
          %p Bonjour, merci de me donner votre avis sur ce dossier.

          .answer.flex.align-start
            .icon.bubble.avis-icon
            .width-100
              %h2.instructeur
                = Current.contact_email
                %span.date Réponse donnée le 13/01/2012
              %p Je donne un avis favorable

  .container
    %h2.empty-text Aucun dossier
    %p.empty-text-details Vous n’avez commencé aucune démarche pour l’instant.

  .container
    %h1 Dsfr::CalloutComponent
    %p= link_to "Documentation DSFR Mis en avant (callout)", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant", **external_link_attributes

    = render Dsfr::CalloutComponent.new(title: "Information minimale") do |c|
      - c.with_body do
        %p Ceci est le minimum pour afficher un callout.

    = render Dsfr::CalloutComponent.new(title: "Information importante ou avertissement", theme: :warning) do |c|
      - c.with_body do
        Le contenu de cette description est libre.
      - c.with_bottom do
        %button.fr-btn Call to action

    = render Dsfr::CalloutComponent.new(title: "Titre d'une information positive", theme: :success, icon: "fr-icon-message-2-fill") do |c|
      - c.with_body do
        %p
          N'importe quelle icône
          = link_to("du jeu d'icônes", "https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/icones", **external_link_attributes)
          peut être utilisée.

    %h1 Dsfr::CardVerticalComponent
    %p= link_to "Documentation DSFR Carte", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte", **external_link_attributes

    .fr-grid-row.fr-grid-row--gutters.fr-py-5w
      .fr-col-md-6.fr-col-12
        = render Dsfr::CardVerticalComponent.new(title: "Optional title", desc: "Optional description")

      .fr-col-md-6.fr-col-12
        = render Dsfr::CardVerticalComponent.new(title: "With footer buttons") do |c|
          - c.with_footer_button do
            = link_to "Button 1", "#", class: "fr-btn", **external_link_attributes
          - c.with_footer_button do
            = button_tag "Button 2", class: "fr-btn fr-btn--secondary"

    %h1 Dsfr::NoticeComponent
    %p= link_to "Documentation DSFR Bandeau d'information", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante", **external_link_attributes
    .my-3
      = render Dsfr::NoticeComponent.new(closable: true) do |c|
        - c.with_title do
          Titre de cette notice
          = link_to "avec un lien optionnel.", "#"
          Des marges verticales ont ici été rajoutées.



  .container
    %h1.fr-mt-4w Attachment::EditComponent
    %span.fr-hint-text Note: direct upload, suppression ne marchent pas comme attendu ici.

    - champ = @dossier.champs.find { _1.type_champ == TypeDeChamp.type_champs.fetch(:piece_justificative) }
    - tdc = champ.type_de_champ
    - avis = Avis.new

    - if attachment = ActiveStorage::Attachment.last
      - attachment.update(created_at: 1.second.ago)
      %h3 New attachment
      = render Attachment::EditComponent.new(champ:, attached_file: champ.piece_justificative_file, attachment: nil)

      %h3.fr-mt-4w Existing attachment
      = render Attachment::EditComponent.new(champ:, attached_file: champ.piece_justificative_file, attachment:)

      %h3.fr-mt-4w Existing attachment, user can not destroy
      = render Attachment::EditComponent.new(champ:, attached_file: champ.piece_justificative_file, attachment:, user_can_destroy: false)

      %h3.fr-mt-4w Existing attachment, error
      - attachment.blob.metadata[:virus_scan_result] = ActiveStorage::VirusScanner::INFECTED
      = render Attachment::EditComponent.new(champ:, attached_file: Champ.new.piece_justificative_file, attachment:)


      %h3.fr-mt-4w New attachment on TypeDeChamp
      = render Attachment::EditComponent.new(auto_attach_url: "/some-auto-attach-path", attached_file: tdc.piece_justificative_template, attachment: nil)

      %h3.fr-mt-4w Existing attachment on TypeDeChamp, view as link
      = render Attachment::EditComponent.new(auto_attach_url: "/some-auto-attach-path", attached_file: tdc.piece_justificative_template, attachment: attachment.reload)

      %h3.fr-mt-4w Existing attachment on TypeDeChamp view as download
      = render Attachment::EditComponent.new(auto_attach_url: "/some-auto-attach-path", attached_file: tdc.piece_justificative_template, attachment: attachment.reload, view_as: :download)

      %h3.fr-mt-4w New attachment on generic object
      = render Attachment::EditComponent.new(attached_file: avis.introduction_file)

      %h3.fr-mt-4w Existing attachment on generic object, view as download
      = render Attachment::EditComponent.new(attached_file: avis.introduction_file, attachment: attachment.reload, view_as: :download)