<ion-view view-title="{{'Settings' | translate}}">
  <ion-content>
    <div class="list">
      <label class="item item-input item-select" ng-if="count(settings.servers) > 1">
        <div class="input-label" translate>
          Mopidy Server
        </div>
        <select ng-model="settings.webSocketUrl"
                ng-options="name for (name, url) in settings.servers"
                >
        </select>
      </label>

      <label class="item item-input item-select">
        <div class="input-label" translate>
          Language
        </div>
        <select ng-model="settings.locale"
                ng-options="id as locale.displayName for (id, locale) in locales"
                >
        </select>
      </label>

      <label class="item item-input item-select">
        <div class="input-label" translate>
          Theme
        </div>
        <select ng-model="settings.theme"
                ng-options="theme as name for (theme, name) in themes"
                >
        </select>
      </label>

      <label class="item item-input item-select">
        <div class="input-label" translate>
          Default Click Action
        </div>
        <select ng-model="settings.action">
          <option value="play" translate>Play Now</option>
          <option value="next" translate>Play Next</option>
          <option value="add" translate>Add to Tracklist</option>
          <option value="replace" translate>Replace Tracklist</option>
        </select>
      </label>
    </div>

    <div class="list">
      <a class="item item-icon-right"
         ng-if="count(settings.servers) > 0"
         ui-sref="main.settings.servers"
         >
        <span translate>Manage Servers</span>
        <i class="icon icon-accessory ion-chevron-right"></i>
      </a>
      <a class="item item-icon-right" ui-sref="main.settings.coverart">
        <span translate>Cover Art</span>
        <i class="icon icon-accessory ion-chevron-right"></i>
      </a>
      <a class="item item-icon-right" ui-sref="main.logging">
        <span translate>Logging &amp; Debugging</span>
        <i class="icon icon-accessory ion-chevron-right"></i>
      </a>
      <a class="item item-icon-right" ui-sref="main.settings.about">
        <span translate>About Mopidy Mobile</span>
        <i class="icon icon-accessory ion-chevron-right"></i>
      </a>
    </div>
  </ion-content>
</ion-view>
