<!DOCTYPE html>
<html>

<head>
    <title>TapPanel Test Page 1.0.0</title>
    <meta charset="utf-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">

    <script>
        class App {
            static get implements() {
                return [];
            };
            static start() {
                window["app"] = new App();
                app.models = [];
                ONCE.eventSupport.addEventListener("newInstance", app, app.newInstance.bind(app));
                var tabPanelViews = UcpComponentSupport.getAllUcpViews();

                var testPanel = Panel.getInstance().init();
                testPanel.heading = "Cool Panel";
                tabPanelViews[0].add(testPanel);

            }
            static init() {
                console.debug("start loading App components...");
                return "start loading App components...";
            }

            newInstance(event, thing) {
                app.models.push(thing);
            }
        }
    </script>
    <script src="/EAMD.ucp/Components/tla/EAM/layer1/Thinglish/Once/1.0.0/src/js/Once.class.js" type="text/javascript"></script>
    <link href="/EAMD.ucp/Components/com/twitter/Bootstrap/Panel/1.0.0/Panel.component.xml" rel="ucpComponent" type="text/html">
    <link href="/EAMD.ucp/Components/com/twitter/Bootstrap/TabPanel/1.0.0/TabPanel.component.xml" rel="ucpComponent" type="text/html">
    <style>
        html,
        body {
            height: 100%;
        }
        
        .fullHeight,
        .fullHeight .jumbotron {
            height: 100%;
        }
    </style>
</head>


<body>
    <div data-is="bootstrap-tab-panel" heading="Declarative with heading Attribute" css-classes="col-sm-6"></div>
    <div data-is="bootstrap-tab-panel" data-properties='{"heading":"Declarative data properties TAG div x-panel","footer":"unleash the power ","cssClasses":"col-sm-6 fullHeight"}' style="
               .panel-body {
                   overflow: hidden
               }
               ">
    </div>
    <x-tab-panel data-properties='{"heading":"Declarative TAG x-panel","footer":"unleash the power ","classes":"col-sm-3 fullHeight"}' style="
               .panel-body {
                   overflow: hidden
               }
               ">
    </x-tab-panel>
    <bootstrap-panel data-properties='{"heading":"Declarative TAG bootstrap-panel","footer":"unleash the power ","classes":"col-sm-3 fullHeight"}' style="
               .panel-body {
                   overflow: hidden
               }
               ">
    </bootstrap-panel>

</body>

</html>