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(route: .employee(.form)),
                .hx.target(.id(.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(.row(id: employee.id)))) {
        td { employee.fullName }
        td {
          Button.detail()
            .attributes(
              .style("padding-left: 15px;"),
              .hx.get(route: .employee(.get(id: employee.id))),
              .hx.target(.id(.float)),
              .hx.pushURL(true),
              .hx.swap(.outerHTML.transition(true).swap("0.5s"))
            )
        }
      }
    }
  }
}