import Elementary
import ElementaryHTMX
import SharedModels

struct VendorBranchForm: HTML, Sendable {
  let vendorID: Vendor.ID

  var content: some HTML {
    form(
      .id(.branch(.form)),
      .hx.post(route: .vendorBranch(.index())),
      .hx.target(.id(.branch(.list))),
      .hx.swap(.beforeEnd),
      .hx.on(.afterRequest, .ifSuccessful(.resetForm))
    ) {
      input(.type(.hidden), .name("vendorID"), .value(vendorID.uuidString))
      input(
        .type(.text), .class("col-9"), .name("name"), .placeholder("Add branch..."), .required,
        // .hx.post(route: .vendorBranch(.index())),
        .hx.trigger(.event(.keyup).changed().delay("800ms")) // ,
        // .hx.target(.id(.branch(.list))),
        // .hx.swap(.beforeEnd),
        // .custom(name: "hx-on::after-request", value: "if(event.detail.successful) this.reset();")
      )
      button(
        .type(.submit),
        .class("btn-secondary"),
        .style("float: right; padding: 10px 50px;"),
        .hx.target(.id(.branch(.list))),
        .hx.swap(.beforeEnd)
      ) { "+" }
    }
  }
}