<div class="panel panel-default" ng-show="desktopMode">
  <div class="panel-heading">
    <h3 class="panel-title" translate>Выбор Облака</h3>
  </div>
  <div class="panel-body">
    <form class="form-inline" role="form" name="forms.change_cloud">
      <div class="control-group row">
          <div class="btn-group col-md-offset-3">
          <button type="button"
                  class="btn btn-default"
                  ng-class="tab == 'public' ? 'active' : ''"
                  ng-click="tab != 'public' && choosePublicCloud()"
                  translate>
            Облако Си-Норда
          </button>
          <button type="button"
                  class="btn btn-default"
                  ng-class="tab == 'private' ? 'active' : ''"
                  ng-click="tab != 'private' && choosePrivateCloud()"
                  translate>
            Частное облако
          </button>
          <button type="button"
                  class="btn btn-default"
                  ng-class="tab == 'custom' ? 'active' : ''"
                  ng-click="tab != 'custom' && chooseCustomCloud()"
                  translate>
            Настроить вручную
          </button>
        </div>
      </div>
      <div class="row" ng-show="tab == 'private' && !editingPin">
        <hr>
        <label class="col-md-3" translate>Выбранный сервер</label>
        <div class="">
          <input type="button" class="btn" disabled ng-if="!!cloudRealm()['name']" ng-value="cloudRealm()['name']">
          <input type="button" class="btn" disabled ng-if="!cloudRealm()['name']" ng-value="'Неизвестное Облако' | translate">
          <button type="button" class="btn btn-link" ng-click="startPinInput()" translate>сменить</button>
        </div>
      </div>
      <div class="row" ng-show="tab == 'private' && editingPin">
        <hr>
        <label class="col-md-3" for="server-pin"><translate>Пин-код сервера</translate>:</label>
        <input class="form-control"
               required
               type="text"
               id="server-pin"
               name="pin"
               ng-model="pin"
               ng-change="error=null">
        <button class="btn" type="button" ng-disabled="forms.change_cloud.$invalid" ng-click="setCloud(pin)">
          <i class="glyphicon glyphicon-ok"></i>
        </button>
        <button type="button" class="btn btn-link" ng-click="stopPinInput()" translate>отмена</button>
        <span ng-show="error == 'notFound'" class="text-danger" translate>ошибка выбора сервера</span>
      </div>
    </form>
    <div ng-show="tab === 'custom'">
      <br>
      <ng-include src="'augeas/templates/partials/cloud_customization.html'"
                  onload="onCloudCustomizationLoad()"/>
    </div>
  </div>
</div>
