<!-- The <perf-scaffold-sk> custom element declaration.

  Contains the title bar and drawer-panel for all the Perf pages. The
  rest of every Perf page should be a child of this element.

  Attributes:
    None.

  Events:
    None.

  Methods:
    None.
-->

<link rel=import href="/res/imp/bower_components/paper-header-panel/paper-header-panel.html">
<link rel=import href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html">
<link rel=import href="/res/imp/bower_components/paper-menu-button/paper-menu-button.html">
<link rel=import href="/res/imp/bower_components/paper-menu/paper-menu.html">
<link rel=import href="/res/imp/bower_components/paper-toolbar/paper-toolbar.html">
<link rel=import href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel=import href="/res/imp/bower_components/iron-icon/iron-icon.html">
<link rel=import href="/res/common/imp/login.html">
<link rel=import href="/res/common/imp/error-toast-sk.html">

<dom-module id="perf-scaffold-sk">
  <style>
    * {
      font-family:Roboto,Helvetica,Arial,'Bitstream Vera Sans',sans-serif;
    }

    #nav a[href] {
      color: black;
      text-decoration: none;
    }

    #nav a[href]:hover {
      text-decoration: underline;
    }

    #nav a span {
      vertical-align: middle;
    }

    #nav div {
      margin: 1em;
    }

    #nav iron-icon {
      margin-right: 0.3em;
    }

    paper-menu {
      display: block;
    }

    paper-item {
      display: block;
      padding: 1em;
    }

    :root {
      --paper-toolbar-background: #1f78b4;
      --login-sk-color: white;
    }

    login-sk {
      margin-left: auto;
      display: block;
      color: white;
    }

    .main {
      padding: 2em;
    }

    .name {
      font-size: 20px;
    }
  </style>
  <template>
    <div>
      <paper-toolbar>
        <paper-menu-button no_overlap>
          <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
          <paper-menu id=nav class="dropdown-content">
            <paper-item><a href="/e/"><iron-icon icon="home"></iron-icon><span>Home</span></a></paper-item>
            <paper-item><a href="/c/"><iron-icon icon="sort"></iron-icon><span>Clustering<span></a></paper-item>
            <paper-item><a href="/t/"><iron-icon icon="trending-up"></iron-icon><span>Triage</span></a></paper-item>
            <paper-item><a href="/a/"><iron-icon icon="add-alert"></iron-icon><span>Alerts</span></a></paper-item>
            <paper-item><a href="/activitylog/"><iron-icon icon="event"></iron-icon><span>Triage Log</span></a></paper-item>
            <paper-item><a href="/help/"><iron-icon icon="help"></iron-icon><span>Help</span></a></paper-item>
            <paper-item><a href="https://github.com/google/skia-buildbot/tree/master/perf"><iron-icon icon="folder"></iron-icon><span>Code</span></a></paper-item>
          </paper-menu>
        </paper-menu-button>
        <div class=name>Perf</div>
        <login-sk></login-sk>
      </paper-toolbar>

      <div class=main>
        <content></content>
      </div>

    </div>
    <error-toast-sk></error-toast-sk>
  </template>
</dom-module>

<script>
  Polymer({
    is: "perf-scaffold-sk",

    ready: function() {
    },
  });
</script>