<?php
    $lib = "lib.dn-s.pw";
    $nocache = uniqid("no-cache-");

    $settings = (object) [
        "url"=>$_SERVER["HTTP_HOST"],
        "theme"=>"limpet-shell",
        "bg"=>"dark",
        "font"=>"google"
    ];

    $loadlist = json_encode([
        "css"=>[
            "https://{$lib}/load/css/default/yes/q?theme={$settings->theme}&bg={$settings->bg}&font={$settings->font}",
            "/load/css/page/{$nocache}"
        ],
        "js"=>[
            "https://{$lib}/load/js/lib/{$nocache}",
            "https://{$lib}/load/js/controls/{$nocache}",
            "/load/js/page/{$nocache}"
        ]
    ]);

    $test = json_encode([
        ["text"=>"Choice 1", "icon"=>"video", "value"=>"Choice 1 Watever shit"],
        ["text"=>"Choice 2", "icon"=>"user", "value"=>"Choice 2 Watever shit"],
        ["text"=>"Choice 3", "icon"=>"unlock", "value"=>"Choice 3 Watever shit"],
        ["text"=>"Choice 4", "icon"=>"trash", "value"=>"Choice 4 Watever shit"],
        ["text"=>"Choice 5", "icon"=>"question", "value"=>"Choice 5 Watever shit"],
        ["text"=>"Choice 6", "icon"=>"lock", "value"=>"Choice 6 Watever shit"]
    ], JSON_PRETTY_PRINT);

?>

<!DOCTYPE html>
<html>
<head>
    <title>Sandbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script type="application/json" id="page-settings"><?= json_encode($settings) ?></script>
    <script type="application/json" id="loadlist"><?= $loadlist ?></script>
    <script type="application/javascript" src="https://<?= $lib ?>/load/js/loadjs/<?= $nocache ?>"></script>
