<div id="multi-credential-modal" class="Lookup modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header Form-header">
                <div class="Form-title Form-title--uppercase" translate>
                    CREDENTIALS
                </div>
                <div class="Form-header--fields"></div>
                <div class="Form-exitHolder">
                    <button type="button" class="Form-exit" ng-click="vm.cancelForm()">
                        <i class="fa fa-times-circle"></i>
                    </button>
                </div>
            </div>
            <div class="modal-body">
                <div class="MultiCredential-selectedBar"
                    ng-show="(tags && tags.length) || selectedCredentialsDirty()">
                    <span class="MultiCredential-selectedBarLabel" translate>
                        SELECTED:
                    </span>
                    <div class="MultiCredential-tags">
                        <div class="MultiCredential-tagSection">
                            <div class="MultiCredential-flexContainer">
                                <div class="MultiCredential-tagContainer ng-scope" ng-repeat="tag in tags track by $index" ng-class="{'MultiCredential-tagContainer--disabled': tag.readOnly}">
                                    <div class="MultiCredential-iconContainer--disabled" ng-switch="tag.kind" ng-if="fieldIsDisabled || tag.readOnly">
                                        <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-iconContainer" ng-switch="tag.kind" ng-if="!(fieldIsDisabled || tag.readOnly)">
                                        <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="{'MultiCredential-tag--deletable': !fieldIsDisabled && !tag.readOnly, 'MultiCredential-tag--disabled': tag.readOnly}">
                                        <span ng-if="!tag.info" class="MultiCredential-name--label ng-binding">
                                            {{ tag.name }}
                                        </span>
                                        <span ng-if="tag.info" class="MultiCredential-name--label ng-binding">
                                            {{ tag.name }} | {{ tag.info }}
                                        </span>
                                    </div>
                                    <div class="MultiCredential-deleteContainer"
                                        ng-click="vm.removeCredential(tag)"
                                        ng-hide="fieldIsDisabled || tag.readOnly">
                                        <i class="fa fa-times MultiCredential-tagDelete"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="MultiCredential-previewTagRevert">
                        <a class="MultiCredential-revertLink"
                           ng-show="selectedCredentialsDirty()"
                           ng-click="vm.revertSelectedCredentials()"
                           href=""
                           translate>
                           REVERT
                        </a>
                    </div>
                </div>
                <div class="MultiCredential-credentialSubSection">
                    <span class="MultiCredential-selectLabel" translate>CREDENTIAL TYPE:</span>
                    <select id="multi-credential-kind-select" ng-model="credentialType">
                        <option ng-repeat="t in displayedCredentialTypes" value="{{ t.id }}">{{ t.name }}</option>
                    </select>
                </div>
                <div id="multi-credential-modal-body"></div>
            </div>
            <div class="modal-footer">
                <button type="button"
                    ng-click="vm.cancelForm()"
                    class="Lookup-cancel btn btn-sm Form-cancelButton"
                    translate>
                    CANCEL
                </button>
                <button type="button"
                    ng-click="vm.saveForm()"
                    ng-disabled="!credentials || credentials.length === 0"
                    class="btn btn-sm Form-saveButton"
                    translate>
                    SELECT
                </button>
            </div>
        </div>
    </div>
</div>
