<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="code_ref.html">
<link rel="import" href="function_ref.html">
<link rel="import" href="nav_bar.html">
<link rel="import" href="observatory_element.html">
<link rel="import" href="sliding_checkbox.html">
<link rel="import" href="view_footer.html">

<polymer-element name="logging-page" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
    .outlined {
      -webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
      box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
      margin: 4px;
    }
    .logItem {
      font: normal 14px consolas, courier, monospace;
      white-space: pre;
      line-height: 125%;
      width: 100%;
    }
    .FINEST {
      background-color: #FAFAFA;
    }
    .FINER {
      background-color: #ECEFF1;
    }
    .FINE {
      background-color: #EFEBE9;
    }
    .CONFIG {
      background-color: #FFF3E0;
    }
    .INFO {
      background-color: #F1F8E9;
    }
    .WARNING {
      background-color: #FFE0B2;
    }
    .SEVERE {
      background-color: #FFCCBC;
    }
    .SHOUT {
      background-color: #FFCDD2;
    }
    #log {
      height: 100%;
      width: 100%;
      overflow-y: auto;
      padding: 8px;
    }
    .fill {
      height: 80%;
      width: 100%;
    }
    </style>
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
      <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
      <nav-menu link="{{ makeLink('/logging', isolate) }}" anchor="logging" last="{{ true }}"></nav-menu>
      <nav-refresh callback="{{ clear }}" label="Clear"></nav-refresh>
    </nav-bar>
    <div id="page" class="content-centered-big">
      <span>Show messages with severity <select id="severityLevelSelector" value="{{ severityLevel }}"></select> and higher</span>
      <hr>
      <div class="flex-row fill">
        <div id="log" class="outlined"></div>
      </div>
    </div>
  </template>
</polymer-element>

<script type="application/dart" src="logging.dart"></script>