script type="text/template" id='template-sync-viewer'
  .sync-viewer
    .headline
      .knobs
        |
      .in-progress
        .download-progress
          .paused Downloads paused.
          .quiet  No download work.
          .busy
        .upload-progress
          .paused Uploads paused.
          .quiet  No upload work.
          .busy
    .dialog-tabs
      a.tab.selected purpose="recordings" Recordings
      a.tab purpose="log"
        | Log
        span.badge !
    .tab.tab-content purpose="recordings"
      .list-header
        .type-info
          span.special-text file details
        .client-state-info
          span.special-text is the file on your system?
        .upload-state-info
          span.special-text is it uploaded?
      .list

    .tab.tab-content purpose="log"
      .list-header
        .list-column
          span.special-text file details
        .list-column
          span.special-text did it succeed?
        .list-column
          span.special-text more detail
      .log-list

    .paginator-holder



script type="text/template" id='template-sync-viewer-recorded-track'
  .recorded-track.sync data-id="{{data.id}}" data-recording-id="{{data.recording_id}}" data-client-id="{{data.client_id}}" data-client-track-id="{{data.client_track_id}}" data-track-id="{{data.track_id}}" data-fully-uploaded="{{data.fully_uploaded}}" data-instrument-id="{{data.instrument_id}}"
    .type
      span.text TRACK
      a.avatar-tiny href="#" user-id="{{data.user.id}}" hoveraction="musician"
        img src="{{JK.resolveAvatarUrl(data.user.photo_url)}}"
      img.instrument-icon data-instrument-id="{{data.instrument_id}}" hoveraction="instrument" src="{{JK.getInstrumentIconMap24()[data.instrument_id].asset}}"
    .client-state.bar
      .progress
      span.msg
      a.retry href='#'
        = image_tag('content/icon_resync.png', width:12, height: 14)
    .upload-state.bar
      .progress
      span.msg
      a.retry href='#'
        = image_tag('content/icon_resync.png', width:12, height: 14)


script type="text/template" id='template-sync-viewer-stream-mix'
  .stream-mix.sync data-id="{{data.id}}" data-recording-id="{{data.recording_id}}"
    .type
      span.text STREAM MIX
    .client-state.bar
      .progress
      span.msg
    .upload-state.bar
      .progress
      span.msg
      a.retry href='#'
        = image_tag('content/icon_resync.png', width:12, height: 14)


script type="text/template" id='template-sync-viewer-mix'
  .mix.sync.virtual data-id="{{data.id}}" data-recording-id="{{data.recording_id}}"
    .type
      span.text MIX
      span.duration
        | {{window.JK.prettyPrintSeconds(data.duration)}}
    .mix-state.bar
      span.msg

script type="text/template" id='template-sync-viewer-no-syncs'
  .no-syncs
    | You have no recordings.

script type="text/template" id="template-sync-viewer-recording-wrapper-details"
  .details
    a.session-detail-page href="{{data.recording_landing_url}}" rel="external" data-session-id="{{data.recording_id}}"
      span.name
        | {{data.my ? data.my.name : 'Unknown Name'}}
    span.export
    span.timeago
      | {{$.timeago(data.created_at)}}

script type="text/template" id="template-sync-viewer-hover-recorded-track"
  .help-hover-recorded-tracks

    .client-box
      .client-state-info
        span.special-text is the file on your system?
      .client-state class="{{data.clientStateClass}}"
        span.msg  
          | {{data.clientStateMsg}}
      .client-state-definition.sync-definition
        | {{data.clientStateDefinition}}
    .upload-box
      .upload-state-info
        span.special-text is it uploaded?
      .upload-state class="{{data.uploadStateClass}}"
        span.msg
          | {{data.uploadStateMsg}}
      .upload-state-definition.sync-definition
        | {{data.uploadStateDefinition}}
    br clear="both"

    | {% if(data.summary) { %}
    .summary
      .title what's next?
      | {{data.summary}}
    | {% } %}

script type="text/template" id="template-sync-viewer-hover-stream-mix"
  .help-hover-stream-mix

    .client-box
      .client-state-info
        span.special-text is the file on your system?
      .client-state class="{{data.clientStateClass}}"
        span.msg
          | {{data.clientStateMsg}}
      .client-state-definition.sync-definition
        | {{data.clientStateDefinition}}
    .upload-box
      .upload-state-info
        span.special-text is it uploaded?
      .upload-state class="{{data.uploadStateClass}}"
        span.msg
          | {{data.uploadStateMsg}}
      .upload-state-definition.sync-definition
        | {{data.uploadStateDefinition}}
    br clear="both"

    | {% if(data.summary) { %}
    .summary
      .title what's next?
      | {{data.summary}}
    | {% } %}


script type="text/template" id="template-sync-viewer-hover-mix"
  .help-hover-mix
    .mix-box
      .mix-state-info
        span.special-text is it mixed?
      .mix-state class="{{data.mixStateClass}} {{data.context}}"
        span.msg
          | {{data.mixStateMsg}}
      .mix-state-definition.sync-definition
        | {{data.mixStateDefinition}}
    br clear="both"
    | {% if(data.summary) { %}
    .summary
      .title what's next?
      | {{data.summary}}
    | {% } %}


script type="text/template" id="template-sync-viewer-download-progress-reset"
  span.notice
    | No download in progress.

script type="text/template" id="template-sync-viewer-download-progress-reset"
  span.notice
    | No download in progress.

script type="text/template" id="template-sync-viewer-generic-command"
  .generic.sync.command
    .type
      span.text
        | {{data.displayType}}

script type="text/template" id="template-sync-viewer-recorded-track-command"
  .recorded-track.sync
    .type
      .progress
      span.text
        | {{data.action}} TRACK
      a.avatar-tiny href="#" user-id="{{data.user.id}}" hoveraction="musician"
        img src="{{JK.resolveAvatarUrl(data.user.photo_url)}}"
      img.instrument-icon data-instrument-id="{{data.instrument_id}}" hoveraction="instrument" src="{{JK.getInstrumentIconMap24()[data.instrument_id].asset}}"

script type="text/template" id="template-sync-viewer-log-item"
  .log class="success-{{data.success}}"
    .command
      | {% if(data.isAsap) { %}
      = image_tag('content/icon_resync.png', width:12, height: 14, title: 'This means you initiated this')
      | {% } %}
      | {{data.command}}
    .success
      | {{data.displaySuccess}}
    .detail
      | {{data.detail}}