<form [formGroup]="form" name="form" autocomplete="off" novalidate (ngSubmit)="submit()" class="form-content">
    <div class="mail-box-header detail-header" [ngClass]="{'title-border-bottom': mode !='new'}">



        <xdf-form-header title_="calendar.title" [recordIdentifier]="record?.id" titleDesc="calendar.title.desc"
            [mode]="mode" [resourceAuth]="resourceAuth" (optionEvent)="optionEvent($event)" [editing]="mode === 'edit'"
            [displaying]="mode === 'view'">
        </xdf-form-header>
    </div>

    <div class="mail-box-content">
        <div class="row">
            <div class="col-12">
                <div class="form-content">
                    <div class="legend">
                        <span class="group-title">{{ 'title.calendar.general' | translate}}</span>
                    </div>


                    <div class="group-content">
                        <div class="row">
                            <div class="form-group col-xl-6" *ngIf="mode === 'new'">
                                <xdf-input name="id" label="calendar_form_id" type="text" [required]="true"
                                    placeholder="calendar_form_id" [formGroup]="form"
                                    [options]="{maxLength: 5, showLength: true}">
                                </xdf-input>
                            </div>
                            <div class="form-group col-xl-6">
                                <xdf-input name="name" label="calendar_form_name" type="text" [required]="true"
                                    placeholder="calendar_form_name" [formGroup]="form"
                                    [options]="{maxLength: 160, showLength: true}">
                                </xdf-input>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <byte-calendar-config-layout #layout [weekConfig]="record?.weekSchedulerBeanList" [mode]="mode"
            [calendarId]="id" [templateDefinition]="calendarExceptionTemplate" (dirtyChange)="dirtyChangeLayout()">

        </byte-calendar-config-layout>

        <div class="row">
            <div class="col-lg-12" *ngIf="mode !== 'view'">
                <div class="form-status-bar border-top">
                    <button type="submit" mat-stroked-button class="btn btn-primary" [disabled]="!calendarConfForm || form?.invalid 
              || processing ">
                        <i class="fa fa-save" aria-hidden="true"></i>{{'btn.save' | translate}}
                    </button>
                </div>
            </div>
        </div>


    </div>




</form>