<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="nav_bar.html">
<link rel="import" href="observatory_element.html">

<polymer-element name="timeline-page" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <nav-bar>
      <top-nav-menu></top-nav-menu>
      <vm-nav-menu vm="{{ app.vm }}"></vm-nav-menu>
      <nav-menu link="{{ makeLink('/timeline') }}" anchor="timeline" last="{{ true }}"></nav-menu>
      <nav-refresh id="refresh" callback="{{ refresh }}" label="Refresh"></nav-refresh>
      <nav-refresh callback="{{ clear }}" label="Clear"></nav-refresh>
      <nav-refresh callback="{{ saveTimeline }}" label="Save"></nav-refresh>
      <nav-refresh callback="{{ loadTimeline }}" label="Load"></nav-refresh>
    </nav-bar>
    <div id="control" class="content-centered-big">
      <h2>Timeline settings</h2>
      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Recorder:</div>
          <div class="memberValue">{{ recorderName }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Recorded Streams Profile:</div>
          <div class="memberValue">
            <select id="selectPreset" value="{{ streamPresetSelector }}">
              <option value="None">None</option>
              <option value="Dart">Dart Developer</option>
              <option value="VM">VM Developer</option>
              <option value="All">All</option>
              <option value="Custom">Custom</option>
            </select>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberName">Recorded Streams:</div>
          <div id="streamList" class="memberValue"></div>
        </div>
      </div>
      <br>
    </div>
    <iframe id="root" frameborder="0" src="../../../../timeline.html">
    </iframe>
  </template>
</polymer-element>
<script type="application/dart" src="timeline_page.dart"></script>