    <style>
      {{custom_css}}
#cover { 
  width: 100%;
  height: 100px; 
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  background-image: url('{{public}}img/advanced.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9;
  position: absolute;
  top:0;
  left:0;
  right:0;
  overflow: hidden;
}
.header-icon { position: absolute; left:16px; top:12px; font-size: 48px; }
.card-title { margin-top: -1rem; border-bottom: 1px solid #DDD; padding-bottom: 1rem; }
.alt1,h2,h4 { color: #3b506c; }


    </style>
    
    <script type="text/javascript">
        window.BITFIRE_NONCE = '{{api_code}}';
        window.CONFIG_LIST = {};
        const VERSION = {{version}};
        const VERSION_STR = "{{sym_version}}";


        function set_config(id, value) {
          console.log("set config", id, value);
        }

        function soption(config, value) {
          GBI("drop_"+config).innerText = value;
          return update_value(config, value);
        }

        function update_value(config, value) {
          GBI(config+"_spin").classList.remove("hidden");
          console.log("update value: ", config);
          BitFire_api("toggle_config_value", {"param":config,"value":value})
            .then(r => r.json())
            .then(data => {
              console.log("saved", config, data); 
              window.setTimeout(function(){ GBI(config+"_spin").classList.add("hidden"); }, 100);
            });
        }


        function update_str(config) {
          let value = GBI(config+"_text").value;
          console.log("update str", config, value);
          return update_value(config, value);
        }

        function toggle_report(config, report) {
          if (config == "enforce_ssl_1year" && window.location.protocol != "https:") {
            alert("Please switch to SSL to enable this feature");
            return false;
          }
          GBI(config+"_spin").classList.remove("hidden");
          if (report && window.CONFIG_LIST[config] == "on") {
            let g = GBI(config+"_block");
            if (g) { g.checked = false; }
          }
          if (!report && window.CONFIG_LIST[config] == "report") {
            let g = GBI(config+"_report");
            if (g) { g.checked = false; }
          }
          let value = "false";
          let r = GBI(config+"_report");
          if (r && r.checked) { value = "report"; }
          if (GBI(config+"_block").checked) { value = "on"; }
          window.CONFIG_LIST[config] = value;

          if (config == "auto_start") {
            let action=(value == "on") ? "install" : "uninstall";
            BitFire_api(action, {})
              .then(r => r.json())
              .then(response => {
                console.log(response); 
                alert(response.note);
                window.setTimeout(function(){ GBI(config+"_spin").classList.add("hidden"); }, 100);
            });

          }
          else {
            BitFire_api("toggle_config_value", {"param":config,"value":value})
              .then(r => r.json())
              .then(data => {
              console.log("response...", data);
              if (!data.success) { alert("error updating " + config + " : " + data.note + " : " + data.errors.join()); }
              window.setTimeout(function(){ GBI(config+"_spin").classList.add("hidden"); }, 100);
            });
          }
        }

        // config name, block|on|true / report|alert / off|false
        function toggle(elm, type) {
          var e = GBI(elm);
          console.log(e);
          e.innerText = cap(type);
          BitFire_api("toggle_config_value", {"param":elm,"value":type})
            .then(r => r.json())
            .then(data => { console.log("toggle", data); });
          if (type == "block" || type == "on" || type == "true") {
            e.classList.remove("btn-warning");
            e.classList.remove("btn-secondary");
            e.classList.add("btn-success");
          } else if (type == "report" || type == "alert") {
            e.classList.remove("btn-success");
            e.classList.remove("btn-secondary");
            e.classList.add("btn-warning");
          } else {
            e.classList.remove("btn-success");
            e.classList.remove("btn-warning");
            e.classList.add("btn-secondary");
          }
        }
              
    </script>


    <!-- NAVIGATION
    ================================================== -->
    

    <div class="main-content">
      
      {{header}}
    

  <!-- CARDS -->
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-10 col-xl-8">

  

        <div class="card">
          <div id="cover"></div>
          <div class="card-body" style="margin-top:1.5rem;">
            <div class="avatar avatar-xl card-avatar card-avatar-top" style="margin-top:1rem;">
              <img id="" src="{{public}}img/search.jpg" style="background-color:#FFF;" class="avatar-img rounded-circle border-card">
              <span class="fe alt1 header-icon fe-settings"></span>
            </div>
            <h2 style="margin-top:-1rem;" class="card-title">
              <strong>
                <span class="tdc alt1">
                  BitFire PRO RASP Settings
                </span>
              </strong>
              <span class="card-header-title text-secondary right">Enable</span>
              <small class="text-muted"><i>(<a href="https://bitfire.co/en/support-rasp-overview" target="_blank">Runtime Application Self-Protection <i class="fe fe-external-link"></i></a>)</i></small>
            </h2>
            {{info}}
          </div>


          <div class="card-body">

            <div class="list-group list-group-flush my-n3">
              <div class="list-group-item">
                <div class="row align-items-center">
                  <div class="col">

                    <h4 class="font-weight-base mb-1">
                      Block WordPress Scanners
                    </h4>
                    <small class="text-muted">
                      Block scanning for WordPress vulnerable plugins and themes. 
                    </small>

                  </div>
                  <div class="col-auto tog" id="wp_block_scanners_con" data-enabled="{{wp_block_scanners}}" data-title="Turn on to block bulk plugin scanners" data-toggle="true">
                  </div>
                </div> <!-- / .row -->
              </div>

              <div class="list-group-item">
                <div class="row align-items-center">
                  <div class="col">

                    <h4 class="font-weight-base mb-1">
                      RASP FileSystem Protection
                    </h4>
                    <small class="text-muted">
                      Force RASP Access Control on all PHP files. Prevent PHP files from being modified or deleted unless logged in as Administrator.
                    </small>
                  </div>

                  <div class="col-auto tog" id="rasp_filesystem_con" data-enabled="{{rasp_filesystem}}" data-title="lock changing any php files unless logged in as administrator" data-toggle="true">
                  </div>
                </div>
              </div>

              <div class="list-group-item">
                <div class="row align-items-center">
                  <div class="col">

                    <h4 class="font-weight-base mb-1">
                      RASP Database Protection
                    </h4>
                    <small class="text-muted">
                      Force RASP Checks on all database queries. Prevent altering sensitive DB tables unless logged in as Administrator.
                    </small>
                  </div>

                  <div class="col-auto tog" id="rasp_db_con" data-enabled="{{rasp_db}}" data-title="lock all user account changes unless logged in as administrator" data-toggle="true">
                  </div>
                </div>
              </div>

              <div class="list-group-item">
                <div class="row align-items-center">
                  <div class="col">

                    <h4 class="font-weight-base mb-1">
                      RASP Network Protection
                    </h4>
                    <small class="text-muted">
                      Prevent connecting to bot command and control networks, stop man in the middle attacks.
                    </small>

                  </div>
                  <div class="col-auto tog" id="rasp_js_con" data-enabled="{{rasp_js}}" data-title="Lock user account changes from any page other than the users.php WordPress editor page" data-toggle="true">
                  </div>
                </div> <!-- / .row -->
              </div>


              <div class="list-group-item">
                <div class="row align-items-center">
                  <div class="col">

                    <h4 class="font-weight-base mb-1">
                      Multi Factor Authentication
                    </h4>
                    <small class="{{mfa_class}}">
                      {{mfa}}
                    </small>

                  </div>
                  <div class="col-auto tog {{show_mfa}}" id="pro_mfa_con" data-enabled="{{pro_mfa}}" data-title="Add SMS MFA to user editor" data-toggle="true">
                  </div>
                </div> <!-- / .row -->
              </div>

              <!--
              <div class="list-group-item">
                <div class="row align-items-center">
                  <div class="col">

                    <h4 class="font-weight-base mb-1">
                      Secure JavaScript
                    </h4>
                    <small class="text-muted">
                      Only allow authorized JavaScript to run on browsers.
                    </small>

                  </div>
                  <div class="col-auto tog" id="csp_policy_enabled_con" data-enabled="{{csp_policy_enabled}}" data-title="Send HTTP security headers" data-toggle="true">
                  </div>
                </div>
              </div>
              -->

              

            </div>
          </div>
        </div>

    </div>
  </div>



    </div><!-- / .main-content -->

    <!-- JAVASCRIPT
    ================================================== -->
    <script type="text/javascript">
      
function save_pass() {
  let p1 = GBI("pass1").value;
  let p2 = GBI("pass2").value;
  if (p1 != p2) { alert("password does not match"); return; }
  if (p1.length < 8) { alert("password must be at least 8 characters"); return; }
  console.log(p1);
  BitFire_api("set_pass", {"pass1":encodeURIComponent(p1)})
    .then(r => r.json())
    .then(response => {
      console.log(response);
      if (response.success) {
        alert("password updated successfully");
        $("#password_set").modal("hide");
      } else {
        alert(response.note);
      }
    });
}
      

/*
// fetch("https://www."+"bitfire.co"+"/ver.php?ts="+Date.now()) // not used on WordPress
  .then(response => response.json())
  .then(response => {
    console.log(response);
    var behind = 0;
    var latest_str = VERSION_STR;
    var latest = VERSION;
    for (const r in response) {
      //console.log("version!", r);
      if(response[r][0] > VERSION) { 
        if (response[r][0] > latest) {
          latest = response[r][0];
          latest_str = r;
          behind++;
        }
      }
    }
    window.LATEST = latest_str;
    
    /*
    if (GBI("upgrade_link")) {
      if (behind == 0) {
        GBI("upgrade_link").innerText = "Software Up To Date";
        GBI("upgrade_link").setAttribute("disabled", "disabled");
        GBI("upgrade_link").classList.remove("lift");
      } else {
        GBI("upgrade_link").innerText = "Upgrade to " + latest_str;
        GBI("upgrade_link").classList.remove("btn-secondary");
        GBI("upgrade_link").classList.add("btn-warning");
        GBI("upgrade_link").addEventListener("click", upgrade);
      }
    }
  }
);
*/

     

function toggle_features() {
  var elms = document.getElementsByClassName("feature");
  console.log("toggle features", elms);

  Array.prototype.forEach.call(elms, function (element) {
    console.log("element", element.innerText);
    if (element.innerText.trim() == "report" || element.innerText.trim() == "alert") {
      console.log("warn");
      element.classList.remove("btn-success");
      element.classList.remove("btn-secondary");
      element.classList.add("btn-warning");
    } else if (element.innerText.trim() == "block" || element.innerText.trim() == "true" || element.innerText.trim() == "on") {
      console.log("success");
      element.classList.remove("btn-warning");
      element.classList.remove("btn-secondary");
      element.classList.add("btn-success");
    } else {
      element.classList.remove("btn-success");
      element.classList.remove("btn-warning");
      element.classList.add("btn-secondary");
      console.log("second");
    }
  });
}

   </script>

    <!-- Theme JS -->
    
      <div class="modal fade" id="password_set" role="dialog" data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog" role="document" id="password_set2">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="pass_title">Set BitFire Password</h5>
              <!--
              <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
              -->
            </div>
            <div class="modal-body">
              <p>BitFire password is required to access the dashboard.  If you forget the password, change the "password" configuration item in config.ini to "default" to relaunch this modal or set it to the SHA1 value of your password</p>
              <label style="width:150px;">Password:</label>
              <input id="pass1" type="password" name="pass1" /><br />
              <label style="width:150px;">Repeat Password:</label>
              <input id="pass2" type="password" name="pass1" />
            </div>
            <div class="modal-footer">
              <button id="password_close" type="button" class="btn btn-secondary " data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" id="save_pass">Save Password</button>
            </div>
          </div>
        </div>
      </div>
    <script type="text/javascript">

      function on_or_off(config) {
        if (!config) { return 'off'; }
        return 'on';
      }

      let toggles = document.getElementsByClassName("tog");
      for (let i = 0; i < toggles.length; i++) {
        let id = toggles[i].getAttribute("id");
        let name = id.replace("_con", "");
        let title = toggles[i].getAttribute("data-title");
        let tog = toggles[i].hasAttribute("data-toggle");

        let de = toggles[i].getAttribute("data-enabled");
        let alert = on_or_off(de);

        let check1 = (alert == "report") ? "checked" : "";
        let check2 = (alert == "on") ? "checked" : "";

        let tail1 = (tog) ? "" : " in alert mode only";
        let tail2 = (tog) ? "" : " in full blocking";

        let tool1 = 'data-bs-toggle="tooltip" data-bs-placement="top" title="'+title+tail1+'"';
        let tool2 = 'data-bs-toggle="tooltip" data-bs-placement="top" title="'+title+tail2+'"';


        let html = '<div id="'+name+'_spin" class="spinner-border text-success spinner-border-sm left mt-1 mr-2 hidden" role="status"></div>';
        if (!tog) {
          html += '<div class="form-check form-switch left" style="margin-left:-60px"> <input class="form-check-input warning" id="'+name+'_report" autocomplete="off" type="checkbox" onclick="return toggle_report(\''+name+'\', true)" '+check1+' '+ tool1 +'> </div>';
        }
        html += '\
    <div class="form-switch right">\
        <input class="form-check-input success" {{disabled}} autocomplete="off" id="'+name+'_block" type="checkbox" onclick="return toggle_report(\''+name+'\', false)" '+check2+' '+tool2+'>\
    </div>';
    window.CONFIG_LIST[name] = alert;

        toggles[i].innerHTML = html;
      }

      // MAIN
      document.addEventListener("DOMContentLoaded", function() {
        if (GBI("password_btn")) {
          GBI("password_btn").addEventListener("click", function() {
            GBI('password_close').classList.remove("hidden");
          });
        }
      });

    </script>
    {{gtag}}
