<div>
    <div class="Prompt-selectedItem">
        <div class="Prompt-selectedItemInfo" ng-hide="(!promptData.launchConf.defaults.credentials || promptData.launchConf.defaults.credentials.length === 0) && promptData.prompts.credentials.value.length === 0">
            <div class="Prompt-selectedItemLabel">
                <span>{{:: vm.strings.get('prompt.SELECTED') }}</span>
            </div>
            <div class="Prompt-previewTags--outer">
                <div ng-show="promptData.launchConf.defaults.credentials && promptData.launchConf.defaults.credentials.length > 0 && promptData.prompts.credentials.value.length === 0" class="Prompt-noSelectedItem">{{:: vm.strings.get('prompt.NO_CREDENTIALS_SELECTED') }}</div>
                <div class="Prompt-previewTags--inner">
                    <div class="MultiCredential-tagContainer"
                        ng-class="{'MultiCredential-tagContainer--disabled': !promptData.launchConf.ask_credential_on_launch}"
                        ng-repeat="credential in promptData.prompts.credentials.value">
                        <div class="MultiCredential-iconContainer" ng-switch="promptData.prompts.credentials.credentialTypes[credential.credential_type]">
                            <i class="fa fa-cloud MultiCredential-tagIcon" ng-switch-when="cloud"></i>
                            <i class="fa fa-info MultiCredential-tagIcon" ng-switch-when="insights"></i>
                            <i class="fa fa-sitemap MultiCredential-tagIcon" ng-switch-when="net"></i>
                            <i class="fa fa-code-fork MultiCredential-tagIcon" ng-switch-when="scm"></i>
                            <i class="fa fa-key MultiCredential-tagIcon" ng-switch-when="ssh"></i>
                            <i class="fa fa-archive MultiCredential-tagIcon" ng-switch-when="vault"></i>
                        </div>
                        <div class="MultiCredential-tag" ng-class="promptData.launchConf.ask_credential_on_launch ? 'MultiCredential-tag--deletable' : 'MultiCredential-tag--disabled'">
                            <span ng-if="!credential.inputs.vault_id && !credential.vault_id" class="MultiCredential-name--label">
                                {{ credential.name }}
                            </span>
                            <span ng-if="credential.inputs.vault_id || credential.vault_id" class="MultiCredential-name--label">
                                {{ credential.name }} | {{ credential.vault_id ? credential.vault_id : credential.inputs.vault_id }}
                            </span>
                        </div>
                        <div class="MultiCredential-deleteContainer"
                            ng-click="vm.deleteSelectedCredential(credential)"
                            ng-hide="!promptData.launchConf.ask_credential_on_launch">
                            <i class="fa fa-times MultiCredential-tagDelete"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Prompt-previewTagRevert">
                <a class="Prompt-revertLink" href="" ng-show="vm.showRevertCredentials()" ng-click="vm.revert()">{{:: vm.strings.get('prompt.REVERT') }}</a>
            </div>
        </div>
    </div>
    <div ng-if="promptData.credentialTypeMissing && promptData.credentialTypeMissing.length > 0" class="Prompt-credentialTypeMissing">
        <div ng-repeat="missingCred in promptData.credentialTypeMissing">
            <span class="fa fa-warning"></span>&nbsp;{{:: vm.strings.get('prompt.CREDENTIAL_TYPE_MISSING', missingCred.label) }}
        </div>
    </div>
    <span>
        <div ng-if="preventCredsWithPasswords && (promptData.prompts.credentials.passwords.ssh || promptData.prompts.credentials.passwords.become || promptData.prompts.credentials.passwords.ssh_key_unlock || (promptData.prompts.credentials.passwords.vault && promptData.prompts.credentials.passwords.vault.length > 0))">
            <div class="Prompt-credsWarning">
                <span class="fa fa-warning"></span>
                <span>{{ vm.strings.get('prompt.CREDENTIAL_PASSWORD_WARNING')}}</span>
            </div>
            <div class="Prompt-credsWarningList">
                <div ng-if="promptData.prompts.credentials.passwords.ssh || promptData.prompts.credentials.passwords.become || promptData.prompts.credentials.passwords.ssh_key_unlock">{{promptData.prompts.credentials.passwords.ssh.name || promptData.prompts.credentials.passwords.become.name || promptData.prompts.credentials.passwords.ssh_key_unlock.name}}</div>
                <div ng-if="promptData.prompts.credentials.passwords.vault && promptData.prompts.credentials.passwords.vault.length > 0" ng-repeat="vaultCred in promptData.prompts.credentials.passwords.vault">{{vaultCred.name}}</div>
            </div>
        </div>
    </span>
    <span ng-show="promptData.launchConf.ask_credential_on_launch">
        <div class="Prompt-credentialSubSection">
            <span class="Prompt-label">{{:: vm.strings.get('prompt.CREDENTIAL_TYPE') }}:</span>
            <select id="launch-kind-select" ng-model="promptData.prompts.credentials.credentialKind">
                <option ng-repeat="option in promptData.prompts.credentials.credentialTypeOptions" value="{{option.value}}">{{option.name}}</option>
            </select>
        </div>
        <div id="prompt-credential"></div>
    </span>
    <div ng-show="!preventCredsWithPasswords && (promptData.prompts.credentials.passwords.ssh || promptData.prompts.credentials.passwords.become || promptData.prompts.credentials.passwords.ssh_key_unlock || (promptData.prompts.credentials.passwords.vault && promptData.prompts.credentials.passwords.vault.length > 0))">
        <div class="Prompt-instructions">{{:: vm.strings.get('prompt.PASSWORDS_REQUIRED_HELP') }}</div>
        <form name="credentialPasswordsForm" autocomplete="off" novalidate>
            <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="promptData.prompts.credentials.passwords.ssh">
                <label for="ssh_password" class="Form-inputLabelContainer">
                    <span class="Form-requiredAsterisk">*</span>
                    <span class="Form-inputLabel">{{:: vm.strings.get('prompt.credential_passwords.SSH_PASSWORD') }}</span>
                </label>
                <div class="input-group">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default show_input_button Prompt-passwordButton" id="prompt-ssh-password_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="vm.togglePassword('#prompt-ssh-password')" data-container="job-launch-modal" data-original-title="" title="">{{:: vm.strings.get('SHOW') }}</button>
                    </span>
                    <input id="prompt-ssh-password" type="password" ng-model="promptData.prompts.credentials.passwords.ssh.value" name="ssh_password" class="password-field form-control input-sm Form-textInput" required>
                </div>
                <div class="error" ng-show="credentialPasswordsForm.ssh_password.$dirty && credentialPasswordsForm.ssh_password.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_PASSWORD') }}</div>
                <div class="error api-error" ng-bind="ssh_password_api_error"></div>
            </div>
            <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="promptData.prompts.credentials.passwords.ssh_key_unlock">
                <label for="ssh_key_unlock" class="Form-inputLabelContainer">
                    <span class="Form-requiredAsterisk">*</span>
                    <span class="Form-inputLabel">{{:: vm.strings.get('prompt.credential_passwords.PRIVATE_KEY_PASSPHRASE') }}</span>
                </label>
                <div class="input-group">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default show_input_button Prompt-passwordButton" id="prompt-ssh-key-unlock_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="vm.togglePassword('#prompt-ssh-key-unlock')" data-container="job-launch-modal" data-original-title="" title="">{{:: vm.strings.get('SHOW') }}</button>
                    </span>
                    <input id="prompt-ssh-key-unlock" type="password" ng-model="promptData.prompts.credentials.passwords.ssh_key_unlock.value" name="ssh_key_unlock" class="password-field form-control input-sm Form-textInput" required>
                </div>
                <div class="error" ng-show="credentialPasswordsForm.ssh_key_unlock.$dirty && credentialPasswordsForm.ssh_key_unlock.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_PASSWORD') }}</div>
                <div class="error api-error" ng-bind="ssh_key_unlock_api_error"></div>
            </div>
            <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="promptData.prompts.credentials.passwords.become">
                <label for="become_password" class="Form-inputLabelContainer">
                    <span class="Form-requiredAsterisk">*</span>
                    <span class="Form-inputLabel">{{:: vm.strings.get('prompt.credential_passwords.PRIVILEGE_ESCALATION_PASSWORD') }}</span>
                </label>
                <div class="input-group">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default show_input_button Prompt-passwordButton" id="prompt-become-password_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="vm.togglePassword('#prompt-become-password')" data-container="job-launch-modal" data-original-title="" title="">{{:: vm.strings.get('SHOW') }}</button>
                    </span>
                    <input id="prompt-become-password" type="password" ng-model="promptData.prompts.credentials.passwords.become.value" name="become_password" class="password-field form-control input-sm Form-textInput" required>
                </div>
                <div class="error" ng-show="credentialPasswordsForm.become_password.$dirty && credentialPasswordsForm.become_password.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_PASSWORD') }}</div>
                <div class="error api-error" ng-bind="become_password_api_error"></div>
            </div>
            <span ng-if="promptData.prompts.credentials.passwords.vault && promptData.prompts.credentials.passwords.vault.length > 0">
                <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-repeat="vault_credential in promptData.prompts.credentials.passwords.vault track by $index">
                    <label for="vault_password" class="Form-inputLabelContainer">
                        <span class="Form-requiredAsterisk">*</span>
                        <span class="Form-inputLabel">{{:: vm.strings.get('prompt.credential_passwords.VAULT_PASSWORD') }} - {{vault_credential.name}}</span>
                    </label>
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default show_input_button Prompt-passwordButton" id="prompt-vault-password_show_input_button" aw-tool-tip="Toggle the display of plaintext." aw-tip-placement="top" ng-click="vm.togglePassword('#prompt-vault-password')" data-container="job-launch-modal" data-original-title="" title="">{{:: vm.strings.get('SHOW') }}</button>
                        </span>
                        <input id="prompt-vault-password" type="password" ng-model="promptData.prompts.credentials.passwords.vault[$index].value" name="vault_password" class="password-field form-control input-sm Form-textInput" required>
                    </div>
                    <div class="error" ng-show="credentialPasswordsForm.vault_password.$dirty && credentialPasswordsForm.vault_password.$error.required">{{:: vm.strings.get('prompt.PLEASE_ENTER_PASSWORD') }}</div>
                    <div class="error api-error" ng-bind="vault_password_api_error"></div>
                </div>
        </form>
    </div>
</div>
