doctype html
html(lang="en")
  link(rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous")
  head
    title Uplink Dashboard
  body.bg-dark
    .container-fluid
      div.float-right
        ul.list-inline
          li.list-inline-item
            a(href='/logout').text-warning Logout
          if isAdmin
            li.list-inline-item
              a(href='/admin').text-danger.bg-light
                strong Admin


      h1.text-light Uplink Dashboard
      .container-fluid.text-light
        div Hey there  
          strong #{user.github.profile.displayName}

      .container-fluid.text-light
        if types.length > 0
          h3 Export
          form(action='/export', method='POST')
            table.table-dark.table.table-striped.table-borderd.table-hover
              tr
                th(scope='col').text-center Type
                th(scope='col').text-center Range Start
                th(scope='col').text-center Range End
                th(scope='col')
              tr
                td.text-center
                  select(id='export-type', name='type')
                    each t in types
                      option(value=t.type) #{t.type}
                td.text-center
                  input(name='startDate', placeholder='2018-10-01')
                td.text-center
                  input(name='endDate', placeholder='2018-10-15')
                td.text-center
                  input(type='submit', value='Export')

      .container-fluid.text-light
        div.float-right.strong
          div
          ul.list-inline
            li.list-inline-item
              a(href='/dashboard', title='Reset the filter query').
                Reset query
            li.list-inline-item
              a(href='?id[$lt]=' + events[events.length - 1].id, title='View the next page of results').
                Next
        h3 Browse
        table.table-dark.table.table-striped.table-borderd.table-hover
          tr
            th(scope='col').text-center ID  
              strong
                a(href='?$sort[id]=-1').text-light ▲
                a(href='?$sort[id]=1').text-light ▼
            th(scope='col').text-center Date  
              strong
                a(href='?$sort[createdAt]=-1').text-light ▲
                a(href='?$sort[createdAt]=1').text-light ▼
            th(scope='col').text-center Correlator  
              strong
                a(href='?$sort[correlator]=-1').text-light ▲
                a(href='?$sort[correlator]=1').text-light ▼
            th(scope='col').text-center Type  
              if types.length > 0
                select(id='type-nav', name='types', onchange='navigateToType()')
                  each t in types
                    option(value=t.type) #{t.type}
            th(scope='col').text-center Payload
            th(scope='col').text-center Actions
          each e in events
            tr
              td.text-center.
                #{e.id}
              td.text-center.
                #{e.createdAt.toISOString()}
              td.text-center
                a(href='?correlator=' + e.correlator) #{e.correlator}
              td.text-center
                a(href='?type=' + e.type) #{e.type}
              td.text-center
                textarea(cols=80, rows=4, readonly=true).
                  #{JSON.stringify(e.payload)}
              td
                a(href='/events/' + e.id, target='_blank', title='View the raw JSON of this event').
                  View Raw

    script(type='text/javascript').
      function navigateToType() {
        const el = document.getElementById('type-nav');
        const type = el.options[el.selectedIndex].value;
        window.location = `/dashboard?type=${type}`;
        return false;
      }

      function exportType() {
        const el = document.getElementById('export-type');
        const type = el.options[el.selectedIndex].value;
        const dateElem = document.getElementById('export-date');
        const startDate = dateElem.options[dateElem.selectedIndex].value;
        window.location.href = `/export/${type}?startDate=${startDate}`;
        return false;
      }

      function selectCurrentType() {
        const el = document.getElementById('type-nav');
        const urlparams = new URLSearchParams(window.location.search);
        const type = urlparams.get('type');
        let index = 0;
        if (type) {
          for (e of el.options) {
            if (e.value == type) {
              el.selectedIndex = index;
              return;
            }
            index = index + 1;
          }
        }
      }
      selectCurrentType();

// vim: ft=haml