<div class="input-group">
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-search"></i> Search
        </span>
        <input
            type="text"
            class="form-control"
            data-bind="textInput:searchTerm"
        />
    </div>
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Stock</th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach:catalog">
            <tr data-bind="style:lineColor">
                <td data-bind="text:name"></td>
                <td data-bind="text:price"></td>
                <td data-bind="text:stock"></td>
                <td>
                    <button
                        class="btn btn-primary"
                        data-bind="click:$parent.addToCart"
                    >
                        <i class="glyphicon glyphicon-plus-sign"></i> Add
                    </button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">
                    <strong>Items:</strong
                    ><span data-bind="text:catalog().length"></span>
                </td>
                <td colspan="1">
                    <span data-bind="template:{name: 'cart-widget'}"></span>
                </td>
            </tr>
        </tfoot>
    </table>