<!DOCTYPE html>
<html lang="en">
<head>
    <title>Umbraco Canvas Designer</title>
    <link href="../assets/css/canvasdesigner.css" type="text/css" rel="stylesheet" />
    <link href="../lib/spectrum/spectrum.css" type="text/css" rel="stylesheet" />
    <link href="../lib/jquery-ui/jquery-ui-1.10.4.custom.min.css" type="text/css" rel="stylesheet" />
</head>

<body id="canvasdesignerPanel" ng-mouseover="outlinePositionHide()" ng-class="{ leftOpen: (showStyleEditor || showPalettePicker) && !showDevicesPreview }" ng-controller="Umbraco.canvasdesignerController">

    <div class="wait" ng-show="!frameLoaded"></div>

    <div id="demo-iframe-wrapper" ng-show="frameLoaded" class="{{previewDevice.css}}">
        <iframe id="resultFrame" ng-src="{{pageUrl}}" frameborder="0" iframe-is-loaded></iframe>
    </div>

    <div class="canvasdesigner" ng-init="showDevicesPreview = true; showPalettePicker = true" ng-mouseenter="positionSelectedHide()">

        <div class="fix-left-menu selected">

            <div class="avatar">
                <img
                    ng-src="../assets/img/application/logo.png"
                    ng-srcset="../assets/img/application/logo@2x.png 2x, 
                    ../assets/img/application/logo@3x.png 3x" />
            </div>

            <ul class="sections" ng-class="{selected: showDevicesPreview}">
                <li ng-repeat="device in devices" ng-class="{ current:previewDevice==device }" ng-click="updatePreviewDevice(device)">
                    <a href="#"><i class="icon {{device.icon}}" title="{{device.title}}"></i><span></span></a>
                </li>
                <li ng-click="closePreviewDevice()" ng-if="enableCanvasdesigner > 0">
                    <a href="" class="more-options">
                        <i></i>
                        <i></i>
                        <i></i>
                    </a>
                </li>
                <li ng-click="exitPreview()">
                    <a href="#" title="Exit Preview"><i class="icon icon-wrong"></i><span> </span></a>
                </li>                
            </ul>

            <ul class="sections" ng-class="{selected: !showDevicesPreview}" ng-if="enableCanvasdesigner > 0">
                <li ng-click="openPreviewDevice()">
                    <a href="#"><i class="icon {{previewDevice.icon}}"></i><span>Preview</span></a>
                </li>
                <li ng-click="openPalettePicker()" ng-class=" { current:showPalettePicker }">
                    <a href="#"><i class="icon icon-palette"></i><span>Palette</span></a>
                </li>
                <li ng-click="openStyleEditor()" ng-class=" { current:showStyleEditor }">
                    <a href="#"><i class="icon icon-paint-roller"></i><span>UI Designer</span></a>
                </li>
            </ul>

        </div>

        <div class="main-panel" ng-class="{selected: !showDevicesPreview && ( showPalettePicker || showStyleEditor )}">

            <div class="header">
                <h3>Palette Style</h3>
            </div>

            <div class="content">
                <ul class="samples">
                    <li ng-repeat="palette in canvasdesignerPalette">
                        <a href="#" ng-click="refreshCanvasdesignerByPalette(palette)">
                            <h4>{{palette.name}}</h4>
                            <ul class="samples">
                                <li style="background-color:{{palette.color1}}"></li>
                                <li style="background-color:{{palette.color2}}"></li>
                                <li style="background-color:{{palette.color3}}"></li>
                                <li style="background-color:{{palette.color4}}"></li>
                                <li style="background-color:{{palette.color5}}"></li>
                            </ul>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="btn-group">
                <a class="btn btn-success" ng-click="saveStyle()">Save Style</a>
                <a class="btn btn-success dropdown-toggle" ng-click="opendropdown = !opendropdown">
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" ng-init="opendropdown = false" ng-show="opendropdown">
                    <li><a ng-click="createStyle();opendropdown = false">Create Page Style</a></li>
                    <li><a ng-click="deleteCanvasdesigner();opendropdown = false">Reset page style</a></li>
                    <li><a ng-click="makePreset();opendropdown = false">Make preset</a></li>
                </ul>
            </div>

        </div>

        <div class="main-panel" ng-class="{selected: !showDevicesPreview && showStyleEditor}">

            <div ng-show="!currentSelected">
                <div class="header">
                    <h3>Select</h3>
                </div>
                <div class="content">
                    <ul class="samples">
                        <li ng-repeat="configItem in canvasdesignerModel.configs"
                            ng-mousemove="refreshOutlinePosition(configItem)"
                            ng-class="{hover: configItem.highlighted == true}"
                            ng-mouseenter="setCurrentHighlighted(configItem)"
                            ng-mouseleave="configItem.highlighted = false"
                            ng-click="setCurrentSelected(configItem)">
                            {{configItem.name}}
                        </li>
                    </ul>
                </div>
            </div>

            <div ng-repeat="configItem in canvasdesignerModel.configs" ng-show="currentSelected && currentSelected.name.toLowerCase() == configItem.name.toLowerCase()
                 && currentSelected.schema.toLowerCase() == configItem.schema.toLowerCase()" on-finish-render-filters>
                <div class="header">
                    <h3><i class="icon icon-list" ng-click="outlineSelectedHide()"></i> {{configItem.name}}</h3>
                </div>
                <div class="content">
                    <div class="editor-category" ng-repeat="category in getCategories(configItem)" ng-show="hasEditor(configItem.editors, category)">
                        <h4 class="panel-title" ng-click="setSelectedCategory(category)">
                            {{category}}
                            <i class="icon icon-remove small right" ng-show="categoriesVisibility[category] === true"></i>
                            <i class="icon icon-add small right" ng-hide="categoriesVisibility[category] === true"></i>
                        </h4>
                        <div class="canvasdesigner-panel-container" ng-show="categoriesVisibility[category] === true">
                            <div class="canvasdesigner-panel-property" ng-repeat="item in configItem.editors" ng-show="item.category == category">
                                <h5>{{item.name}} <i class="icon icon-help-alt"></i></h5>
                                <div ng-include="'../preview/editors/' + item.type + '.html'"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="btn-group">
                <a class="btn btn-success" ng-click="saveStyle()">Save Style</a>
                <a class="btn btn-success dropdown-toggle" ng-click="opendropdown = !opendropdown">
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" ng-init="opendropdown = false" ng-show="opendropdown">
                    <li><a ng-click="createStyle();opendropdown = false">Create Page Style</a></li>
                    <li><a ng-click="deleteCanvasdesigner();opendropdown = false">Reset page style</a></li>
                    <li><a ng-click="makePreset();opendropdown = false">Make preset</a></li>
                </ul>
            </div>

        </div>

        <div class="float-panel"></div>

    </div>

    <div id="speechbubble">
        <p>Styles saved and published</p>
    </div>

    <script src="../lib/rgrove-lazyload/lazyload.js"></script>
    <script src="../js/canvasdesigner.loader.js"></script>

</body>

</html>
