<ng-template #warn>
    <div *ngIf="!this.warned" class="accountWarn">
        <h1>Not Logged in!</h1>
        <p>To contribute to needs you must be logged in!</p>
        <div>
            <button (click)="modalService.hideModal(); this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});">Log In</button>
            <button (click) = "modalService.hideModal(); warned = true">Continue Anyway</button>
        </div>
    </div>
</ng-template>

<div id="box" (mouseenter)="!warned && (!usersService.isHelper() && !usersService.isManager()) ? modalService.showModal(warn) : null">
    @if (need) {

        <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/>
        <h1>{{need.name}}</h1>
        <span class="needType">{{need.type}} GOAL</span>
        <p>{{need.description}}</p>
        <div class="prog">
            <progress [value]="need.current" [max]="need.maxGoal"></progress>
            <span>This goal is <strong>{{(((need.current)*100) / (need.maxGoal)).toFixed(0)}}%</strong> complete!</span>
        </div>

        <span><strong>Target Goal:</strong> {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal.toLocaleString()}}</span>

        <span><strong>Amount Currently Collected:</strong> {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current.toLocaleString()}}</span>

        <span><strong>Location:</strong> {{need.location}}</span>

        <span><strong>Urgency: </strong>
            <span *ngIf="!need.urgent">Not urgent</span>
            <span *ngIf="need.urgent" class="urgent">URGENT</span>
        </span>

        <div *ngIf="need.filterAttributes?.length">
            <strong>Tags:</strong>
            <ul style="display: flex; column-gap: 24px;">
                <li *ngFor="let tag of need?.filterAttributes">
                    <p>{{tag}}</p>
                </li>
            </ul>
        </div>

        <div class="actionArea">
            <button *ngIf="usersService.isHelper()" (click)="add(need)" [disabled]="usersService.inBasket(usersService.getBasket() | async, need)">
                <span class="icon">{{usersService.inBasket(usersService.getBasket() | async, need)? "check": "add" }}</span>Add To Basket
            </button>
            <ng-template #edit>
                <app-need-edit [mode]="'Edit'" *ngIf="need" [need]="need" (refreshNeedList)="ngOnInit()"></app-need-edit>
            </ng-template>
            <button *ngIf="usersService.isManager()" (click)="modalService.showModal(edit)">
                <span class="icon">edit</span>Edit Need
            </button>
            <button *ngIf="usersService.isManager()" (click)="delete(need!.id)" >
                <span class="icon">delete</span>Delete Need
            </button>
        </div>
    } @else {
        <h1>Need not found</h1>
        <span>The requested need does not exist. <a routerLink="/cupboard">Browse the cupboard</a></span>
    }
</div>