#extend("home"):
  #export("homeContent"):
  <div id="home-content" class="container" #if(oob): hx-swap-oob="outerHTML" #endif>
    <div class="container">
      <h1>Purchase Orders</h1>
      <br>
    </div>
    #extend("form-container"): #export("formContent"):
      #extend("purchaseOrders/form", form)
    #endexport #endextend
    <div class="float"
         id="po-detail"
         #if(purchaseOrderDetail):
         hx-get="/purchase-orders/#(purchaseOrderDetail.id)"
         hx-target="this"
         hx-trigger="load"
         hx-swap="outerHTML"
         #endif
         >
    </div>
    <div class="btn-row">
      #if(hasPrevious):
      <button hx-get="/purchase-orders?page=#(page - 1)&limit=#(limit)"
              hx-target="body"
              hx-swap="outerHTML"
              hx-push-url="true"
              style="float: left;"
              >
        &lsaquo; Previous
      </button>
      #endif
      #if(hasNext):
      <button hx-get="/purchase-orders?page=#(page + 1)&limit=#(limit)"
              hx-target="body"
              hx-swap="outerHTML"
              hx-push-url="true"
              style="float: right;"
              >
        Next &rsaquo;
      </button>
      #endif
    </div>
    #extend("purchaseOrders/table")
  </div>
  #endexport
#endextend