<!DOCTYPE html>
<html>

<head>
    <title>Panel 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 p1 = Panel.getInstance();
                p1.properties.classes = "col-sm-3";
                p1.properties.heading = "programmatic";
                p1.properties.footer = "it works";
                //p1.model = p1;

                p1.defaultView.append();
                //p1.itemView.append();
                p1.name = "My name is: programmaticPanel";


                var panelViews = UcpComponentSupport.getAllUcpViews();
                var panels = panelViews.map((pv) => {
                    return pv.ucpComponent;
                });

                panels[0].add(panels[0].itemView);
                //panels[1].add(panels[0].overView);
                var p = panels[0];
                var pdv = p.datailsView;

                panels[2].add(pdv);

            }
            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">
    <style type="text/css">
        html,
        body {
            height: 100%;
        }
        
        .fullHeight,
        .fullHeight .jumbotron {
            height: 100%;
        }
        
        header,
        footer,
        .panel-heading,
        .panel-footer {
            height: 10%;
            background-color: lightblue;
        }
        
        .content,
        .panel-body {
            height: 80%;
            overflow-y: scroll
        }
        
        .overflow-hidden {
            overflow: hidden
        }
        
        .drop-target {
            background-color: #29e;
            border-color: #fff;
            border-style: solid;
        }
        
        .zeroPadding {
            padding: 0px !important;
        }
    </style>
</head>


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