<schema2jsonld [URL]="properties.domain + properties.baseLink"
               [logoURL]="properties.domain + properties.baseLink+'/assets/common-assets/logo-small-connect.png'"
               type="home"
               name="OpenAIRE Connect">
</schema2jsonld>
<div>
  <div class="uk-section uk-container uk-container-large">
    <div class="uk-padding-small uk-padding-remove-horizontal">
      <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
      <div class="uk-margin-large-top uk-margin-large-bottom">
        <div *ngIf="loading" class="uk-height-large">
          <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
              class="loading-gif  uk-align-center"></span></div>
        </div>
        <div *ngIf="!loading">
          <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0">
            <div *ngIf="managerOfCommunities.length > 0"
                 [class]="subscriberOfCommunities?.length > 0 ? 'uk-margin-xlarge-bottom' : ''">
              <h1 class="uk-h1">You are managing</h1>
              <div class="uk-margin-large-top">
                <div class="uk-visible@xl">
                  <div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid>
                    <div *ngFor="let community of managerOfCommunities.slice(0, 4); let i = index">
                      <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
                        <browse-community [community]=community></browse-community>
                      </div>
                    </div>
                  </div>
                  <div *ngIf="managerOfCommunities.length > 4" class="uk-text-center uk-margin-large-top">
                    <a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
                       routerLinkActive="router-link-active" routerLink="/search/find/communities"
                       [queryParams]="{role: quote('manager')}">
                      <span class="uk-flex uk-flex-middle">
                        <span>View All ({{managerOfCommunities.length}})</span>
                      </span>
                    </a>
                  </div>
                </div>

                <div class="uk-hidden@xl">
                  <div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
                    <div *ngFor="let community of managerOfCommunities.slice(0, 3); let i = index">
                      <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
                        <browse-community [community]=community></browse-community>
                      </div>
                    </div>
                  </div>
                  <div *ngIf="managerOfCommunities.length > 3" class="uk-text-center uk-margin-large-top">
                    <a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
                       routerLinkActive="router-link-active" routerLink="/search/find/communities"
                       [queryParams]="{role: quote('manager')}">
                      <span class="uk-flex uk-flex-middle">
                        <span>View All ({{managerOfCommunities.length}})</span>
                      </span>
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <div *ngIf="subscriberErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning" role="alert">
              {{subscriberErrorMessage}}
            </div>

            <div *ngIf="subscriberOfCommunities.length > 0">
              <h1 class="uk-h1">You are subscribed to</h1>
              <div class="uk-margin-large-top">
                <div class="uk-visible@xl">
                  <div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid>
                    <div *ngFor="let community of subscriberOfCommunities.slice(0, 4); let i = index">
                      <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
                        <browse-community [community]=community></browse-community>
                      </div>
                    </div>
                  </div>
                  <div *ngIf="subscriberOfCommunities.length > 4" class="uk-text-center uk-margin-medium-top">
                    <a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
                       routerLinkActive="router-link-active" routerLink="/search/find/communities"
                       [queryParams]="{role: quote('member')}">
                    <span class="uk-flex uk-flex-middle">
                      <span>View All ({{subscriberOfCommunities.length}})</span>
                    </span>
                    </a>
                  </div>
                </div>

                <div class="uk-hidden@xl">
                  <div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
                    <div *ngFor="let community of subscriberOfCommunities.slice(0, 3); let i = index">
                      <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
                        <browse-community [community]=community></browse-community>
                      </div>
                    </div>
                  </div>
                  <div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-center uk-margin-medium-top">
                    <a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
                       routerLinkActive="router-link-active" routerLink="/search/find/communities"
                       [queryParams]="{role: quote('member')}">
                    <span class="uk-flex uk-flex-middle">
                      <span>View All ({{subscriberOfCommunities.length}})</span>
                    </span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div *ngIf="managerOfCommunities.length === 0 && subscriberOfCommunities.length === 0">
            <div class="uk-flex uk-flex-center uk-margin-large-bottom">
              <div class="uk-card uk-card-default">
                <div class="uk-card-body uk-text-bold uk-text-center ">
                  You are not yet subscribed in any Communities.<br>
                  Start by browsing and subscribing in those that you are interested in.
                </div>
              </div>
            </div>
            <div>
              <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
            </div>
            <div *ngIf="researchCommunities.length > 0">
              <h2 class="uk-h1">Community Gateways <br/> already in action<span class="uk-text-primary">.</span></h2>
              <div class="uk-margin-large-top">
                <div class="uk-visible@xl">
                  <div class="uk-grid-match uk-grid-medium uk-child-width-1-4 uk-flex-center uk-text-center" uk-grid>
                    <div *ngFor="let community of researchCommunities.slice(0, 4); let i = index">
                      <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
                        <browse-community [community]=community></browse-community>
                      </div>
                    </div>
                  </div>
                  <div class="uk-text-center uk-margin-medium-top">
                    <a *ngIf="researchCommunities.length > 4"
                       class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
                       routerLinkActive="router-link-active" routerLink="/search/find/communities">
                        <span class="uk-flex uk-flex-middle">
                          <span>View All ({{researchCommunities.length}})</span>
                        </span>
                    </a>
                  </div>
                </div>

                <div class="uk-hidden@xl">
                  <div class="uk-grid-match uk-grid-medium uk-child-width-1-3@m uk-child-width-1-1 uk-flex-center uk-text-center" uk-grid>
                    <div *ngFor="let community of researchCommunities.slice(0, 3); let i = index">
                      <div class="uk-card uk-card-default uk-card-hover" [class.uk-disabled]="!hasPermission(community)">
                        <browse-community [community]=community></browse-community>
                      </div>
                    </div>
                  </div>
                  <div class="uk-text-center uk-margin-large-top uk-margin-medium-bottom">
                    <a *ngIf="researchCommunities.length > 3"
                       class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
                       routerLinkActive="router-link-active" routerLink="/search/find/communities">
                      <span class="uk-flex uk-flex-middle">
                        <span>View All ({{researchCommunities.length}})</span>
                      </span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
