<div class="mt-5">
  <h2 class="pt-3">
    <span id="user-management-page-heading" data-cy="userManagementPageHeading">Review Management</span>

    <div class="d-flex justify-content-end">
      <button
        class="btn btn-primary jh-create-entity"
        type="button"
        style="margin-top: 20px"
        data-toggle="modal"
        data-target="#detailModal"
        (click)="(true)"
      >
        <fa-icon icon="plus"></fa-icon> <span>Create a new review</span>
      </button>
    </div>
  </h2>
  <div>
    <div class="modal fade" id="detailModal">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <!-- Modal Header -->
          <div class="modal-header">
            Create a new review
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            <div class="form-group">
              <label for="users">Select users:</label>
              <app-multi-select-dropdown [list]="users" (shareCheckedList)="shareCheckedUserList($event)"> </app-multi-select-dropdown>
            </div>

            <div class="form-group">
              <label for="users">Select exercise:</label>
              <jhi-multi-select-dropdown-exercise [list]="results" (shareExercise)="shareExercise($event)">
              </jhi-multi-select-dropdown-exercise>
            </div>
          </div>

          <!-- Modal footer -->
          <div class="modal-footer">
            <button
              [disabled]="selectedExercise === undefined || selectedUsers === undefined"
              type="button"
              class="btn btn-success"
              (click)="submitReview()"
              data-dismiss="modal"
            >
              Create
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <jhi-alert-error></jhi-alert-error>

  <jhi-alert></jhi-alert>
</div>

<div class="table-responsive" *ngIf="reviews">
  <table class="table table-striped" aria-describedby="user-management-page-heading">
    <thead>
      <tr>
        <th scope="col"><span jhiTranslate="global.field.id">ID</span></th>
        <th scope="col"><span>Resource</span></th>
        <th scope="col"><span>Users</span></th>
        <th scope="col"><span>Status</span></th>
        <th scope="col"><span>Comments</span></th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody *ngIf="reviews">
      <tr *ngFor="let review of reviews">
        <td>{{ review.id }}</td>
        <td>
          <a href="{{ review.link }}" style="color: rgb(33, 37, 41)" target="_blank"> {{ review.resource }}</a>
        </td>
        <td>
          <div *ngFor="let email of review.users">
            <span class="badge badge-info">{{ email }}</span>
          </div>
        </td>
        <td>
          <div *ngFor="let level of review.status">
            <span class="badge badge-info">{{ level }}</span>
          </div>
          <div *ngIf="review.users?.length == 0 && !review.badgeRewarded">
            <span class="badge badge-warning">Review Requested</span>
          </div>
          <div *ngIf="review.badgeRewarded">
            <span class="badge badge-success">Badge Rewarded</span>
          </div>
        </td>
        <td class="">
          <div class="btn-group">
            <button
              class="btn btn-info btn-sm"
              type="button"
              data-toggle="modal"
              data-target="#detailModal2"
              (click)="selectedReview = review"
            >
              <fa-icon icon="times"></fa-icon>
              <span class="d-none d-md-inline">View comments</span>
            </button>
          </div>
        </td>
        <td class="text-right">
          <div class="btn-group">
            <button *ngIf="!review.badgeRewarded" type="button" (click)="rewardBadge(review)" class="m-1 btn btn-success btn-sm">
              <fa-icon icon="check-circle"></fa-icon>
              <span class="d-none d-md-inline">Reward Badge</span>
            </button>

            <button
              *ngIf="!review.badgeRewarded"
              type="submit"
              [routerLink]="['./', review.id, 'edit']"
              queryParamsHandling="merge"
              class="m-1 btn btn-primary btn-sm"
            >
              <fa-icon icon="pencil-alt"></fa-icon>
              <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
            </button>

            <button type="button" (click)="deleteReview(review)" class="m-1 btn btn-danger btn-sm">
              <fa-icon icon="times"></fa-icon>
              <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <div>
    <div class="modal fade" id="detailModal2">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <!-- Modal Header -->
          <div class="modal-header">
            User comments
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            <div class="form-group">
              <div class="pb-3" *ngFor="let comment of selectedReview.comments; let i = index">
                <label>{{ selectedReview.users![i] }}</label>
                <textarea class="form-control" disabled rows="8">{{ comment }}</textarea>
              </div>
            </div>
          </div>

          <!-- Modal footer -->
          <div class="modal-footer"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Open DIalogue where Exercise can be selected and users to be notified -->

<!-- List active review processes -->

<!-- Possibility to exchange user -->

<!-- List requested reviews -->

<!-- Resolve request -->

<!-- List completed reviews -->

<!-- Delete reviews -->