<ion-header>
  <ion-toolbar mode="ios" [ngClass]="{'sangh-post': type === 3}">
    <ion-buttons slot="start">
      <ion-icon name="arrow-back-outline" mode="md" id="trigger-button"></ion-icon>
    </ion-buttons>
    <ion-title>Create post</ion-title>
    <ion-button slot="end" (click)="createPost(2)" mode="md">Post</ion-button>
  </ion-toolbar>
</ion-header>
<ion-content [ngClass]="{'sangh-post': type === 3}">
  <div class="bg">
    <ion-card>
      <ion-card-header>
        <ion-card-title>
          <div class="left-data">
            <div class="family-members icons icon-common post-feed-icons">
              <img src="/assets/images/user.jpg" *ngIf="!userAvatar" />
              <img [src]="userAvatar | safeUrl" *ngIf="userAvatar" />
            </div>
            <div class="inner-data">
              <p>{{ userName }} <span *ngIf="tagUserList.length > 0">with</span> {{ tagUserList[0]?.name }} <span
                  *ngIf="tagUserList.length > 1" (click)="onModelOpen(tagUserList)">and {{ tagUserList.length-1 }}
                  others </span><span *ngIf="location">in </span>{{ location }}</p>
              <div class="select-group">
                <ion-select class="w-50 custom-select custom-arrow" mode="ios" interface="action-sheet"
                  [(ngModel)]="postPrivacy">
                  <ion-select-option [value]="privacy.value" *ngFor="let privacy of privacyList">{{privacy.name}}
                  </ion-select-option>
                </ion-select>
                <ion-button mode="md" class="w-50" (click)="moveToPostType()">{{ postType }}</ion-button>
              </div>
              <div class="select-group" *ngIf="isSanghMember">
                <ion-select class="w-50 custom-select custom-arrow" mode="ios" [(ngModel)]="type"
                  interface="action-sheet" (ngModelChange)="changePostType()">
                  <ion-select-option [value]="1">On Your Timeline</ion-select-option>
                  <ion-select-option [value]="3">On Sangh's Timeline</ion-select-option>
                </ion-select>
                <ion-button mode="md" class="w-50" *ngIf="type === 3"
                  [ngClass]="{'select-sangh': !selectedSangh.length}" (click)="goToSelectSangh()">
                  {{ selectedSangh.length ? 'Selected('+selectedSangh.length+')': 'Select Sangh' }}
                </ion-button>
              </div>
            </div>
          </div>
        </ion-card-title>


      </ion-card-header>
      <ion-card-content>
        <ion-textarea class="post-feed-message" [debounce]="250" rows="10" placeholder="Write something about this post"
          [(ngModel)]="description" (ngModelChange)="scanText()" #text></ion-textarea>
      </ion-card-content>
    </ion-card>
    <ion-button mode="md" expand="block" (click)="selectImages()">
      <ion-icon name="images"></ion-icon> Add image
    </ion-button>
    <ion-card *ngIf="uploadedFiles?.length > 0">
      <ion-card-content>
        <div class="img-upload">
          <div *ngFor="let photo of uploadedFiles;let i = index">
            <img [src]="photo | safeUrl" *ngIf="photo" />
            <ion-icon name="close-circle" (click)="removeImage(i)">
            </ion-icon>
          </div>
        </div>
      </ion-card-content>
    </ion-card>
  </div>
  <div class="search-data">
    <ion-list>
      <ion-item *ngFor="let user of userList" (click)="tagUser(user)">
        <ion-avatar slot="start">
          <img [src]="user.avatar" />
        </ion-avatar>
        <ion-label>
          <h2>{{ user.name }}</h2>
        </ion-label>
      </ion-item>
      <ion-item *ngIf="tagUserInput && userList.length === 0">
        <ion-label>
          <h2>No results for "{{tagUserInput}}"</h2>
        </ion-label>
      </ion-item>
    </ion-list>
  </div>
</ion-content>
<ion-footer [ngClass]="{'sangh-post': type === 3}">
  <div class="mention-popup" [ngClass]="{'open': openSantSangh}">
    <div class="ion-text-center" *ngIf="loaderSantSangh">
      <ion-spinner></ion-spinner>
    </div>
    <ion-list *ngIf="santSanghList.length">
      <ion-item *ngFor="let item of santSanghList; let last = last;" [lines]="last ? 'none' : 'full'"
        (click)="appendToMessage(item)">
        <ion-avatar slot="start" class="ion-align-self-baseline">
          <img [src]="item.avatar" />
        </ion-avatar>
        <ion-label class="ion-text-wrap ion-no-margin">
          <h3>{{ item.name }}</h3>
        </ion-label>
      </ion-item>
    </ion-list>
  </div>
  <div class="footer-icon" *ngIf="!openSantSangh">
    <div class="tag-shravak-div">
      <div class="icons icon-common post-feed-icons"><img class="tag-people-shravak"
          src="/assets/images/tag-people.svg">
        <img class="tag-people-sangh" src="/assets/images/tag-people-sangh.svg">
      </div>
      <ion-input placeholder="Tag Shravak" [(ngModel)]="tagUserInput" (ionInput)="getUserList($event.target)">
      </ion-input>
    </div>
    <div (click)="addLocation()">
      <ion-icon class="icon-common" name="location"></ion-icon>
      <ion-text>{{location? location: 'Add Location'}}</ion-text>
    </div>
  </div>
</ion-footer>
<ion-modal class="post-option" trigger="trigger-button" [isOpen]="false"
  [initialBreakpoint]="(!isUpdate && type !== 3) ? 0.35 : 0.25">
  <ng-template>
    <ion-content [ngClass]="{'sangh-post': type === 3}">
      <p>Want to finish your post later? <span>Save it as a draft or you can continue editing it.</span></p>
      <div class="footer-icon">
        <div (click)="createPost(1)" *ngIf="!isUpdate && type !== 3">
          <ion-icon name="bookmark" class="icon-common"></ion-icon> Save as draft
        </div>
        <div class="discardpost" (click)="discardPost()">
          <ion-icon name="trash" class="icon-common"></ion-icon> Discard post
        </div>
        <div (click)="continueEditing()">
          <div class="icons icon-common post-feed-icons"><img class="tag-people-shravak"
              src="/assets/images/edit-icon.svg">
            <img class="tag-people-sangh" src="/assets/images/edit-sangh-icon.svg">
          </div> Continue editing
        </div>
      </div>
    </ion-content>
  </ng-template>
</ion-modal>
