article
  h1 welcome to the css stepper:
  ul
    li work only with CSS
    li can add an item by only copying the markup
    li small CSS foot-print
ul.container
  li.container__item
    h2 with debug
    .stepper(data-debug)
      - let name = `stepper-3`
      each val, index in ['Description', 'Duration', 'Due Time', 'youpi' ]
        - const id = `${name}-${index}`
        - const isFirst = index === 0
        input.stepper__input(id=id name=name type="radio" checked=isFirst)
        .stepper__step
          label.stepper__button(for=id)= val
  li.container__item
    h2 more steps
    .stepper
      - name = `stepper-5`
      each val, index in ['Description', 'Duration', 'Due Time', 'youpi', 'clapou' ]
        - const id = `${name}-${index}`
        - const isFirst = index === 0
        input.stepper__input(id=id name=name type="radio" checked=isFirst)
        .stepper__step
          label.stepper__button(for=id)
          p.stepper__content=val

  - const steps = [
  -  { label: `chocolate`, content: `crunchy` },
  -  { label: `vanilla`, content: `coming from heaven` },
  -  { label: `strawberry`, content: `red and sweet` },
  -  { label: `manga`, content: `we need more yellow` },
  -  { label: `banana`, content: `banananananana Batman!` },
  -  { label: `apple`, content: `The one that don't make you sleep` },
  -  { label: `orange`, content: `only for the juice` },
  - ]

  li.container__item
    h2 a bigger example
    .stepper
      - name = `stepper-big`
      each val, index in steps
        - const id = `${name}-${index}`
        - const isFirst = index === 0
        input.stepper__input(id=id name=name type="radio" checked=isFirst)
        .stepper__step
          label.stepper__button(for=id)= val.label
          p.stepper__content(for=id)= val.content

  li.container__item
    h2 with flexbox
    .stepper.stepper--flexbox
      - name = `stepper-flex`
      each val, index in steps
        - const id = `${name}-${index}`
        - const isFirst = index === 0
        input.stepper__input(id=id name=name type="radio" checked=isFirst)
        .stepper__step
          label.stepper__button(for=id)= val.label
          p.stepper__content(for=id)= val.content