@phoenix-plugin-registry/swmitra.html-designer/widgetprofiles/html/widget-profile-edit-template.html

NOW WITH RESPONSIVE DESIGN TOOLS (BETA)! Design and customize web ui with HTML and CSS. Now with taggable Design snippet/bookmark support.

<style>
    #widget-template-editor-container .CodeMirror
    {
        position:static !important;
        float: left; 
        margin-top: 0px; 
        margin-left: 0px; 
        width: 100%; 
        height: calc(100% - 40px); 
    }
</style>
<div class="property-toolbox horz-resizable right-resizer vert-resizable bottom-resizer" id="widget-template-editor-container" style="pointer-events: all; display: none; position: absolute; padding: 10px 10px 10px 10px; background-color: rgb(74, 77, 78);top:30%; z-index: 52; left: 25%; height: 40%; width: 50%;">
    <div class="propertyToolboxHeader">
        Template Editor
        <div class="toolboxHeaderBottom"></div>
    </div>
    <input type="text" class="topcoat-text-input" id="widget-template-label-input" style="position: absolute; height: 27px; left: 10px; width: 200px; bottom: 1px;" placeholder="Optional Template Label">
    <span id="template-error" style="overflow-x: -webkit-marquee;color:red;position: absolute; height: 27px; left: 240px; width: calc(100% - 450px); bottom: 8px;"></span>
    <button class="topcoat-button btn primary" id="widget-template-edit-confirm" style="position: absolute; height: 27px; right: 10px; margin-right: 0px; margin-left: 0px; width: 82px; bottom: 10px;">Confirm</button>
    <button class="topcoat-button" id="widget-template-edit-cancel" style="position: absolute; height: 27px; width: 82px; right: 96px; bottom: 10px;">Cancel</button>
    <textarea id="widget-template-data-input" style="position:static !important;float: left; margin-top: 0px; margin-left: 0px; width: 100% !important; height: calc(100% - 40px) !important;"></textarea>
</div>