<div data-element="overlay" class="umb-overlay umb-overlay-{{position}} umb-overlay--{{size}}" on-outside-click="outSideClick()">
    <ng-form class="umb-overlay__form" name="overlayForm" novalidate val-form-manager>

        <div data-element="overlay-header" class="umb-overlay-header">
            <h4 class="umb-overlay__title">{{model.title}}</h4>
            <p class="umb-overlay__subtitle">{{model.subtitle}}</p>
        </div>

        <div data-element="overlay-content" class="umb-overlay-container form-horizontal">
            <ng-transclude></ng-transclude>
            <div ng-if="view && !parentScope" ng-include="view"></div>
            <div class="scoped-view" style="display: none;"></div>
        </div>

        <div class="umb-overlay__item-details" ng-if="model.itemDetails">

            <div class="umb-overlay__item-details-title-wrapper" ng-if="model.itemDetails.icon || model.itemDetails.title">
                <i class="{{ model.itemDetails.icon }} umb-overlay__item-details-icon" ng-if="model.itemDetails.icon"></i>
                <h5 class="umb-overlay__item-details-title" ng-if="model.itemDetails.title">{{ model.itemDetails.title }}</h5>
            </div>

            <div class="umb-overlay__item-details-description" ng-if="model.itemDetails.description">{{ model.itemDetails.description }}</div>

        </div>

        <div data-element="overlay-footer" class="umb-overlay-drawer" ng-class="{'-auto-height': model.confirmSubmit.show}">

            <div ng-if="model.confirmSubmit.show">

                <h5 class="red" ng-if="model.confirmSubmit.title"><i class="icon-alert"></i> {{ model.confirmSubmit.title }}</h5>
                <p ng-if="model.confirmSubmit.description">{{ model.confirmSubmit.description }}</p>

                <label class="checkbox no-indent">
                    <input type="checkbox" ng-model="directive.enableConfirmButton" />
                    <strong>{{model.confirmSubmit.checkboxLabel}}</strong>
                </label>

                <div class="umb-overlay-drawer__align-right">
                    <umb-button
                        alias="overlayCancelSubmit"
                        action="cancelConfirmSubmit()"
                        button-style="link"
                        label="Cancel"
                        type="button">
                    </umb-button>

                    <umb-button
                        data-element="overlay-confirm-submit"
                        button-style="success"
                        label="Confirm"
                        type="button"
                        disabled="!directive.enableConfirmButton"
                        action="submitForm(model)"
                        auto-focus="true">
                    </umb-button>
                </div>
            </div>

            <div class="umb-overlay-drawer__align-right" ng-if="!model.confirmSubmit.show">
                <umb-button
                    alias="overlayClose"
                    action="closeOverLay()"
                    button-style="link"
                    label-key="{{model.closeButtonLabelKey}}"
                    label="{{model.closeButtonLabel}}"
                    type="button">
                </umb-button>

                <umb-button
                    alias="overlaySubmit"
                    button-style="{{model.submitButtonStyle || 'success'}}"
                    label-key="{{model.submitButtonLabelKey}}"
                    label="{{model.submitButtonLabel}}"
                    ng-if="model.submit && model.hideSubmitButton !== true"
                    type="button"
                    disabled="model.disableSubmitButton"
                    action="submitForm(model)"
                    state="model.submitButtonState"
                    auto-focus="true">
                </umb-button>
            </div>

        </div>
    </ng-form>
</div>
