% layout 'default';

%= include 'moai/grid', content => begin
    % for my $product ( $items->@* ) {
        %= include 'moai/grid/col', size => '4', content => begin
            <div class="card h-100 <%= $product->{discontinued} ? 'bg-warning' : '' %>">
                <div class="card-body">
                    <h5 class="card-title"><%= $product->{product_name} %></h5>
                    <p class="card-text"><%= $product->{quantity_per_unit} %></p>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <strong>$<%= sprintf '%.02f', $product->{unit_price} %></strong>
                    %= link_to 'product.details', $product, ( class => 'btn btn-primary'), begin
                        More details
                    % end
                </div>
            </div>
        % end
    % }
% end

<div class="d-flex justify-content-between">
    %= include 'moai/pager', page_param => '$page'
    %= form_for current_route, ( class => 'form form-inline mb-3' ), begin
        %= $c->yancy->form->filter_for( products => 'product_name' )
        <button class="btn btn-primary">Search</button>
    % end
</div>