<div class="container">
    <button id="folder-create-button" md-button [mdMenuTriggerFor]="menu" [disabled]="isButtonDisabled()">
        <md-icon>add</md-icon>
        <span>{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_CREATE' | translate }}</span>
    </button>
    <md-menu #menu="mdMenu">
        <button md-menu-item (click)="showDialog()">
            <md-icon>create_new_folder</md-icon>
            <span>{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_NEW_FOLDER' | translate }}</span>
        </button>
    </md-menu>
</div>

<dialog class="mdl-dialog" #dialog>
    <h4 class="mdl-dialog__title">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.ACTION_NEW_FOLDER' | translate }}</h4>
    <div class="mdl-dialog__content">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input
                    type="text"
                    class="mdl-textfield__input"
                    id="name"
                    required
                    [(ngModel)]="folderName"
                    placeholder="Folder name"
                    data-automation-id="name"
                    autocapitalize="none" #name/>
        </div>
    </div>
    <div class="mdl-dialog__actions">
        <button type="button" [disabled]="isFolderNameEmpty()" (click)="createFolder(folderName)" class="mdl-button">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.CREATE' | translate }}</button>
        <button type="button" (click)="cancel()" class="mdl-button close">{{ 'ALFRESCO_DOCUMENT_LIST.BUTTON.CANCEL' | translate}}</button>
    </div>
</dialog>
