{% from logviewer import load_component, load_layout, get_config %}
{% set config = get_config(handler) %}
{% set layout = load_layout(config['layout']) %}
{% set render = load_component(config['render']) %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Log viewer</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="ui/bootstraptheme.css?primary=%2320186F&secondary=%23483FA4&success=%233E6182&info=%23E4E4E4&warning=%23F57E1A&danger=%23F9F9F9&light=%234A4A4A&dark=%23362D8B&body-bg=%23F2F2F2&body-color=%23696969&enable-transitions=on&font-family-base=roboto&headings-font-family=roboto#background">
  <link rel="stylesheet" href="ui/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="ui/daterangepicker/daterangepicker.css">
  <link rel="stylesheet" href="ui/bootstrap-select/dist/css/bootstrap-select.min.css">
</head>
<body>
  <nav class="navbar navbar-dark navbar-expand-xl bg-primary px-3 py-1 px-xl-0 py-xl-0">
    <div class="container-fluid">
      <a class="navbar-brand d-flex align-items-center py-0 pr-1 text-uppercase text-white" href=".">
        <img src="https://gramener.com/uistatic/gramener.png" width="150" height="45.25" alt="Logo">
        <h1 class="d-none d-sm-block h5 my-0 ml-5">LOGVIEWER</h1>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#download-dropdown">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="download-dropdown">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle text-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-download"></i>
              <span class="caret"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="?ext=png">Visual as png</a>
              <a class="dropdown-item" href="?ext=pdf">Visual as pdf</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  {% raw layout %}

  <footer class="footer bg-info py-2 text-right">
    <div class="container-fluid">
      <img src="https://gramener.com/uistatic/gramener.png" width="107" height="40" alt="footer-logo">
    </div>
  </footer>
  <script src="ui/jquery/dist/jquery.min.js"></script>
  <script src="ui/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="ui/moment/min/moment-with-locales.min.js"></script>
  <script src="ui/daterangepicker/daterangepicker.js"></script>
  <script src="ui/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
  <script src="ui/g1/dist/urlfilter.min.js"></script>
  <script src="ui/d3/build/d3.min.js"></script>
  <script src="ui/vega/build/vega.min.js"></script>
  <script src="ui/vega-lite/build/vega-lite.min.js"></script>
  <script src="ui/vega-tooltip/build/vega-tooltip.min.js"></script>
  <script src="node_modules/vegam/dist/vegam.min.js"></script>
  <script src="script.js"></script>
  <script>
  // TODO: config driven app
  // TODO: switch between aggD, aggW, addM based on date range selection
  /* eslint-env browser, jquery */
  /* globals g1, moment, drawFilters, drawViz, updateView */
  {% raw render %}  // eslint-disable-line

  var params = g1.url.parse(location.search)
  var dtfmt = 'YYYY-MM-DD 00:00:00'
  // default update
  if (!('time>~' in params.searchKey || 'time<~' in params.searchKey)) {
    var start = moment().subtract(29, 'days').format(dtfmt)
    var end = moment().format(dtfmt)
    params.update({'time>~': start, 'time<~': end})
  }
  // setup filters
  drawFilters(params)
  // draw views on params
  drawViz(params)
  $('body')
    .on('click', '.filter-submit', function() {
      var dt = $('.filter-time input').data('daterangepicker')
      var ranges = ('?time>~=' + moment(dt.startDate._d).format(dtfmt)
              + '&time<~=' + moment(dt.endDate._d).format(dtfmt))
      var select = $('.filters select')
        .filter(function(){ return this.value !== ''})
        .serialize()
      if (select) {
        ranges = ranges + '&' + select
      }
      // location.search = ranges
      history.pushState({}, '', ranges)
      updateView()
    })
    .on('click', '#download-dropdown .dropdown-item', function(e) {
      e.preventDefault()
      var options = g1.url.parse(this.href).search
      var url = ('capture?' + options +
        '&delay=renderComplete&url=' + encodeURIComponent(location.href))
      location.href = url
    })
  $(window).on('popstate', updateView)
  $(document).ajaxStop(function(){
    window.renderComplete = true
  })
  </script>
</body>
</html>
