Administering the product catalog

Now that the basic structure is in place, it is time to start adding features. Create a file named area_buttons.handlebars in the templates/admin folder with the content shown in Listing 20.12.

Listing 20.12: The contents of the area_buttons.handlebars file in the templates/admin folder

<swap_wrapper hx-swap-oob="innerHTML:#area_buttons">
    <div class="d-grid gap-2" >
        <button id="products_btn" class="btn {{ buttonClass "products" mode }}"
            hx-get="/api/products/table" hx-target="#content">
            Products
        </button>
        <button id="orders_btn" class="btn {{ buttonClass "orders" mode }}"
            hx-get="/api/orders/table" hx-target="#content">
            Orders
        </button>
    </div>
</swap_wrapper>

This template contains...