<!--
  The <chromium-build-selector-sk> custom element declaration. Displays an iron-selector allowing
  the user to choose among the available Chromium builds.

  Attributes:
    chromiumBuilds: array of objects as obtained via ctfe.chromiumBuild.getBuilds. Must be set.
    selected: Item of chromiumBuilds that is currently selected. Notifies.

  Events:
    None.

  Methods:
    selectFirst: Causes the first build in chromiumBuilds to be selected.
-->

<dom-module id="chromium-build-selector-sk">
  <style>
    .iron-selected {
      background-color: #D6ECF2;
    }

    iron-selector.long-field > div {
      width: 40em;
    }
  </style>
  <template>
    <iron-selector selected="{{selectedIndex}}" class="long-field">
      <template is="dom-repeat" items="{{chromiumBuilds}}">
        <div>{{getDescription(item)}}</div>
      </template>
    </iron-selector>
  </template>
</dom-module>

<script>
   Polymer({
     is: "chromium-build-selector-sk",
     properties: {
       chromiumBuilds: Array,
       selectedIndex: {
         type: String,
       },
       selected: {
         type: Object,
         notify: true,
         computed: "getBuild(chromiumBuilds, selectedIndex)",
       },
     },

     getBuild: function(chromiumBuilds, selectedIndex) {
       return chromiumBuilds[selectedIndex];
     },

     selectFirst: function() {
       if (this.chromiumBuilds.length > 0) {
         this.selectedIndex = "0";
       }
     },

     getDescription: ctfe.chromiumBuild.getDescription,
   });
</script>