D-Net

<ng-template #card let-organization="organization">

  <div class="uk-card-media-top affiliation-logo uk-padding-small">

    <img *ngIf= "organization.logo_url != null && organization.logo_url != '' " class="uk-text-center"

         src="{{urlPrefix(organization.logo_url) + organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo">

    <span  *ngIf= "organization.logo_url == null || organization.logo_url == '' "class="uk-icon uk-padding-small">

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1" r="1.1"></circle><rect fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000" stroke-width="1.01" points="4,13 8,9 13,14"></polyline><polyline fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>

          </span>

  </div>

</ng-template>

<ng-template #affiliations_list>

  <div class="uk-margin uk-flex uk-flex-middle" uk-grid>

    <h3 class="uk-h3 uk-width-2-5">

      <span *ngIf="curatorAffiliations">My Affiliations</span>

      <span *ngIf="!curatorAffiliations">Related Organizations</span>

    </h3>

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

      <button class="uk-button portal-button uk-align-right" (click)="initAffiliation()">

        <span uk-icon="plus"></span>

        <span *ngIf="curatorAffiliations">Add new Affiliation</span>

        <span *ngIf="!curatorAffiliations">Add new Organization</span>

      </button>

    </div>

    <div *ngIf="!curatorAffiliations && organizationsPageId" class="uk-width-1-1 uk-margin">

      Do you need to add more information about the Related Organizations? Click

<!--      classContentId: ,-->

<!--      /edit-->

      <a [queryParams]="{communityId: communityId, pageId: organizationsPageId}" routerLink="/pageContents"

         routerLinkActive="router-link-active">

        here

      </a>

      .

      <div *ngIf="!organizationsEnabled" class="uk-alert uk-alert-warning" role="alert">

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

            </span>

        Community's Organizations page is disabled. Please enable it <a routerLink="/pages" routerLinkActive="router-link-active" [queryParams]="{communityId: communityId, type: 'other'}">here</a>.

      </div>

    </div>

  </div>

  <ul [class]="'uk-list uk-list-divider uk-margin' + (curatorAffiliations ? ' uk-height-max-large uk-overflow-auto' : '')"

      uk-height-match="target: > li > div > .uk-card; row: false">

    <li *ngFor="let result of affiliations; let i=index"

        class="uk-animation-fade uk-height-small uk-flex uk-flex-middle" uk-grid>

      <div class="uk-width-1-5">

        <a *ngIf="result.website_url" target="_blank" [href]="urlPrefix(result.website_url) + result.website_url"

           class="affiliation-content uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center">

          <ng-container *ngTemplateOutlet="card; context: { organization: result, fullView: true}"></ng-container>

        </a>

        <span *ngIf="!result.website_url"

              class="affiliation-content uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center">

              <ng-container *ngTemplateOutlet="card; context: { organization: result, fullView: true}"></ng-container>

            </span>

      </div>

      <div class="uk-width-3-5">

        <h3 class="uk-h3" title="{{result.name}}">{{_format(result.name)}}</h3>

        <a href="{{urlPrefix(affiliation.website_url) + result.website_url}}" title="{{result.website_url}}" class="uk-margin-auto-top" target="_blank">{{_format(result.website_url)}}</a>

      </div>

      <div class="uk-width-1-5">

        <button class="uk-icon-button uk-icon uk-button-secondary uk-margin-small-right uk-margin-small-bottom" title="Edit" uk-icon="pencil" (click)="chooseAffiliation(i, 'edit')"></button>

        <button class="uk-icon-button uk-icon uk-button-danger uk-margin-small-bottom" title="Remove" uk-icon="minus" (click)="chooseAffiliation(i)"></button>

      </div>

    </li>

  </ul>

</ng-template>

<div *ngIf="!curatorAffiliations">

<!--  <div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Edit Community Affiliations</div>-->

  <div class="uk-flex" uk-grid>

    <div *ngIf="showLoading" class="uk-align-center uk-animation-fade uk-width-1-2" role="alert">

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

    </div>

    <div *ngIf="!showLoading" class="uk-padding-large">

      <div *ngIf="message" [class]="'uk-animation-fade uk-alert uk-alert-' + messageType" role="alert">

        {{message}}

      </div>

      <ng-container *ngTemplateOutlet="affiliations_list;"></ng-container>

    </div>

  </div>

</div>

<div *ngIf="curatorAffiliations">

  <ng-container *ngTemplateOutlet="affiliations_list;"></ng-container>

</div>

<modal-alert #affiliationModal [okDisabled]="isEmptyAffiliation()" (alertOutput)="addAffiliation()">

  <table class="uk-align-center">

    <tbody class="uk-table">

    <tr>

      <td for="name" class="uk-text-bold uk-text-right">

        Name

        <span class="uk-text-danger uk-text-bold">

            *

          </span>

        :

      </td>

      <td class="uk-text-left">

        <input  type="text"

                class="form-control uk-input uk-width-medium@l uk-width-medium@m" id="afname"

                [(ngModel)]="affiliation.name" required>

      </td>

    </tr>

    <tr>

      <td for="name" class="uk-text-bold uk-text-right">

        Logo Url

        <span class="uk-text-danger uk-text-bold">

            *

          </span>

        :

      </td>

      <td class="uk-text-left">

        <input  type="text"

                class="form-control uk-input" id="logourl"

                [(ngModel)]="affiliation.logo_url" required>

      </td>

    </tr>

    <tr>

      <td for="name" class="uk-text-bold uk-text-right">

        Website Url

        <span class="uk-text-danger uk-text-bold">

            *

          </span>

        :

      </td>

      <td class="uk-text-left">

        <input  type="text"

                class="form-control uk-input" id="websiteurl"

                [(ngModel)]="affiliation.website_url" required>

      </td>

    </tr>

    </tbody>

  </table>

</modal-alert>

<modal-alert #removeAffiliationModal (alertOutput)="removeAffiliation()">

</modal-alert>