<!-- The <query2-chooser-sk> custom element declaration.

  Displays the current value for a selection along with an edit button
  that pops up a query-sk dialog to change the selection.

  Attributes:
    current_query - The current query formatted as a URL formatted query string.

    paramset - The paramset to make selections from.

    query - The underlying query2-sk element.

  Events:
    See query2-sk.

  Methods:
    None.

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

<link rel="stylesheet" href="/res/common/css/md.css">

<link rel=import href="query2-sk.html">
<link rel=import href="query2-count.html">
<link rel=import href="query-summary-sk.html">

<dom-module id="query2-chooser-sk">
  <style include="iron-flex iron-flex-alignment iron-positioning">
    query-summary-sk {
      display: inline-block;
      margin-left: 1em;
    }

    query2-count-sk {
      display: inline-block;
    }

    .matches {
      margin: 0.6em;
      font-weight: bold;
    }

    #dialog {
      display: none;
      padding: 2em;
      border: solid lightgray 1px;
    }

    #dialog.display {
      display: block;
    }

    #edit {
      display: inline-block;
    }

    :host {
      display: block;
      padding: 1em;
    }
  </style>
  <template>
    <div class="horizontal layout center">
      <button on-tap="_editTap" class=raised>Edit</button>
      <query-summary-sk id=summary selection="{{current_query}}"></query-summary-sk>
    </div>
    <div id="dialog">
      <query2-sk current_query="{{current_query}}" id=query></query2-sk>
      <div class=matches>Matches: <query2-count-sk current_query="[[current_query]]"></query2-count-sk></div>
      <button on-tap="_closeTap" class=action>Close</button>
    </div>
  </template>
</dom-module>

<script>
  Polymer({
    is: "query2-chooser-sk",

    properties: {
      // The serialized form of _query.
      current_query: {
        type: String,
        value: "",
        reflectToAttribute: true,
        notify: true,
      },
      paramset: {
        type: Object,
        value: function() { return {}; },
        reflectToAttribute: false,
        observer: "_paramsetChange",
      },
    },

    _editTap: function() {
      this.$.dialog.classList.add('display');
    },

    _closeTap: function() {
      this.$.dialog.classList.remove('display');
    },

    _paramsetChange: function() {
      this.$.query.setParamset(this.paramset);
    },

    ready: function() {
      this.query = this.$.query;
    },
  });
</script>