<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="/dashboard/static/base.css">
  <title>Quick Log Viewer</title>

  <link rel="import" href="/components/polymer/polymer.html">
  <link rel="import" href="/dashboard/elements/quick-log.html">

  <style>
    #content {
      margin-left: 10px;
    }

    #quick-log {
      width: 900px;
      height: 400px;
      display: block;
    }

    .input-element {
      margin-bottom: 4px;
    }
  </style>
</head>
<body>
  {% include 'nav.html' %}
  <h1>Quick Log Viewer</h1>

  <div id="content">
    <form method="POST">
      Log namespace:
      <input name="log_namespace"
             class="input-element"
             id="log-namespace"
             type="text"
             min="1"
             max="30">
      Log name:
      <input name="log_name"
             class="input-element"
             id="log-name"
             type="text"
             min="1"
             max="30">
    </form>
    <button class="input-element kennedy-button-submit"
            onclick="loadLogs();">Load log</button>

    <quick-log id="quick-log"
               xsrfToken="{{xsrf_token | safe}}"
               logLabel="Log:"
               expandOnReady="true"></quick-log>
  </div>

  <script>
    'use strict';
    /**
     * @return {Object.<string, string>} The URL parameters.
     */
    function getUrlParameters() {
      if (!window.location.search) {
        return null;
      }
      var result = {};
      var parts = window.location.search.substring(1).split('&');
      for (var i = 0; i < parts.length; i++) {
        var pair = parts[i].split('=');
        result[pair[0]] = decodeURIComponent(pair[1]);
      }
      return result;
    }

    /**
     * Handles "Load log" button click.
     */
    function loadLogs() {
      var quickLog = document.getElementById('quick-log');
      var logNamespace = document.getElementById('log-namespace').value;
      var logName = document.getElementById('log-name').value;
      if (logNamespace && logName) {
        quickLog.initialize('Log: ' + logName, logNamespace, logName);
        quickLog.show();
      }
    }

    /**
     * Loads log if URL parameters are specified.
     */
    function initialize() {
      var params = getUrlParameters();
      if (params) {
        var quickLog = document.getElementById('quick-log');
        quickLog.initialize('Log: ' + params['name'],
                            params['namespace'],
                            params['name']);
        quickLog.show();
      }
    }

    document.addEventListener('polymer-ready', initialize, false);
  </script>
</body>
</html>