<div ng-controller="Umbraco.Editors.Content.CreateController">

    <umb-load-indicator ng-if="loading"></umb-load-indicator>

    <div ng-if="!loading" class="umb-dialog-body with-footer" ng-cloak>

        <div class="umb-pane">
            <h5 ng-show="selectContentType" id="selectContentType"><localize key="create_createUnder">Create a page under</localize> {{currentNode.name}}</h5>
            <h5 ng-show="selectBlueprint"><localize key="blueprints_selectBlueprint">Select a blueprint</localize></h5>

            <div ng-if="allowedTypes && allowedTypes.length === 0">
                <p class="abstract" ng-if="!hasSettingsAccess">
                    <localize key="create_noDocumentTypesWithNoSettingsAccess">The selected page in the content tree doesn't allow for any pages to be created below it.</localize>
                </p>
                <div ng-if="hasSettingsAccess && currentNode.id >= 0">
                    <p class="abstract">
                        <localize key="create_noDocumentTypes">There are no allowed Document Types available for creating content here. You must enable these in <strong>Document
                            Types</strong> within the <strong>Settings</strong> section, by editing the <strong>Allowed child node
                            types</strong> under <strong>Permissions</strong>.</localize>
                    </p>
                    <button type="button" class="btn umb-outline" ng-click="editContentType()">
                        <localize key="create_noDocumentTypesEditPermissions">Edit permissions for this Document Type</localize>
                    </button>
                </div>
                <div ng-if="hasSettingsAccess && currentNode.id < 0">
                    <!-- There are existing document types, but none are allowed at root -->
                    <p class="abstract" ng-if="countTypes > 0">
                        <localize key="create_noDocumentTypesAllowedAtRoot">There are no allowed Document Types available for creating content here. You must enable these in <strong>Document
                            Types</strong> within the <strong>Settings</strong> section, by changing the <strong>Allow as root</strong> option under <strong>Permissions</strong>.</localize>
                    </p>

                    <!-- There's no document types, help people create one -->
                    <p class="abstract" ng-if="countTypes === 0">
                        <localize key="create_noDocumentTypesAtRoot">There are no Document Types available for creating content here. You must create these in <strong>Document
                            Types</strong> within the <strong>Settings</strong> section.</localize>
                    </p>
                    <button type="button" class="btn umb-outline" ng-click="createContentType()" ng-if="countTypes === 0">
                        <localize key="create_noDocumentTypesCreateNew">Create a new Document Type</localize>
                    </button>
                </div>
            </div>

            <ul class="umb-actions umb-actions-child" ng-if="selectContentType && allowedTypes.length > 0" aria-labelledby="selectContentType">

                <li class="umb-action" data-element="action-create-{{docType.alias}}" ng-repeat="docType in allowedTypes">
                    <button type="button" class="umb-action-link umb-outline btn-reset" ng-click="createOrSelectBlueprintIfAny(docType)" umb-auto-focus ng-if="$index === 0">
                        <umb-icon icon="{{docType.icon}}" class="icon large"></umb-icon>
                        <span class="menu-label">
                            {{docType.name}}
                            <small>
                                {{docType.description}}
                            </small>
                        </span>
                    </button>
                    <button type="button" class="umb-action-link umb-outline btn-reset" ng-click="createOrSelectBlueprintIfAny(docType)" ng-if="$index !== 0">
                        <umb-icon icon="{{docType.icon}}" class="icon large"></umb-icon>
                        <span class="menu-label">
                            {{docType.name}}
                            <small>
                                {{docType.description}}
                            </small>
                        </span>
                    </button>
                </li>

            </ul>

            <ul class="umb-actions umb-actions-child" ng-if="selectBlueprint">

                <li class="umb-action" ng-repeat="blueprint in selectableBlueprints | orderBy:'name':false track by $index">
                    <button type="button" class="umb-action-link umb-outline btn-reset" ng-click="createFromBlueprint(blueprint.id)">
                        <umb-icon icon="{{docType.icon}}" class="icon large"></umb-icon>
                        <span class="menu-label">
                            {{blueprint.name}}
                        </span>
                    </button>
                </li>

                <li class="umb-action sep" ng-show="allowBlank">
                    <button type="button" class="umb-action-link umb-outline btn-reset" ng-click="createBlank(docType)">
                        <umb-icon icon="{{docType.icon}}" class="icon large"></umb-icon>
                        <span class="menu-label">
                            <localize key="blueprints_blankBlueprint">Blank</localize>
                        </span>
                    </button>
                </li>

            </ul>

        </div>
    </div>

    <div ng-if="!loading" class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
        <button type="button" class="btn btn-info umb-outline" ng-click="closeDialog(true)">
            <localize key="buttons_somethingElse">All Actions</localize>
        </button>
    </div>

</div>
