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

  Attributes:
  Events:
  Methods:
-->
<link rel="import" href="/res/common/imp/details-summary.html">
<link rel="import" href="center.html">
<dom-module id="quartile-sk">
  <style>
  </style>
  <template>
    <details-sk>
      <summary-sk>
        {{name}} {{_percent(quartile.percent)}}%
      </summary-sk>
      <template is="dom-repeat" items="{{quartile.centers}}" as="center">
        <center-sk data="{{center}}"></center-sk>
      </template>
      <div id=centers></div>
    </details-sk>
  </template>
</dom-module>

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

    properties: {
      quartile: {
        type: Object,
        value: function(){ return {}},
      },
      name: {
        type: String,
        value: "",
      },
    },

    _percent: function(p) {
      return (p*100).toFixed(1);
    },

  });
</script>