extends ../layouts/main
block content

  include ../../components/pagination-bar

  .uk-margin
    form(method="GET", action="/admin/log").uk-form
      div(uk-grid).uk-grid-small.uk-flex-middle
        .uk-width-expand
          h1 Log #[span.uk-text-small.uk-text-muted #{numeral(totalLogCount).format('0,0')} records]

        .uk-width-auto
          -
            var urlParams =  '';
            if (query.component) {
              urlParams += `&component=${query.component}`;
            }
          +renderPaginationBar(`/admin/log`, totalLogCount, urlParams)

        .uk-width-auto
          select(id="component", name="component").uk-select
            each componentSlug in components
              option(value= componentSlug, selected= (query.component === componentSlug))= componentSlug
        .uk-width-auto
          button(type="submit").uk-button.dtp-button-primary Filter
        
  if Array.isArray(logs) && (logs.length > 0)
    table.uk-table.uk-table-small.uk-table-divider
      thead
        tr
          th Timestamp
          th Level
          th Component
          th Message
      tbody
        each log in logs
          tr
            td= moment(log.created).format('YYYY-MM-DD hh:mm:ss.SSS')
            td= log.level
            td= log.component.slug
            td
              div= log.message
              if log.metadata
                .uk-text-small(style="font-family: Courier New;")!= hljs.highlightAuto(JSON.stringify(log.metadata, null, 1)).value
  else
    div There are no logs.