<div class="full-height">
    <div class="flex-container">
        <div>

            <h1>
                <i class="fa fa-sliders"></i>
                <span>Firmware</span>
            </h1>

            <p>
                Firmware {{ hardwareModules.leftModuleInfo.firmwareVersion }} is running on the left keyboard half.<br>
                Firmware {{ hardwareModules.rightModuleInfo.firmwareVersion }} is running on the right keyboard half.
            </p>

            <p *ngIf="runningOnNotSupportedWindows$ | async">Firmware update doesn't work on Windows 7, Windows Vista,
                and Windows XP. Use Windows 10, Windows 8, Linux, or OSX instead.</p>

            <p *ngIf="firmwareUpgradeAllowed$ | async">
                <button class="btn btn-primary"
                        [disabled]="flashFirmwareButtonDisbabled$ | async"
                        (click)="onUpdateFirmware()">
                    Flash firmware {{ (getAgentVersionInfo$ | async).firmwareVersion }} (bundled with Agent)
                </button>
                <file-upload [disabled]="flashFirmwareButtonDisbabled$ | async"
                             (fileChanged)="changeFile($event)"
                             accept=".tar.bz2"
                             label="Choose firmware file and flash it"></file-upload>
            </p>

            <div *ngIf="firmwareUpgradeFailed$ | async"
                 class="alert alert-danger"
                 role="alert">
                <p>Firmware update failed. Disconnect every USB device from your computer (including USB hubs, KVM switches, USB dongles, and everything else), then connect only your UHK and retry.</p>

                <p>If you've tried the above and the update still keeps failing, please <a class="link-github" [href]="firmwareGithubIssueUrl" externalUrl>create a GitHub issue</a>, and attach the update log.</p>
            </div>

            <div *ngIf="firmwareUpgradeSuccess$ | async"
                 class="alert alert-success"
                 role="alert">
                <p>Firmware update succeeded.</p>
            </div>
        </div>

        <div class="flex-grow" *ngIf="firmwareUpgradeAllowed$ | async">
            <xterm [logs]="xtermLog$ | async"></xterm>
        </div>
        <div class="flex-footer">
        </div>
    </div>
</div>
