extends markup/_medarbejdere-template.pug
include ../../markup/partials/mixins/_empty-state.pug
include ../../markup/partials/mixins/_toolbar.pug
include ../../markup/partials/mixins/_notification.pug
include markup/_holiday-calendar.pug


block append variables
  - var page_title = "Holiday overview"

mixin table-row(icon, dates, numdates)
  tr
    td
      span(data-icon=icon).icon.icon--circular-background.icon--with-label 
        span.icon__label= dates
    td.table__cell--align-right= numdates


block content
  .page__content__block
    .row.row--align-left
      .row__item.row__item--basis-35
        .content-toggle__content(hidden).vertical-spacing-bottom--large
          .row.row--align-bottom.row--no-wrap
            .row__item
              h2 Afholdt ferie
            .row__item.row__item--no-shrink
              button(data-icon="" aria-expanded="true").content-toggle__close.button.button--small.button--text.button--text--align-edge-visually.button--icon Skjul afholdt ferie
          +empty-state("Du har ingen afholdt ferie", false, "Kontakt din lokale fraværsadministrator, hvis du skal have registreret afholdt ferie.").vertical-spacing-top--small

        .row.row--align-bottom.row--no-wrap
          .row__item
            h2 Planlagt ferie
          .row__item.row__item--no-shrink
            button(data-icon="" aria-expanded="false" aria-haspopup="true").content-toggle__toggle.button.button--small.button--text.button--text--align-edge-visually.button--icon Vis afholdt ferie

        .vertical-spacing-top--small
          table.table.table--no-header-column.table--wrap-default-width.table--no-vertical-margin
            thead.screenreader-only
              tr
                th.table__cell--self-explanatory Dato
                th Antal dage
            tbody
              +table-row("", "12. december 2020", "1 feriedag")
              +table-row("", "23. - 30. december 2020", "3 feriedage")
              +table-row("", "29. marts - 5. april 2021", "3 særlige feriedage")
              +table-row("", "14. maj 2021", "1 særlig feriedag")
              +table-row("", "5. - 25. juli 2021", "15 feriedage")
              +table-row("", "18. - 22. oktober 2021", "5 feriedage")
          p.text--small.text--secondary.text--unconstrained-width.vertical-spacing-top--small.text--single-line Planlagt og afholdt i alt:
            |
            strong.u-no-wrap 21 feriedage
            |
            | i perioden 01.09.2020-31.12.2021 og
            |
            strong.u-no-wrap 4 særlige feriedage
            |
            | i perioden 01.05.20 – 30.04.21.

      .row__item.row__item--basis-20.text--secondary
        h3 Sådan registrerer du ferie
        p Kontakt din lokale fraværsadministrator for at få registreret planlagt eller afholdt ferie.
        h3 Har du brug for hjælp?
        p Har du spørgsmål, kan du kontakte din lokale fraværsadministrator.

  .page__content__block
    .row.row--align-left
      .row__item.row__item--basis-35
        .row.row--align-bottom
          .row__item
            h2 Ferie til rådighed
          .row__item
            .form__field.form__field--horizontal
              label(for="decimals") Vis feriedage med 2 decimaler
              input#decimals(type="checkbox")
        +holiday-calendar(false, "2021", 2).vertical-spacing-top--small
        +holiday-calendar(false, "2022", 1, true, false).holiday-calendar--with-toggle
        +notification().notification--attention.vertical-spacing-top
          h2.notification__header Særlige feriedage vises kun frem til april 2021
          p Fra 1. januar 2021 kan du se dine opsparede særlige feriedage til og med april 2022.
      .row__item.row__item--basis-20.text--secondary
        h3.text--pull Sådan fungerer kalenderen
        ul.text--pull
          li Du sparer 2,08 feriedage op pr. måned. Da du som udgangspunkt skal afholde hele feriedage, runder kalenderen ned til hele dage. Du kan vælge at få dagene vist med 2 decimaler.
            a(href="https://medarbejdere.au.dk/administration/hr/ferie/optjening-af-feriepenge-og-saerlige-feriedage/") Læs mere om, hvordan du opsparer ferie
            |. 
          li Under hver måned kan du se, hvor mange feriedage og særlige feriedage du kan holde i den pågældende måned. Kalenderen tager højde for, hvor meget ferie du har afholdt og planlagt, og derfor får du ikke nødvendigvis 2 feriedage mere til rådighed hver måned.
          li Når du planlægger ferie påvirker det både, hvor mange dage du har til rådighed i månederne før og efter din ferie. Hvis du f.eks. planlægger 3 feriedage i marts, vil du have 3 feriedage mindre til rådighed i april. 
          li Både feriedage og særlige feriedage har en udløbsdato. Hvis du ønsker at afholde ferie, skal det ske inden udløbsdatoen. Du kan se i kalenderen, hvis du har feriedage eller særlige feriedage, som du skal have afholdt inden en bestemt dato.
        h3.text--pull Forskudsferie
        ul
          li Du har fået din leders generelle godkendelse til at holde forskudsferie, dvs. at du kan holde 2 feriedage i samme måned, som du sparer dem op.  
          li Vær opmærksom på, at det i følge ferieloven er dit ansvar at få din leders tilladelse, hver gang du bruger forskudsferie. 

  .page__content__block
    +holiday-calendar(false, "2022", 1, true).holiday-calendar--with-toggle
  .page__content__block
    +holiday-calendar(true, "2021")
  .page__content__block
    +holiday-calendar(false, "2021", 2)
  .page__content__block
    +holiday-calendar(false, "2021", 3)
  .page__content__block
    +holiday-calendar(false, "2021", 4)