import Elementary
import ElementaryHTMX
import SharedModels

struct VendorTable: HTML, Sendable {
  let vendors: [Vendor]

  var content: some HTML {
    table {
      thead {
        tr {
          th { "Name" }
          th { "Branches" }
          th(.style("width: 100px;")) {
            Button.add()
              .attributes(
                .style("padding: 0px 10px;"),
                .hx.get(route: .vendor(.form)),
                .hx.target(.id(.float)),
                .hx.swap(.outerHTML)
              )
          }
        }
      }
      tbody(.id("vendor-table")) {
        for vendor in vendors {
          Row(vendor: vendor)
        }
      }
    }
  }

  struct Row: HTML, Sendable {
    let vendor: Vendor

    var content: some HTML<HTMLTag.tr> {
      tr(.id(.vendor(.row(id: vendor.id)))) {
        td { vendor.name.capitalized }
        td { "(\(vendor.branches?.count ?? 0)) Branches" }
        td {
          Button.detail()
            .attributes(
              .style("padding-left: 15px;"),
              .hx.get(route: .vendor(.get(id: vendor.id))),
              .hx.target(.id(.float)),
              .hx.pushURL(true),
              .hx.swap(.outerHTML)
            )
        }
      }
    }
  }
}