<article class="item-view">
  <!-- DETAILS HEADER -->
  <header class="item-view__header vertical-spacing">
    <div class="container">
      <h1 class="heading" [innerHtml]="institution?.attributes.title">
        <span
          *ngIf="institution.attributes.abbreviation"
          class="font-weight-light"
          [innerHtml]="institution.attributes.abbreviation">
        </span>
      </h1>

      <!-- created -->
      <p class="item-view__attribute">
        <strong> {{ 'Attribute.CreationDate' | translate }}: </strong>
        {{ institution?.attributes?.created | translateDateFormat | async }}
      </p>

      <!-- modified -->
      <p class="item-view__attribute">
        <strong> {{ 'Attribute.UpdateDate' | translate }}: </strong>
        {{ institution?.attributes?.modified | translateDateFormat | async }}
      </p>

      <div class="row mt-4">
        <!-- LOCATION -->
        <div
          class="col-md-6 col-lg-4 mb-4 mb-lg-0"
          *ngIf="
            institution?.attributes.street_type ||
            institution?.attributes.city ||
            institution?.attributes.street ||
            institution?.attributes.street_number ||
            institution?.attributes.flat_number ||
            institution?.attributes.postal_code
          ">
          <svg aria-hidden="true" class="icon icon-location-pin">
            <use href="/assets/icomoon/sprite/sprite.svg#icon-location-pin"></use>
          </svg>

          <!-- address: street, number -->
          <p
            class="item-view__attribute item-view__attribute--tight item-view__attribute--icon-related"
            *ngIf="
              institution?.attributes.street_type ||
              institution?.attributes.street ||
              institution?.attributes.street_number ||
              institution?.attributes.flat_number
            ">
            <ng-container *ngIf="institution?.attributes.street_type">
              {{ institution?.attributes.street_type }}
            </ng-container>
            <ng-container *ngIf="institution?.attributes.street">
              {{ institution?.attributes.street }}
            </ng-container>
            <ng-container *ngIf="institution?.attributes.street_number">
              {{ institution?.attributes.street_number }}
            </ng-container>
            <ng-container *ngIf="institution?.attributes.flat_number">
              lok. {{ institution?.attributes.flat_number }}
            </ng-container>
          </p>

          <!-- address: city -->
          <p
            class="item-view__attribute item-view__attribute--tight item-view__attribute--icon-related"
            *ngIf="institution?.attributes.postal_code || institution?.attributes.city">
            <ng-container *ngIf="institution?.attributes.postal_code">
              {{ institution?.attributes.postal_code }}
            </ng-container>
            <ng-container *ngIf="institution?.attributes.city">
              {{ institution?.attributes.city }}
            </ng-container>
          </p>

          <!-- regon -->
          <p
            class="item-view__attribute item-view__attribute--tight item-view__attribute--icon-related"
            *ngIf="institution?.attributes.regon">
            REGON: {{ institution?.attributes.regon }}
          </p>
        </div>

        <!-- TEL & FAX -->
        <div class="col-md-6 col-lg-4 mb-4 mb-lg-0" *ngIf="institution?.attributes.tel || institution?.attributes.fax">
          <svg aria-hidden="true" class="icon icon-mobile">
            <use href="/assets/icomoon/sprite/sprite.svg#icon-mobile"></use>
          </svg>
          <p
            class="item-view__attribute item-view__attribute--tight item-view__attribute--icon-related"
            *ngIf="institution?.attributes.tel">
            Tel.: {{ institution?.attributes.tel }}
          </p>
          <p
            class="item-view__attribute item-view__attribute--tight item-view__attribute--icon-related"
            *ngIf="institution?.attributes.fax">
            Fax: {{ institution?.attributes.fax }}
          </p>
        </div>

        <!-- WEBSITE, MAIL, EPUAP -->
        <div
          class="col-md-6 col-lg-4 institution-contact-info-container"
          *ngIf="institution?.attributes.website || institution?.attributes.email || institution?.attributes.epuap">
          <svg aria-hidden="true" class="icon icon-paper-plane">
            <use href="/assets/icomoon/sprite/sprite.svg#icon-paper-plane"></use>
          </svg>
          <p
            class="item-view__attribute item-view__attribute--tight item-view__attribute--icon-related"
            *ngIf="institution?.attributes.website">
            <a href="{{ institution?.attributes.website }}" target="_blank">
              {{ institution?.attributes.website }}
              <span class="visually-hidden">{{ 'SkipTo.NewWindow' | translate }}</span>
            </a>
          </p>
          <p
            class="item-view__attribute item-view__attribute--tight item-view__attribute--icon-related"
            *ngIf="institution?.attributes.email">
            <a href="mailto:{{ institution?.attributes.email }}">
              {{ institution?.attributes.email }}
            </a>
          </p>
          <p
            class="item-view__attribute item-view__attribute--tight item-view__attribute--icon-related"
            *ngIf="institution?.attributes.epuap">
            <a href="{{ institution?.attributes.epuap }}" target="_blank">
              {{ 'Institutions.EpuapMailBox' | translate }}
              <span class="visually-hidden">{{ 'SkipTo.NewWindow' | translate }}</span>
            </a>
          </p>
          <p
            class="item-view__attribute item-view__attribute--tight item-view__attribute--icon-related institution-delivery-address"
            *ngIf="institution?.attributes.electronic_delivery_address">
            <span>{{ 'Institutions.EdorAddress' | translate }}: </span>
            <span class="institution-delivery-address__adr">{{
              institution?.attributes.electronic_delivery_address
            }}</span>
            <button
              class="btn copy-button institution-clipboard-button"
              [cdkCopyToClipboard]="institution?.attributes.electronic_delivery_address"
              [tooltip]="'Institutions.CopyEdorAddress' | translate"
              [attr.aria-label]="'Institutions.CopyEdorAddressShort' | translate"
              triggers="mouseenter:click mouseenter:mouseleave"
              placement="bottom"
              (click)="clickOnClipboard()">
              <svg aria-hidden="true" class="icon icon-copy">
                <use href="/assets/icomoon/SVG/copy.svg#icon-copy"></use>
              </svg>
            </button>
            <span *ngIf="clipboardClicked" [ngClass]="[highContrastMode, 'institution-clipboard-text']">
              <div class="institution-clipboard-copied-icon">
                <svg
                  aria-hidden="true"
                  [ngClass]="[highContrastMode, 'icon', 'icon-confirm', 'institution-clipboard-confirm-icon']">
                  <use href="assets/icomoon/SVG/ok.svg#ok"></use>
                </svg>
              </div>
              <div class="institution-clipboard-copied-text">
                {{ 'Action.Copied' | translate }}:
                <strong>{{ institution?.attributes.electronic_delivery_address }}</strong>
              </div>
            </span>
          </p>
        </div>
      </div>
    </div>
  </header>
