<ion-header>
    <ion-toolbar color="primary">
        <ion-title>
            <%= pageTitle %>
        </ion-title>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <app-navigation-progress-bar></app-navigation-progress-bar> <% if (page.serialSettings) { %>
    <ion-card>
        <ion-card-header >
            <ion-card-title>
                Serial settings
            </ion-card-title>
        </ion-card-header>
        <ion-list>
            <tap-protocol-configuration-form [fields]="SERIAL_SETTINGS_FIELDS"></tap-protocol-configuration-form>
        </ion-list>
    </ion-card><% } %><% if (page.modbusSettings) { %>
    <ion-card>
        <ion-card-header>
            <ion-card-title>
                Modbus settings
            </ion-card-title>
        </ion-card-header>
        <ion-list>
            <tap-protocol-configuration-form [fields]="MODBUS_SETTINGS_FIELDS"></tap-protocol-configuration-form>
        </ion-list>
    </ion-card><% } %><% if (page.tapnpassSettings) { %>
    <ion-card>
        <ion-card-header>
            <ion-card-title>
                TapNPass settings
            </ion-card-title>
        </ion-card-header>
        <ion-list>
            <tap-protocol-configuration-form [fields]="TAPNPASS_SETTINGS_FIELDS"></tap-protocol-configuration-form>
        </ion-list>
    </ion-card>
    <% } %>
</ion-content>
<ion-footer>
    <ion-toolbar>
        <ion-button (click)="protocolSettings.refresh()" fill="clear" slot="start" [disabled]="protocolSettings.loading | async">
            <ion-icon name="refresh"></ion-icon> &nbsp;
            Refresh
        </ion-button>
        <ion-button (click)="protocolSettings.discardChanges()" fill="clear" color="danger" slot="end" *ngIf="protocolSettings.hasChanges()">
            <ion-icon name="close-circle"></ion-icon> &nbsp;
            Discard
        </ion-button>
        <ion-button *ngIf="isAdmin | async" (click)="applyChanges(false)" slot="end" [disabled]="!protocolSettings.hasChanges() || (protocolSettings.loading | async)">
            <ion-icon name="save"></ion-icon> &nbsp;
            Configure
        </ion-button>
        <ion-button (click)="applyChanges(true)" slot="end" [disabled]="!protocolSettings.hasChanges() || (protocolSettings.loading | async)">
            <ion-icon name="save"></ion-icon> &nbsp;
            Apply
        </ion-button>
        <!-- <ion-button (click)="applyChanges()" slot="end" [disabled]="!protocolSettings.hasChanges()">
            <ion-icon name="save"></ion-icon>
            Apply
        </ion-button> -->
    </ion-toolbar>
</ion-footer>
