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
                  if !manager
                    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
                  else
                    div Task status: #{task.status}

                if task.status === 'active' && !manager
                  .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)
                -
                  var totalTimeWorked = 0;
                  var totalBillable = 0;

                table.uk-table.uk-table-small.uk-table-divider
                  thead
                    tr
                      th.uk-table-expand Start Time
                      th.uk-text-nowrap.uk-table-shrink Tracked
                      th.uk-text-nowrap.uk-table-shrink Billable
                  tbody
                    each session in sessions
                      -
                        totalTimeWorked += session.duration;
                        totalBillable += session.hourlyRate * (session.duration / 3600);
                      tr
                        td.uk-table-expand
                          a(href=`/task/${task._id}/session/${session._id}`,
                            onclick="return dtp.app.performSessionNavigation(event);",
                          ).uk-link-reset.uk-display-block= dayjs(session.created).format('dddd [at] h:mm a')
                        td.uk-text-right.uk-text-nowrap.uk-table-shrink= numeral(session.duration).format('HH:MM:SS')
                        td.uk-text-right.uk-text-nowrap.uk-table-shrink= numeral(session.hourlyRate * (session.duration / 3600)).format('$0,00.00')
                  tfoot
                    tr
                      td.uk-table-expand TOTALS
                      td.uk-text-right.uk-text-nowrap.uk-table-shrink= numeral(totalTimeWorked).format('HH:MM:SS')
                      td.uk-text-right.uk-text-nowrap.uk-table-shrink #{numeral(totalBillable).format('$0,0.00')}
              else
                div No work sessions

          if !manager && (task.status === 'active')
            div(class="uk-width-1-1 uk-flex-first uk-width-large@m uk-flex-last@m")
              .uk-margin
                video(
                  id="capture-preview",
                  poster="/img/default-poster.svg",
                  playsinline, muted,
                ).dtp-video.no-select
              div(class="uk-visible@m").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)};