class People extends Shadow {
    render() {
        VStack(() => {
            h1("Members")
                .fontWeight("bold")
                .marginBottom(2, em)
                .marginLeft(2, em)

            VStack(() => {
                VStack(() => {
                    p("Officers")
                    .marginBottom(2, vh)
                    .marginLeft(4, em)
                    .fontStyle("italic")
        
                    ZStack(() => {
                        new gridjs.Grid({
                            columns: ["Name", "Email"],
                            data: global.currentNetwork.data.members.map(m => [
                                m.first_name + " " + m.last_name,
                                m.email
                            ]),
                            sort: true,
                            search: true,
                            style: {
                                table: {
                                    'background-color': 'var(--window)',
                                    'color': 'var(--accent)',
                                    'box-shadow': 'none',
                                    'font-size': '0.9em',
                                    'max-width': '90%'
                                },
                                th: {
                                    'background-color': 'var(--window)',
                                    'color': 'var(--accent)',
                                    'border': 'none',
                                },
                                td: {
                                    'background-color': 'var(--window)',
                                    'color': 'var(--accent)',
                                    'border': 'none',
                                    'border-bottom': '1px solid var(--divider)'
                                }
                            }
                        }).render(quill.rendering.last)
                    })
                    .overflow("hidden")
                })
                .gap(0.5, em)

                VStack(() => {
                    p("Stripe Subscribers")
                    .marginBottom(2, vh)
                    .marginLeft(4, em)
                    .fontStyle("italic")
        
                    ZStack(() => {
                        new gridjs.Grid({
                            columns: ["Amount", "Name", "Email", "Phone", "County", "Created"],
                            data: global.currentNetwork.data.stripeMembers.map(m => [
                                "$" + m.subscriptions[0].amount,
                                m.name,
                                m.email,
                                m.phone,
                                m.city,
                                new Date(m.created * 1000).toLocaleString('en-US', {
                                    timeZone: 'America/Chicago',
                                    hour: 'numeric',
                                    minute: '2-digit',
                                    month: 'numeric',
                                    day: 'numeric',
                                    year: 'numeric'
                                })
                            ]),
                            sort: true,
                            search: true,
                            style: {
                                input: {
                                    'background-color': 'var(--window)',
                                },
                                table: {
                                    'background-color': 'var(--window)',
                                    'color': 'var(--accent)',
                                    'box-shadow': 'none',
                                    'font-size': '0.9em',
                                    'max-width': '90%'
                                },
                                th: {
                                    'background-color': 'var(--window)',
                                    'color': 'var(--accent)',
                                    'border': 'none',
                                },
                                td: {
                                    'background-color': 'var(--window)',
                                    'color': 'var(--accent)',
                                    'border': 'none',
                                    'border-bottom': '1px solid var(--divider)'
                                }
                            }
                        }).render(quill.rendering.last)

                        css(`
                            input.gridjs-input {
                                background-color: var(--window);
                                color: var(--accent);
                                border: none;
                                border-bottom: 1px solid var(--divider);
                                border-radius: 0;
                                margin-left: 4em
                            }

                            .gridjs-wrapper {
                                box-shadow: none;
                                padding-left: 3em;
                            }
                        `)
                    })
                    .marginBottom(3, em)
                })
                .gap(0.5, em)
            })
            .gap(4, em)
        })
        .gap(0.5, em)
        .paddingTop(4, pct)
        .width(100, pct)
        .height(100, pct);
    }
}

register(People)