<!--
  The <skp-repository-selector-sk> custom element declaration. Displays an iron-selector allowing
  the user to choose among the available SKP repositories.

  Attributes:
    skpRepositories: array of objects as obtained via ctfe.skpRepositories.getRepositories. Must be
      set.
    selected: Item of skpRepositories that is currently selected. Notifies.

  Events:
    None.

  Methods:
    selectFirst: Causes the first repository in skpRepositories to be selected.
-->

<dom-module id="skp-repository-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="{{skpRepositories}}">
        <div>{{getDescription(item)}}</div>
      </template>
    </iron-selector>
  </template>
</dom-module>

<script>
   Polymer({
     is: "skp-repository-selector-sk",
     properties: {
       skpRepositories: Array,
       selectedIndex: {
         type: String,
       },
       selected: {
         type: Object,
         notify: true,
         computed: "getRepository(skpRepositories, selectedIndex)",
       },
     },

     getRepository: function(skpRepositories, selectedIndex) {
       return skpRepositories[selectedIndex];
     },

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

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