import "./AppWindow.js"
import "./AppMenu.js"
import "./ProfileButton.js"
import "./InputBox.js"
import "./Sidebar.js"

css(`
    #divider.minimized {
        display: none;
    }
`)
    
class Home extends Shadow {

    render() {
        ZStack(() => {
            div()
                .width(100, vw)
                .height(100, vh)
                .margin("0px")
                .backgroundImage("url('_/images/the_return.webp')")
                .backgroundSize("cover")
                .backgroundPosition("48% 65%")
                .backgroundRepeat("no-repeat")

                AppWindow()

                ProfileButton()
                    .zIndex(1)
                    .cursor("default")
                    .position("fixed")
                    .top("5.5vh")
                    .right("4.5vw")

                img("_/icons/logo.svg", "3.5em")
                    .position("fixed")
                    .left("3em")
                    .top("2em")

                a("/signout", "Sign Out")
                    .position("fixed")
                    .top("2em")
                    .right("2em")
                    .background("var(--tan)")
                    .color("var(--red)")
                    .borderRadius(5, px)

                AppMenu()

                img("_/images/divider.svg", "40vw")
                    .attr({"id": "divider"})
                    .position("fixed")
                    .bottom("2em")
                    .left("50vw")
                    .transform("translateX(-50%)")
        })

    }
}

registerShadow(Home)