<section class="cardSearchContainer">
    <header class="">
        <h4>Seach for Cards</h4>
    </header><!-- /header -->
    <input data-ng-model="query" class="" placeholder="search..."><br>
    <button data-ng-click="cards.load()">Load it up</button>
    <div class="uploadMessage" data-ng-show="deleteMessage">
        {{message}}
    </div>
    <div class="showCart" data-ng-show="currentCart">
        Current Cart
        <ul>
            <li data-ng-repeat="cartDisplay in cartDisplays">
                {{ cartDisplay.cardName }} {{ cartDisplay.cardPrice | currency }}
            </li>
        </ul>

    </div>
    <main>
        <table>
            <caption>Available Cards</caption>
            <thead>
                <tr>
                    <th><a href="" data-ng-click="predicate='cardName'; reverse=!reverse">Name</a></th>
                    <th>Rare</th>
                    <th>Color</th>
                    <th>Set</th>
                    <th><a href="" data-ng-click="predicate='cardQty'; reverse=!reverse">QTY</a></th>
                    <th>Price</th>
                    <th>Remove</th>
                    <th>Edit</th>
                    <th>Add</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="card in cards |
                        filter:query |
                        orderBy:predicate:reverse">
                    <td>{{ card.cardName }}</td>
                    <td>{{ card.cardRare }}</td>
                    <td>{{ card.cardColor }}</td>
                    <td>{{ card.cardSet }}</td>
                    <td>{{ card.cardQty }}</td>
                    <td>{{ card.cardPrice | currency }}</td>
                    <td data-ng-click="deleteCard(card)"> X </td>
                    <td data-ng-click="editCard(card)">Edit</td>
                    <td data-ng-click="addCard(card)">Add</td>
                </tr>
            </tbody>
            <tfoot>
                <td colspan="9">
                    <div class="pagination">
                        <ul>
                            <li ng-class="prevPageDisabled()">
                                <a data-ng-click="prevPage()"><-- Prev</a>
                            </li>
                            <li data-ng-repeat="n in rnage()"
                                data-ng-class="{active: n == currentPage}"
                                data-ng-click="setPage(n)">
                                <a href="#">{{n+1}}</a>
                            </li>
                            <li data-ng-class="nextPageDisabled()">
                                <a href data-ng-click="nextPage()">Next --></a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tfoot>
        </table>

    </main>
</section>