function self.ready() {
    centerize(800, 600);
}

class Install: Reactor.Component {
    function render() {
        return <div .content>
            <div style="font-size: 2em;">Installation</div>
            <div style="margin: 2em 0;">Installation Path: <input|text disabled value={view.install_path()} /></div>
            <div><button|checkbox #startmenu checked>Create start menu shortcuts</button></div>
            <div><button|checkbox #desktopicon checked>Create desktop icon</button></div>
            <div #aggrement .link style="margin-top: 2em;">End-user license agreement</div>
            <div>By starting the installation, you accept the license agreement.</div>
            <div style="height: 1px; background: gray; margin-top: 1em" />
            <div style="text-align: right;">
                <progress style={"color:" + color} style="display: none" /> 
                <button .button id="cancel" .outline style="margin-right: 2em;">Cancel</button>
                <button .button id="submit">Accept and Install</button>
            </div>
        </div>;
    }

    event click $(#cancel) {
        view.close();
    }

    event click $(#aggrement) {
        view.open_url("http://rustdesk.com/privacy");
    }

    event click $(#submit) {
        for (var el in $$(button)) el.state.disabled = true;
        $(progress).style.set{ display: "inline-block" };
        var args = "";
        if ($(#startmenu).value) {
            args += "startmenu ";
        }
        if ($(#desktopicon).value) {
            args += "desktopicon ";
        }
        view.install_me(args);
    }
}

$(body).content(<Install />);