<!--
    The <highlightbar-sk> custom element declaration.

    Attributes:
      key -  The key of the highlighted trace.

      value - The value of the highlighted point on the trace.

    Methods:
      None.

    Events:
      None.
-->

<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html">

<dom-module id="highlightbar-sk">
  <style include="iron-flex">
    .key {
      width: 40em;
    }

    .value {
      width: 6em;
      margin-left: 0.6em;
    }
  </style>
  <template>
    <div class="layout horizontal">
      <paper-input class="layout flex" value="{{key}}" label="Highlighted Trace ID" id="name"></paper-input>
      <paper-input class=value value="{{value}}" label="Value" id="value"> </paper-input>
    </div>
  </template>
  <script>
    Polymer({
      is: 'highlightbar-sk',

      properties: {
        key: {
          type: String,
          value: "",
          reflectToAttribute: false,
        },
        value: {
          type: String,
          value: "",
          reflectToAttribute: false,
        },
      },
    });
  </script>
</dom-module>