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

<polymer-element name="eval-box" extends="observatory-element">
  <template>
    <style>
      .textbox {
        flex-grow: 1;
        font: 400 16px 'Montserrat', sans-serif;
      }
      .bigtextbox {
        font: 400 16px 'Montserrat', sans-serif;
      }
      .button {
        font: 400 16px 'Montserrat', sans-serif;
      }
      .radios {
        display: inline;
        padding-right: 30px;
      }
      .radios label{
        padding-left: 10px;
      }
      .historyExpr, .historyValue {
        vertical-align: text-top;
        font: 400 14px 'Montserrat', sans-serif;
      }
      .historyExpr a {
        display: block;
        color: black;
        text-decoration: none;
        padding: 6px 6px;
        cursor: pointer;
        white-space: pre-line;
      }
      .historyExpr a:hover {
        background-color: #fff3e3;
      }
      .historyValue {
        display: block;
        padding: 6px 6px;
      }
      a.boxclose {
        margin-left: 20px;
        valign: top;
        display: block;
        height: 18px;
        width: 18px;
        line-height: 16px;
        border-radius: 9px;
        color: black;
        font-size: 18px;
        cursor: pointer;
        text-align: center;
      }
      a.boxclose:hover {
        background: lightgray;
      }
    </style>
    <form style="display:flex; flex-direction:row; align-items:flex-end">
      <template if="{{ lineMode == '1-line' }}">
        <input class="textbox" type="text" value="{{ text }}">
      </template>
      <template if="{{ lineMode == 'N-line' }}">
        <textarea class="bigtextbox" rows="5" cols="80"
                  value="{{ text }}"></textarea>
      </template>

      <input class="button" type="submit" value="Evaluate" on-click="{{ evaluate }}">
      <div class="radios" on-change="{{ updateLineMode }}">
        <label for="1-line">
          <input type="radio" name="lineMode" value="1-line" checked>
          1-line
        </label>
        <label for="N-line">
          <input type="radio" name="lineMode" value="N-line">
          N-line
        </label>
      </div>
    </form>

    <br>
    <template if="{{ results.isNotEmpty }}">
      <table>
        <tr template repeat="{{ result in results }}">
          <td class="historyExpr">
            <a class="expr" on-click="{{ selectExpr }}"
               expr="{{ result['expr'] }}">{{ result['expr'] }}</a>
          </td>
          <td class="historyValue">
            <template if="{{ result['error'] != null}}">
              <div style="color:red">{{ result['error'] }}</div>
            </template>
            <template if="{{ result['error'] == null}}">
              <template if="{{ result['value'] != null }}">
                <any-service-ref ref="{{ result['value'] }}"></any-service-ref>
              </template>
              <template if="{{ result['value'] == null }}">
                <div style="color:#aaa;cursor:wait;">&lt;pending&gt;</div>
              </template>
            </template>
          </td>
          <td>
            <a class="boxclose" on-click="{{ closeItem }}"
               closeId="{{ result['id'] }}">&times;</a>
          </td>
        </tr>
      </table>
    </template>
  </template>
</polymer-element>

<script type="application/dart" src="eval_box.dart"></script>