<div class="modal-header">
    <h4 class="modal-title pull-left" translate>alert.state</h4>
    <button type="button" class="btn-close close pull-right" [attr.aria-label]="'close'|translate|ftitlecase" (click)="bsModalRef.hide()">
        <span aria-hidden="true" class="visually-hidden">&times;</span>
    </button>
</div>
<div class="modal-body" *ngIf="id == 0">
    <div class="d-flex justify-content-center mt-2 pt-2 mb-3">
        <div class="spinner spinner-border"></div>
    </div>
</div>
<div class="modal-body" *ngIf="id !== 0">
    <div class="alert alert-danger" role="alert" *ngIf="alertClosed">
        <i class="fas fa-exclamation-triangle"></i> {{ 'alert.closed'|translate }}
    </div>
    <div class="alert alert-info" role="alert" *ngIf="!alertClosed && getCurrentUserResponse() == null">
        <i class="fas fa-info-circle"></i> {{ 'alert.request_response_question'|translate }}
        <div class="btn-group ms-3" role="group">
            <button class="btn btn-success" type="button" (click)="setCurrentUserResponse(1)">{{ 'yes'|translate|titlecase }}</button>
            <button class="btn btn-danger" type="button" (click)="setCurrentUserResponse(0)">{{ 'no'|translate|titlecase }}</button>
        </div>
    </div>
    <table class="table table-border table-striped w-100">
        <thead>
            <tr>
                <td>{{ 'name'|translate|ftitlecase }}</td>
                <td colspan="2">{{ 'alert.response_status'|translate }}</td>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let crewUser of crewUsers">
            <tr>
                <td>
                    <img alt="red helmet" src="./assets/icons/red_helmet.png" width="20px" *ngIf="crewUser.user.chief">
                    <img alt="red helmet" src="./assets/icons/black_helmet.png" width="20px" *ngIf="!crewUser.user.chief">
                    {{ crewUser.user.surname }} {{ crewUser.user.name }}
                    <img alt="driver" src="./assets/icons/wheel.png" width="20px" *ngIf="crewUser.user.driver">
                </td>
                <ng-container *ngIf="crewUser.accepted == null && alertClosed">
                    <td style="width: 1px;"><i class="fa fa-times" style="color:red"></i></td>
                    <td translate>alert.no_response</td>
                </ng-container>
                <ng-container *ngIf="crewUser.accepted == null && !alertClosed">
                    <td style="width: 1px;"><i class="fas fa-spinner fa-spin"></i></td>
                    <td translate>alert.waiting_for_response</td>
                </ng-container>
                <ng-container *ngIf="crewUser.accepted == true">
                    <td style="width: 1px;"><i class="fa fa-check" style="color:green"></i></td>
                    <td translate>alert.response_yes</td>
                </ng-container>
                <ng-container *ngIf="crewUser.accepted == false">
                    <td style="width: 1px;"><i class="fa fa-times" style="color:red"></i></td>
                    <td translate>alert.response_no</td>
                </ng-container>
            </tr>
            </ng-container>
        </tbody>
    </table>
    <div class="well well-lg card card-block card-header">
        <label for="details" class="form-label" translate>alert.details</label>
        <textarea class="form-control" id="details" rows="3"
          [(ngModel)]="notes" [disabled]="!auth.profile.can('alerts-update') || alertClosed==1" (keyup)="notesUpdated()"></textarea>
        <button class="btn btn-secondary mt-2" (click)="saveAlertSettings()" [disabled]="!auth.profile.can('alerts-update') || !notesHasUnsavedChanges || alertClosed" translate>save_changes</button>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-danger" (click)="deleteAlert()" *ngIf="auth.profile.can('alerts-update') && !alertClosed">{{ 'alert.delete'|translate }} <i class="fas fa-exclamation-triangle"></i></button>
    <button type="button" class="btn btn-secondary" (click)="bsModalRef.hide()">{{ 'close'|translate }}</button>
</div>