WebIndex.swift

import Html
import Vapor
import VaporRouting

struct WebIndex {

    var title: String
    var rootRouter: RootRouterKey.Value

    public init(
        title: String,
        rootRouter: RootRouterKey.Value
    ) {
        self.title = title
        self.rootRouter = rootRouter
    }

    func layout() -> Node {
      return [
        .doctype,
        .html(
          .head(
            .title(title),

            // You can include inline stylesheets
            .style(safe: stylesheet),

            .meta(attributes: [.charset(.init(rawValue: "utf-8"))]),
            .meta(name: "viewport", content: "width=device-width, initial-scale=1"),

            // Or link to external stylesheets
            .link(
                attributes: [
                    .href("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"),
                    .rel(.init(rawValue: "stylesheet")),
                    .init("integrity", "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"),
                    
                    .crossorigin(.anonymous),
                ]
            )
          ),
          .body(
            header(),
            main(),
            footer,
            // Load external scripts at the bottom of the document.
            .script(
                attributes: [
                    .src("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"),
                    .init("integrity", "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"),
                    .crossorigin(.anonymous),
                ]
            )
          )
        )
      ]
    }

    func main() -> Node {
        .main(
            .div(
                attributes: [.class("container mt-3")],
                .fragment(
                    [
                        
                        .h1(attributes: [.style(safe: "color: purple")],"TrustBird "),
                        .h5("Is a unique and catchy!"),
                        .hr,
                        .ul(attributes: [],
                            .li(.h5(attributes: [.style(safe: "color:red")], "Secure access for all, except for malicious actors")),
                            .li(.h5(attributes: [.style(safe: "color:blue")], "Providing secure access to everyone—except those with malicious intent.")),
                            .li(.h5(attributes: [.style(safe: "color:green")], "Universal secure access, with safeguards against bad actors.")),
                            .li(.h5(attributes: [.style(safe: "color:orange")], "Secure access designed for everyone, but fortified against malicious actors.")),
                            .li(.h5(attributes: [.style(safe: "color:purple")], "Everyone deserves secure access, except for those with harmful intentions."))
                        ),
                        .hr,
                        .h5("It combines the idea of trust (which is fundamental to authentication services) with bird, suggesting freedom, agility, and possibly a bird's-eye view on security. Great choice!"),
                    ]
                )
            )
        )
    }

    func header() -> Node {
//        let dynamicLiList = WebRoute.allCases.map { route -> ChildOf<Tag.Ul> in
//            return .li(
//                .a(attributes: [Attribute<Tag.A>.href("/\(route.link)")], "\(route.rawValue.capitalized )")
//            )
//        }

        return [
            .header(
                attributes: [.class("p-3 mb-3 border-bottom")],
                .div(
                    attributes: [.class("container")],
                    .div(
                        attributes: [.class("d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start")],
                        .a(
                            attributes: [
                                .href("/home"),
                                .class("d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none"),
                            ],
                            .img(
                                attributes: [
                                    .src("/images/trust_bird.jpg"),
                                    .alt("logo"),
                                    .class("bi me-2"),
                                    .width(.px(40)),
                                    .height(.px(32)),
                                ]
                            )
                        ),
                        .ul(
                            attributes: [.class("nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0")],
                            .li(
                                .a(
                                    attributes: [
                                        .href("/home"),
                                        .class("nav-link px-2 link-secondary"),
                                    ], "Trust Bird"
                                )
                            )
                        ),
                        .div(
                            attributes: [.class("dropdown text-end")],
                            .div(
                                attributes: [.class("text-end")],
                                modalFormLogin()
                            )
                        )
                    )
                )
            )
        ]

//        return [
//            .header(
//                .h1("Trust Bird"),
//                .blockquote(
//                    "Its Open source project for make Developer live more easy buy using reusable auth featueas ",
//                    .a(
//                        attributes: [Attribute<Tag.A>.href("https:addame.com")],
//                        "Addame"
//                    )
//                ),
//                .ul(
//                    attributes: [],
//                    .li(.a(attributes: [.href("/")], "Home"))
//                )
//            )

//        ]
    }

    // A node that represents the footer to use on each page.
    let footer: Node = [
      .hr,
      .footer(
        .div(
            attributes: [.class("container mt-3")],
            .text("© 2023 Addame, Inc.")
        )
      )
    ]

}

