<div class="embed-view">

    <!-- SEPARATED SEARCH and FILTERS -->
    <div class="container mb-5" *ngIf="hasTabularData || hasChart || hasGeoData">
        <app-resource-filters></app-resource-filters>
    </div>


    <!-- TABS -->
    <div class="container" >
        <div class="tabs">
            <ul class="tab-list row no-gutters" role="tablist">

                <!-- Table View -->
                <li class="tab-list__item col-12 col-md-4" role="presentation">
                    <a class="tab-list__link" role="tab" id="tab1"
                        [routerLink]="['table']"
                        #tabLinkTableView="routerLinkActive"
                        [attr.aria-selected]="tabLinkTableView.isActive ? true : null"
                        routerLinkActive="tab-list__link--active">
                        {{ 'Resources.TableView' | translate }}
                    </a>
                </li>

                <!-- Chart View -->        
                <li class="tab-list__item col-12 col-md-4" role="presentation" *ngIf="hasChart">
                    <a class="tab-list__link" role="tab" id="tab2"
                        [routerLink]="['chart']"
                        #tabLinkChartView="routerLinkActive"
                        [attr.aria-selected]="tabLinkChartView.isActive ? true : null"
                        routerLinkActive="tab-list__link--active">
                        {{ 'Resources.ChartView' | translate }}
                    </a>
                </li>

                <!-- Map View -->
                <ng-container>
                    <li class="tab-list__item col-12 col-md-4" role="presentation" *ngIf="hasGeoData">
                        <a class="tab-list__link" role="tab" id="tab3"
                            [routerLink]="['map']"
                            #tabLinkMapView = "routerLinkActive"
                            [attr.aria-selected]="tabLinkMapView.isActive ? true : null"
                            routerLinkActive="tab-list__link--active">
                            {{ 'Resources.MapView' | translate }}
                        </a>
                    </li>
                </ng-container>
            </ul>
        </div>


        <div class="tabs-content">
            <router-outlet></router-outlet>
        </div>

        <!-- origin -->
        <div class="container">  
            <p class="small mt-2 ml-3">
                {{ 'Embed.OriginText' | translate }} 
                <a [routerLink]="['/']" target="_blank">
                    dane.gov.pl
                    <span class="visually-hidden">
                        {{ "SkipTo.NewWindow" | translate }}
                    </span>
                </a>
            </p>
        </div>
    </div>
</div>
