<ion-header>
    <ion-toolbar color="branding">
        <euim-toolbar>
            <euim-toolbar-title>{{ 'euim.about.text' | translate }}</euim-toolbar-title>
            <euim-toolbar-action-items>
                <ion-button>
                    <ion-label class="eui-u-mr-m" (click)="toggleQRCode()" slot="end">
                        <strong>
                            @if (showCode) {
                                {{ 'euim.about.hide.qrcode' | translate }}
                            }
                            @if (!showCode) {
                                {{ 'euim.about.show.qrcode' | translate }}
                            }
                        </strong>
                    </ion-label>
                </ion-button>
            </euim-toolbar-action-items>
        </euim-toolbar>
    </ion-toolbar>

    <euim-header-details color="branding">
        <div euimHeaderDetailsIcon>
            <euim-toolbar-qrcode [showCode]="showCode" logoUrl="./assets/images/app-icon.svg"
                                 qrCodeUrl="https://github.com/Cordobo/angularx-qrcode"></euim-toolbar-qrcode>
        </div>
        <div euimHeaderDetailsTitle><strong>eUI / mobile</strong></div>
        <div euimHeaderDetailsMeta>{{'euim.about.version' | translate }} 1.2.0</div>
        <div euimHeaderDetailsMeta>{{ 'euim.about.builton' | translate }} 12.03.2024, 16:30</div>
    </euim-header-details>
</ion-header>
<ion-content>
    <euim-about>
        <ion-list>
            <ion-list-header>
                <ion-label>{{ 'euim.aboutapp.text' | translate }}</ion-label>
            </ion-list-header>
            <ion-item button (click)="onNavigate('/screen/about/change-log')">
                <ion-icon name="build-outline" slot="start"></ion-icon>
                <ion-label>
                    <div euimLabel>{{'euim.about.changelog' | translate }}</div>
                </ion-label>
            </ion-item>
            <ion-item button (click)="onNavigate('/screen/about/privacy-statement')">
                <ion-icon name="finger-print-sharp" slot="start"></ion-icon>
                <ion-label>
                    <div euimLabel>{{'euim.about.privacy.statement' | translate }}</div>
                </ion-label>
            </ion-item>
            <ion-item button (click)="onNavigate('/screen/about/opensource-licences')">
                <ion-icon name="ribbon-outline" slot="start"></ion-icon>
                <ion-label>
                    <div euimLabel>{{'euim.about.opensource.licences' | translate }}</div>
                </ion-label>
            </ion-item>
            <ion-item button (click)="onNavigate('/screen/about/legal-notice')">
                <ion-icon name="library-outline" slot="start"></ion-icon>
                <ion-label>
                    <div euimLabel>{{'euim.about.legal.notice' | translate }}</div>
                </ion-label>
            </ion-item>
            <ion-item button (click)="onNavigate('/screen/about/help-support')">
                <ion-icon name="mail-outline" slot="start"></ion-icon>
                <ion-label>
                    <div euimLabel>{{'euim.about.help.support' | translate }}</div>
                </ion-label>
            </ion-item>
        </ion-list>
    </euim-about>
</ion-content>
