import Elementary
import Routes

struct MoldRiskForm: HTML {

  var content: some HTML {
    div(.class("grid grid-cols-1 lg:grid-cols-12")) {
      div(.class("col-span-1")) {}
      div(.class("col-span-10 rounded-xl shadow-lg bg-slate-300 dark:bg-slate-700 p-8")) {
        div(.class("flex items-center gap-3 mb-6")) {
          SVG.thermometer
          h2(.class("text-2xl font-extrabold dark:text-white")) { "Mold Risk Calculator" }
        }
        form {
          div(.class("space-y-6")) {
            div {
              label(.for("temperature"), .class("block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2")) {
                "Indoor Temperature"
              }
              input(
                .type(.number), .id("temperature"), .placeholder("Dry bulb temperature"), .required,
                .step("0.1"), .min("0.1"),
                .class("""
                  w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-yellow-800
                  focus:border-yellow-800 text-gray-700 dark:text-white
                """)
              )
            }
            div {
              label(.for("humidity"), .class("block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2")) {
                "Indoor Humidity (%)"
              }
              input(
                .type(.number), .id("humidity"), .name("humidity"), .placeholder("Relative humidity"), .required,
                .step("0.1"), .min("0.1"),
                .class("""
                  w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-yellow-800
                  focus:border-yellow-800 text-gray-700 dark:text-white
                """)
              )
            }
            div {
              button(.type(.submit), .class("""
              w-full bg-\(Colors.blue) text-\(Colors.yellow) font-bold py-3 rounded-md hover:bg-blue-600
              transition-colors
              """)) {
                "Calculate Mold Risk"
              }
            }
          }
        }
        div(.class("col-span-1")) {}
      }
    }
  }
}