class SignupForm extends Shadow {

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

    render() {
        ZStack(() => {
            form(() => {

                VStack(() => {

                    HStack(() => {
    
                        VStack(() => {
                            input("First Name")
                                .attr({name: "firstName", type: "name"})
                                .styles(this.inputStyles)
            
                            input("Last Name")
                                .attr({name: "lastName", type: "name"})
                                .styles(this.inputStyles)
            
                            input("Email")
                                .attr({name: "email", type: "email"})
                                .styles(this.inputStyles)
                                
                            input("Password")
                                .attr({name: "password", type: "password"})
                                .styles(this.inputStyles)
            
                            input("Confirm Password")
                                .attr({name: "password", type: "password"})
                                .styles(this.inputStyles)
                        })
                        .width(50, "%")
                        .gap(1, em)

                        VStack(() => {
                            input("Street Address")
                                .attr({ name: "address1", type: "text", autocomplete: "address-line1" })
                                .styles(this.inputStyles)
            
                            input("Apt, Suite, Unit (optional)")
                                .attr({ name: "address2", type: "text", autocomplete: "address-line2" })
                                .styles(this.inputStyles)
            
                            input("City")
                                .attr({ name: "city", type: "text", autocomplete: "address-level2" })
                                .styles(this.inputStyles)
            
                            input("State")
                                .attr({ name: "state", type: "text", autocomplete: "address-level1" })
                                .styles(this.inputStyles)
            
                            input("ZIP Code")
                                .attr({ name: "zip", type: "text", autocomplete: "postal-code" })
                                .styles(this.inputStyles)
            
                            input("Country")
                                .attr({ name: "country", type: "text", autocomplete: "country-name" })
                                .styles(this.inputStyles)
                        })
                        .width(50, "%")
                        .gap(1, em)
    
                    })
                    .gap(2, em)

                    button("Submit")
                })
                .gap(2, em)

                console.log(window.location.pathname)
            })
            .attr({action: window.location.pathname + window.location.search, method: "POST"})
            .x(50, vw).y(53, vh)
            .width(60, vw)
            .center()
        })
    }
}

register(SignupForm)