import Elementary
import ElementaryHTMX
import SharedModels

struct EmployeeTable: HTML {
  let employees: [Employee]

  var content: some HTML {
    table {
      thead {
        tr {
          th { "Name" }
          th(.style("width: 100px;")) {
            Button.add()
              .attributes(
                .style("padding: 0px 10px;"),
                .hx.get("/employees/create"),
                .hx.target("#float"),
                .hx.swap(.outerHTML.transition(true).swap("0.5s"))
              )
          }
        }
      }
      tbody(.id("employee-table")) {
        for employee in employees {
          Row(employee: employee)
        }
      }
    }
  }

  struct Row: HTML {
    let employee: Employee

    var content: some HTML {
      tr(.id("employee_\(employee.id)")) {
        td { "\(employee.firstName.capitalized) \(employee.lastName.capitalized)" }
        td {
          Button.detail()
            .attributes(
              .style("padding-left: 15px;"),
              .hx.get("/employees/\(employee.id)"),
              .hx.target("#float"),
              .hx.pushURL(true),
              .hx.swap(.outerHTML.transition(true).swap("0.5s"))
            )
        }
      }
    }
  }
}