<div class="adf-setting-container">
    <div class="adf-setting-card-padding"></div>
    <mat-toolbar color="primary" class="adf-setting-toolbar">
        <h3>{{'CORE.HOST_SETTINGS.TITLE' | translate}}</h3>
    </mat-toolbar>

    <mat-card class="adf-setting-card">
        <div *ngIf="providers==='ALL' || providers==='ECM'">
            <mat-card-header>
                <mat-card-subtitle>{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
                <mat-form-field class="full-width">
                    <mat-icon class="adf-CORE.HOST_SETTINGS-link-icon" matPrefix>link</mat-icon>
                    <input matInput
                           [formControl]="urlFormControlEcm"
                           data-automation-id="ecmHost"
                           type="text"
                           (change)="onChangeECMHost($event)"
                           tabindex="2"
                           id="ecmHost"
                           value="{{ecmHost}}"
                           placeholder="http(s)://host|ip:port(/path)">
                    <mat-error *ngIf="urlFormControlEcm.hasError('pattern')">
                        {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
                    </mat-error>
                </mat-form-field>
                <p>
            </mat-card-content>
        </div>
        <p>
        <div *ngIf="providers==='ALL' || providers==='BPM'">
            <mat-card-header>
                <mat-card-subtitle>{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>

                <mat-form-field class="full-width">
                    <mat-icon class="adf-CORE.HOST_SETTINGS-link-icon" matPrefix>link</mat-icon>
                    <input matInput
                           [formControl]="urlFormControlBpm"
                           data-automation-id="bpmHost"
                           type="text"
                           (change)="onChangeBPMHost($event)"
                           tabindex="2"
                           id="bpmHost"
                           value="{{bpmHost}}"
                           placeholder="http(s)://host|ip:port(/path)">
                    <mat-error *ngIf="urlFormControlBpm.hasError('pattern')">
                        {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
                    </mat-error>
                </mat-form-field>
            </mat-card-content>
        </div>
        <mat-card-actions class="adf-CORE.HOST_SETTINGS-actions">

            <button mat-button onclick="window.history.back()" color="primary">
                {{'CORE.HOST_SETTINGS.BACK' | translate }}
            </button>

            <button mat-raised-button (click)="save($event)"
                    [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')"
                    color="primary">
                {{'CORE.HOST_SETTINGS.APPLY' | translate }}
            </button>

        </mat-card-actions>
    </mat-card>
    <div class="adf-setting-card-padding"></div>
</div>
