<div id="community-edit-form " class=" uk-card uk-card-default uk-padding">
  <div class="uk-text-large uk-text-center uk-width-5-6@l uk-width ">Manage community profile</div>



    <div>
      <!-- <div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
      <div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
      <div *ngIf="successfulResetMessage" class="uk-alert uk-alert-warning" role="alert">{{successfulResetMessage}}</div> -->
      <div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert"><span class="loading-gif uk-align-center"></span></div>
        <table *ngIf="communityId != null && community != null && !showLoading && !errorMessage" class="uk-width-1-1">
          <tbody class="uk-table uk-align-center">
              <tr>
                  <td for="name" class="uk-text-bold uk-width-1-2@xl uk-width-1-3@m uk-width-expand@s uk-text-right">Name <span class="uk-text-danger uk-text-bold">*</span> :</td>
                  <td class="uk-text-left uk-width-expand">
                      <div *ngIf="community.title == '' " class=" 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-large@l uk-width-medium@s" id="name"
                              required [(ngModel)] = "community.title" (input)="change()"></td>
              </tr>
              <tr>
                  <td for="shortName" class="uk-text-bold uk-text-right">Short Name:</td>
                  <td class="uk-text-left">
                      <input *ngIf="community.shortTitle != null" placeholder={{community.shortTitle}} type="text"
                              class="form-control uk-input uk-width-large@l uk-width-medium@s" id="shortName"
                              [(ngModel)] = "community.shortTitle" (input)="change()" disabled></td>
              </tr>
              <tr>
                  <td for="description" class="uk-text-bold uk-text-right">Description:</td>
                  <td class="uk-text-left">
                      <textarea *ngIf="community.description != null" placeholder={{community.description}} type="text"
                                class="form-control uk-textarea uk-width-large@l uk-width-medium@s" rows="6" id="description"
                                [(ngModel)] = "community.description" (input)="change()">
                      </textarea></td>
              </tr>
              <tr>
                  <td for="logoUrl" class="uk-text-bold uk-text-right">Logo Url:</td>
                  <td class="uk-text-left">
                      <input *ngIf="community.logoUrl != null" placeholder={{community.logoUrl}} type="text"
                          class="form-control uk-input uk-width-large@l uk-width-medium@s" id="logoUrl"
                          [(ngModel)] = "community.logoUrl" (input)="change()"></td>
              </tr>
              <tr>
                  <td for="status" class="uk-text-bold uk-text-right">Status:</td>
                  <td class="uk-text-left uk-margin">
                      <select class="form-control uk-select uk-width-large@l uk-width-medium@s" id="status"
                              [(ngModel)] = "community.status" (input)="change()">
                          <option value="all">Visible</option>
                          <option value="manager">Visible to managers</option>
                          <option value="hidden">Hidden</option>
                      </select></td>
              </tr>
              <tr>
                  <td for="managers" class="uk-text-bold uk-text-right">Managers:</td>
                  <td class="uk-text-left">
                    <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-large uk-text-danger uk-text-small uk-margin-top"> Please add a valid email. </div>
                          <input placeholder="Type managers" type="text" class="form-control uk-input uk-width-large@l uk-width-medium@s"
                                                      id="{{'manager'+i}}" name="{{'manager'+i}}" [(ngModel)] = "community.managers[i]" (input)="change()">
                          <!-- <img type="uk-image" src="assets/imgs/delete-icon.png" height="25" width="25" title="Remove" onmouseover="" style="cursor: pointer;" (click)="removeManager(i)"/> -->
<!--                          red_background_color red_color-->
                          <a class="uk-icon-button remove uk-button-danger" uk-icon="close" title="Remove" (click)="removeManager(i); change()"></a>
<!--                          green_background_color green_color-->
                          <a *ngIf="i == community.managers.length - 1" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add" (click)="addManager()"></a>
                      </div>
<!--                        green_background_color green_color-->
                      <a *ngIf="community.managers.length == 0" class="uk-icon-button add uk-button-primary" 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>
                  </td>
              </tr>
              <!-- <tr>
                  <td for="subjects" class="uk-text-bold uk-text-right">Subjects:</td>
                  <td class="uk-text-left">
                    <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-large@l uk-width-medium@s"
                                                     id="{{'subject'+i}}" name="{{'subject'+i}}" [(ngModel)] = "community.subjects[i]" (input)="change()">
                          <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>
                    </div>
                  </td>
              </tr> -->
              <tr>
                <td class="uk-text-right"></td>
                <td><div class="uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-text-danger uk-text-bold">* Required fields</div>
                </td>
              </tr>
            </tbody>
          </table>

          <div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
          <div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
          <div *ngIf="successfulResetMessage" class="uk-alert uk-alert-warning" role="alert">{{successfulResetMessage}}</div>

          <table *ngIf="communityId != null && community != null && !showLoading && !errorMessage" class="uk-width-1-1">
            <tbody class="uk-table uk-align-center">
              <tr>
                <td class="uk-width-2-3@xl uk-width-1-2@m uk-width-1-2@s uk-text-right"></td>
                <td class="uk-text-left">
                    <div class="uk-grid-margin uk-first-column uk-align-center uk-text-left uk-padding uk-padding-remove-top uk-padding-remove-bottom">
                        <button *ngIf="hasChanged" class="uk-button uk-button-primary" (click)="updateCommunity()">Save</button>
                        <button *ngIf="!hasChanged" class="uk-button uk-button-default" disabled>Save</button>
                        <button class="uk-button" (click)="resetForm(communityId)">Reset</button>
                    </div>
                </td>
              </tr>
          </tbody>
        </table>
  </div>
</div>
