<div class="customers view">
    <div id="itemsContainer" class="container">
        <header>
            <div>
                <h3 id="title">
                  {{ title }}
                </h3>
            </div>
        </header>
        <div>
            <div id="itemList" class="row">
                <div class="col-md-12">
                    <ul class="list-group">
                        <li *ng-for="#item of items" class="list-group-item">
                            <span (click)="removeItem(item)"><div id="itemDiv">Item: {{item.name}}</div> <div>Price: {{item.price | currency}}</div></span>
                        </li>
                    </ul>
                </div>
            </div>

            <input id="costInput" type="text" [value]="cost | currency">

            <button (click)="addItem()" type="button" id="addButton">
                <img id="addIcon" src="ic_add_white_36dp_2x.png">
            </button>

        </div>

    </div>

    <div id="addNewSection" class="animated">
        <h1>Add new</h1>

        <input class="style-4" type="text" #name placeholder="Name of Item">
        <br>
        <input class="style-4" type="number" #price placeholder="Price of Item">

        <br>

        <button id="addItemButton" type="button" (click)="add(name.value,price.value)">Add</button>
        <br>
        <button id="closeButton" type="button" (click)="close()">Cancel</button>
    </div>