<div [ngClass]="{'kt-grid kt-grid--ver kt-grid--root': !useFullWidthLayout(), 'kt-content': useFullWidthLayout() }" [style.text-align]="useFullWidthLayout() ? 'center' : 'left'">
    <div [ngClass]="{'kt-grid kt-grid--hor kt-grid--root  kt-login kt-login--v1': !useFullWidthLayout(), 'row':useFullWidthLayout()}" id="kt_login">
        <div [ngClass]="{'kt-grid__item kt-grid__item--fluid kt-grid kt-grid--desktop kt-grid--ver-desktop kt-grid--hor-tablet-and-mobile': !useFullWidthLayout(), 'col-md-12': useFullWidthLayout()}">
            <!-- <div class="kt-grid__item kt-grid__item--order-tablet-and-mobile-2 kt-grid kt-grid--hor kt-login__aside" *ngIf="!useFullWidthLayout()" style="background-image: url('/assets/metronic/common/images/bg/bg-4.jpg');"> -->
            <div class="kt-grid__item kt-grid__item--order-tablet-and-mobile-2 kt-grid kt-grid--hor kt-login__aside" *ngIf="!useFullWidthLayout()" style="background-image: url('/assets/metronic/common/images/bg/bg-sprinthub.jpg');">

                <div class="kt-grid__item">
                    <a (click)="goToHome()" href="">
                        <!-- <img *ngIf="!appSession.tenant || !appSession.tenant.logoId" [src]="appRootUrl() + 'assets/common/images/app-logo-on-dark.svg'" alt="logo" height="38" /> -->
                        <!-- <img [src]="appRootUrl() + 'assets/common/images/sprintship-logo.png'" alt="logo" height="38" /> -->
                        <!-- <img *ngIf="appSession.tenant && appSession.tenant.logoId" [src]="remoteServiceBaseUrl + '/TenantCustomization/GetTenantLogo?skin=light&tenantId=' + appSession.tenant.id + '&id=' + appSession.tenant.logoId" alt="logo" height="38" /> -->
                    </a>
                </div>
                <!-- <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver">
                    <div class="kt-grid__item kt-grid__item--middle">
                       <h3 class="kt-login__title">AspNet Zero</h3>
                       <h3 class="kt-login__title">{{ 'Reliability' | localize }}, {{ 'Visibility' | localize }}, {{ 'Affordability' | localize }}: {{ 'Delivered' | localize }}</h3>
                       <h4 class="kt-login__subtitle">Base solution for your next web application.</h4>
                       
                    </div>
                </div> -->
                <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--ver">
                    <div class="d-block mt-3 mr-auto ml-auto text-center kt-grid__item kt-grid__item--middle">
                        <img  *ngIf="!appSession.tenant || !appSession.tenant.logoId" [src]="appRootUrl() + 'assets/common/images/sprintship-logo.png'" alt="logo" height="50" />
                        <img *ngIf="appSession.tenant && appSession.tenant.logoId" [src]="remoteServiceBaseUrl + '/TenantCustomization/GetTenantLogo?skin=light&tenantId=' + appSession.tenant.id + '&id=' + appSession.tenant.logoId" alt="logo" height="60" />
                        <h1 class="kt-login__subtitle" style="font-size: 1.8rem !important; margin-top: 1rem !important">{{ 'Welcome' | localize }}</h1>
                    </div>
                </div>
            </div>

            <div class="kt-grid__item kt-grid__item--fluid  kt-grid__item--order-tablet-and-mobile-1  kt-login__wrapper d-block">
                <div class="kt-login__head d-block mt-3 mr-auto ml-auto text-right">
                    <language-switch></language-switch>
                </div>

                <div class="kt-login__body d-block mt-3 mr-auto ml-auto">
                    <div *ngIf="showTenantChange()" class="kt-login__signup-label tenant-change-box text-center">
                        <tenant-change></tenant-change>
                    </div>
                    <!-- <div *ngIf="!appSession.tenant || !appSession.tenant.logoId" class="t-grid__item kt-grid__item--fluid d-block mt-3 mr-auto ml-auto text-center">
                    <span class="flaticon2-photo-camera" style="font-size: 100px;"></span>
                    <p>You may change the logo during setup.</p>
                    </div>
                    <div *ngIf="appSession.tenant && appSession.tenant.logoId" class="t-grid__item kt-grid__item--fluid d-block mt-3 mr-auto ml-auto text-center" style="background-image: url('/assets/metronic/common/images/bg/bg-sprinthub.jpg'); width: 250px !important; padding: 10px; border-radius: 10px; margin-top: 30px !important;">
                    <img [src]="remoteServiceBaseUrl + '/TenantCustomization/GetTenantLogo?skin=light&tenantId=' + appSession.tenant.id + '&id=' + appSession.tenant.logoId" alt="logo" height="38" />
                    </div> -->
                    <router-outlet></router-outlet>
                </div>
            </div>
        </div>
    </div>
</div>


