<head>
  <link rel="import" href="nav_bar.html">
  <link rel="import" href="observatory_element.html">
</head>
<polymer-element name="script-view" extends="observatory-element">
<template>
  <nav-bar>
    <top-nav-menu></top-nav-menu>
    <isolate-nav-menu isolate="{{ script.isolate }}">
    </isolate-nav-menu>
    <library-nav-menu library="{{ script.library }}"></library-nav-menu>
    <nav-menu link="." anchor="{{ script.name }}" last="{{ true }}">
      <li>
        <input type="checkbox" checked="{{ showCoverage }}">
        <label>Show Coverage Data</label>
      </li>
    </nav-menu>
    <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
    <nav-refresh callback="{{ refresh }}">
    </nav-refresh>
  </nav-bar>

  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="panel-heading">Script source for: {{ script.name }}</div>
      <div class="panel-body">
        <table style="width:100%">
          <tbody>
          <tr template repeat="{{ line in script.lines }}">
            <td style="{{ hitsStyle(line) }}">  </td>
            <td style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: nowrap;">{{line.line}}</td>
            <td width="99%" style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: pre;">{{line.text}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script type="application/dart" src="script_view.dart"></script>
</polymer-element>