extends ../../layout/main
block view-content

  include ../../user/components/profile-picture

  section.uk-section.uk-section-default.uk-section-small
    .uk-container

      .uk-margin-medium
        div(uk-grid).uk-grid-small
          .uk-width-auto
            +renderProfilePicture(user)
          .uk-width-expand
            .uk-text-large= user.displayName || user.username
            div Work session #[code #{session._id}] for task "#{task.note}"
          .uk-width-auto.uk-text-right
            div= numeral(session.duration).format('HH:MM:SS')
            .uk-text-small #{numeral(session.hourlyRate * (session.duration / 60 / 60)).format('$0,0.00')}

      .uk-margin-medium
        .uk-flex.uk-flex-between.uk-flex-wrap
          .uk-width-auto
            .uk-margin
              .uk-text-small.uk-text-bold Created
              div= dayjs(session.created).format('MMM DD, YYYY [at] hh:mm:ss a')
          .uk-width-auto
            .uk-margin
              .uk-text-small.uk-text-bold Last Updated
              div= dayjs(session.lastUpdated).format('MMM DD, YYYY [at] hh:mm:ss a')
          .uk-width-auto
            .uk-margin
              .uk-text-small.uk-text-bold Finished
              div= dayjs(session.finished).format('MMM DD, YYYY [at] hh:mm:ss a')
          .uk-width-auto
            .uk-margin
              .uk-text-small.uk-text-bold Project
              div= session.project.name
          .uk-width-auto
            .uk-margin
              .uk-text-small.uk-text-bold Client
              div= session.client.name

      .uk-margin-medium
        if Array.isArray(session.screenshots) && (session.screenshots.length > 0)
          h3 Screenshots
          div(class="uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l uk-child-width-1-6@xl", uk-grid, uk-lightbox="animation: slide").uk-grid-small
            each screenshot in session.screenshots
              a(href=`/image/${screenshot.image._id}`,
                data-type="image",
                data-caption= `${dayjs(screenshot.created).format('MMM DD [at] h:mm a')} | ${screenshot.image.metadata.format.toUpperCase()} | ${numeral(screenshot.image.size).format('0,0.0b')}`,
              ).uk-link-reset
                img(src=`/image/${screenshot.image._id}`, width= screenshot.image.metadata.width, height= screenshot.image.metadata.height, alt="Image attachment")
                .uk-text-small.uk-text-muted= dayjs(screenshot.created).format('MMM DD [at] h:mm a')
        else
          div No screenshots were filed by the session.