D-Net

<schema2jsonld [URL]="properties.baseLink"

               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-connect.png'" type="home"

               name="OpenAIRE Connect">

</schema2jsonld>

<div

     class="banner-background image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"

     uk-scrollspy="{"target":"[uk-scrollspy-class]","cls":"uk-animation-fade","delay":false}"

     tm-header-transparent="light" tm-header-transparent-placeholder="">

  <div class="uk-section uk-padding-remove-bottom">

    <div class="uk-container uk-container-large uk-margin-small-top">

      <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>

    </div>

    <div class="uk-position-relative uk-panel">

      <div *ngIf="loading" class="uk-container uk-container-large 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" class="uk-container uk-container-large">

        <h2 class="uk-text-center uk-text-bold">My Communities</h2>

        <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0"

             class="uk-child-width-1-1@s uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-height-match="target: .communityCard; row: false">

          <div>

            <div *ngIf="managerOfCommunities.length > 0" class="uk-grid">

              <h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>

              <div class="uk-width-1-1 uk-margin-small-top">

                <div

                  class="uk-grid-match uk-grid-small  uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"

                  uk-grid >

                  <div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">

                    <div class="uk-padding-small uk-card uk-card-default uk-card-small communityCard"

                         title="{{community.description}}">

                      <browse-community [community]=community [smallTitle]="true" [showDescription]=false></browse-community>

                    </div>

                  </div>

                </div>

                <div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">

                  <a [queryParams]="{role: quote('manager')}" class="uk-display-inline-block portal-link uk-text-uppercase uk-text-bold uk-text-small"

                     routerLinkActive="router-link-active" routerLink="/search/find/communities">

                    <span class="uk-flex uk-flex-middle">

                      <span>View all ({{managerOfCommunities.length | number}})</span>

                      <span uk-icon="chevron-right"></span>

                    </span>

                  </a>

                </div>

              </div>

            </div>

            <div class="uk-container uk-container-large uk-width-4-5">

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

                {{subscriberErrorMessage}}

              </div>

            </div>

            <div *ngIf="subscriberOfCommunities.length > 0" class="uk-grid">

              <h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>

              <div class="uk-width-1-1 uk-margin-small-top">

                <div

                  class="uk-grid-match uk-grid-small uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"

                  uk-grid>

                  <div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">

                    <div class="uk-padding-small  uk-card uk-card-small uk-card-default communityCard"

                         [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">

                      <browse-community [community]=community [smallTitle]="true" [showDescription]=false></browse-community>

                    </div>

                  </div>

                </div>

                <div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">

                  <a [queryParams]="{status: quote('subscribed')}" class="uk-display-inline-block portal-link uk-text-uppercase uk-text-bold uk-text-small"

                     routerLinkActive="router-link-active" routerLink="/search/find/communities">

                    <span class="uk-flex uk-flex-middle">

                      <span>View all ({{subscriberOfCommunities.length | number}})</span>

                      <span uk-icon="chevron-right"></span>

                    </span>

                  </a>

                </div>

              </div>

            </div>

          </div>

          <div class="uk-text-center">

            <img width="200" height="185" src="../../assets/connect-assets/banner/login.png">

          </div>

        </div>

        <div *ngIf="managerOfCommunities.length === 0 && subscriberOfCommunities.length === 0"

             class="uk-child-width-1-1" uk-grid>

          <div class="uk-flex uk-flex-center uk-margin-bottom">

            <div class="uk-card uk-card-default uk-box-shadow-medium uk-width-1-2@m">

              <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="!loading && researchCommunities.length > 0">

            <h5 class="uk-text-bold">Community Gateways in Action</h5>

            <div [class]="(researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">

              <div

                class="uk-grid-match uk-grid-medium  uk-child-width-1-5@m uk-child-width-1-2 uk-text-center"

                uk-grid uk-height-match=".community;">

                <div *ngFor="let community of researchCommunities.slice(0, 5); let i = index">

                  <div class="uk-padding-small uk-card uk-card-default communityCard">

                    <browse-community [community]=community></browse-community>

                  </div>

                </div>

              </div>

            </div>

            <div class="uk-text-right uk-margin-top">

              <a *ngIf="researchCommunities.length > 5" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"

                 routerLinkActive="router-link-active" routerLink="/search/find/communities">

                Browse All >

              </a>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>