<form #form="ngForm">

    <nb-flip-card [showToggleButton]="false" [flipped]="showingCost">
        <nb-card-front>
            <nb-card>
                <nb-card-header>
                    第 {{data.seq}} 周 {{data.topic}} 分工

                    <button class="float-right" nbButton hero status="success" size="small" (click)="toggleView()">
                        Cost
                    </button>
                </nb-card-header>
                <nb-card-body *ngIf="data">
                    <div class="row" *ngFor="let task of data.tasks;let i = index">
                        <div class="col-md-4">
                            <div class='form-group'>
                                <label for='tasker{{i}}' class='label'>{{getTaskTitle(task.type)}}</label>
                                <op-drop-down name="tasker{{i}}" [editable]="true" [(ngModel)]="task.tasker"
                                    [source]="taskrOptions">
                                </op-drop-down>
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="content{{i}}" class="label">內容</label>
                                <input type="text" name="content{{i}}" nbInput fullWidth id="content{{i}}"
                                    [(ngModel)]="task.content">
                            </div>
                        </div>
                    </div>

                </nb-card-body>
                <nb-card-footer>
                    <button class="mr-2" nbButton hero status="info" size="small" (click)="gotoPreviousWeek()"
                        [nbSpinner]="processing">
                        Previous
                    </button>
                    <button nbButton hero status="info" size="small" (click)="gotoNextWeek()" [nbSpinner]="processing">
                        Next
                    </button>
                    <button class="float-right" nbButton hero status="danger" size="small" (click)="close()"
                        [nbSpinner]="processing">
                        Close
                    </button>
                    <button class="float-right mr-2" nbButton hero status="primary" size="small"
                        (click)="!form.invalid&&!processing&&update()" [disabled]="form.invalid"
                        [nbSpinner]="processing">
                        Save
                    </button>
                </nb-card-footer>
            </nb-card>
        </nb-card-front>
        <nb-card-back>
            <nb-card>
                <nb-card-header>
                    第 {{data.seq}} 周 {{data.topic}} 開銷

                    <button class="float-right" nbButton hero status="success" size="small" (click)="toggleView()">
                        分工
                    </button>

                    <button class="float-right mr-1" nbButton hero status="success" size="small" (click)="addNewCost()">
                        新增開銷
                    </button>
                </nb-card-header>
                <nb-card-body *ngIf="data">
                    <div class="row" *ngFor="let task of data.costs;let i = index">
                        <div class="col-6 col-md-4">
                            <div class='form-group'>
                                <label for='costTasker{{i}}' class='label'>採購人</label>
                                <op-drop-down name="costTasker{{i}}" [editable]="true" [(ngModel)]="task.tasker"
                                    [source]="taskrOptions">
                                </op-drop-down>
                            </div>
                        </div>

                        <div class="col-6 col-md-3">
                            <div class="form-group">
                                <label for="costAmount{{i}}" class="label">金額</label>
                                <input type="number" name="costAmount{{i}}" nbInput fullWidth id="costAmount{{i}}"
                                    [(ngModel)]="task.amount">
                            </div>
                        </div>
                        <div class="col-12 col-md-5">
                            <div class="form-group">
                                <label for="costContent{{i}}" class="label">內容</label>
                                <input type="text" name="costContent{{i}}" nbInput fullWidth id="costContent{{i}}"
                                    [(ngModel)]="task.content">
                            </div>
                        </div>
                    </div>

                    <nb-alert status="primary" *ngIf="data.costs.length==0">
                        本周暫無開銷
                    </nb-alert>

                </nb-card-body>
                <nb-card-footer>

                    <button class="mr-2" nbButton hero status="info" size="small" (click)="gotoPreviousWeek()"
                        [nbSpinner]="processing">
                        Previous
                    </button>
                    <button nbButton hero status="info" size="small" (click)="gotoNextWeek()" [nbSpinner]="processing">
                        Next
                    </button>
                    <button class="float-right" nbButton hero status="danger" size="small" (click)="close()"
                        [nbSpinner]="processing">
                        Close
                    </button>
                    <button class="float-right mr-2" nbButton hero status="primary" size="small"
                        (click)="!processing&&updateCost()" [nbSpinner]="processing">
                        Save
                    </button>
                </nb-card-footer>
            </nb-card>
        </nb-card-back>
    </nb-flip-card>

</form>