<!doctype html>
<html>
  <head>
    <title>Provided File Systems</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="provided_file_systems.css">
    <script src="chrome://provided-file-systems/provided_file_systems.js">
    </script>
  </head>
  <body>
    <polymer-element name="file-systems">
      <template>
        <link rel="stylesheet"
            href="chrome://provided-file-systems/provided_file_systems.css">
        <div id="fileSystems">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Extension ID</th>
                <th>Active Requests</th>
              </tr>
            </thead>
            <tbody>
              <template id="file-system" repeat="{{item in model}}">
                <tr on-click="{{rowClicked}}" data-id="{{item.id}}"
                    data-extension-id="{{item.extensionId}}">
                  <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
                  <td>
                    <div class="icon" style="background-image:
                        -webkit-image-set(
                        url(chrome://extension-icon/{{item.extensionId}}/24/1)
                            1x,
                        url(chrome://extension-icon/{{item.extensionId}}/48/1)
                            2x)"></div>
                    {{item.extensionId}}
                  </td>
                  <td>{{item.activeRequests}}</td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </template>
    </polymer-element>

    <polymer-element name="request-timeline">
      <template>
        <link rel="stylesheet"
            href="chrome://provided-file-systems/provided_file_systems.css">
        <div id="requestTimeline">
          <div class="request-timeline-toolbar">
            <button on-click="{{zoomOutClicked}}">&ndash;</button>
            <button on-click="{{zoomInClicked}}">+</button>
          </div>
          <div class="request-timeline-scroller">
            <div class="request-timeline-padding"
                style="min-height: {{rows.length * ROW_HEIGHT}}px">
              <div class="request-timeline-scroller">
              <template id="request-timeline-request"
                  repeat="{{request in chart}}">
                <div class="request-timeline-request"
                    title="{{request.id}}"
                    data-state="{{request.state}}"
                    data-request-type="{{request.requestType}}"
                    style="-webkit-margin-start: {{request.left * scale}}px;
                        top: {{request.row * ROW_HEIGHT}}px;
                        width: {{request.length * scale}}px">
                </div>
              </template>
            </div>
          </div>
        </div>
      </template>
    </polymer-element>

    <polymer-element name="request-events">
      <template>
        <link rel="stylesheet"
            href="chrome://provided-file-systems/provided_file_systems.css">
        <div id="requestEvents">
          <table>
            <thead>
              <tr>
                <th>Time</th>
                <th>Request ID</th>
                <th>Request Type</th>
                <th>Event Type</th>
                <th>Error</th>
                <th>Has Next</th>
              </tr>
            </thead>
            <tbody>
              <template id="request-event" repeat="{{item in model}}">
                <tr>
                  <td>
                    <a id="request-{{item.id}}"></a>
                    {{item.time | formatTime}}
                  </td>
                  <td>{{item.id}}</td>
                  <td data-request-type="{{item.requestType}}">
                    <span>{{item.requestType}}</span>
                  </td>
                  <td>{{item.eventType}}</td>
                  <td data-error="{{item.error}}">
                    <span>{{item.error}}</span>
                  </td>
                  <td>{{item.hasMore | formatHasMore}}</td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </template>
    </polymer-element>

    <file-systems id="file-systems">
    </file-systems>

    <request-timeline hidden id="request-timeline">
    </request-timeline>

    <request-events hidden id="request-events">
    </request-events>
  </body>
</html>
