Table

.table
  .table-header.hidden-sm
    .row
      .col-xs-3
        | Nom du site
        = link_to("#") do
          i.ph-sort-ascending-bold
      .col-xs-2
        | Ref. contrat
      .col-xs-2
        | Adresse
      .col-xs-2
        | Ville
      .col-xs
        | PDL
      .col-xs

  = render partial: "story_book/components/multiple/table/line", locals: { accordion_collapse: "closed" }
  = render partial: "story_book/components/multiple/table/line", locals: { accordion_collapse: "" }
  = render partial: "story_book/components/multiple/table/line", locals: { accordion_collapse: "closed" }
  = render partial: "story_book/components/multiple/table/line", locals: { accordion_collapse: "closed" }

.js-accordion-container class= "#{accordion_collapse}"
  .table-line.table-line-collapse.js-accordion-trigger
    .row.middle-xs
      .col-xs-12.col-md-3
        .icon-and-label.ui-m-med
          i.ph-plus-circle.icon-when-closed
          i.ph-minus-circle.icon-when-open
          | Enercoop
      .col-xs-6.col-md-2
        h5.ui-label-reg.mt-2.mb-1.hidden-unless-sm Ref. contrat
        | CNT-19-XXX
      .col-xs-6.col-md-2
        h5.ui-label-reg.mt-2.mb-1.hidden-unless-sm Adresse
        | 16 quai de Loire
      .col-xs-6.col-md-2
        h5.ui-label-reg.mt-2.mb-1.hidden-unless-sm Ville
        | Paris
      .col-xs-6.col-md-1
        h5.ui-label-reg.mt-2.mb-1.hidden-unless-sm PDL
        | XXXXXXXXXXXXXX

      - link_to_invoices = link_to "#", class: "link" do
        i.ph-arrow-right-bold
        | Factures

      / Mobile version needs some margin above the link
      .col-xs-12.mt-2.hidden-unless-sm
        = link_to_invoices
      / Desktop version needs to align the link to the right of the column
      .col-xs-2.flex.end-sm.hidden-sm
        = link_to_invoices

  .table-content.js-accordion-content
    .row
      .col-xs-12.col-md-4
        h4.ui-m-med.hidden-sm Données de facturation
        h5.ui-label-reg.mb-1 Tiers Payeur
        p XXXX
        h5.ui-label-reg.mb-1 Rythme de facturation
        p mensuel
      .col-xs-6.col-md-4
        h4.ui-m-med.hidden-sm Données contractuelles
        h5.ui-label-reg.mb-1 Titulaire contrat (raison sociale)
        p Enercoop
        h5.ui-label-reg.mb-1 Statut du contrat
        p Actif

      .col-xs-6.col-md-4
        h4.ui-m-med.hidden-sm Données techniques
        h5.ui-label-reg.mb-1 Type de compteur
        p PME-PMI
        h5.ui-label-reg.mb-1 Segment
        p C4