<style type="text/css">
    #bee-plugin-container {
        /* position: absolute; */
        width: 70vw;
        height: 70vh;
    }
</style>

<div ng-show="email_screen" class="container">

        <legend>Email </legend>
       <div class="row">
        <div class="col-lg-12">
            <div class="form-group">
                <label class="col-md-3 control-label">Select Existing Template</label>
                <a href="javascript:void(0)" ng-click="editTemplate('WEB_PUSH')" class="col-md-1 href="">  <i class=" fa
                    fa-pencil"></i> </a>
                <div class="col-md-6">
                    <select class="template-select form-control input-sm">
                    </select>
                </div>
                <div class="col-lg-3"></div>
            </div>
            <div class="clearfix down-space" ng-show="!cTools.defaultDevice"></div>
            <div
                style="width: 98%; height:12px; border-bottom: 1px solid #e2e7eb; text-align: center; margin-top: 25px; margin-bottom: 25px; margin-left: 2%;">
                <span style="font-size: 15px; background-color: #F3F5F6; padding: 0 10px;">
                    Create New
                </span>
            </div>
        </div>
        </div>
            <div class="clearfix down-space" ng-show="!cTools.defaultDevice"></div>
        <div class="row">
            <div class="form-group col col-lg-6">
                <label class=" control-label">Template Name</label>
                <div>
                    <input type="text" id="templateName" class="form-control" placeholder="Template Name" maxlength="40"
                        ng-model="cTools.template_name">
                </div>
                
            </div>
            <div class="form-group col col-lg-6">
                <label class=" control-label">Email Subject</label>
                <div>
                    <input type="text" id="subjectData" class="form-control" placeholder="Email Subject" 
                        ng-model="subjectData">
                        <i class="fa fa-pencil"
                        style="cursor: pointer;float: right;margin-right: -1px;margin-top:-18px;border: none;"
                        aria-hidden="true" href="#customfields-dialog" data-toggle="modal"
                        ng-click="refreshCustomFields('subjectData')"></i>
                </div>

            </div>
    </div>
            <div  class="clearfix down-space"></div>
            <div class="form-group">
                <div class="col-md-4">
                    &nbsp;
                </div>
                <div class="col-md-8">
                    <span id="template_name_error" style="color: red">{{template_name_error}}</span>
                </div>
            </div>
            <div class="clearfix down-space" ng-show="!cTools.defaultDevice"></div>
            <div id="email_editor_template">
                <div id="bee-plugin-container" class="container"> </div> 
            </div>
       </div>
 

       <!-- Dialog  custom field popup Start-->
       <div class="modal fade" id="customfields-dialog" style="z-index:1050!important;">
        <div class="modal-dialog embedCustomField">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Embed Custom Fields</h4>
                </div>
                <div class="modal-body">
    
                    <div style="height:250px;overflow:auto">
                        <table class="table">
                            <thead>
                                <th>Select</th>
                                <th>Field Name</th>
                                <th>Default Value</th>
                            </thead>
                            <tbody>
                                <tr ng-repeat="cf in customFields">
                                    <td><input type="checkbox" ng-model="cf.selected" /></td>
                                    <td>{{cf.name}}</td>
                                    <td><input type="text" placeholder="Default Value" class="form-control"
                                            ng-model="cf.defaultValue"></td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="checkbox" ng-model="cevent.selectedCheckbox" />
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <select class="form-control"
                                                ng-change="getEventAttributes(cevent.selectedEvent)"
                                                ng-model="cevent.selectedEvent">
                                                <option value="{{ ev }}" ng-repeat="ev in eventsData" ng-selected="$first">
                                                    {{ ev.event }}</option>
                                            </select>
                                        </div>
                                    </td>
    
                                    <td>
                                        <div class="form-group">
                                            <select class="form-control" ng-model="cevent.selectedAttribute">
                                                <option value="{{ at.name }}" ng-repeat="at in eventAttributes"
                                                    ng-selected="$first"> {{ at.name }} </option>
                                            </select>
                                        </div>
                                        <input type="text" placeholder="Default Value" class="form-control"
                                            id="ceventDefaultValue" ng-model="cevent.defaultValue">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="embedCustomField()"
                        data-dismiss="modal">Save</button>
                    <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="refreshCustomFields()"
                        data-dismiss="modal">Cancel</button>
    
                </div>
            </div>
        </div>
    </div>
    <!-- Dialog  custom field popup End-->