extends ../layout/main
block view-content

  include ../user/components/profile-picture

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

      .uk-margin
        div(uk-grid)
          div(class="uk-width-1-1 uk-width-expand@m")
            .uk-margin-medium
              div(uk-grid).uk-grid-small
                .uk-width-auto
                  +renderProfilePicture(user)
                .uk-width-expand
                  div(style="line-height: 1;").uk-text-lead.uk-text-truncated.uk-margin-small= task.note
                  case task.status
                    when 'pending'
                      .uk-margin-small
                        form(method="POST", action=`/task/${task._id}/start`).uk-form
                          button(type="submit").uk-button.uk-button-default.uk-button-small.uk-border-rounded Start Task
                    when 'active'
                      .uk-margin-small
                        form(method="POST", action=`/task/${task._id}/close`).uk-form
                          button(type="submit").uk-button.uk-button-default.uk-button-small.uk-border-rounded Finish Task
                    when 'finished'
                      .uk-text-success Finished task

                if task.status === 'active'
                  .uk-width-auto.uk-text-right
                    .pretty.p-switch.p-slim
                      input(
                        id="active-toggle",
                        type="checkbox",
                        data-task-id= task._id,
                        onchange="return dtp.app.taskActivityToggle(event);",
                      )
                      .state.p-success
                        label(for="active-toggle")
                          span.sr-only Active
                    #current-session-duration.uk-text-small.no-select= numeral(0).format('HH:MM:SS')

                    - var timeRemaining = task.client.hoursLimit - (task.client.weeklyTotals.timeWorked / 3600);
                    .uk-text-small.no-select avail: #[span#time-remaining= numeral(timeRemaining).format('0,0.00')]

            .uk-margin-medium

              .uk-margin
                h3(style="line-height: 1em;").uk-padding-remove.uk-margin-remove Work Sessions
                small.uk-text-muted Week of #{dayjs(weekStartDate).format('MMMM DD')}

              if Array.isArray(sessions) && (sessions.length > 0)
                ul.uk-list.uk-list-divider
                  each session in sessions
                    li
                      a(href=`/task/${task._id}/session/${session._id}`,
                        onclick="return dtp.app.performSessionNavigation(event);",
                      ).uk-link-reset.uk-display-block
                        div(uk-grid)
                          .uk-width-expand= dayjs(session.created).format('dddd [at] h:mm a')
                          .uk-width-auto= numeral(session.duration).format('HH:MM:SS')
                          .uk-width-auto= numeral(session.hourlyRate * (session.duration / 60 / 60)).format('$0,00.00')
              else
                div No work sessions

          if task.status === 'active'
            div(class="uk-width-1-1 uk-width-large@m")
              .uk-margin
                video(
                  id="capture-preview",
                  poster="/img/default-poster.svg",
                  playsinline, muted,
                ).dtp-video
              .uk-margin.uk-text-small.uk-text-muted
                p One image will be captured from this live preview every 10 minutes. It will be uploaded and stored in the work session with a timestamp.
                p When you start a work session, you will select the screen, application, or browser tab to share.

block viewjs
  script.
    window.dtp = window.dtp || { };
    window.dtp.task = !{JSON.stringify(task)};