<div id="outer" class="outer-wrapper">
    <div id="connection-clone-container" class="container-fluid" ng-controller="ConnectionCloneController as vm">
        <div id="connection-clone" ng-show="vm.cloneConnInProgress==true" class="col-md-10 row">
            <div class="spinner spinner-lg spinner-inline" />
            {{:: 'connection-clone.copyingConnection' | translate}}
        </div>

        <div id="connection-clone-controls" ng-show="vm.cloneConnInProgress==false" class="col-md-12 row">
            <div class="row">
                <h3>&nbsp;&nbsp;{{:: 'connection-clone.instructionsMsg' | translate}}</h3>
                <form name="connCloneForm" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-1 control-label" for="connName" translate="connection-clone.Name"></label>
                        <div class="col-md-6">
                          <input type="text"
                                 name="connName"
                                 ng-model="vm.connName"
                                 ng-change="vm.connNameChanged()"
                                 required
                                 autofocus
                                 class="form-control">
                          <div ng-show="vm.hasInvalidName()"
                               class="error-message"
                               ng-if="connCloneForm.connName.$dirty || connCloneForm.connName.$touched">
                              {{ vm.nameErrorMsg }}
                          </div>
                        </div>
                    </div>
                </form>

                <button class="btn btn-primary"
                        ng-click="vm.onCloneConnectionClicked(vmmain.selectedConnection().keng__id, vm.connName)"
                        ng-class="{active:vmmain.selectedPage.id == 'connection-clone'}"
                        ng-disabled="vm.hasInvalidName() || vm.cloneOperationFinished"
                        translate="connection-clone.Create">
                </button>
                <button class="btn btn-default"
                        ng-click="vmmain.selectPage('connection-summary')"
                        ng-class="{active:vmmain.selectedPage.id == 'connection-clone'}"
                        translate="svcsource-clone.Cancel"></button>
                </div>
            </div>

            <div class="connection-clone-complete"
                    ng-class="vm.connectionCloneStyleClass"
                    ng-show="! vm.cloneConnInProgress"
                    ng-bind-html="vm.connectionCloneStatus">
            </div>
        </div>
    </div>
</div>
