import "./JobsSidebar.js"
import "./JobsGrid.js"

css(`
    jobs- {
        font-family: 'Bona';
    }

    jobs- input::placeholder {
        font-family: 'Bona Nova';
        font-size: 0.9em;
        color: var(--accent);
    }

    input[type="checkbox"] {
        appearance: none;        /* remove default style */
        -webkit-appearance: none;
        width: 1em;
        height: 1em;
        border: 1px solid var(--accent);
    }

    input[type="checkbox"]:checked {
        background-color: var(--red);
    }
`)

class Jobs extends Shadow {
    jobs = [
        {
            title: "Austin Chapter Lead",
            salary: "1% of Local Revenue",
            company: "Forum",
            city: "Austin",
            state: "TX"
        }
    ]

    render() {
        ZStack(() => {
            HStack(() => {
                JobsSidebar()
    
                JobsGrid(this.jobs)
            })
            .width(100, "%")
            .x(0).y(13, vh)

            HStack(() => {
                input("Search jobs... (Coming Soon!)", "45vw")
                    .attr({
                        "type": "text",
                        "disabled": "true"
                    })
                    .fontSize(1.1, em)
                    .paddingLeft(1.3, em)
                    .background("transparent")
                    .border("0.5px solid var(--divider)")
                    .outline("none")
                    .color("var(--accent)")
                    .opacity(0.5)
                    .borderRadius(10, px)
                    .background("grey")
                    .cursor("not-allowed")

                button("+ Add Job")
                    .width(7, em)
                    .marginLeft(1, em)
                    .borderRadius(10, px)
                    .background("transparent")
                    .border("0.3px solid var(--accent2)")
                    .color("var(--accent)")
                    .fontFamily("Bona Nova")
                    .onHover(function (hovering) {
                        if(hovering) {
                            this.style.background = "var(--green)"

                        } else {
                            this.style.background = "transparent"

                        }
                    })
                    .onClick((clicking) => {
                        console.log(this, "clicked")
                    })

            })
            .x(55, vw).y(4, vh)
            .position("absolute")
            .transform("translateX(-50%)")
        })
        .width(100, "%")
        .height(100, "%")
    }

    connectedCallback() {
        // Optional additional logic
    }
}

register(Jobs)