<div>
    <div class="git-credentials-form">
        <form name="vm.gitCredentialsForm" class="form-horizontal git-credentials-form" role="form">
            <div ng-show="vm.showRepoProps">
                <!-- Only show if the control is in editing mode or there are some repositories to select -->
                <div class="form-group" ng-show="vm.edit || vm.repoCount() > 0">
                    <label class="control-label col-sm-3"
                           translate="gitCredentialsControl.SavedRepositories">
                    </label>
                    <div class="col-sm-7">
                        <select class="form-control"
                                ng-model="vm.repo"
                                ng-options="repo as repo.name for repo in vm.repositories"
                                ng-change="vm.changeSelection(vm.repo)">
                        </select>
                    </div>
    
                <!-- Only shows buttons if the scope's edit field has been set -->
                <div ng-show="vm.edit">
                    <div class="col-sm-1 git-credential-button">
                        <button id="btn-add-repo" class="btn btn-xs btn-primary fa fa-plus" ng-click="vm.onAddClicked()"></button>
                    </div>
                    <!--
                        Disables the remove button if the controller's selected field is undefined,
                        no selection yet made
                    -->
                    <div class="col-sm-1 git-credential-button">
                        <button id="btn-remove-repo" class="btn btn-xs btn-primary fa fa-minus" ng-click="vm.onRemoveClicked()"
                                ng-disabled="!vm.isRepoSelected() || vm.repoCount() == 1"></button>
                    </div>
                </div>
            </div>
            <h5 class="repo-props-title" translate="gitCredentialsControl.Properties" />
            <div class="repo-props">
                <div class="form-group" ng-show="vm.showName">
                    <div class="col-sm-3">
                        <label class="help-label git-prefs-help">
                            <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.repositoryName' | translate}}"
                                  tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                        </label>
                        <label class="control-label pull-right" for="name" translate="shared.NameLabel"></label>
                    </div>
                    <div class="col-sm-9">
                        <input type="text"
                               name="name"
                               class="form-control" 
                               id="git-repo-dest" 
                               ng-model="vm.repo.name"
                               placeholder="{{:: 'gitCredentialsControl.repositoryNamePlaceholder' | translate}}"
                               required 
                               ng-blur="vm.saveRepositories()">
                        <div
                            ng-messages="gitCredentialsForm.name.$error"
                            role="alert">
                            <div
                                ng-if="gitCredentialsForm.name.$error.required && ( gitCredentialsForm.name.$dirty || gitCredentialsForm.name.$touched )">
                                <div
                                    ng-message="required"
                                    class="error-message"
                                    translate="gitCredentialsControl.repositoryNameRequired"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3">
                        <label class="help-label git-prefs-help">
                            <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.repositoryUrl' | translate}}"
                                  tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                        </label>
                        <label class="control-label pull-right" for="url" translate="gitCredentialsControl.RepositoryUrlLabel"></label>
                    </div>
                    <div class="col-sm-9">
                        <input type="url"
                               name="url" 
                               class="form-control" 
                               id="git-repo-dest" 
                               ng-model="vm.repo.parameters['repo-path-property']"
                               placeholder="{{:: 'gitCredentialsControl.repositoryUrlPlaceholder' | translate}}"
                               required 
                               ng-blur="vm.saveRepositories()">
                        <div
                            ng-messages="gitCredentialsForm.url.$error"
                            role="alert">
                            <div
                                ng-if="gitCredentialsForm.url.$error.required && ( gitCredentialsForm.url.$dirty || gitCredentialsForm.url.$touched )">
                                <div
                                    ng-message="required"
                                    class="error-message"
                                    translate="gitCredentialsControl.repositoryUrlRequired"></div>
                            </div>
                            <div
                                ng-if="gitCredentialsForm.url.$error.url && ( gitCredentialsForm.url.$dirty || gitCredentialsForm.url.$touched )">
                                <div
                                    ng-message="url"
                                    class="error-message"
                                    translate="gitCredentialsControl.repositoryUrlInvalid"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3">
                        <label class="help-label git-prefs-help">
                            <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.repositoryBranch' | translate}}"
                                  tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                        </label>
                        <label class="control-label pull-right" for="git-repo-branch" translate="gitCredentialsControl.RepositoryBranchLabel"></label>
                    </div>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="git-repo-branch" ng-model="vm.repo.parameters['repo-branch-property']"
                            placeholder="{{:: 'gitCredentialsControl.repositoryBranchPlaceholder' | translate}}"
                            ng-blur="vm.saveRepositories()">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3">
                        <label class="help-label git-prefs-help">
                            <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.authorName' | translate}}"
                                  tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                        </label>
                        <label class="control-label pull-right" for="authorName" translate="gitCredentialsControl.AuthorNameLabel"></label>
                    </div>
                    <div class="col-sm-9">
                        <input type="text"
                               name="authorName"
                               class="form-control" 
                               id="git-repo-author" 
                               ng-model="vm.repo.parameters['author-name-property']"
                               placeholder="{{:: 'gitCredentialsControl.authorNamePlaceholder' | translate}}"
                               ng-required="vm.requireAuthorName"
                               ng-blur="vm.saveRepositories()">
                        <div
                            ng-messages="gitCredentialsForm.authorName.$error"
                            role="alert">
                            <div
                                ng-if="gitCredentialsForm.authorName.$error.required && ( gitCredentialsForm.authorName.$dirty || gitCredentialsForm.authorName.$touched )">
                                <div
                                    ng-message="required"
                                    class="error-message"
                                    translate="gitCredentialsControl.authorNameRequired"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3">
                        <label class="help-label git-prefs-help">
                            <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.authorEmail' | translate}}"
                                  tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                        </label>
                        <label class="control-label pull-right" for="authorEmail" translate="gitCredentialsControl.AuthorEmailLabel"></label>
                    </div>
                    <div class="col-sm-9">
                        <input type="email"
                               name="authorEmail"
                               id="authorEmail"
                               class="form-control" 
                               id="git-repo-author-email" 
                               ng-model="vm.repo.parameters['author-email-property']"
                               placeholder="{{:: 'gitCredentialsControl.authorEmailPlaceholder' | translate}}"
                               ng-required="vm.requireAuthorEmail"
                               ng-blur="vm.saveRepositories()">
                        <div
                            ng-messages="gitCredentialsForm.authorEmail.$error"
                            role="alert">
                            <div
                                ng-if="gitCredentialsForm.authorEmail.$error.required && ( gitCredentialsForm.authorEmail.$dirty || gitCredentialsForm.authorEmail.$touched )">
                                <div
                                    ng-message="required"
                                    class="error-message"
                                    translate="gitCredentialsControl.authorEmailRequired"></div>
                            </div>
                            <div
                                ng-if="gitCredentialsForm.authorEmail.$error.email && ( gitCredentialsForm.authorEmail.$dirty || gitCredentialsForm.authorEmail.$touched )">
                                <div
                                    ng-message="email"
                                    class="error-message"
                                    translate="gitCredentialsControl.authorEmailInvalid"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group" ng-show="vm.showFilePath">
                    <div class="col-sm-3">
                        <label class="help-label git-prefs-help">
                            <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.relativePath' | translate}}"
                                  tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                        </label>
                        <label class="control-label pull-right" for="path" translate="gitCredentialsControl.RelativeFilePathLabel"></label>
                    </div>
                    <div class="col-sm-9">
                        <input type="text"
                               name="path" 
                               class="form-control" 
                               id="git-repo-file-path" 
                               ng-model="vm.repo.parameters['file-path-property']"
                               placeholder="{{:: 'gitCredentialsControl.relativeFilePathPlaceholder' | translate}}"
                               required 
                               ng-change="vm.pathValidation()"
                               ng-blur="vm.saveRepositories()">
                        <div
                            ng-messages="vm.gitCredentialsForm.path.$error"
                            role="alert">
                            <div
                                ng-if="vm.gitCredentialsForm.path.$error.required && ( vm.gitCredentialsForm.path.$dirty || vm.gitCredentialsForm.path.$touched )">
                                <div
                                    ng-message="required"
                                    class="error-message"
                                    translate="gitCredentialsControl.pathRequired"></div>
                            </div>
                            <div
                                ng-if="vm.gitCredentialsForm.path.$error.invalidPath && ( vm.gitCredentialsForm.path.$dirty || vm.gitCredentialsForm.path.$touched )">
                                <div
                                    ng-message="invalidPath"
                                    class="error-message"
                                    translate="gitCredentialsControl.pathInvalid"></div>
                            </div>
                        </div>
                        <div ng-if="vm.hasPathWarnings && ( vm.gitCredentialsForm.path.$dirty || vm.gitCredentialsForm.path.$touched )">
                            {{ vm.pathWarningsMsg }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div ng-show="vm.showSecurityAttributes">
                <h3 class="git-credentials-auth-title" translate="gitCredentialsControl.credentialsSectionTitle"></h3>
                <uib-accordion close-others="true">

                    <!-- HTTP -->
                    <uib-accordion-group heading="HTTP" is-open="true" close-others="true">
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="help-label git-prefs-help">
                                    <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.userName' | translate}}"
                                          tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                                </label>
                                <label class="control-label pull-right" for="userName" translate="shared.UserNameLabel"></label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text"
                                       class="form-control"
                                       id="git-repo-username"
                                       ng-model="vm.repo.parameters['repo-username-property']"
                                       placeholder="{{:: 'shared.userNamePlaceholder' | translate}}"
                                       ng-blur="vm.saveRepositories()">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="help-label git-prefs-help">
                                    <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.httpPassword' | translate}}"
                                          tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                                </label>
                                <label class="control-label pull-right" for="password" translate="shared.PasswordLabel"></label>
                            </div>
                            <div class="col-sm-9">
                                <input type="password"
                                       class="form-control"
                                       id="git-http-repo-password"
                                       ng-model="vm.clearPassword"
                                       placeholder="{{:: 'gitCredentialsControl.passwordPlaceholder' | translate}}"
                                       ng-blur="vm.saveRepositories()">
                            </div>
                        </div>
                    </uib-accordion-group>

                    <!-- SSH -->
                    <uib-accordion-group heading="SSH" close-others="true">
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label class="help-label git-prefs-help">
                                    <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.hostsFileKeyAuthentication' | translate}}"
                                          tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                                </label>
                                <label class="control-label pull-right" for="privateKeyKnownHosts" translate="gitCredentialsControl.hostsFileLabel"></label>
                            </div>
                            <div class="col-sm-9">
                                <input type="file"
                                       ng-init="vm.hostsFileName"
                                       file-input-handler="vm.onAllowHostsChange">
                            </div>
                        </div>
                        <uib-tabset>
                            <uib-tab heading="{{:: 'gitCredentialsControl.privateKeyTabTitle' | translate}}">
                                <div class="private-key-auth-form">
                                    <div class="form-group">
                                        <div class="col-sm-3">
                                            <label class="help-label git-prefs-help">
                                                <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.privateKeyFile' | translate}}"
                                                      tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                                            </label>
                                            <label class="control-label pull-right" for="privateKey" translate="gitCredentialsControl.PrivateKeyFileLabel"></label>
                                        </div>
                                        <div class="col-sm-9">
                                            <input type="file"
                                                   file-input-handler="vm.onPrivateKeyChange">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-3">
                                            <label class="help-label git-prefs-help">
                                                <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.passphrase' | translate}}"
                                                      tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                                            </label>
                                            <label class="control-label pull-right" for="passphrase" translate="gitCredentialsControl.PassphraseLabel"></label>
                                        </div>
                                        <div class="col-sm-9">
                                            <input type="password"
                                                   class="form-control"
                                                   id="git-ssh-repo-passphrase"
                                                   ng-model="vm.clearPassphrase"
                                                   placeholder="{{:: 'gitCredentialsControl.passphrasePlaceholder' | translate}}"
                                                   ng-blur="vm.saveRepositories()">
                                        </div>
                                    </div>
                                </div>
                            </uib-tab>

                            <uib-tab heading="{{:: 'gitCredentialsControl.passwordTabTitle' | translate}}">
                                <div class="password-auth-form">
                                    <div class="form-group">
                                        <div class="col-sm-3">
                                            <label class="help-label git-prefs-help">
                                                <span class="fa fa-info-circle" uib-tooltip="{{:: 'gitCredentialsControl.help.sshPassword' | translate}}"
                                                      tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                                            </label>
                                            <label class="control-label pull-right" for="sshPassword" translate="shared.PasswordLabel"></label>
                                        </div>
                                        <div class="col-sm-9">
                                            <input type="password"
                                                   class="form-control" id="git-ssh-repo-password"
                                                   ng-model="vm.clearPassword"
                                                   placeholder="{{:: 'gitCredentialsControl.passwordPlaceholder' | translate}}"
                                                   ng-blur="vm.saveRepositories()">
                                        </div>
                                    </div>
                                </div>
                            </uib-tab>
                        </uib-tabset>
                    </uib-accordion-group>
                </uib-accordion>
            </div>
        </form>
    </div>
</div>
