extends ../layouts/main
block vendorcss
  if user && (user.ui.theme === 'chat-light')
    link(rel='stylesheet', href=`/highlight.js/styles/qtcreator-light.min.css?v=${pkg.version}`)
  else
    link(rel='stylesheet', href=`/highlight.js/styles/obsidian.min.css?v=${pkg.version}`)
block content

  include ../member/components/status
  include ../components/pagination-bar
  include ../user/components/user-icon

  include components/preview

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

      h1
        div(uk-grid).uk-grid-small.uk-flex-middle
          .uk-width-auto
            +renderBackButton()
          .uk-width-expand
            span Link Timeline

      div(uk-grid)
        div(class="uk-width-1-1 uk-width-1-3@s")
          .uk-margin
            +renderLinkPreview(link, { layout: 'sidebar' })

          .uk-card.uk-card-secondary.uk-card-small.uk-border-rounded
            .uk-card-body
              .uk-margin-small
                .uk-text-small Link URL
                .uk-text-bold.uk-text-break= link.url

              .uk-margin-small
                .uk-text-small Site
                .uk-text-bold= link.siteName || link.domain

              .uk-margin-small
                div(uk-grid).uk-grid-small
                  .uk-width-expand
                    .uk-text-small Last shared
                    .uk-text-bold= moment(link.lastShared).format('MMM DD, YYYY')
                  .uk-width-auto
                    .uk-text-small Shares
                    .uk-text-bold= formatCount(link.stats.shareCount)
                  .uk-width-auto
                    .uk-text-small Visits
                    .uk-text-bold= formatCount(link.stats.visitCount)

              .uk-margin-small
                .uk-text-small Submitted by:
                div(uk-grid).uk-grid-small
                  each submitter in link.submittedBy
                    .uk-width-auto
                      a(href=`/member/${submitter.username}`, uk-tooltip={ title: submitter.displayName || submitter.username })
                        +renderUserIcon(submitter)

        div(class="uk-width-1-1 uk-width-2-3@s")
          if Array.isArray(timeline.statuses) && (timeline.statuses.length > 0)
            each status in timeline.statuses
              +renderStatus(status, { statusToken, commentToken })
          else
            .uk-text-center #{site.name} has no remaining posts sharing this link.

          +renderPaginationBar(timelineUrl, timeline.totalStatusCount)