<section class="frame">
    <div class="error-page-girl" [ngClass]="'errorCode-' + errorCode"></div>
    <div class="error-page-content">
        <div class="error-page-code">{{ errorCode }}</div>
        <div class="error-page-title">{{ title || 'PAGE500.HEADER' | translate }}</div>
        <div class="error-page-description">{{ description || 'PAGE500.DESCRIPTION' | translate }}</div>

        <!-- search should not be on error page. commented in case the ask to return it back-->
        <div class="error-page-search">
            <div class="error-page-search-control">
                <input type="search" [(ngModel)]="searchTerm" />
                <div class="error-page-search-control-icon" (click)="search()"></div>
            </div>
        </div>

        <div class="error-page-actions">
            <a
                name="buy-ticket"
                class="color blue-light"
                pButton
                type="button"
                label="{{ 'PAGE404.BUY-TICKET' | translate }}"
                href="https://www.aeroflot.ru/booking?from=404"
            ></a>

            <!-- link to main aeroflot. commented in case the ask to return it back-->
             <a
                class="color blue-home"
                pButton
                type="button"
                label="{{ 'PAGE404.TO-HOME' | translate }}"
                href="https://www.aeroflot.ru/?from=404"
            ></a> 

            <!--<a class="color white" pButton type="button" label="{{ 'PAGE404.TO-HOME' | translate }}" routerLink="/"></a>-->

            <a
                class="color blue-light text-only"
                pButton
                type="button"
                label="{{ 'PAGE404.SUPPORT' | translate }}"
                href="https://www.aeroflot.ru/help?from=404"
            ></a>
        </div>
    </div>
</section>
