<div class="course-info-bar">
    <div class="row justify-content-between">
        <div class="col-8">
            <h2>
                <span *ngIf="complaintType === ComplaintType.COMPLAINT">{{ 'artemisApp.complaint.listOfComplaints.title' | artemisTranslate }}</span>
                <span *ngIf="complaintType === ComplaintType.MORE_FEEDBACK">{{ 'artemisApp.moreFeedback.list.title' | artemisTranslate }}</span>
            </h2>
        </div>
    </div>
</div>

<div class="col-12 mt-4">
    <div class="row table-responsive">
        <div class="form-check col-6 align-baseline" *ngIf="!loading">
            <input
                type="checkbox"
                name="showAddressedComplaint"
                id="field_showAddressedComplaint"
                [ngModel]="showAddressedComplaints"
                (ngModelChange)="triggerAddressedComplaints()"
            />
            <label class="form-check-label" for="field_showAddressedComplaint">
                <span *ngIf="complaintType === ComplaintType.COMPLAINT">{{ 'artemisApp.complaint.listOfComplaints.showAddressedComplaints' | artemisTranslate }}</span>
                <span *ngIf="complaintType === ComplaintType.MORE_FEEDBACK">{{ 'artemisApp.moreFeedback.list.showAnsweredRequests' | artemisTranslate }}</span>
            </label>
        </div>

        <div [hidden]="complaintsToShow.length !== 0">
            <span *ngIf="complaintType === ComplaintType.COMPLAINT">{{ 'artemisApp.complaint.listOfComplaints.noComplaintsToShow' | artemisTranslate }}</span>
            <span *ngIf="complaintType === ComplaintType.MORE_FEEDBACK">{{ 'artemisApp.moreFeedback.list.noRequestsToShow' | artemisTranslate }}</span>
        </div>

        <table class="table" [hidden]="complaintsToShow.length === 0">
            <thead>
                <tr jhiSort [(predicate)]="complaintsSortingPredicate" [(ascending)]="complaintsReverseOrder" (sortChange)="sortRows()">
                    <th jhiSortBy="id">
                        <a class="th-link">#</a>
                        <fa-icon [icon]="faSort"></fa-icon>
                    </th>
                    <th jhiSortBy="result.participation.exercise.title">
                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.exercise' | artemisTranslate }}</a>
                        <fa-icon [icon]="faSort"></fa-icon>
                    </th>
                    <th jhiSortBy="result.submission.id">
                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.submissionId' | artemisTranslate }}</a>
                        <fa-icon [icon]="faSort"></fa-icon>
                    </th>
                    <th jhiSortBy="result.assessor.login">
                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.reviewerLogin' | artemisTranslate }}</a
                        ><fa-icon [icon]="faSort"></fa-icon>
                    </th>
                    <th jhiSortBy="result.assessor.name">
                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.reviewerName' | artemisTranslate }}</a
                        ><fa-icon [icon]="faSort"></fa-icon>
                    </th>
                    <th jhiSortBy="student.login" *ngIf="hasStudentInformation">
                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.studentLogin' | artemisTranslate }}</a>
                        <fa-icon [icon]="faSort"></fa-icon>
                    </th>
                    <th jhiSortBy="student.name" *ngIf="hasStudentInformation">
                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.studentName' | artemisTranslate }}</a>
                        <fa-icon [icon]="faSort"></fa-icon>
                    </th>
                    <th jhiSortBy="submittedTime">
                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.dateAndTime' | artemisTranslate }}</a>
                        <fa-icon [icon]="faSort"></fa-icon>
                    </th>
                    <th jhiSortBy="responseTime">
                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.responseTime' | artemisTranslate }}</a>
                        <fa-icon [icon]="faSort"></fa-icon>
                    </th>
                    <th jhiSortBy="accepted">
                        <a class="th-link">{{ 'artemisApp.complaint.listOfComplaints.status' | artemisTranslate }}</a>
                        <fa-icon [icon]="faSort"></fa-icon>
                    </th>
                    <th jhiSortBy="lockStatus">
                        <a class="th-link">{{ 'artemisApp.locks.lockStatus' | artemisTranslate }}</a>
                        <fa-icon [icon]="faSort"></fa-icon>
                    </th>
                    <th>{{ 'artemisApp.complaint.listOfComplaints.actions' | artemisTranslate }}</th>
                </tr>
            </thead>

            <tbody>
                <tr *ngFor="let complaint of complaintsToShow">
                    <td>
                        {{ complaint.id }}
                    </td>

                    <td>
                        <span>{{ complaint.result?.participation?.exercise?.title }}</span>
                    </td>

                    <td>
                        <span>{{ complaint.result?.submission?.id }}</span>
                    </td>

                    <td>
                        <span>{{ complaint.result?.assessor?.login }}</span>
                    </td>

                    <td>
                        <span>{{ complaint.result?.assessor?.name }}</span>
                    </td>

                    <td *ngIf="hasStudentInformation">
                        <span>{{ complaint.student?.login }}</span>
                    </td>

                    <td *ngIf="hasStudentInformation">
                        <span>{{ complaint.student?.name }}</span>
                    </td>

                    <td>
                        <span>{{ complaint.submittedTime | artemisDate }}</span>
                    </td>

                    <td>
                        <span>
                            <ng-container *ngIf="complaint.accepted === undefined"> &gt;= </ng-container>
                            {{ complaintService.getResponseTimeInSeconds(complaint) | artemisDurationFromSeconds: true }}
                            <fa-icon
                                *ngIf="complaintService.shouldHighlightComplaint(complaint)"
                                [icon]="faExclamationTriangle"
                                class="text-warning"
                                ngbTooltip="{{ 'artemisApp.complaint.oneWeekUnanswered' | artemisTranslate }}"
                            ></fa-icon>
                        </span>
                    </td>
                    <td>
                        <span class="text-warning" *ngIf="complaint.accepted == undefined">{{ 'artemisApp.complaint.listOfComplaints.noReply' | artemisTranslate }}</span>
                        <span class="text-success" *ngIf="complaint.accepted == true && complaintType === ComplaintType.COMPLAINT">{{
                            'artemisApp.complaint.listOfComplaints.accepted' | artemisTranslate
                        }}</span>
                        <span class="text-success" *ngIf="complaint.accepted == true && complaintType === ComplaintType.MORE_FEEDBACK">{{
                            'artemisApp.moreFeedback.accepted' | artemisTranslate
                        }}</span>
                        <span class="text-danger" *ngIf="complaint.accepted == false">{{ 'artemisApp.complaint.listOfComplaints.rejected' | artemisTranslate }}</span>
                    </td>
                    <td>
                        {{ calculateComplaintLockStatus(complaint) }}
                    </td>

                    <td class="text-center">
                        <button class="btn btn-primary btn-sm" (click)="openAssessmentEditor(complaint)" id="show-complaint">
                            <fa-icon [icon]="faFolderOpen" [fixedWidth]="true"></fa-icon>
                            <span *ngIf="complaintType === ComplaintType.COMPLAINT">{{ 'artemisApp.exerciseAssessmentDashboard.showComplaint' | artemisTranslate }}</span>
                            <span *ngIf="complaintType === ComplaintType.MORE_FEEDBACK">{{
                                'artemisApp.exerciseAssessmentDashboard.showMoreFeedbackRequests' | artemisTranslate
                            }}</span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="alert alert-info" [hidden]="complaints.length !== 0">
        <span *ngIf="complaintType === ComplaintType.COMPLAINT">{{ 'artemisApp.exerciseAssessmentDashboard.noComplaints' | artemisTranslate }}</span>
        <span *ngIf="complaintType === ComplaintType.MORE_FEEDBACK">{{ 'artemisApp.exerciseAssessmentDashboard.noMoreFeedbackRequests' | artemisTranslate }}</span>
    </div>
</div>