</head>
<body>
    <div id="overlay" data-c0d3r="overlay"></div>
    <div id="tabby" data-c0d3r="tabby" data-mode="normal">
        <div data-tab="HELP" data-icon="question" id="help"></div>
        <div data-tab="Carder Modes" data-icon="archive">
            <div id="grid" data-c0d3r="grid" data-root-layout="row" data-root-template="1fr 1fr 50px 1fr">
                <div data-layout="column" data-template="300px 1fr">
                    <div>
                        <div
                            id="files3"
                            data-c0d3r="filearea"
                            data-label="Drag files here or click to browse"
                            data-allowed="*/*">
                        </div>
                    </div>
                    <div data-layout="row" data-template="1fr 50px">
                        <div>
                            <div
                                id="file-list"
                                data-c0d3r="carder"
                                data-multi-select="true"
                                data-double-click="true"
                                data-context-menu="false"
                                data-carder-mode="filelist"
                                data-fullscreen="false">
                            </div>
                        </div>
                        <div style="padding-left: 5x; padding-right: 5px; display: flex; align-items: center; justify-content: flex-end; border-top: 1px solid gray;">
                            <div 
                                id="flDel"
                                data-c0d3r="button" 
                                data-bg-color="0.1" 
                                data-font-size="12pt" 
                                data-font-weight="300"
                                data-bg-hover="0.2"
                                data-bg-active="0.3"
                                data-icon="trash">
                                Delete</div>
                            <div 
                                id="flClear"
                                data-c0d3r="button" 
                                data-bg-color="0.1" 
                                data-font-size="12pt" 
                                data-font-weight="300"
                                data-bg-hover="0.2"
                                data-bg-active="0.3"
                                data-icon="trash">
                                Clear</div>
                        </div>
                    </div>
                </div>
                <div>
                    <div
                        id="browse"
                        data-c0d3r="carder"
                        data-url="/x/carder/browse"
                        data-path-gen="/x/carder/gen"
                        data-multi-select="true"
                        data-double-click="true"
                        data-context-menu="false"
                        data-zip-api="https://lib.dn-s.pw/api/zip"
                        data-carder-mode="browser"
                        data-fullscreen="false">
                    </div>
                </div>
                <div style="padding-left: 5x; padding-right: 5px; display: flex; align-items: center; justify-content: flex-end; border-top: 1px solid gray;">
                    <div 
                        id="brBack"
                        data-c0d3r="button" 
                        data-bg-color="0.1" 
                        data-font-size="12pt" 
                        data-font-weight="300"
                        data-bg-hover="0.2"
                        data-bg-active="0.3"
                        data-icon="back-arrow">
                        Back</div>
                    <div 
                        id="brDel"
                        data-c0d3r="button" 
                        data-bg-color="0.1" 
                        data-font-size="12pt" 
                        data-font-weight="300"
                        data-bg-hover="0.2"
                        data-bg-active="0.3"
                        data-icon="trash">
                        Delete</div>
                    <div 
                        id="brClear"
                        data-c0d3r="button" 
                        data-bg-color="0.1" 
                        data-font-size="12pt" 
                        data-font-weight="300"
                        data-bg-hover="0.2"
                        data-bg-active="0.3"
                        data-icon="trash">
                        Clear</div>
                    <div 
                        id="brDownload"
                        data-c0d3r="button" 
                        data-bg-color="0.1" 
                        data-font-size="12pt" 
                        data-font-weight="300"
                        data-bg-hover="0.2"
                        data-bg-active="0.3"
                        data-icon="download">
                        Download</div>
                </div>
                <div>
                    <div
                        id="json-list"
                        data-c0d3r="carder"
                        data-multi-select="true"
                        data-double-click="true"
                        data-context-menu="false"
                        data-carder-mode="json"
                        data-fullscreen="false">
                    </div>
                </div>
            </div>
        </div>
        <div data-tab="Inputs" data-icon="archive">
            <div id="name" 
                data-c0d3r="input" 
                data-label="Name" 
                data-mode="text" 
                data-accepts="string" 
                data-required="true" 
                data-error="Field is required" 
                data-memory="true"></div>
            <div id="email" 
                data-c0d3r="input" 
                data-label="Email" 
                data-mode="text" 
                data-accepts="string" 
                data-regex="email" 
                data-required="true" 
                data-error="Field is required"></div>
            <div id="quantity" 
                data-c0d3r="input" 
                data-label="Quantity" 
                data-mode="text" 
                data-accepts="number" 
                data-required="true" 
                data-error="Field is required"></div>
            <div id="cost" 
                data-c0d3r="input" 
                data-label="Cost" 
                data-mode="text" 
                data-accepts="money" 
                data-required="true" 
                data-error="Field is required"></div>
            <div id="choices1" 
                data-c0d3r="input" 
                data-label="Choices" 
                data-mode="combo" 
                data-accepts="single" 
                data-required="true" 
                data-error="Field is required" 
                data-required="true" 
                data-popup-height="150px">
                <?= $test ?>
            </div>
            <div id="choices2" 
                data-c0d3r="input" 
                data-label="Choices" 
                data-mode="combo" 
                data-accepts="multiple" 
                data-required="false" 
                data-error="Field is required" 
                data-required="true" 
                data-popup-height="150px" 
                data-src="/x/sample/combo"></div>
            <div id="pb1" 
                data-c0d3r="progressbar"
                data-label="Installation"
                data-mode="temp"></div>
            <div id="pb2" 
                data-c0d3r="progressbar"
                data-label="Installation"
                data-mode="progress"></div>
            <div id="pb3" 
                data-c0d3r="progressbar"
                data-label="Installation"
                data-mode="normal"
                data-default-color="yellow"></div>
        </div>
        <div data-tab="Youtube" data-icon="archive">
            <div id="grid" data-c0d3r="grid" data-root-layout="row" data-root-template="50px 1fr">
                <div>
                    <div id="search" 
                        data-c0d3r="input" 
                        data-label="Search" 
                        data-mode="text" 
                        data-accepts="string" 
                        data-required="false" 
                        data-error="Search cannot be empty" 
                        data-memory="true"></div>
                </div>
                <div>
                    <div
                        id="yt-list"
                        data-c0d3r="carder"
                        data-multi-select="false"
                        data-double-click="true"
                        data-context-menu="false"
                        data-carder-mode="json"
                        data-fullscreen="false">
                    </div>
                </div>
            </div>
        </div>
        <div data-tab="Overlay, Buttons & Group" data-icon="archive">
            <div id="grid" data-c0d3r="grid" data-root-layout="row" data-root-template="50px 1fr">
                <div style="padding-left: 5x; padding-right: 5px; display: flex; align-items: center; justify-content: flex-end;">
                    <div 
                        id="btTest1"
                        data-c0d3r="button" 
                        data-bg-color="0.1" 
                        data-font-size="12pt" 
                        data-font-weight="300"
                        data-bg-hover="0.2"
                        data-bg-active="0.3">
                        Normal No Icon</div>
                    <div 
                        id="btTest2"
                        data-c0d3r="button" 
                        data-bg-color="0.1" 
                        data-font-size="12pt" 
                        data-font-weight="300"
                        data-bg-hover="0.2"
                        data-bg-active="0.3"
                        data-icon="user">
                        With Icon</div>
                    <div 
                        id="btTest3"
                        data-c0d3r="button" 
                        data-bg-color="0.1" 
                        data-font-size="12pt" 
                        data-font-weight="300"
                        data-bg-hover="0.2"
                        data-bg-active="0.3"
                        data-icon="home">
                        </div>
                    <div 
                        id="btTest4"
                        data-c0d3r="button" 
                        data-bg-color="0.1" 
                        data-font-size="12pt" 
                        data-font-weight="300"
                        data-bg-hover="0.2"
                        data-bg-active="0.3"
                        data-icon="asterisk">
                        Open Alert</div>
                    <div 
                        id="btTest5"
                        data-c0d3r="button" 
                        data-bg-color="0.1" 
                        data-font-size="12pt" 
                        data-font-weight="300"
                        data-bg-hover="0.2"
                        data-bg-active="0.3"
                        data-icon="asterisk">
                        Open Loader</div>
                </div>
                <div data-layout="column" data-template="1fr 1fr 1fr">
                    <div style="padding: 10px">
                        <div id="group1" data-c0d3r="group" data-icon="user" data-label="This is a group with no buttons">
                            <div
                                id="browse2"
                                data-c0d3r="carder"
                                data-url="/x/carder/browse"
                                data-path-gen="/x/carder/gen"
                                data-multi-select="true"
                                data-double-click="true"
                                data-context-menu="false"
                                data-zip-api="https://lib.dn-s.pw/api/zip"
                                data-carder-mode="browser"
                                data-fullscreen="false">
                            </div>
                        </div>
                    </div>
                    <div style="padding: 10px">
                        <div id="group2" data-c0d3r="group" data-icon="user" data-label="This is a group with buttons" data-buttons="true">
                            Test 123
                        </div>
                    </div>
                    <div style="padding: 10px">
                        <div id="group3" data-c0d3r="group" data-icon="user" data-label="This is a group with pager" data-pager="true">
                            <div>
                                <div id="test-name" 
                                    data-c0d3r="input" 
                                    data-label="Name" 
                                    data-mode="text" 
                                    data-accepts="string" 
                                    data-required="true" 
                                    data-error="Field is required" 
                                    data-memory="true"></div>
                            </div>
                            <div>
                                <div id="test-email" 
                                    data-c0d3r="input" 
                                    data-label="Email" 
                                    data-mode="text" 
                                    data-accepts="string" 
                                    data-regex="email" 
                                    data-required="true" 
                                    data-error="Field is required"></div>
                            </div>
                            <div>
                                <div id="test-address" 
                                    data-c0d3r="input" 
                                    data-label="Address" 
                                    data-mode="text" 
                                    data-accepts="string" 
                                    data-required="true" 
                                    data-error="Field is required" 
                                    data-memory="true"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div data-tab="main.php" data-icon="archive">
            <div id="grid" data-c0d3r="grid" data-root-layout="column" data-root-template="1fr">
                <div style="padding: 10px">
                    <div id="srcCode1" data-c0d3r="group" data-icon="html" data-label="HTML: main.php">
                        <iframe 
                            style="border:0; width:100%; height: 99%; overflow:hidden; scrollbar-width:none; -ms-overflow-style:none;" 
                            scrolling="no" 
                            src="https://sandbox.c0d3r.pw/get/sourcecode/root/php/main">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
        <div data-tab="page.js" data-icon="archive">
            <div id="grid" data-c0d3r="grid" data-root-layout="column" data-root-template="1fr">
                <div style="padding: 10px">
                    <div id="srcCode1" data-c0d3r="group" data-icon="javascript" data-label="script: page.js">
                        <iframe 
                            style="border:0; width:100%; height: 99%; overflow:hidden; scrollbar-width:none; -ms-overflow-style:none;" 
                            scrolling="no" 
                            src="https://sandbox.c0d3r.pw/get/sourcecode/scripts/js/page">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>