<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
    <header>
        <div class="left">
            <a routerLink="/folders">{{'cancel' | i18n}}</a>
        </div>
        <div class="center">
            <span class="title">{{title}}</span>
        </div>
        <div class="right">
            <button type="submit" appBlurClick [disabled]="form.loading">
                <span [hidden]="form.loading">{{'save' | i18n}}</span>
                <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
            </button>
        </div>
    </header>
    <content *ngIf="folder">
        <div class="box">
            <div class="box-content">
                <div class="box-content-row" appBoxRow>
                    <label for="name">{{'name' | i18n}}</label>
                    <input id="name" type="text" name="Name" [(ngModel)]="folder.name" [appAutofocus]="!editMode">
                </div>
            </div>
        </div>
        <div class="box list" *ngIf="editMode">
            <div class="box-content single-line">
                <a class="box-content-row" href="#" appStopClick appBlurClick (click)="delete()"
                    [appApiAction]="deletePromise" #deleteBtn>
                    <div class="row-main text-danger">
                        <div class="icon text-danger" aria-hidden="true">
                            <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
                            <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
                        </div>
                        <span>{{'deleteFolder' | i18n}}</span>
                    </div>
                </a>
            </div>
        </div>
    </content>
</form>
