<div id="subjects-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 subjects</div>
    <div class="uk-alert uk-alert-primary uk-margin-top-large">
      <div>
        <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
        All the research results associated to the subjects specified here will be automatically linked to the community dashboard.
      </div>
      <div class="uk-text-small"> </div>

    </div>


    <div class="uk-margin-top  uk-container-small uk-align-center">

                      <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"><img class="uk-align-center loading-gif"></div>
                  <div *ngIf="communityId != null && community != null && !showLoading && !errorMessage" >
                    <div *ngIf="originalSubjects.length ==0"class="uk-alert uk-alert-info" role="alert">No subjects available</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-large@l uk-width-medium@s"
                                                     id="{{'subject'+i}}" name="{{'subject'+i}}" [(ngModel)] = "community.subjects[i]" (input)="change()">
<!--                          red_background_color red_color-->
                          <a   class="uk-icon-button remove uk-button-danger" uk-icon="close" title="Remove" (click)="removeSubject(i); change();"></a>
<!--                          green_background_color green_color-->
                          <a *ngIf="i == community.subjects.length - 1" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add" (click)="addSubject()"></a>
                      </div>
<!--                        green_background_color green_color-->
                      <a *ngIf="community.subjects.length == 0" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add" (click)="addSubject()"></a>
       
                    </div>

                    <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)="updateSubjects()">Save</button>
                        <button *ngIf="!hasChanged" class="uk-button uk-button-default" disabled>Save</button>
                        <button class="uk-button" (click)="resetForm(communityId)">Reset</button>
                    </div>
                  </div>
  </div>
</div>
