<div ng-controller="Umbraco.Editors.StyleSheets.CreateController as vm" ng-cloak>

    <div ng-if="!vm.creatingFolder">
        <div class="umbracoDialog umb-dialog-body with-footer">

            <div class="umb-pane">
                <h5><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>

                <ul class="umb-actions umb-actions-child">
                    <li class="umb-action">
                        <button type="button" class="umb-action-link umb-outline btn-reset" umb-auto-focus ng-click="vm.createFile()">
                            <umb-icon icon="icon-script" class="icon large"></umb-icon>
                            <span class="menu-label"><localize key="create_newStyleSheetFile">New style sheet file</localize></span>
                        </button>
                    </li>
                    <li class="umb-action">
                        <button type="button" ng-click="vm.createRichtextStyle()" class="umb-action-link umb-outline btn-reset">
                            <umb-icon icon="icon-script" class="icon large"></umb-icon>
                            <span class="menu-label"><localize key="create_newRteStyleSheetFile">New richtext style sheet file</localize></span>
                        </button>
                    </li>
                    <li class="umb-action">
                        <button type="button" class="umb-action-link umb-outline btn-reset" ng-click="vm.showCreateFolder()">
                            <umb-icon icon="icon-folder" class="icon large"></umb-icon>
                            <span class="menu-label"><localize key="general_folder">Folder</localize>...</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar" ng-hide="vm.creatingFolder">
            <button type="button" class="btn btn-info" ng-click="vm.close()">
                <localize key="buttons_somethingElse">Do something else</localize>
            </button>
        </div>
    </div>
    <div ng-if="vm.creatingFolder">
        <form novalidate name="createFolderForm"
              ng-submit="vm.createFolder(createFolderForm)"
              val-form-manager>
            <div class="umbracoDialog umb-dialog-body with-footer">
                <div class="umb-pane">
                    <div ng-show="vm.createFolderError">
                        <div class="alert alert-error">
                            <div>{{vm.createFolderError.data.message}}</div>
                        </div>
                    </div>

                    <umb-control-group label="Enter a folder name" hide-label="false">
                        <input type="text" name="folderName" ng-model="vm.folderName" class="umb-textstring textstring input-block-level" umb-auto-focus required />
                    </umb-control-group>
                </div>
            </div>
            <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
                <umb-button type="button"
                            button-style="link"
                            action="vm.close()"
                            label-key="general_close">
                </umb-button>
                <umb-button type="submit"
                            button-style="primary"
                            label-key="general_create">
                </umb-button>
            </div>
        </form>
    </div>
</div>
