class SignIn extends Shadow {

    inputStyles(el) {
        return el
            .color("var(--accent)")
            .border("1px solid var(--accent)")
    }

    render() {
        ZStack(() => {
            img("/_/icons/columnred.svg", window.isMobile() ? "5vmax" : "3vmax")
                .position("absolute")
                .top(2, em)
                .left(2, em)
                .onClick((done) => {
                    window.navigateTo("/")
                })

            form(() => {
                input("Email")
                    .attr({name: "email", type: "email"})
                    .margin(1, em)
                    .styles(this.inputStyles)
                input("Password")
                    .attr({name: "password", type: "password"})
                    .margin(1, em)
                    .styles(this.inputStyles)
                button("Submit")
                    .margin(1, em)
            })
            .attr({action: "/login", method: "POST"})
            .x(50, vw).y(50, vh)
            .center()
        })
    }
}

register(SignIn)