extends ../layout.jade

mixin method (method)
  - var mapping = { GET: 'success', POST: 'primary', PUT: 'info', PATCH: 'warning' , DELETE: 'danger' }
  - var className = mapping[method] ? mapping[method] : 'default'

  span(class='label-#{className}').label= method

block content
  div(data-page="bin/log").container
    div.btn-group.pull-right.hidden-xs
      a(href= '/bin/' + req.params.uuid + '/view').btn.btn-primary View Details

    h3 Bin History: #[code= req.params.uuid]

    div.visible-xs
      a(href= '/bin/' + req.params.uuid + '/view').btn.btn-block.btn-primary View Details

    hr

    div.alert.alert-warning.visible-xs
      strong Warning  
      span Best viewed on a desktop screen, with minimum #[code 800px] width.

    table.table.table-hover
      thead
        tr
          th(width='10%') Method
          th(width='30%') Path
          th(width='10%') Size
          th(width='20%') Date
          th(width='15%') IP
          th(width='15%').text-right Actions

      tbody
        for entry, id in data.raw.log.entries
          tr(data-id= id)
            td.method
              +method(entry.request.method)

            td= entry.request.url.slice(entry.request.url.indexOf('/bin/'))

            td #{entry.request.bodySize / 1000} KB

            td.date= moment(entry.startedDateTime).fromNow()
            td.ip= entry.clientIPAddress
            td.action.text-right
              div.btn-group.btn-group-sm
                a.btn.btn-default(href='#entry-#{id}'): i.fa.fa-link
                button.btn.btn-default(data-id= id): i.fa.fa-chevron-down

          tr.data(id='entry-#{id}')
            td(colspan= 6)
              div.row
                div.col-sm-6
                  h4 Request Details #[small in #[a(href="https://ahmadnassri.github.io/har-resources/" target="_blank") HAR] format]

                  div#preview
                    pre: code= JSON.stringify(entry.request, null, 2)

                div.col-sm-6
                  h4 Request Body

                  div#preview
                    pre: code= entry.request.postData && entry.request.postData.text ? entry.request.postData.text : 'No body was sent'


block scripts
  script.
    $(function() {
      $('tr[data-id] td, button[data-id]').on('click', function (e) {
        var id = $(this).data('id')

        if (e.target.tagName === 'TD') {
          id = $(this).parent().data('id')
        }

        // clear state
        history.pushState('', document.title, window.location.pathname);

        $('#entry-' + id + ' td').toggle();
      })

      // highlight the code
      $('pre code').each(function (i, block) {
        hljs.highlightBlock(block);
      });
    });