extends ../layouts/main
block content

  section.uk-section.uk-section-default.links-dashboard
    .uk-container.uk-container-expand

      .uk-margin
        .uk-card.uk-card-secondary.uk-card-small.uk-card-body
          div(uk-grid).uk-grid-small
            .uk-width-expand
              h4.uk-card-title #{link.label} #[small.uk-text-muted past 7 days]
            .uk-width-auto
              a(href="/dashboard").uk-button.dtp-button-secondary.uk-button-small
                +renderButtonIcon('fa-chevron-left', 'Back to Dashboard')

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

          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
                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
                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.renderProfileStats('canvas#link-visits', !{JSON.stringify(linkVisitStats.stats)});
    });