<% link_id=function(x){
    return x.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '').replace(/ /g,'');
} %>
<!--Add Monitor Window-->
<div class="modal dark medium fade" id="add_monitor" role="dialog" aria-labelledby="add_monitorLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="add_monitorLabel"><i class="fa fa-plus"></i> &nbsp; <span><%-lang.Add%></span> <%-lang.Monitor%> &nbsp; <small><%-lang['Monitor ID']%> : <t class="edit_id"></t></small></h4>
      </div>
      <div class="modal-body form-group-group-group">
          <div class="row">
              <div class="col-md-2 hidden-xs follow-list">
                  <ul class="affix"></ul>
              </div>
              <div class="col-md-10">
                  <%
                  var buildOptions = function(field,possiblities){
                      if(!field)console.error('field',field)
                      var fieldElement = ''
                      possiblities.forEach(function(option){
                          if(option.optgroup){
                              fieldElement += '<optgroup label="' + option.name + '">'
                              fieldElement += buildOptions(field,option.optgroup)
                              fieldElement += '</optgroup>'
                          }else{
                              var selected = ''
                              if(option.value === field.default){
                                selected = 'selected'
                              }
                              fieldElement += '<option value="' + option.value + '" ' + selected + '>' + option.name + '</option>'
                          }
                      })
                      return fieldElement
                  }
                  var drawBlock = function(monitorSettings){
                    if(monitorSettings.evaluation && !eval(monitorSettings.evaluation)){
                        return
                    }
                    var attributes = []
                    var styles = []
                    var sectionClass = []
                    var headerTitle = monitorSettings.headerTitle || lang[monitorSettings.name] || monitorSettings.name
                    if(monitorSettings.hidden === true){
                        styles.push('display:none')
                    }
                    if(monitorSettings.style){
                        styles.push(monitorSettings.style)
                    }
                    if(monitorSettings.isSection === true){
                        attributes.push('section')
                    }
                    if(monitorSettings.attribute){
                        attributes.push(monitorSettings.attribute)
                    }
                    if(monitorSettings.id){
                        attributes.push(`id="${monitorSettings.id}"`)
                    }
                    if(monitorSettings.color){
                        sectionClass.push(monitorSettings.color)
                    }
                    if(monitorSettings['section-class']){
                        sectionClass.push(monitorSettings['section-class'])
                    }
                    if(monitorSettings.isAdvanced){ %>
                   <div class="h_us_input h_us_advanced" style="display:none">
                   <% }
                    if(monitorSettings['section-pre-pre-class']){ %>
                   <div class="<%- monitorSettings['section-pre-pre-class'] %>">
                   <% }
                    if(monitorSettings['section-pre-class']){ %>
                   <div class="<%- monitorSettings['section-pre-class'] %>">
                   <% }
                    %>
                    <div <%- attributes.join(' ') %> style="<%- styles.join(';') %>" class="form-group-group <%- sectionClass.join(' ') %>">
                        <h4 class="monitor-section-header <%- monitorSettings.headerClass %>"><%- headerTitle %>
                            <% if(monitorSettings.headerButtons){ %>
                                <div class="pull-right">
                                    <% monitorSettings.headerButtons.forEach(function(button){ %>
                                        <a class="btn btn-success btn-xs <%- button.class %>">
                                            <% if(button.icon){ %><i class="fa fa-<%- button.icon %>"></i><% } %>
                                             <% if(button.text){ %><%- button.text %><% } %>
                                        </a>
                                    <% }) %>
                                </div>
                            <% } %>
                        </h4>
                        <div class="box-wrapper">
                    <% if(monitorSettings['input-mapping']){ %>
                        <div class="form-group-group forestgreen" style="display:none" input-mapping="<%- monitorSettings['input-mapping'] %>">
                            <h4><%-lang['Input Feed']%>
                                <div class="pull-right">
                                    <a class="btn btn-success btn-xs add_map_row"><i class="fa fa-plus-square-o"></i></a>
                                </div>
                            </h4>
                            <div class="choices"></div>
                        </div>
                    <% } %>
                    <% if(monitorSettings.blockquote){ %>
                        <blockquote class="<%- monitorSettings.blockquoteClass || '' %>">
                            <%- monitorSettings.blockquote %>
                        </blockquote>
                    <% } %>
                    <% if(monitorSettings.blocks){
                            monitorSettings.blocks.forEach(function(settingsBlock){
                                drawBlock(settingsBlock)
                            })
                        }
                       if(monitorSettings.info){
                       monitorSettings.info.forEach(function(field){
                           if(field.isFormGroupGroup === true){
                               drawBlock(field)
                           }else{
                       if(field.notForSubAccount === true){
                            var notForSubAccount = '!details.sub'
                            if(!field.evaluation){
                                field.evaluation = notForSubAccount
                            }else{
                                field.evaluation += ' && ' + notForSubAccount
                            }
                        }
                        if(field.evaluation && !eval(field.evaluation)){
                            return
                        }
                        var hidden = ''
                        if(field.hidden === true){
                            hidden = 'style="display:none"'
                        }
                        var fieldClass = []
                        var attributes = []
                        if(field.name && field.name.indexOf('detail=') > -1){
                            attributes.push(field.name)
                        }else if(field.name){
                            attributes.push("name=" + field.name)
                        }
                        if(field.placeholder || field.default){
                            attributes.push(`placeholder="${field.placeholder || field.default}"`)
                        }else if(field.example){
                            attributes.push(`placeholder="Example : ${field.example}"`)
                        }
                        if(field.attribute){
                            attributes.push(field.attribute)
                        }
                        if(field.selector){
                            attributes.push(`selector="${field.selector}"`)
                        }
                        if(field.id){
                            attributes.push(`id="${field.id}"`)
                        }
                        if(field.class){
                            fieldClass.push(`${field.class}`)
                        }
                        var possiblities = field.possible || []
                        var fieldType = field.fieldType || 'text'
                        var fieldElement = ''
                        var preFill = field.preFill || ''
                        switch(fieldType){
                            case'btn':

                                  fieldElement = `<a class="btn btn-block ${fieldClass.join(' ')}" ${attributes.join(' ')}>${field.btnContent}</a>`
                            break;
                            case'ul':
                                  fieldElement = `<ul ${attributes.join(' ')} class="${fieldClass.join(' ')}" ></ul>`
                            break;
                            case'div':
                                  fieldElement = `<div ${attributes.join(' ')} class="${fieldClass.join(' ')}" ></div>`
                            break;
                            case'number':
                                  if(field.numberMin){
                                      attributes.push(`min="${field.numberMin}"`)
                                  }
                                  if(field.numberMax){
                                      attributes.push(`max="${field.numberMax}"`)
                                  }
                                  fieldElement = '<div><input type="number" class="form-control" ' + attributes.join(' ') + '></div>'
                            break;
                            case'password':
                                  fieldElement = '<div><input type="password" class="form-control" ' + attributes.join(' ') + '></div>'
                            break;
                            case'text':
                                  fieldElement = `<div><input class="form-control" ${attributes.join(' ')} value="${preFill}"></div>`
                            break;
                            case'textarea':
                                  fieldElement = '<div><textarea class="form-control" ' + attributes.join(' ') + '></textarea></div>'
                            break;
                            case'select':
                                  fieldElement = '<div><select class="form-control" ' + attributes.join(' ') + '>'
                                  fieldElement += buildOptions(field,possiblities)
                                  fieldElement += '</select></div>'
                            break;
                        }
                         if(field['form-group-class-pre-pre-layer']){ %>
                        <div class="<%- field['form-group-class-pre-pre-layer'] %>">
                        <% }
                         if(field['form-group-class-pre-layer']){ %>
                        <div class="<%- field['form-group-class-pre-layer'] %>">
                        <% }
                        if(fieldType === 'ul' || fieldType ===  'div' || fieldType ===  'btn'){ %>
                            <%- fieldElement %>
                        <% }else{ %>
                            <div <%- hidden %> class="form-group <%- field['form-group-class'] %>">
                                <label><div><span><%- field.field %>
                                    <% if(field.description){ %>
                                        <small><%- field.description %></small>
                                    <% } %>
                                </span></div>
                                    <%- fieldElement %>
                                </label>
                            </div>
                        <% }
                          }
                          if(field['form-group-class-pre-layer']){ %>
                         </div>
                         <% }
                          if(field['form-group-class-pre-pre-layer']){ %>
                         </div>
                         <% }
                      })
                  }
                  %>
                  </div>
                  </div>
                  <%
                  if(monitorSettings['section-pre-class']){ %>
                  </div>
                  <% }
                  if(monitorSettings['section-pre-pre-class']){ %>
                  </div>
                  <% }
                  if(monitorSettings.isAdvanced){ %>
                  </div>
                  <% }
                  }
                  %>
                  <% Object.keys(define['Monitor Settings'].blocks).forEach(function(blockKey){
                      var monitorSettings = define['Monitor Settings'].blocks[blockKey]
                      drawBlock(monitorSettings)
                  }) %>
              </div>
          </div>
      </div>
      <div class="modal-footer">
          <div class="pull-left">
            <button type="button" id="monedit_bottom_menu" style="margin-right:5px" class="btn btn-default"><i class="fa fa-wrench"></i> <%-lang.Options%></button>
            <ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" data-mdl-for="monedit_bottom_menu">
              <li class="mdl-menu__item mdl-menu__item--full-bleed-divider" data-dismiss="modal"><i class="fa fa-times"></i> <%-lang.Close%></li>
              <li class="mdl-menu__item" monitor="delete"><i class="fa fa-trash-o"></i> <%-lang.Delete%></li>
              <li class="mdl-menu__item save_config"><i class="fa fa-download"></i> <%-lang.Export%></li>
              <li class="mdl-menu__item import_config"><i class="fa fa-upload"></i> <%-lang.Import%></li>
              <li class="mdl-menu__item probe_config"><i class="fa fa-search"></i> <%-lang.FFprobe%></li>
              <li class="mdl-menu__item add_map"><i class="fa fa-rss"></i> <%-lang['Add Input Feed']%></li>
              <li class="mdl-menu__item add_channel"><i class="fa fa-puzzle-piece"></i> <%-lang['Add Channel']%></li>
            </ul>
            <div class="h_det_input h_det_1" style="display:inline-block">
                <button type="button" class="btn btn-primary" monitor="region"><i class="fa fa-grav"></i> <%-lang['Region Editor']%></button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#detector_filter"><i class="fa fa-grav"></i> <%-lang['Detector Filters']%></button>
              </div>
          </div>
          <div style="display:inline-block;margin-right:5px">
            <div><select class="form-control btn-default" dropdown_toggle="monedit_user_type" selector="h_us">
                <option value="simple" selected><%-lang['Simple']%></option>
                <option value="advanced"><%-lang['Advanced']%></option>
            </select></div>
          </div>
          <button type="submit" class="btn btn-success"><i class="fa fa-check"></i> <%-lang.Save%></button>
      </div>
    </form>
  </div>
</div>
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.monitoredit.css">
<script src="<%-window.libURL%>libs/js/dash2.monitoredit.js"></script>
