<section class="item-view__body vertical-spacing">
  <div class="container">
    <h1 class="heading heading--md">
      {{pageTitle}}
    </h1>

    <ul class="list-unstyled mt-4 mb-4">
      <li>
        <strong>{{'Attribute.ViewsCount' | translate}}: </strong> {{viewsCount}}
      </li>
      <li>
        <strong>{{'Attribute.DownloadCount' | translate}}: </strong> {{downloadsCount}}
      </li>
    </ul>

    <div class="item-view__actions">
        <div class="d-flex flex-column flex-lg-row align-items-center">
          <div class="d-flex flex-column">
            <div class="d-flex align-items-center flex-wrap">
              <div class="d-flex align-items-baseline" *ngIf="downloadFilesList.length > 0; else noFiles">
                <span class="font-weight-bold" style="min-width: 85px"> {{ 'Action.Download' | translate }}: </span>
                <!-- download file -->
                <div *ngFor="let dataFiles of downloadFilesList">
                  <app-download-link
                    [fileSize]="dataFiles.file_size"
                    [fileUrl]="dataFiles.download_url"
                    [format]="dataFiles.format"
                    [title]="resource.attributes.title"
                    [customCssClass]="'btn btn-primary btn-sm mb-1 mr-1'"
                    [opennessScore]="dataFiles.openness_score"
                    (click)="downloadResource(resource.attributes.title, dataFiles.download_url)"
                  >
                  </app-download-link>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>

    <div class="pb-3">
      <app-resource-filters [resourceId]="resourceId"></app-resource-filters>
    </div>

    <div class="mt-2 mb-5">
      <div class="tabs">
        <ul class="tab-list row no-gutters" role="tablist">
          <li class="tab-list__item col-12 col-md-4" role="presentation">
            <a
              class="tab-list__link"
              role="tab"
              id="tab1"
              appInfoTooltip="{{ 'Tour.Tooltip.DataResource.Table.text' | translate }}"
              tooltipTitle="{{ 'Tour.Tooltip.DataResource.Table.title' | translate }}"
              [routerLink]="['table']"
              #tabLinkTableView="routerLinkActive"
              [attr.aria-selected]="tabLinkTableView.isActive ? true : null"
              routerLinkActive="tab-list__link--active"
            >
              {{ 'Resources.TableView' | translate }}
            </a>
          </li>
        </ul>
      </div>
      <div class="tabs-content">
        <router-outlet></router-outlet>
      </div>
    </div>
    <hr/>
    <div>
      <strong>{{'DatasetRestrictions.Self' | translate}}</strong>:
      <span class="btn-link dga-tiles" (click)="toggleCollapsed()">{{collapsed ? ('Action.Expand' | translate) : ('Action.Collapse' | translate)}}</span>
      <div class="dga-collapse-container" [class.animate]="showAnimation" *ngIf="!collapsed">
        <div>
          <app-dataset-restrictions [dataset]="dataset"></app-dataset-restrictions>
        </div>
      </div>
    </div>
    <hr/>
    <div class="item-view__body vertical-spacing">
      <div *ngFor="let section of pageData.body">
        <cms-block2 class="w-100" [oneWidget]="section"></cms-block2>
      </div>
    </div>
  </div>
</section>

<ng-template #noFiles>
  <a class="btn btn-primary btn-sm pr-1" target="_blank" href="{{ resource?.attributes?.link }}">
    {{ 'Action.GoToSource' | translate | uppercase }}
    <span class="visually-hidden">{{ 'SkipTo.NewWindow' | translate }}</span>
  </a>
</ng-template>
