extends ../layouts/main
block content

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

      .uk-margin(class="uk-visible@m")
        h1 #{site.name} Dashboard #[small(class="uk-visible@m") for #{user.displayName || user.username}]

      div(uk-grid).uk-grid-small

        //- 
        //- Main Content Column
        //- 

        div(class="uk-width-1-1 uk-width-2-3@m")
          .uk-margin
            .uk-card.uk-card-secondary.uk-card-small.uk-card-body
              h4.uk-card-title Profile Visits #[small.uk-text-muted past 7 days]
              canvas(id="profile-stats").visit-graph
              div(class="uk-visible@m", uk-grid).uk-flex-between.uk-text-small
                .uk-width-auto
                  .uk-margin
                    div= moment(profileVisitStats.start).format('MMM DD, YYYY h:mm:ss a')
                .uk-width-auto
                  .uk-margin
                    div= moment(profileVisitStats.end).format('MMM DD, YYYY h:mm:ss a')

          .uk-margin
            .uk-card.uk-card-secondary.uk-card-small.uk-card-body
              h4.uk-card-title Link Visits #[small.uk-text-muted past 7 days]
              canvas(id="link-stats").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
            .uk-card.uk-card-secondary.uk-card-small
              .uk-card-header
                h2.uk-card-title Link Analytics #[small.uk-text-muted all-time]
              .uk-card-body
                ul.uk-list
                  each link in userLinks
                    li
                      div(uk-grid).uk-grid-small.uk-flex-middle
                        div(class="uk-width-3-5 uk-width-2-3@m")
                          .uk-text-lead
                            a(href=`/dashboard/link/${link._id}`).uk-text-truncate= link.label
                        div(class="uk-width-1-5 uk-width-1-6@m")
                          .uk-text-small.uk-text-muted unique
                          div= formatCount(link.stats.uniqueVisitCount)
                        div(class="uk-width-1-5 uk-width-1-6@m")
                          .uk-text-small.uk-text-muted total
                          div= formatCount(link.stats.totalVisitCount)

        //-
        //- Sidebar
        //- 

        div(class="uk-width-1-1 uk-width-1-3@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

          .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', ( ) => {
      const data = {
        profileVisitStats: !{JSON.stringify(profileVisitStats.stats)},
        linkVisitStats: !{JSON.stringify(linkVisitStats.stats)},
      };
      dtp.app.renderStatsGraph('canvas#profile-stats', 'Profile Visits', data.profileVisitStats);
      dtp.app.renderStatsGraph('canvas#link-stats', 'Link Visits', data.linkVisitStats);
    });