<html>
    <head>
        <title>CM AdDesigner</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="<?php echo plugins_url('../assets/js/bootstrap.min.js', __FILE__); ?>"></script>
        <script type="text/javascript" src="<?php echo plugins_url('../assets/js/bootstrap-colorpicker.min.js', __FILE__); ?>"></script>
        <script type="text/javascript" src="<?php echo plugins_url('../assets/js/addesigner.js', __FILE__); ?>"></script>

        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
        <link rel='stylesheet' href="<?php echo plugins_url('../assets/css/bootstrap.min.css', __FILE__); ?>" type='text/css' media='all' />
        <link rel='stylesheet' href="<?php echo plugins_url('../assets/css/bootstrap-colorpicker.min.css', __FILE__); ?>" type='text/css' media='all' />
        <link rel='stylesheet' href="<?php echo plugins_url('../assets/css/addesigner.css', __FILE__); ?>" type='text/css' media='all' />

    </head>
    <body>
        <div id="container" class="cmac_addesigner">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">CM AdDesigner</h3>
                    <h6 title="Click to toggle Instructions" style="cursor: pointer; text-decoration: underline;" onclick="jQuery('#cmac_adddesigner_instrucltions').toggle('fast');
                            return false;">Show Instructions</h6>
                    <p id="cmac_adddesigner_instrucltions" style="display:none;">
                        <span>
                            Click on the names of the boxes under the "Designer Options" to open the sections containing the grouped settings.<br/>
                            Using the controls you can change the way how the banner should look. All the changes are previewed live in the box labelled "Banner preview".<br/>
                            Once you've finished, copy the HTML code from the box labelled "Code to copy" into the HTML Ad editor.<br/>
                        </span>
                    </p>
                </div>
                <div class="panel-body">

                    <div id="wrapper">

                        <div class="container">
                            <h4>Designer Options:</h4>
                            <div class="panel panel-default">
                                <div class="panel-heading"><a href="#" class="expand" id="panel_banner_size">Banner size</a></div>
                                <div id="panel_banner_size_body" class="panel-body">
                                    <div class="row">
                                        <label>Predefined sizes</label><br />
                                        <select id="cmtad_tooltip_banner_size_predefined" name="cmtad_tooltipSkin_bannerSizePredefined">
                                        </select>
                                    </div>
                                    <div class="row">
                                        <label>Width<span id="cmtad_tooltip_banner_width_amount"></span></label><br />
                                        <div id="cmtad_tooltip_banner_width"></div>
                                    </div>
                                    <div class="row">
                                        <label>Height<span id="cmtad_tooltip_banner_height_amount"></span></label><br />
                                        <div id="cmtad_tooltip_banner_height"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading"><a href="#" class="expand" id="panel_paddings">Paddings</a></div>
                                <div id="panel_paddings_body" class="panel-body">
                                    <div class="row">
                                        <label>Padding Top <span id="cmtad_tooltip_padding_top_amount"></span></label><br />
                                        <div id="cmtad_tooltip_padding_top"></div>
                                    </div>
                                    <div class="row">
                                        <label>Padding Left <span id="cmtad_tooltip_padding_left_amount"></span></label><br />
                                        <div id="cmtad_tooltip_padding_left"></div>
                                    </div>
                                    <div class="row">
                                        <label>Padding Bottom <span id="cmtad_tooltip_padding_bottom_amount"></span></label><br />
                                        <div id="cmtad_tooltip_padding_bottom"></div>
                                    </div>
                                    <div class="row">
                                        <label>Padding Right <span id="cmtad_tooltip_padding_right_amount"></span></label><br />
                                        <div id="cmtad_tooltip_padding_right"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading"><a href="#" class="expand" id="panel_border">Border</a></div>
                                <div id="panel_border_body" class="panel-body">
                                    <div class="row">
                                        <label>Border Color</label><br />
                                        <div id="cmtad_tooltip_border_color" class="input-group">
                                            <input id="cmtad_tooltip_border_color_input" type="text" value="" class="form-control" placeholder="Select color"/>
                                            <span class="input-group-addon"><i></i></span>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <label>Border Radius <span id="cmtad_tooltip_border_radius_amount"></span></label><br />
                                        <div id="cmtad_tooltip_border_radius"></div>
                                    </div>

                                    <div class="row">
                                        <label>Border Width <span id="cmtad_tooltip_border_width_amount"></span></label><br />
                                        <div id="cmtad_tooltip_border_width"></div>
                                    </div>

                                    <div class="row">
                                        <label>Border Style</label><br />
                                        <select id="cmtad_tooltip_border_style" name="cmtad_tooltipSkin_borderStyle">
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading"><a href="#" class="expand" id="panel_title">Title</a></div>
                                <div id="panel_title_body" class="panel-body">
                                    <div class="row">
                                        <label>Title text</label><br />
                                        <input type="text" id="cmtad_tooltip_title_text" placeholder="Type a title">
                                    </div>
                                    <div class="row">
                                        <label>Title Color</label><br />
                                        <div id="cmtad_tooltip_title_color" class="input-group">
                                            <input id="cmtad_tooltip_title_color_input" type="text" value="" class="form-control" placeholder="Select color"/>
                                            <span class="input-group-addon"><i></i></span>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <label>Title Size <span id="cmtad_tooltip_title_size_amount"></span></label><br />
                                        <div id="cmtad_tooltip_title_size"></div>
                                    </div>

                                    <div class="row">
                                        <label>Title align</label><br />
                                        <select id="cmtad_tooltip_title_align" name="cmtad_tooltipSkin_titleAlign">
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading"><a href="#" class="expand" id="panel_description">Description</a></div>
                                <div id="panel_description_body" class="panel-body">
                                    <div class="row">
                                        <label>Description</label><br />
                                        <textarea id="cmtad_tooltip_description_text" placeholder="Type a description" cols="23" rows="3"></textarea>
                                    </div>
                                    <div class="row">
                                        <label>Font Color</label><br />
                                        <div id="cmtad_tooltip_font_color" class="input-group">
                                            <input id="cmtad_tooltip_font_color_input" type="text" value="" class="form-control" placeholder="Select color"/>
                                            <span class="input-group-addon"><i></i></span>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <label>Font Size <span id="cmtad_tooltip_font_size_amount"></span></label><br />
                                        <div id="cmtad_tooltip_font_size"></div>
                                    </div>

                                    <div class="row">
                                        <label>Text align</label><br />
                                        <select id="cmtad_tooltip_description_align" name="cmtad_tooltipSkin_descriptionAlign">
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading"><a href="#" class="expand" id="panel_font">Font</a></div>
                                <div id="panel_font_body" class="panel-body">
                                    <div class="row">
                                        <label>Font Family</label><br />
                                        <select id="cmtad_tooltip_font_family" name="cmtad_tooltipSkin_fontFamily">
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="container">

                            <div class="row-preview">
                                <h4>Banner preview:</h4>
                                <div id="previewContainer"></div>
                            </div>

                            <div class="row-preview">
                                <h4>Code to copy:</h4>
                                <textarea id="htmlPreviewContainer" style="width: 100%; height:200px;"></textarea>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>