<form [formGroup]="stepFormGroup" style="display: contents;">
    <div class="col-md-6">
        <mat-form-field appearance="outline">
            <mat-label>{{'lang.applicationName' | translate}}</mat-label>
            <input matInput formControlName="applicationName">
        </mat-form-field>
        <div>{{'lang.loginMsg' | translate}} : </div>
        <textarea style="padding-top: 10px;" name="loginpage_message" id="loginpage_message"
            formControlName="loginpage_message"></textarea>
        <br />
        <br />
        <div>{{'lang.homeMsg' | translate}} : </div>
        <textarea style="padding-top: 10px;" name="homepage_message" id="homepage_message"
            formControlName="homepage_message"></textarea>
        <br />
        <br />
    </div>
    <div class="col-md-6">
        <div>{{'lang.chooseLogo' | translate}} : </div>
        <div>
            <mat-card style="width: 350px;background-size: 100%;cursor: pointer;" matRipple>
                <mat-icon svgIcon="maarchLogoFull" class="maarchLogo" (click)="clickLogoButton(uploadLogo)"></mat-icon>
                <input type="file" name="files[]" #uploadLogo (change)="uploadTrigger($event, 'logo')"
                    accept="image/svg+xml" style="display: none;">
            </mat-card>
        </div>
        <br />
        <div>{{'lang.chooseLoginBg' | translate}} : </div>
        <div class="backgroundList">
            <mat-card style="opacity: 0.3;" class="backgroundItem"
                [class.disabled]="stepFormGroup.controls['bodyImage'].disabled"
                [class.selected]="stepFormGroup.controls['bodyImage'].value === '../rest/images?image=loginPage'"
                style="background:url(../rest/images?image=loginPage);background-size: cover;">
            </mat-card>
            <mat-card (click)="selectBg('assets/bodylogin.jpg')" style="opacity: 0.3;" class="backgroundItem"
                [class.disabled]="stepFormGroup.controls['bodyImage'].disabled"
                [class.selected]="stepFormGroup.controls['bodyImage'].value === 'assets/bodylogin.jpg'"
                style="background:url(assets/bodylogin.jpg);background-size: cover;">
            </mat-card>
            <mat-card *ngFor="let background of backgroundList" (click)="selectBg(background.url)"
                style="opacity: 0.3;" class="backgroundItem"
                [class.selected]="background.url === stepFormGroup.controls['bodyImage'].value"
                [class.disabled]="stepFormGroup.controls['bodyImage'].disabled"
                [style.background]="'url('+background.url+')'">
            </mat-card>
            <mat-card *ngIf="!stepFormGroup.controls['bodyImage'].disabled"
                style="opacity: 0.3;display: flex;align-items: center;justify-content: center;"
                class="backgroundItem" (click)="uploadFile.click()">
                <input type="file" name="files[]" #uploadFile (change)="uploadTrigger($event, 'bg')"
                    accept="image/jpeg" style="display: none;">
                <i class="fa fa-plus" style="font-size: 30px;color: #666;"></i>
            </mat-card>
        </div>
    </div>
    <div class="col-md-10" style="margin-top: 20px">
        <div>{{'lang.trafficRecordSummarySheetParameters' | translate}} : </div>
        <textarea style="padding-top: 10px" name="traffic_record_summary_sheet" id="traffic_record_summary_sheet"
            formControlName="traffic_record_summary_sheet"></textarea>
        <br />
        <br />
    </div>
</form>