v-app(:dark='darkMode').history
    nav-header
    v-content
      v-toolbar(color='primary', dark)
        .subheading Viewing history of page #[strong /{{path}}]
        v-spacer
        .caption.blue--text.text--lighten-3.mr-4 Trail Length: {{total}}
        .caption.blue--text.text--lighten-3 ID: {{pageId}}
        v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Live Version
      v-container(fluid, grid-list-xl)
        v-layout(row, wrap)
          v-flex(xs4)
            v-chip.ma-0(
              label
              small
              :color='darkMode ? `grey darken-2` : `grey lighten-2`'
              :class='darkMode ? `grey--text text--lighten-2` : `grey--text text--darken-2`'
              )
              span Live
            v-timeline(
              dense
              )
              v-timeline-item.pb-2(
                v-for='(ph, idx) in trail'
                :key='ph.versionId'
                :small='ph.actionType === `edit`'
                fill-dot
                :color='trailColor(ph.actionType)'
                :icon='trailIcon(ph.actionType)'
                :class='idx >= trail.length - 1 ? `pb-4` : `pb-2`'
                )
                v-card.radius-7(flat, :class='trailBgColor(ph.actionType)')
                  v-toolbar(flat, :color='trailBgColor(ph.actionType)', height='40')
                    v-chip.ml-0.mr-3(
                      v-if='diffSource === ph.versionId'
                      small
                      color='pink'
                      )
                      .caption.white--text Source
                    v-chip.ml-0.mr-3(
                      v-if='diffTarget === ph.versionId'
                      small
                      color='pink'
                      )
                      .caption.white--text Target
                    .caption(v-if='ph.actionType === `edit`') Edited by #[strong {{ ph.authorName }}]
                    .caption(v-else-if='ph.actionType === `move`') Moved from #[strong {{ph.valueBefore}}] to #[strong {{ph.valueAfter}}] by #[strong {{ ph.authorName }}]
                    .caption(v-else-if='ph.actionType === `initial`') Created by #[strong {{ ph.authorName }}]
                    .caption(v-else) Unknown Action by #[strong {{ ph.authorName }}]
                    v-spacer
                    .caption {{ ph.createdAt | moment('calendar') }}
                    v-menu(offset-x, left)
                      v-btn(icon, slot='activator'): v-icon more_horiz
                      v-list(dense).history-promptmenu
                        v-list-tile(@click='setDiffTarget(ph.versionId)')
                          v-list-tile-avatar: v-icon call_made
                          v-list-tile-title Set as Differencing Target
                        v-divider
                        v-list-tile(@click='setDiffSource(ph.versionId)')
                          v-list-tile-avatar: v-icon call_received
                          v-list-tile-title Set as Differencing Source
                        v-divider
                        v-list-tile
                          v-list-tile-avatar: v-icon code
                          v-list-tile-title View Source
                        v-divider
                        v-list-tile
                          v-list-tile-avatar: v-icon cloud_download
                          v-list-tile-title Download Version
                        v-divider
                        v-list-tile
                          v-list-tile-avatar: v-icon restore
                          v-list-tile-title Restore
                        v-divider
                        v-list-tile
                          v-list-tile-avatar: v-icon call_split
                          v-list-tile-title Branch off from here
            v-btn.ma-0.radius-7(
              v-if='total > trail.length'
              block
              color='grey darken-2'
              @click='loadMore'
              )
              .caption.white--text Load More...
            v-chip.ma-0(
              v-else
              label
              small
              :color='darkMode ? `grey darken-2` : `grey lighten-2`'
              :class='darkMode ? `grey--text text--lighten-2` : `grey--text text--darken-2`'
              ) End of history trail
          v-flex(xs8)
            v-card.radius-7
              v-card-text
                v-card.grey.radius-7(flat, :class='darkMode ? `darken-2` : `lighten-4`')
                  v-card-text
                    .subheading Page Title
                    .caption Some page description
                v-card.mt-3(light, v-html='diffHTML')
    nav-footer
    notify
    search-results