<head>
  <link rel="import" href="observatory_element.html">
</head>
<polymer-element name="script-inset" extends="observatory-element">
  <template>
    <style>
      .sourceInset {
        padding-left: 15%;
        padding-right: 15%;
      }
      .grayBox {
        width: 100%;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        padding: 10px;
     }
    </style>
    <div class="sourceInset">
      <content></content>
      <div class="grayBox">
        <template if="{{ coverage == true }}">
          <table>
            <tbody>
              <tr template repeat="{{ line in lines }}">
                <td style="{{ hitStyle(line) }}"><span>  </span></td>
                <td style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: nowrap;">{{line.line}}</td>
                <td>&nbsp;</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>
        </template>
        <template if="{{ coverage == false }}">
          <table>
            <tbody>
              <tr template repeat="{{ line in lines }}">
                <td style="font-family: consolas, courier, monospace;font-size: 1em;line-height: 1.2em;white-space: nowrap;">{{line.line}}</td>
                <td>&nbsp;</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>
        </template>
      </div>
    </div>
  </template>
  <script type="application/dart;component=1" src="script_inset.dart"></script>
</polymer-element>