D-Net

<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()">

                          <a   class="uk-icon-button remove red_background_color red_color" uk-icon="close" title="Remove" (click)="removeSubject(i); change();"></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>

                    <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>