extends ../layouts/main
block content

  section.uk-section.uk-section-default.links-dashboard
    .uk-container
      .uk-margin
        .uk-card.uk-card-secondary.uk-card-small
          .uk-card-header
            div(uk-grid).uk-grid-small
              .uk-width-expand
                h4.uk-card-title #{link.label} #[small.uk-text-muted past 3 days]

              .uk-width-auto
                a(href="/dashboard").uk-button.dtp-button-secondary.uk-button-small
                  +renderButtonIcon('fa-chevron-left', 'Back to Dashboard')

          .uk-card-body
            .uk-margin
              p #{link.label} has received #{formatCount(link.stats.uniqueVisitCount)} unique visits. It has received #{numeral(link.stats.totalVisitCount).format('0,0')} total visits since being posted #{moment(link.created).fromNow()}.

              .uk-text-small.uk-card-meta
                div Target URL: #[a(href= link.href, title=`Visit ${link.label}`)= link.href]

            .uk-margin
              canvas(id="link-visits").visit-graph

          .uk-card-footer
            div(class="uk-visible@m", uk-grid).uk-flex-between.uk-text-small
              .uk-width-auto
                .uk-margin
                  div= moment(linkVisitStats.start).format('MMM DD, YYYY h:mm:ss a')
              .uk-width-auto
                .uk-margin
                  div= moment(linkVisitStats.end).format('MMM DD, YYYY h:mm:ss a')

      .uk-margin
        div(uk-grid).uk-grid-small
          div(class="uk-width-1-1 uk-width-1-2@m")
            .uk-margin
              .uk-card.uk-card-secondary.uk-card-small.uk-card-body
                h5.uk-card-title Top Countries
                .uk-text-italic Geography data unavailable.
                //- table.uk-table.uk-table-small
                //-   thead
                //-     tr
                //-       th Country
                //-       th Visits
                //-   tbody
                //-     each entry in linkCountryStats.stats
                //-       tr
                //-         td.uk-table-expand= entry.country ? entry.country : '--'
                //-         td= entry.count
          div(class="uk-width-1-1 uk-width-1-2@m")
            .uk-margin
              .uk-card.uk-card-secondary.uk-card-small.uk-card-body
                h5.uk-card-title Top Cities
                .uk-text-italic Geography data unavailable.
                //- table.uk-table.uk-table-small
                //-   thead
                //-     tr
                //-       th City
                //-       th(class="uk-visible@m") State
                //-       th Country
                //-       th Visits
                //-   tbody
                //-     each entry in linkCityStats.stats
                //-       tr
                //-         td= entry.city ? entry.city : '--'
                //-         td(class="uk-visible@m")= entry.region ? entry.region : '--'
                //-         td= entry.country ? entry.country : '--'
                //-         td= entry.count

block viewjs
  script(src="/chart.js/chart.min.js")
  script(src="/chartjs-adapter-moment/chartjs-adapter-moment.min.js")
  script.
    window.addEventListener('dtp-load', ( ) => {
      dtp.app.renderStatsGraph('canvas#link-visits', 'Link Visits', !{JSON.stringify(linkVisitStats.stats)});
    });