{% import 'macros.html' as macros %}

<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>UWSGI-sloth realtime report</title>
  <link rel="stylesheet" href="{{ SETTINGS.STATIC_PATH_BOOTSTRAP }}" type="text/css" />
  <style type="text/css" media="screen">
    body {
      padding: 50px 12px 12px 12px;
    }
  /*

   * Sidebar
   */

  /* Hide for mobile, show later */
  .sidebar {
    display: none;
  }
  @media (min-width: 768px) {
    .sidebar {
      position: fixed;
      top: 51px;
      bottom: 0;
      left: 0;
      z-index: 1000;
      display: block;
      padding: 20px;
      overflow-x: hidden;
      overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
      background-color: #f5f5f5;
      border-right: 1px solid #eee;
    }
  }

  /* Sidebar navigation */
  .nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
  }
  .nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
  }
  .nav-sidebar > .active > a {
    color: #fff;
    background-color: #428bca;
  }

    h3 {
      font-size: 20px;
      padding-bottom: 4px;
      border-bottom: 2px solid #eee;
    }
    #main {
      padding: 0 8px;
    }
    .url-details-list {
      background-color: #f4f4f4;
      margin 8px 0;
      display: none;
      border: 1px solid #999;
    }
    .url-details {
      padding: 8px;
      border-bottom: 1px solid #e4e4e4;
    }
    .table {
      font-size: 14px;
    }
    .url-schema {
      margin: 8px 0;
      font-size: 16px;
      font-weight: bold;
    }
    .show-details {
      margin-bottom: 8px;
    }
    .overview {
      font-size: 16px;
    }
    .tip {
      font-size: 12px;
      color: #999;
      text-align: center;
      margin-bottom: 6px;
    }
    .big-number {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
    }
    .datetime-range {
      font-size: 14px;
      text-align: center;
    }
    .update-time-info {
      position: absolute;
      right: 35px;
      top: 76px;
      font-size: 12px;
      color: #999;
    }
  </style>
  <body>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a class="navbar-brand" href="#">UWSGI-sloth realtime report {% if domain %} for {{ domain }} {% endif %}
        </a>
      </div>
    </div>
  </nav>

  <div class="update-time-info">Generated by uwsgi-sloth {{ version }} at {{ now }}</div>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
          <li><a><i class="glyphicon glyphicon-time"></i> Period</a></li>
          <li><a href="latest_5mins.html">Latest 5mins</a></li>
          <li><a href="today.html">Today</a></li>
          <li><a href="yesterday.html">Yesterday</a></li>
        </ul>
        <ul class="nav nav-sidebar">
          <li><a href="#configuration">Configuration</a></li>
          <li><a href="#overview">Overview</a></li>
          <li><a href="#details">Details</a></li>
        </ul>
      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <div id="main">
          {#
          <h3 id="configuration">Configuration</h3>
          <ul>
            {% if domain %}
            <li><strong>Domain:</strong> <a href="{{ domain }}" target="_blank">{{ domain }}</a></li>
            {% endif %}
            <li><strong>Log File:</strong> {{ input_filename }}</li>
            <li><strong>Min duration:</strong> {{ min_duration }}ms</li>
          </ul>
          #}
          <h3 id="overview">Overview</h3>
          <div class="row overview">
            <div class="col-md-3">
              <div class="tip">Datetime Range</div>
              <div class="datetime-range">
                <i class="glyphicon glyphicon-time"></i> 
                {{ datetime_range }}
              </div>
            </div>
            <div class="col-md-3">
              <div class="tip">Slow/Total Requests</div>
              <div class="big-number">{{ requests_counter.slow }} / {{ requests_counter.normal }}</div>
            </div>
            <div class="col-md-3">
              <div class="tip">Slow Rate</div>
              <div class="big-number">{{ slow_rate }}</div>
            </div>
            <div class="col-md-3">
              <div class="tip">Durations</div>
              <div class="big-number">{{ total_slow_duration | friendly_time }}</div>
            </div>
          </div>

          <h3 id="details">Details</h3>
          {{ macros.render_details_table(data_details, domain=domain) }}
        </div>
      </div>
    </div>
  </div>
    <script src="{{ SETTINGS.STATIC_PATH_JQUERY }}" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
      $(function(){
        $('.show-details').bind('click', function(){
          $(this).next().toggle();  
        })    
      }) 
    </script>
  </body>
</head>