</article>

<div class="vertical-spacing">
  <div class="container pb-3">
    <h2 class="heading heading--md">
      {{ 'Institutions.RelatedDatasets' | translate }}
    </h2>

    <app-search-suggest
      tooltipText="{{ 'Tour.Tooltip.InstitutionDetails.Search.text' | translate }}"
      [searchQuery]="params.q"
      [useTriggers]="true"
      (searchTrigger)="updateParams({ q: $event.q, sort: 'relevance' })"
      (clearTrigger)="updateParams({ q: '', sort: '-date' })">
    </app-search-suggest>
  </div>
</div>

<div class="container pb-0 pb-lg-4">
  <div class="row no-gutters">
    <aside class="col-lg-4 col-xl-3 bg-custom">
      <!-- aggregation filters -->
      <app-institution-item-list-view-filters
        [filtersOptions]="filters"
        [maxLength]="maxLength"
        [originalSelectedData]="backupSelectedFilters"
        [data]="selectedFilters"
        (applyFilters)="updateParams($event, null, true)">
      </app-institution-item-list-view-filters>
    </aside>

    <div class="col-lg-8 col-xl-9">
      <div class="ml-0 ml-lg-4">
        <!-- SEARCH RESULTS -->
        <div class="results-section">
          <!-- SELECTED FILTERS -->
          <app-institution-item-selected-filters
            [selectedIds]="backupSelectedFilters"
            [selectedFiltersCount]="selectedFiltersCount"
            (clearAllFilters)="clearSelectedFilters()"
            (clearSingleFilter)="clearSelectedFilter($event)">
          </app-institution-item-selected-filters>

          <app-found-results-counters-and-sort
            *ngIf="count && items?.length"
            [selected]="params?.sort"
            [selectedModel]="
              params['model[terms]'] ? params['model[terms]'] : apiModel.DATASET + ',' + apiModel.RESOURCE
            "
            (update)="updateParams($event)"
            [counters]="[
              {
                label: 'Attribute.AllData' | translate,
                count: count,
                value: apiModel.DATASET + ',' + apiModel.RESOURCE,
                url: null,
              },
              { label: 'Datasets.Self' | translate, count: counters?.datasets, value: apiModel.DATASET, url: null },
              { label: 'Resources.Self' | translate, count: counters?.resources, value: apiModel.RESOURCE, url: null },
            ]"
            [sortOptions]="[
              { label: 'Sort.Default' | translate, value: 'relevance' },
              { label: 'Attribute.NameAsc' | translate, value: 'title' },
              { label: 'Attribute.NameDesc' | translate, value: '-title' },
              { label: 'Attribute.Date' | translate, value: '-date' },
              { label: 'Attribute.Popularity' | translate, value: '-views_count' },
            ]">
          </app-found-results-counters-and-sort>

          <!-- no results found -->
          <app-no-results-found [q]="params?.q" *ngIf="items && !items.length"></app-no-results-found>

          <!-- api notifications -->
          <app-notifications></app-notifications>

          <!-- RESULTS LIST -->
          <app-institution-item-results [items]="items"></app-institution-item-results>

          <!-- RESULTS FOOTER -->
          <footer class="results-footer pt-5" *ngIf="items && items.length">
            <div class="d-flex justify-content-between align-items-center">
              <!-- results per page -->
              <app-items-per-page [selected]="params?.per_page" (selectedChange)="updateParams({ per_page: $event })">
              </app-items-per-page>

              <!-- pagination -->
              <app-pagination
                [itemsPerPage]="params.per_page"
                [totalItems]="count"
                [(page)]="params.page"
                (numPages)="numPages = $event"
                (pageChange)="updateParams({ page: $event })">
              </app-pagination>
            </div>

            <div class="row m-0 pt-4 results-action">
              <!-- current page api -->
              <div class="col-sm-12 pl-0 pr-0 col-md-4 results-action__left sm-pb" *ngIf="items && items.length">
                <app-api-source-link [apiUrl]="selfApi"></app-api-source-link>
              </div>

              <!--suggest application-->
              <div class="col-sm-12 pl-0 pr-0 col-md-8 results-action__right">
                <div class="w-100">
                  <div class="d-flex justify-content-end flex-wrap align-items-baseline">
                    <p class="pr-2 m-0 font-weight-bold">{{ 'LookingForDifferentData' | translate }}</p>
                    <app-write-us-info
                      class="write-us-info-container"
                      [showIcon]="false"
                      [uppercase]="false"
                      [buttonSize]="'md'"></app-write-us-info>
                  </div>
                </div>
              </div>
            </div>
          </footer>
        </div>
      </div>
    </div>
  </div>
</div>