let stylesheet: StaticString = """
body {
  padding: 0.5rem;
  line-height: 1.35;
  font-family: SanFranciscoDisplay-Regular;
}

blockquote {
  border-left: 2px #777 solid;
  font-style: italic;
  color: #777;
  margin-left: 1rem;
  padding-left: 0.5rem;
}

pre {
  background-color: #f3f3f3;
  padding: 0.5rem;
  overflow-x: scroll;
}

code {
  background-color: #f3f3f3;
  padding: 0.25rem;
}

li:not(:last-child) {
    margin-bottom: 0.25rem;
}

h2 {
  margin-top: 2rem;
  margin-bottom: 0;
}
"""

func modalFormLogin() -> Node {
    // how do i update my swift model values from input
    var emailLoginInput = EmailLoginInput(name: "", email: "")
    return [
        .div(
            attributes: [
                .class("modal fade"),
                .id("exampleModalToggle"),
                .ariaLabelledby("exampleModalToggleLabel"),
                .tabindex(-1),
                .init("style", "display: none"),
                .ariaHidden(.true),
            ],
            .div(
                attributes: [.class("modal-dialog modal-dialog-centered")],
                .div(
                    attributes: [.class("modal-content")],
                    .div(
                        attributes: [.class("modal-header")],
                        .h1(
                            attributes: [
                                .class("modal-title fs-5"),
                                .id("exampleModalToggleLabel"),
                            ], "Login"
                        ),
                        .button(
                            attributes: [
                                .type(.button),
                                .class("btn-close"),
                                .init("data-bs-dismiss", "modal"),
                                .ariaLabel("Close"),
                            ]
                        )
                    ),
                    .div(
                        attributes: [.class("modal-body")],
                        .form(
                            .div(
                                attributes: [.class("mb-3")],
                                .label(
                                    attributes: [
                                        .for("name"),
                                        .class("col-form-label"),
                                    ], "Name:"
                                ),
                                .input(
                                    attributes: [
                                        .type(.text), // HERE update my value
                                        .class("form-control"),
                                        .id("name"),
                                    ]
                                )
                            ),
                            .div(
                                attributes: [.class("mb-3")],
                                .label(
                                    attributes: [
                                        .for("message-text"),
                                        .class("col-form-label"),
                                    ], "Email:"
                                ),
                                .input(
                                    attributes: [
                                        .type(.text),
                                        .class("form-control"),
                                        .id("email"),
                                    ]
                                )
                            )
                        )
                    ),
                    .div(
                        attributes: [.class("modal-footer")],
                        .button(
                            attributes: [
                                .class("btn btn-primary"),
                                .init("data-bs-target", ###"#exampleModalToggle2"###),
                                .init("data-bs-toggle", "modal"),
                            ], "Sned 👉🏼"
                        )
                    )
                )
            )
        ),
        .div(
            attributes: [
                .class("modal fade"),
                .id("exampleModalToggle2"),
                .ariaLabelledby("exampleModalToggleLabel2"),
                .tabindex(-1),
                .init("style", "display: none"),
                .ariaHidden(.true),
            ],
            .div(
                attributes: [.class("modal-dialog modal-dialog-centered")],
                .div(
                    attributes: [.class("modal-content")],
                    .div(
                        attributes: [.class("modal-header")],
                        .h1(
                            attributes: [
                                .class("modal-title fs-5"),
                                .id("exampleModalToggleLabel2"),
                            ], "OTP Verification"
                        ),
                        .button(
                            attributes: [
                                .type(.button),
                                .class("btn-close"),
                                .init("data-bs-dismiss", "modal"),
                                .ariaLabel("Close"),
                            ]
                        )
                    ),
                    .div(
                        attributes: [.class("modal-body")],
                        .form(
                            .div(
                                attributes: [.class("mb-3")],
                                .label(
                                    attributes: [
                                        .for("otp"),
                                        .class("col-form-label"),
                                    ], "Input Your One Time Passwird"
                                ),
                                .input(
                                    attributes: [
                                        .type(.text),
                                        .class("form-control"),
                                        .id("otp-name"),
                                    ]
                                )
                            )
                        )
                    ),
                    .div(
                        attributes: [.class("modal-footer")],
                        .button(
                            attributes: [
                                .class("btn btn-primary"),
                                .init("data-bs-target", ###"no more modal"###),
                                .init("data-bs-toggle", "modal"),
                            ], "Verify"
                        )
                    )
                )
            )
        ),
        .a(
            attributes: [
                .class("btn btn-primary"),
                .init("data-bs-toggle", "modal"),
                .href(###"#exampleModalToggle"###),
                .init("role", "button"),
            ], "Login or Register"
        )

    ]
}