import DatabaseClient
import Dependencies
import Elementary
import ElementaryHTMX
import SharedModels

struct UserTable: HTML {

  @Dependency(\.database.users.fetchAll) var fetchAll

  var content: some HTML {
    table(.id("user-table")) {
      thead {
        tr {
          th { "Username" }
          th { "Email" }
          th(.style("width: 50px;")) { ToggleFormButton() }
        }
      }
      tbody {
        let users = try await fetchAll()
        for user in users {
          Row(user: user)
        }
      }
    }
  }

  struct Row: HTML {
    let user: User

    var content: some HTML<HTMLTag.tr> {
      tr {
        td { user.username }
        td { user.email }
        td {
          button(
            .hx.get("/users/\(user.id.uuidString)"),
            .hx.target("#float"),
            .hx.swap(.outerHTML),
            .class("btn-detail")
          ) {
            "〉"
          }
        }
      }
    }
  }
}