<div class="uk-container line-height-normal" *ngIf="community">
  <div class="badges">
    <div *ngIf="community.isSubscribed"
         class="portal-card-badge uk-text-center">
      <span>Subscribed</span>
    </div>
    <div *ngIf="community.status == 'manager'"
         class="private-card-badge uk-text-center ">
      <span>Private</span>
    </div>
  </div>
  <div class="uk-card-media-top uk-padding uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle">
    <a *ngIf="directLink" [href]="getCommunityPageUrl()" target="_blank">
      <div class="community">
        <img *ngIf="community.logoUrl"
             [src]="community | logoUrl"
             alt="{{(community.title)?community.title:community.shortTitle}} logo">
        <span *ngIf="!community.logoUrl" class="uk-icon">
          <svg viewBox="0 0 20 20" class="uk-width-1-1" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000"
                                                                                           stroke-width="1.1" cx="7.7"
                                                                                           cy="8.6" r="3.5"></circle> <path
            fill="none" stroke="#000" stroke-width="1.1"
            d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none"
                                                                                                 stroke="#000"
                                                                                                 stroke-width="1.1"
                                                                                                 d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
        </span>
      </div>
    </a>
    <a *ngIf="!directLink" (click)="confirmModalOpen()">
      <div class="community">
        <img *ngIf="community.logoUrl != null && community.logoUrl != ''" src="{{community.logoUrl}}"
             alt="{{(community.title)?community.title:community.shortTitle}} logo">
        <span *ngIf="community.logoUrl == null || community.logoUrl == ''" class="uk-icon">
          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000"
                                                                                           stroke-width="1.1" cx="7.7"
                                                                                           cy="8.6" r="3.5"></circle> <path
            fill="none" stroke="#000" stroke-width="1.1"
            d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none"
                                                                                                 stroke="#000"
                                                                                                 stroke-width="1.1"
                                                                                                 d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
        </span>
      </div>
    </a>
  </div>
  <div class="uk-card-body uk-padding-small uk-padding-remove-horizontal uk-padding-remove-top uk-margin-small-top uk-margin-bottom">
    <div class="uk-text-bold uk-text-left text-small" [ngClass]="(showDescription)?'uk-margin-small-bottom':''">
      <a *ngIf="directLink" [href]="getCommunityPageUrl()" class="color" target="_blank" [class.uk-text-small]="smallTitle">
        <span *ngIf="community.title">
          {{community.title.slice(0, thresholdTitle)}}
          <span *ngIf="community.title.length > thresholdTitle">...</span>
        </span>
        <span *ngIf="!community.title && community.shortTitle">
          {{community.shortTitle.slice(0, thresholdTitle)}}
          <span *ngIf="community.shortTitle.length > thresholdTitle">...</span>
        </span>
      </a>
      <a *ngIf="!directLink" (click)="confirmModalOpen()" class="color" [class.uk-text-small]="smallTitle">
        <span *ngIf="community.title">
          {{community.title.slice(0, thresholdTitle)}}
          <span *ngIf="community.title.length > thresholdTitle">...</span>
        </span>
        <span *ngIf="!community.title && community.shortTitle">
          {{community.shortTitle.slice(0, thresholdTitle)}}
          <span *ngIf="community.shortTitle.length > thresholdTitle">...</span>
        </span>
      </a>
    </div>
    <div class="uk-text-left uk-text-small" *ngIf="community.description != null && showDescription">
<!--         title="{{community.description}}">-->
      <span>{{_formatDescription(community.description)}}</span>
<!--      <span>{{community.description.slice(0, thresholdDescription)}}<span-->
<!--        *ngIf="community.description.length > thresholdDescription">...</span></span>-->
    </div>
  </div>
  <div>
    <div class="uk-position-small uk-position-bottom-right">
      <a *ngIf="directLink" [href]="getCommunityPageUrl()" target="_blank" class="portal-link uk-text-uppercase uk-text-bold uk-text-underlined text-small">
        Visit <!--{{(properties.environment == 'production'&& getProductionPrefix(community.communityId).length > 0
          ?' BETA':'')}}-->
      </a>
      <a *ngIf="!directLink" (click)="confirmModalOpen()" class="portal-link uk-text-uppercase uk-text-bold uk-text-underlined text-small">
        Visit <!--{{(properties.environment == 'production' && getProductionPrefix(community.communityId).length > 0
          ?' BETA':'')}}-->
      </a>
    </div>
  </div>
</div>
<modal-alert #AlertModal (alertOutput)="goToCommunityPage($event)">
  <div class="uk-text-left">
    You will be navigated to a new tab. Are you sure that you want to proceed?
  </div>
</modal-alert>
