D-Net

<div id="community-edit-form " class=" uk-card uk-card-default uk-padding">

  <div class="uk-text-large">Edit your community profile</div>

    <div *ngIf="communityId != null && community != null" class="uk-margin-top">

      <div class="form-group ">

        <div for="name" class="uk-text-bold">Name (*):</div>

        <div *ngIf="community.title == ''" class="uk-width-medium uk-text-danger uk-text-small style=display:none"> Please add name. </div>

        <input *ngIf="community.title != null" placeholder={{community.title}} type="text"

                class="form-control uk-input uk-width-medium" id="name" required [(ngModel)] = "community.title">

      </div>

      <div class="form-group">

        <div for="shortName" class="uk-text-bold">Short Name:</div>

        <input *ngIf="community.shortTitle != null" placeholder={{community.shortTitle}} type="text"

                class="form-control uk-input uk-width-medium" id="shortName" [(ngModel)] = "community.shortTitle">

      </div>

      <div class="form-group">

        <div for="description" class="uk-text-bold">Description:</div>

        <input *ngIf="community.description != null" placeholder={{community.description}} type="text"

                class="form-control uk-input uk-width-medium" id="description" [(ngModel)] = "community.description">

      </div>

      <div class="form-group">

        <div for="logoUrl" class="uk-text-bold">Logo Url:</div>

        <input *ngIf="community.logoUrl != null" placeholder={{community.logoUrl}} type="text"

                class="form-control uk-input uk-width-medium" id="logoUrl" [(ngModel)] = "community.logoUrl">

      </div>

      <div class="form-group">

        <div for="email" class="uk-text-bold">Email</div>

        <div *ngIf="!community.managers[0].match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$') || community.managers[0] == null"

              class="uk-width-medium uk-text-danger uk-text-small style=display:none"> Please add a valid email. </div>

        <input type="text" class="form-control uk-input uk-width-medium" id="email" [(ngModel)] = "community.managers[0]">

      </div>

      <div class="form-group">

        <div for="managers" class="uk-text-bold">Managers:</div>

        <div *ngIf="community.managers != null">

          <div *ngFor='let manager of community.managers, let i = index; trackBy:trackByFn'>

            <div *ngIf="!community.managers[i].match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$') && community.managers[i] != '' "

                  class="uk-width-medium uk-text-danger uk-text-small style=display:none"> Please add a valid email. </div>

              <input placeholder="Type managers" type="text" class="form-control uk-input uk-width-medium"

                                          id="{{'manager'+i}}" name="{{'manager'+i}}" [(ngModel)] = "community.managers[i]">

              <!-- <img type="uk-image" src="assets/imgs/delete-icon.png" height="25" width="25" title="Remove" onmouseover="" style="cursor: pointer;" (click)="removeManager(i)"/> -->

              <a class="uk-icon-button remove red_background_color red_color" uk-icon="close" title="Remove" (click)="removeManager(i)"></a>

              <a *ngIf="i == community.managers.length - 1" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add" (click)="addManager()"></a>

          </div>

          <a *ngIf="community.managers.length == 0" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add" (click)="addManager()"></a>

          <!-- <img type="uk-image" src="assets/imgs/add-icon.png" height="25" width="25" title="Add" onmouseover="" style="cursor: pointer;" (click)="addManager()"/> -->

        </div>

      </div>

      <div class="form-group">

        <div for="subjects" class="uk-text-bold">Subjects:</div>

        <div *ngIf="community.subjects != null">

          <div *ngFor='let subject of community.subjects; let i = index; trackBy:trackByFn'>

              <input placeholder="Type subjects" type="text" class="form-control uk-input uk-width-medium"

                                         id="{{'subject'+i}}" name="{{'subject'+i}}" [(ngModel)] = "community.subjects[i]">

              <!-- <img type="uk-image" src="assets/imgs/delete-icon.png" height="25" width="25" title="Remove" onmouseover="" style="cursor: pointer;" (click)="removeSubject(i)"/> -->

              <a class="uk-icon-button remove red_background_color red_color" uk-icon="close" title="Remove" (click)="removeSubject(i)"></a>

              <a *ngIf="i == community.subjects.length - 1" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add" (click)="addSubject()"></a>

          </div>

          <a *ngIf="community.subjects.length == 0" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add" (click)="addSubject()"></a>

          <!-- <img type="uk-image" src="assets/imgs/add-icon.png" height="25" width="25" title="Add" onmouseover="" style="cursor: pointer;" (click)="addSubject()"/> -->

        </div>

      </div>

      <div class="uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-text-danger">(*) Required fields</div>

      <div class="uk-width-1-1 uk-grid-margin uk-first-column uk-align-center">

          <button class="uk-button" (click)="resetForm(communityId)">Reset</button>

          <button class="uk-button uk-button-primary" (click)="updateCommunity()">Save</button>

      </div>

    </div>

</div>