<h1>Needs List</h1>
<input id="search-button" type="button" value="Search" (click)="open()">
<div id="search-form">
    <form #searchForm="ngForm">
        <label>Search:</label><br>
        <input type="text" name="search" (input)="search(searchForm.value)" ngModel>
        <input type="button" value="Clear" (click)="searchForm.reset()"> <br>
    </form>
    <button (click)="close()">Close</button>
    <div>
        <h2 id="search-status">Search Results:</h2>
        <div *ngFor="let need of searchResults">
            <a routerLink="/need/{{need.id}}">
                {{need.name}}
            </a>
            <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button>
            <!-- <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button> -->
        </div>
    </div>
</div>

<li *ngFor="let need of needs">
    <a routerLink="/need/{{need.id}}">
        {{need.name}}
    </a>
    <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button>
    <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
</li>