<p-toast></p-toast>

<form class="mx-0 md:mx-3" name="databaseForm" #databaseForm="ngForm">
    <p-card class="m-0 md:m-5">
        <ng-template pTemplate="title">
            {{ 'setupwizard.databaseSetup' | translate }}
        </ng-template>
        <ng-template pTemplate="subtitle">
            {{ 'setupwizard.enterDBLoginDetails' | translate }}
        </ng-template>
        <ng-template pTemplate="content">
            <div class="formgrid grid form-group">
                <div class="field col-12 md:col-6">
                    <label for="ipaddress" class="label block">{{ 'setupwizard.MySQLServerIP' | translate }}</label>
                    <input pInputText id="ipaddress" type="text" aria-describedby="ipaddress-help"
                        [(ngModel)]="database.Host" name="hostname" #host="ngModel"
                        class="mb-2 form-control w-full" [ngClass]="{'is-invalid': host.invalid }"
                        placeholder="Ex. 127.0.0.1 or localhost" required />
                    <small id="ipaddress-help">{{ 'setupwizard.ipaddress_help' | translate }}</small>
                    <div *ngIf="host.invalid && (host.dirty || host.touched)">
                        <small id="address-help" class="p-error block">{{ 'setupwizard.IPorAddressRequired' | translate
                            }}</small>
                    </div>
                </div>

                <div class="field col-12 md:col-6">
                    <label for="port" class="label block">{{ 'setupwizard.MySQLServerPort' | translate }}</label>
                    <input pInputText id="port" type="number" aria-describedby="port-help"
                        [(ngModel)]="database.Port" name="port" #port="ngModel"
                        class=" mb-2 form-control w-full" placeholder="Ex. 3306" min="0" max="65536" />
                    <small id="port-help">{{ 'setupwizard.port_help' | translate }}</small>
                    <div *ngIf="port.invalid && (port.dirty || port.touched)">
                        <small class="p-error block">{{ 'setupwizard.portRequired' | translate }}</small>
                    </div>
                </div>

                <div class="field col-12 md:col-6">
                    <label for="user" class="label block">{{ 'setupwizard.MySQLUser' | translate }}</label>
                    <input pInputText id="user" type="text" aria-describedby="user-help"
                        [(ngModel)]="database.UserName" name="user" #user="ngModel"
                        class="mb-2 form-control w-full" placeholder="Ex. mythtv" required />
                    <small id="user-help">{{ 'setupwizard.user_help' | translate }}</small>
                    <div *ngIf="user.invalid && (user.dirty || user.touched)">
                        <small class="p-error block">{{ 'setupwizard.userRequired' | translate }}</small>
                    </div>
                </div>
                <div class="field col-12 md:col-6">
                    <label for="password" class="label block">{{ 'setupwizard.MySQLPassword' | translate }}</label>
                    <input pInputText id="password" type="text" aria-describedby="password-help"
                        [(ngModel)]="database.Password" name="password" #password="ngModel"
                        class="mb-2 form-control w-full" placeholder="Ex. mythtv" required />
                    <small id="password-help">{{ 'setupwizard.password_help' | translate }}</small>
                    <div *ngIf="password.invalid && (password.dirty || password.touched)">
                        <small class="p-error block">{{ 'setupwizard.passwordRequired' | translate }}</small>
                    </div>
                </div>

                <div class="field col-12 md:col-6">
                    <label for="dbname" class="label block">{{ 'setupwizard.MySQLDatabaseName' | translate }}</label>
                    <input pInputText id="dbname" type="text" aria-describedby="dbname-help"
                        [(ngModel)]="database.Name" name="dbname" #dbname="ngModel"
                        class="mb-2 form-control w-full" placeholder="Ex. mythconverg" required />
                    <small id="dbname-help">{{ 'setupwizard.dbname_help' | translate }}</small>
                    <div *ngIf="dbname.invalid && (dbname.dirty || dbname.touched)">
                        <small class="p-error block">{{ 'setupwizard.databaseNameRequired' | translate }}</small>
                    </div>
                </div>

                <div class="field col-12">
                    <p-checkbox [(ngModel)]="database.LocalEnabled" name="LocalEnabled"
                        class="mb-2 w-full label block" [binary]="true"
                        label="{{ 'setupwizard.LocalEnabled_label' | translate }}">
                    </p-checkbox>
                    <small class="block">
                        {{ 'setupwizard.LocalEnabled_desc' | translate }}
                    </small>
                </div>

                <div class="field col-12" *ngIf="database.LocalEnabled">
                    <label for="LocalHostName" class="label block">{{ 'setupwizard.LocalHostName_label' | translate
                        }}</label>
                    <input pInputText id="LocalHostName" type="text" aria-describedby="LocalHostName-help"
                        [(ngModel)]="database.LocalHostName" name="LocalHostName" #LocalHostName="ngModel"
                        class="mb-2 form-control w-full" />
                    <small id="LocalHostName-help">{{ 'setupwizard.LocalHostName_desc' | translate }}</small>
                </div>

                <div class="field col-12">
                    <p-checkbox [(ngModel)]="database.WOLEnabled" name="WOLEnabled"
                        class="mb-2 w-full label block" [binary]="true"
                        label="{{ 'setupwizard.WOLEnabled_label' | translate }}">
                    </p-checkbox>
                    <small class="block">
                        {{ 'setupwizard.WOLEnabled_desc' | translate }}
                    </small>
                </div>

                <div class="field col-12 md:col-6" *ngIf="database.WOLEnabled">
                    <label for="WOLReconnect" class="label block">
                        {{ 'settings.vsource.WOLReconnect_label' | translate }}
                    </label>
                    <p-inputNumber [(ngModel)]="database.WOLReconnect" name="WOLReconnect"
                        id="WOLReconnect" [min]="0" [max]="60" [step]="1" [useGrouping]="false" [showButtons]="true">
                    </p-inputNumber>
                    <small class="block">
                        {{ 'settings.vsource.WOLReconnect_desc' | translate }}
                    </small>
                </div>

                <div class="field col-12 md:col-6" *ngIf="database.WOLEnabled">
                    <label for="WOLRetry" class="label block">
                        {{ 'settings.vsource.WOLRetry_label' | translate }}
                    </label>
                    <p-inputNumber [(ngModel)]="database.WOLRetry" name="WOLRetry" id="WOLRetry" [min]="1"
                        [max]="10" [step]="1" [useGrouping]="false" [showButtons]="true">
                    </p-inputNumber>
                    <small class="block">
                        {{ 'settings.vsource.WOLRetry_desc' | translate }}
                    </small>
                </div>

                <div class="field col-12" *ngIf="database.WOLEnabled">
                    <label for="WOLCommand" class="label block">{{ 'setupwizard.WOLCommand_label' | translate }}</label>
                    <input pInputText id="WOLCommand" type="text" aria-describedby="WOLCommand-help"
                        [(ngModel)]="database.WOLCommand" name="WOLCommand" #WOLCommand="ngModel"
                        class="mb-2 form-control w-full" />
                    <small id="WOLCommand-help">{{ 'setupwizard.WOLCommand_desc' | translate }}</small>
                </div>

            </div>
            <div>
                <p-button type="button" class="mr-1 p-button-raised p-button-secondary"
                    label="{{ 'setupwizard.testConnection' | translate }}" (click)="saveForm(false)"
                    [disabled]="databaseForm.invalid == null || databaseForm.invalid"></p-button>
            </div>

            <div class="pt-4" style="display: flex">
                <!-- connected -->
                <div *ngIf="m_wizardData.DatabaseStatus.DatabaseStatus.Connected else notconnected">
                    <p-message class="pr-2" severity="success"
                        text="{{ 'setupwizard.connectedToDatabase' | translate }}"></p-message>
                </div>

                <ng-template #notconnected>
                    <div #notconnected class="pr-2 notconnected">
                        <p-message class="" severity="error"
                            text="{{ 'setupwizard.notConnectedToDatabase' | translate }}"></p-message>
                    </div>
                </ng-template>

                <!-- have database -->
                <div *ngIf="m_wizardData.DatabaseStatus.DatabaseStatus.HaveDatabase else nodatabase">
                    <p-message class="pr-2" severity="success"
                        text="{{ 'setupwizard.dbsetup.havedb' | translate : {Name: m_wizardData.Database.Name} }}"></p-message>
                </div>

                <ng-template #nodatabase>
                    <div #nodatabase class="pr-2 nodatabase">
                        <p-message severity="error"
                            text="{{ 'setupwizard.dbsetup.havenotdb' | translate: {Name: m_wizardData.Database.Name} }}"></p-message>
                    </div>
                </ng-template>

                <!-- schema version -->
                <div
                    *ngIf="m_wizardData.DatabaseStatus.DatabaseStatus.Connected && m_wizardData.DatabaseStatus.DatabaseStatus.HaveDatabase else noschema">
                    <p-message class="pr-2" severity="info"
                        text="{{ 'setupwizard.dbsetup.schemaver'
                        | translate: {SchemaVersion: m_wizardData.DatabaseStatus.DatabaseStatus.SchemaVersion} }}"></p-message>
                </div>

                <ng-template #noschema>
                    <div #nodatabase class="pr-2 noschema">
                        <p-message severity="info"
                            text="{{ 'setupwizard.databaseSchemaUnknown' | translate }}"></p-message>
                    </div>
                </ng-template>
            </div>
            <div *ngIf="setupService.isDatabaseIgnored">
                <h2>{{ 'common.instructions' | translate }}</h2>
                <div *ngIf="connectionFail">
                    <p>
                        {{ 'setupwizard.sqlinstructions' | translate }}
                    </p>
                    <div class="flex pb-3">
                        <div class="flex-none flex align-items-center label block pr-5">
                            Sql Server Type:
                        </div>
                        <div class="flex-none flex align-items-center pr-5">
                            <p-radioButton name="dbtype" value="MySQL" [(ngModel)]="dbtype"
                                inputId="mysql" (ngModelChange)="setCommandList()"></p-radioButton>
                            <label for="mysql">MySql</label>
                        </div>
                        <div class="flex-none flex align-items-center">
                            <p-radioButton name="dbtype" value="MariaDB" [(ngModel)]="dbtype"
                                inputId="mariadb" (ngModelChange)="setCommandList()"></p-radioButton>
                            <label for="mariadb">MariaDB</label>
                        </div>
                    </div>

                    <table style="white-space: 'pre-line'">
                        <tr>
                            <td class="align-items-center bg-blue-100 text-gray-900" style="font-family: monospace;">
                                {{ commandlist }}
                            </td>
                            <td class="align-items-center">
                                <button pButton pRipple type="button" icon="pi pi-copy"
                                    class="p-button-rounded p-button-text" (click)="copyToclipboard(commandlist)"
                                    pTooltip="{{ 'settings.common.clipboard_tooltip' | translate }}"></button>
                            </td>
                        </tr>
                    </table>
                    <p>{{ 'setupwizard.runcommand' | translate }}</p>
                    <table>
                        <tr>
                            <td class="align-items-center bg-blue-100 text-gray-900" style="font-family: monospace;">
                                {{ mySqlCommand }}
                            </td>
                            <td class="align-items-center">
                                <button pButton pRipple type="button" icon="pi pi-copy"
                                    class="p-button-rounded p-button-text" (click)="copyToclipboard(mySqlCommand)"
                                    pTooltip="{{ 'settings.common.clipboard_tooltip' | translate }}"></button>
                            </td>
                        </tr>
                    </table>
                </div>

                <p class=>{{ 'setupwizard.tztables' | translate }}</p>
                <table>
                    <tr>
                        <td class="align-items-center bg-blue-100 text-gray-900" style="font-family: monospace;">
                            {{ tzCommand }}
                        </td>
                        <td class="align-items-center">
                            <button pButton pRipple type="button" icon="pi pi-copy"
                                class="p-button-rounded p-button-text" (click)="copyToclipboard(tzCommand)"
                                pTooltip="{{ 'settings.common.clipboard_tooltip' | translate }}"></button>
                        </td>
                    </tr>
                </table>
                <p>{{ 'setupwizard.ignoremessages' | translate }}
                </p>
                <p>{{ 'setupwizard.savethis' | translate }}</p>
                <p>{{ 'setupwizard.restartbe' | translate }}</p>
            </div>


        </ng-template>

        <ng-template pTemplate="footer">
            <div class="grid nogutter m-5">
                <div class="col-12">
                    <p-message
                        *ngIf="successCount > 0 && successCount == expectedCount && errorCount == 0 && !databaseForm.dirty"
                        severity="success" text="{{ 'common.savesuccess' | translate }}"></p-message>
                    <p-message *ngIf="errorCount > 0" severity="error"
                        text="{{ 'common.networkfail' | translate }}"></p-message>
                    <p-message *ngIf="connectionFail" severity="error"
                        text="{{ 'setupwizard.connectionfail' | translate }}"></p-message>
                </div>

                <p-button class="col pr-1" label="{{'common.save' | translate}}" icon="pi pi-save" iconPos="left"
                    (onClick)="saveForm(true); databaseForm.form.markAsPristine()"
                    [disabled]="(!databaseForm.dirty || setupService.schedulingEnabled) && !setupService.isDatabaseIgnored"></p-button>

                <p-button class="pr-3" label="{{ 'common.next' | translate }}"
                    (onClick)="router.navigate(['setupwizard/selectlanguage'])" icon="pi pi-angle-right" iconPos="right"
                    [disabled]="setupService.isDatabaseIgnored">
                </p-button>

            </div>
        </ng-template>

    </p-card>
</form>