<!-- display for when results are present and filtered-->
<div id="needList">
    <div *ngFor="let need of visibleNeeds" class="needEntry">
        <div [routerLink]="'/need/' + need.id" class="clickable">

            <div class="split">
                <div class="left">
                    <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/>
                </div>

                <div class="middle">
                    <span class="needName">{{need.name}}</span>
                    <span class="needType">{{need.type}}</span>
                </div>
                <div class="right">
                    <span *ngIf="need.urgent" class="urgent">URGENT</span>
                    <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
                </div>
            </div>

            <div class="prog">
                <span id="hover-status-label-{{need.id}}"> </span>

                <span>{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current.toLocaleString()}} / {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.maxGoal.toLocaleString()}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
                <progress [value]="need.current" [max]="need.maxGoal"></progress>
            </div>
        </div>

        <div *ngIf="actionArea" class="actionArea">
            <ng-container [ngTemplateOutlet]="actionArea" [ngTemplateOutletContext]="{$implicit: need}"/>
        </div>
    </div>
</div>

<div *ngIf="itemsPerPage !== Infinity" id="page-selector">
    <button [disabled]="!(currentPage !== 0)" (click)="firstPage()"><span class="icon">first_page</span></button>
    <button [disabled]="!(currentPage > 0)" (click)="decrementPage()"><span class="icon">arrow_back_ios_new</span></button>
    <span>Page {{currentPage + 1}} of {{totalPages}}</span>
    <button [disabled]="!(currentPage < totalPages - 1)" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button>
    <button [disabled]="!(currentPage !== totalPages - 1)" (click)="lastPage()"><span class="icon">last_page</span></button>
</div>