D-Net

<div id="manage-zenodo-communities" class="uk-padding">

    <form class="uk-text-center uk-animation uk-card uk-card-default uk-padding">

      <div>

        <input type="text" class="uk-input  uk-width-1-2" placeholder="Search zenodo communities" aria-describedby="sizing-addon2"  [(ngModel)]="zenodoCommunitySearchUtils.keyword" name="keyword" >

        <button (click)="goTo(1)"  type="submit" class=" uk-button">

           <span class="uk-icon">

           <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>

           </span>Search

        </button>

      </div>

    </form>

    <div *ngIf="zenodoCommunitySearchUtils.status == errorCodes.DONE" class="uk-alert uk-alert-primary">

      <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>

      Newly added Zenodo communities will be linked to your community on the next run of our algorithms.

    </div>

    <div *ngIf="zenodoCommunitySearchUtils.status == errorCodes.LOADING "

          class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert">

          <span class="loading-gif  uk-align-center" ></span>

    </div>

    <div *ngIf="zenodoCommunitySearchUtils.status == errorCodes.NONE "

          class="uk-animation-fade uk-margin-top  uk-width-1-1 uk-alert uk-alert-warning" role="alert">

           No zenodo communities found

    </div>

    <div *ngIf="zenodoCommunitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">

      <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">

        <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">

          {{zenodoCommunitySearchUtils.totalResults | number}} zenodo communities, page {{zenodoCommunitySearchUtils.page | number}} of {{(totalPages()) | number}}

        </span>

        <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">

          <paging-no-load [currentPage]="zenodoCommunitySearchUtils.page" [totalResults]="zenodoCommunitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value)"></paging-no-load>

        </span>

      </div>

    </div>

    <ul  class="uk-list uk-list-divider  uk-margin">

       <li *ngFor="let item of zenodoCommunities;" class="uk-animation-fade uk-margin-top">

         <div class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>

            <div class="uk-width-auto">

              <a target="_blank" [href]="item.link">

                <img *ngIf="item.logoUrl" class="uk-comment-avatar" src="{{item.logoUrl}}" width="80" height="80" alt="">

              </a>

            </div>

            <div class="uk-width-expand">

                <h4 class="uk-comment-title uk-margin-remove uk-grid">

                  <a class="uk-width-expand" target="_blank" href="{{item.link}}">

                    <span *ngIf="item.title">{{item.title}}</span>

                    <span *ngIf="!item.title">[no name available]</span>

                    <span class="custom-external custom-icon space"></span>

                  </a>

                <span *ngIf=" masterCommunity && item.id==masterCommunity.id" class="uk-label uk-label-warning">Master zenodo community</span>

                <span class="uk-width-1-6 uk-text-center">

<!--                    green_background_color green_color-->

                  <a *ngIf="!inThelist(item, selectedCommunities) && !(masterCommunity && item.id==masterCommunity.id)" (click)="addCommunity(item)" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add"></a>

                  <span *ngIf="inThelist(item, selectedCommunities)" class="uk-label uk-label-success">Added</span>

<!--                    red_background_color red_color-->

                  <a *ngIf="inThelist(item, newlySelectedCommunities)"  (click)="removeCommunity(item)" class="uk-icon-button remove uk-button-danger" uk-icon="close" title="Undo"></a>

               </span>

              </h4>

                <div class="uk-comment-meta ">

                     last update: {{item.date | date:'yyyy/MM/dd'}}

                </div>

            </div>

        </div>

        <div class="uk-comment-body uk-text-meta">

            <p *ngIf="item.description">{{item.description}}</p>

         </div>

      </li>

    </ul>

    <div *ngIf="zenodoCommunitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">

      <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">

        <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">

          {{zenodoCommunitySearchUtils.totalResults | number}} zenodo communities, page {{zenodoCommunitySearchUtils.page | number}} of {{(totalPages()) | number}}

        </span>

        <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">

          <paging-no-load [currentPage]="zenodoCommunitySearchUtils.page" [totalResults]="zenodoCommunitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value)"></paging-no-load>

        </span>

      </div>

    </div>

</div>