extends /layout

block pageSpecificScipts
  script(nonce=cspNonce src="/javascripts/extraction.js")
  script(nonce=cspNonce src="/javascripts/extraction-list.js")

block body
  section#fixed-top-section
    include /common/main-navigation
    +main-navigation(false)
  include /common/side-menu-fake
  +sideNavigationFake
  if user
    include /utilities/dictionaries-main-panel-header
    - const c = { sideMenu: false, h2: t('Luščenje'), h1: t('Seznam luščenj'), description: t('Nabor vseh luščenj, s katerimi lahko uporabnik iz izbranih besedil pridobi sezname terminoloških kandidatov. Posamezne terminološke kandidate lahko preveri tudi v konkordančniku.') }
    +mainHeader(c)
    -
      const localeDayOptions = {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric'
      }

    -
      const localeHourOptions = {
        hour: '2-digit',
        minute: '2-digit',
      }
    .content-hold-prerequisites
      #offset-main.mt-2
        if extractions.length >= 5
          .d-flex.justify-content-center.mt-3
            p= t('Če želite dodati novo luščenje, morate najprej pobrisati vsaj eno od obstoječih, saj je na posameznega uporabnika dovoljenih največ 5 luščenj.')
        else
          form(method="post")
            input(type="hidden" name="extractionType" value="own")
            .row.align-items-center
              .col-xl-6.white-border-background.px-0.py-4.d-flex.ms-xl-3
                span.smaller-blue-subheading.ms-3.me-auto.mt-3= t('Luščenje iz lastnih besedil')
                button.btn.btn-primary.ps-5.pe-5.me-3= t('DODAJ')
              .col-sm.mt-2.mt-xl-0.ps-1.ms-lg-3
                span.span.d-md-inline.d-block.gray-info= t('Luščenje terminoloških kandidatov iz besedil, ki jih ima uporabnik shranjena pri sebi. Za boljšo učinkovitost svetujemo format .txt.')
          form(method="post")
            input(type="hidden" name="extractionType" value="oss")
            .row.mt-4.align-items-center
              .col-xl-6.white-border-background.px-0.py-4.d-flex.ms-xl-3
                span.smaller-blue-subheading.ms-3.me-auto.mt-3= t('Luščenje iz korpusa besedil OSS')
                button.btn.btn-primary.ps-5.pe-5.me-3= t('DODAJ')
              .col-md.mt-2.mt-xl-0.ps-1.ms-lg-3
                span.span.d-md-inline.d-block.gray-info!= t('Luščenje terminoloških kandidatov iz besedil, ki jih uporabnik izbere med vsemi besedili, vključenimi v <a class="gray-info" href="https://openscience.si/" target="_blank">Nacionalni portal odprte znanosti</a>.')

        #extraction-list.all-tasks.mt-4.ps-0
          if !extractions.length
            p= t('Nimate luščenj za urejanje.')
          else
            each el in extractions
              if el.status === 'new'
                .task.task-new.p-3.mb-4(data-id=el.id)
                  .d-sm-flex.justify-content-sm-between.d-grid
                    .d-grid.task-name
                      span.bold-weight-black= el.name
                    .d-flex.align-items-center
                      button.btn.border-header.extraction-btn.btn-begin.align-items-center.d-flex(
                        disabled=!el.canBegin ? true : false
                      )
                        img(src="/images/fi_arrow-right-circle.svg")
                        span.ms-1= t('ZAČNI')
                  hr.mt-2.mb-3
                  .d-flex.justify-content-sm-between.align-items-center
                    .d-sm-flex.align-items-center.mb-0
                      img(src="/images/alert-circle.svg")
                      span.normal-gray.ms-1.me-2.me-sm-0= t('Nov')
                    .d-flex.align-items-center.ms-auto
                      a.btn.p-0.align-items-center.me-lg-3.edit-task(
                        href=`luscenje/${el.id}`
                      )
                        img(src="/images/u_edit-alt.svg" alt="Edit")
                        span.ms-1.normal-gray= t('Uredi')
                      .ms-3
                        button.p-0.btn.delete-task.btn-delete(type="button")
                          img(src="/images/red-trash-icon.svg" alt="")
                          span.normal-gray.ms-2= t('Briši')

              if el.status === 'in progress'
                .task.task-in-progress.p-3.mb-3(data-id=el.id)
                  .d-sm-flex.d-grid
                    .d-grid.task-name
                      span.bold-weight-black= el.name
                    .d-flex
                      .d-flex.start-date
                        .d-grid.ms-1.align-items-center
                          .d-flex.align-items-center
                            img.me-1(src="/images/fi_calendar.svg")
                            span.smaller-gray-uppercase.align-items-center= t('Začetek')
                          .d-grid.ms-4.align-items-center
                            span.bold-weight-black= el.timeStarted.toLocaleString('sl-SI', localeDayOptions)
                            span.normal-gray= el.timeStarted.toLocaleString('sl-SI', localeHourOptions)
                  hr.mt-2.mb-3
                  .d-flex.justify-content-between
                    .d-sm-flex.align-items-center.mb-0.flex-grow-1
                      img(src="/images/clock.svg")
                      span.normal-gray.ms-1= t('V obdelavi')

              if el.status === 'failed'
                .task.task-cancelled.p-3.mb-3(data-id=el.id)
                  .d-lg-flex
                    .d-flex.flex-column.task-name
                      span.bold-weight-black= el.name
                    .d-sm-flex.dates-div
                      .d-flex
                        .d-sm-flex.start-date
                          .d-sm-grid.ms-1.align-items-center.mt-2.mt-md-0
                            .d-sm-flex.align-items-center
                              img.me-1(src="/images/fi_calendar.svg")
                              span.smaller-gray-uppercase.align-items-center= t('Začetek')
                            .d-grid.ms-2.ms-sm-4.align-items-center
                              span.bold-weight-black= el.timeStarted.toLocaleString('sl-SI', localeDayOptions)
                              span.normal-gray= el.timeStarted.toLocaleString('sl-SI', localeHourOptions)
                        .d-md-flex.start-date.ms-sm-5.ms-2.mt-2.mt-md-0
                          .d-md-grid.ms-md-1.align-items-center
                            .d-md-flex.align-items-center
                              img.me-1(src="/images/fi_calendar.svg")
                              span.smaller-gray-uppercase.align-items-center= t('Konec')
                            .d-grid.ms-4.align-items-center
                              span.bold-weight-black= el.timeFinished.toLocaleString('sl-SI', localeDayOptions)
                              span.normal-gray= el.timeFinished.toLocaleString('sl-SI', localeHourOptions)

                    //- TODO: Once duplication is implemented remove ".invisible" class
                    .d-flex.align-items-center.justify-content-lg-end.mt-2.mt-sm-0.ms-2.ms-md-0.invisible
                      button.btn.border-header.double-task.align-items-center.d-flex
                        img(src="/images/fi_copy_border.svg")
                        span.ms-1= t('PODVOJI')
                  hr.mt-2.mb-3
                  .d-flex.justify-content-sm-between
                    .d-sm-flex.align-items-center.mb-sm-0.me-3.me-sm-0
                      img(src="/images/alert-triangle.svg")
                      span.normal-gray.ms-sm-1.ms-0= t('Prekinjen')
                    .d-flex.mb-sm-0.mt-0
                      //- a.edit-task.btn.p-0(href=`luscenje/${el.id}`)
                      //-   img(src="/images/u_edit-alt.svg" alt="Edit")
                      //-   span.normal-gray.ms-sm-1.ms-0 Uredi
                      //- .ms-3.align-items-center.delete-task
                      //-   img(src="/images/red-trash-icon.svg" alt="Delete")
                      //-   span.normal-gray.ms-sm-1.ms-0 Briši
                      .ms-3
                        button.p-0.btn.delete-task.btn-delete(type="button")
                          img(src="/images/red-trash-icon.svg" alt="")
                          span.normal-gray.ms-2= t('Briši')
              if el.status === 'finished'
                .task.task-completed.p-3.mb-3(data-id=el.id)
                  .d-sm-flex
                    .d-flex.flex-column.task-name
                      span.bold-weight-black= el.name
                    .d-sm-flex.dates-div
                      .d-flex
                        .d-sm-flex.start-date
                          .d-sm-grid.ms-1.align-items-center.mt-2.mt-md-0
                            .d-sm-flex.align-items-center
                              img.me-1(src="/images/fi_calendar.svg")
                              span.smaller-gray-uppercase.align-items-center= t('Začetek')
                            .d-grid.ms-2.ms-sm-4.align-items-center
                              span.bold-weight-black= el.timeStarted.toLocaleString('sl-SI', localeDayOptions)
                              span.normal-gray= el.timeStarted.toLocaleString('sl-SI', localeHourOptions)
                        .d-md-flex.start-date.ms-sm-5.ms-2.mt-2.mt-md-0
                          .d-md-grid.ms-md-1.align-items-center
                            .d-md-flex.align-items-center
                              img.me-1(src="/images/fi_calendar.svg")
                              span.smaller-gray-uppercase.align-items-center= t('Konec')
                            .d-grid.ms-4.align-items-center
                              span.bold-weight-black= el.timeFinished.toLocaleString('sl-SI', localeDayOptions)
                              span.normal-gray= el.timeFinished.toLocaleString('sl-SI', localeHourOptions)

                    .d-flex.align-items-center.ms-2.ms-sm-auto.mt-2.mt-md-0
                      img(src="/images/fi_check-circle.svg")
                      span.ms-2= t('Končan')
                    //- .d-sm-flex.align-items-center.mt-2.mt-md-0.ms-auto.me-3
                    //-   a.edit-task.btn.p-0.ms-auto(href=`luscenje/${el.id}`)
                    //-     img(src="/images/u_edit-alt.svg")
                    //-     span.ms-1 UREDI
                  hr.mt-2.mb-3
                  .d-lg-flex.justify-content-between
                    .d-lg-flex.align-items-center.mb-0.flex-grow-1
                      a.terminology-candidates.btn.btn-primary.align-items-center(
                        href=`luscenje/${el.id}/kandidati`
                      )
                        img(src="/images/book-white.svg")
                        //- TODO I18n - Možna kakšna napaka, trenutno ne morem testirati luščenja
                        span.ms-1 #{ t('Terminološki kandidati') } [#{ el.termCandidatesCount }]
                      if el.status === 'finished' && el.corpusId
                        a.btn.border-header.ext-secondary-btn.mt-2.mt-lg-0.ms-md-1(
                          href=`/korpus/${el.corpusId}`
                          target="_blank"
                        )
                          img(src="/images/list.svg")
                          span.normal-gray.ms-1= t('Uporabniški korpus')
                      if el.status === 'finished' && el.ossParams
                        a.btn.border-header.ext-secondary-btn.mt-2.mt-lg-0.ms-md-1(
                          href="https://www.clarin.si/ske/#dashboard?corpname=oss"
                          target="_blank"
                        )
                          img(src="/images/list.svg")
                          span.normal-gray.ms-1= t('Korpus OSS')
                    .d-flex.align-items-center.mb-0.mt-2.mt-lg-0.justify-content-end
                      //- .align-items-center.double-task
                      //-   img(src="/images/fi_copy_border.svg" alt="Copy")
                      //-   span.normal-gray.ms-1 Podvoji
                      .ms-3
                        button.p-0.btn.delete-task.btn-delete(type="button")
                          img(src="/images/red-trash-icon.svg" alt="")
                          span.normal-gray.ms-2= t('Briši')
    include /utilities/modal-alert
    include /utilities/modal-alert-mixin
    +alertModal("max-extractions", t("Razumem"), t("Prekliči"), "ok-btn-modal", "cancel-btn", t('Ne morete imeti več kot 5 luščenj!'))
    include /utilities/modal-response
    +responseModal("begin-response", t("Razumem"), "understand-btn", t("Luščenje je bilo dano v fazo obdelave."), t("Ko bo luščenje uspešno zaključeno, boste na svoj elektronski naslov, ki ste ga navedli ob registraciji, prejeli obvestilo."))
  else
    include /utilities/dictionaries-main-panel-header
    - const c = { sideMenu: false, h2: t('Luščenje'), h1: t('Seznam luščenj'), description: t('Nabor vseh luščenj, s pomočjo katerih uporabnik iz vhodnih besedil pridobi sezname terminoloških kandidatov in dostop do konkordančnika po teh besedilih.') }
    +mainHeader(c)
    .content-hold-prerequisites
      #offset-main
        .d-flex.justify-content-center.mt-5
          p= t('Za luščenje terminoloških kandidatov morate biti prijavljeni.')
  include /common/footer
