<!--Settings Window-->
<% var audioFiles = fs.readdirSync('./web/libs/audio') %>
<div class="modal fade medium dark" id="settings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" 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="settingsLabel"><i class="fa fa-gears"></i> &nbsp; <%-lang.Settings%></h4>
      </div>
      <div class="modal-body">
          <div class="row">
              <div class="col-md-2 hidden-xs follow-list">
                  <ul class="affix"></ul>
              </div>
              <div class="col-md-10">
          <div class="text-center msg"></div>
          <div class="form-group-group green">
              <h4><%-lang['Account Info']%></h4>
            <div class="form-group">
                <label><div><span><%-lang.Email%></span></div>
                    <div><input class="form-control" value="<%- $user.mail %>" disabled></div>
                </label>
            </div>
            <div class="form-group">
                <label><div><span><%-lang['Group Key']%></span></div>
                    <div><input class="form-control" value="<%- $user.ke %>" disabled></div>
                </label>
            </div>
          </div>
          <%
          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(userSettings){
            if(userSettings.evaluation && !eval(userSettings.evaluation)){
                return
            }
            var attributes = []
            var styles = []
            var sectionClass = []
            var headerTitle = userSettings.headerTitle || lang[userSettings.name] || userSettings.name
            if(userSettings.hidden === true){
                styles.push('display:none')
            }
            if(userSettings.style){
                styles.push(userSettings.style)
            }
            if(userSettings.isSection === true){
                attributes.push('section')
            }
            if(userSettings.attribute){
                attributes.push(userSettings.attribute)
            }
            if(userSettings.id){
                attributes.push(`id="${userSettings.id}"`)
            }else{
                var userSettingsId
                if(userSettings.name){
                    userSettingsId = userSettings.name.replace(/[^a-zA-Z ]/g, '').replace(/[^a-zA-Z ]/g, '').replace(/ /g, '')
                }else{
                    userSettingsId = "NO NAME"
                }
                userSettings.id = userSettingsId
                attributes.push(`id="${userSettingsId}"`)
            }
            if(userSettings.color){
                sectionClass.push(userSettings.color)
            }
            if(userSettings['section-class']){
                sectionClass.push(userSettings['section-class'])
            }
            if(userSettings.isAdvanced){ %>
           <div class="h_us_input h_us_advanced">
           <% }
            if(userSettings['section-pre-pre-class']){ %>
           <div class="<%- userSettings['section-pre-pre-class'] %>">
           <% }
            if(userSettings['section-pre-class']){ %>
           <div class="<%- userSettings['section-pre-class'] %>">
           <% }
            %>
            <div <%- attributes.join(' ') %> style="<%- styles.join(';') %>" class="form-group-group <%- sectionClass.join(' ') %>">
                <h4 class="<%- userSettings.headerClass %>"><%- headerTitle %>
                    <% if(userSettings.headerButtons){ %>
                        <div class="pull-right">
                            <% userSettings.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>
            <% if(userSettings['input-mapping']){ %>
                <div class="form-group-group forestgreen" style="display:none" input-mapping="<%- userSettings['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(userSettings.blockquote){ %>
                <blockquote class="<%- userSettings.blockquoteClass || '' %>">
                    <%- userSettings.blockquote %>
                </blockquote>
            <% } %>

            <%
            if(userSettings.blocks){
                    userSettings.blocks.forEach(function(settingsBlock){
                        drawBlock(settingsBlock)
                    })
                }
               if(userSettings.info){
               userSettings.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.isAdvanced){ %>
                <div class="h_us_input h_us_advanced">
                <% }
                 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>
                 <% }
                 if(field.isAdvanced){ %>
                 </div>
                 <% }
              })
          }
          %>
          </div>
          <%
          if(userSettings['section-pre-class']){ %>
          </div>
          <% }
          if(userSettings['section-pre-pre-class']){ %>
          </div>
          <% }
          if(userSettings.isAdvanced){ %>
          </div>
          <% }
          }
          %>
          <% Object.keys(define['Account Settings'].blocks).forEach(function(blockKey){
                var accountSettings = define['Account Settings'].blocks[blockKey]
                drawBlock(accountSettings)
            }) %>
            <div class="form-group-group green linkShinobi">
                <h4><%-lang['Link Shinobi']%><div class="pull-right"><a class="btn btn-success btn-xs add"><i class="fa fa-plus"></i></a></div></h4>
                <div id="linkShinobi"></div>
            </div>
        <input type="hidden" name="details">
      </div>
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal"><i class="fa fa-times"></i> <%-lang.Close%></button>
          <button type="submit" class="btn btn-success"><i class="fa fa-check"></i> <%-lang.Save%></button>
        </div>
    </form>
  </div>
</div>
<script src="<%-window.libURL%>libs/js/dash2.usersettings.js"></script>
