<link rel="import" href="/lib/polymer/polymer-element.html">
<link rel="import" href="../light9-color-picker.html">
<link rel="import" href="../edit-choice.html">

<!-- sometimes we draw attrs within the shape of a note. -->
<dom-module id="light9-timeline-note-inline-attrs">
  <template>
    <style>
     :host {
         position: absolute;

         display: block;
         overflow: hidden;
         background: rgba(19, 19, 19, 0.65);
         border-radius: 6px;
         border: 1px solid #313131;
         padding: 3px;
         z-index: 2;
         color: white;
     }
    </style>

      <div>note [[noteLabel]] <button on-click="onDel">del</button></div>
      <table>
        <tr><th>effect:</th><td><edit-choice id="effect" graph="{{graph}}" uri="{{effectStr}}"></edit-choice></td></tr>
        <tr><th>colorScale:</th><td>
          <light9-color-picker color="{{colorScale}}"></light9-color-picker>
        </td></tr>
      </table>
      <img src="/show/dance2019/anim/rainbow1.png">
  </template>
  <script src="inline-attrs.js"></script>
</dom-module>