    <style>
      {{theme_css}}
    </style>
    <style>
      .card { max-width: 100%; }
      .right { float: right; }
      .form-check .form-switch { width: 80px; margin-left: -80px; }
      .spinner-border { margin-left: -110px; }
      .pointer { cursor: pointer; }
      .card-body { padding: 0.5rem !important; }
      .center { text-align: center; }
      .left { float: left; }
      .right { float: right; }
      a.nav-link { color: #2c7be5 !important;}
      a.nav-link:hover { text-decoration: underline; }


      .zn1 { z-index: -1;}
      image.type { fill: #e63757; }
      a.nav-link { color: #2c7be5 !important;}

      svg { fill: #977; }
      .blue { fill: #30b7e5; color: #30b7e5; }
      svg.green { fill: #21d97e; }
      svg.yellow { fill: #f6c343; }
      svg.red { fill: #e63757; }
      img.red { filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); }
      img.grey_blue { filter: invert(82%) sepia(15%) saturate(597%) hue-rotate(184deg) brightness(89%) contrast(86%); }
      img.orange { filter: invert(83%) sepia(34%) saturate(523%) hue-rotate(336deg) brightness(98%) contrast(92%); }
      img.white { filter: invert(99%) sepia(7%) saturate(889%) hue-rotate(165deg) brightness(114%) contrast(100%); }

      h6 { text-transform: uppercase; line-height: 1.5;color: rgb(149, 170, 201); font-family: "Cerebri Sans", sans-serif; font-weight: 400; }
      .header-body { padding: 24px 0; }
      .oh { overflow: auto; }
      .wrap { white-space: break-spaces; line-break: anywhere; }
      .nowrap { white-space: nowrap; }
      
      .hidden { display: none; }
      
      .country { float: right; display: block; }

      .btn-sm {
        padding: 0.1rem .5rem !important;
        font-size: .4rem !important;
        font-weight: bold;
      }
      .btn-group-tiny>.btn {
        padding: .075rem .25rem;
        font-size: .4rem;
        line-height: 1.0;
        border-radius: .25rem;
      }
      .dropdown-toggle {
        width: 65px;
      }
      
      .nav-sm .nav-link {
        font-size: .6125rem;
      }

      .navbar-vertical.navbar-expand-md .navbar-nav .nav .nav-link {
        padding-left: .5rem;
        padding-right: 0rem;
      }
      .grow { flex-grow: 1; }

      .success:checked { background-color: #00d97e; }
      .warning:checked { background-color: #f6c343; }
      .success, .success:checked { background-color: #00d97e; }
      .form-switch { min-height: 1.5rem; padding-left: 1.5rem; }
      .form-switch .form-check-input:checked { background-position: 100%; }
      .form-switch .form-check-input:checked, .form-switch .form-check-input:focus {
      }
      .form-check-input { cursor: pointer; }
      input { overflow: visible; }
      input[type=checkbox] { box-sizing: border-box; padding: 0; }


      .form-check-input { position: absolute; vertical-align: top; background-color: #e3ebf6; background-repeat: no-repeat; background-size: contain; border: transparent; appearance: none;}


      .form-check-input:checked[type=checkbox] {
        background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3E%3C/svg%3E");
        background-position: 100%;
      }

      .form-check-input[type=checkbox] {
        background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
        background-position: 0%;
    background-repeat: no-repeat; 
    width: 3rem;
    margin: 0;
    margin-left: -3.5rem;
    border-radius: 3rem;
    transition: background-position .15s ease-in-out;
    height: 1.5rem;
}

input[type=checkbox]:checked::before { content: ''; }

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}
.form-check-input { cursor: pointer; vertical-align: top; background-size: contain; border: transparent; appearance: none; position: absolute; }

      /*
      ul.navbar-nav li.nav-item ul.nav li.nav-item { margin-bottom: -30px; }
      */
      /*
      .dropdown-menu { margin-top: -20px; }
      */
@font-face {
  font-family: Cerebri Sans;
  src: url({{font_path}}/cerebrisans-regular.eot);
  src: url({{font_path}}/cerebrisans-regular.eot?#iefix) format("embedded-opentype"),url({{font_path}}/cerebrisans-regular.woff) format("woff"),url({{font_path}}/cerebrisans-regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Cerebri Sans;
  src: url({{font_path}}/cerebrisans-medium.eot);
  src: url({{font_path}}/cerebrisans-medium.eot?#iefix) format("embedded-opentype"),url({{font_path}}/cerebrisans-medium.woff) format("woff"),url({{font_path}}/cerebrisans-medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: Cerebri Sans;
  src: url({{font_path}}/cerebrisans-semibold.eot);
  src: url({{font_path}}/cerebrisans-semibold.eot?#iefix) format("embedded-opentype"),url({{font_path}}/cerebrisans-semibold.woff) format("woff"),url({{font_path}}/cerebrisans-semibold.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: Feather;
  src: url({{font_path}}/Feather-wtf.ttf?wtf) format("truetype"),url({{font_path}}/Feather.woff?wtf2) format("woff"),url({{font_path}}/Feather.svg?wtf3#Feather) format("svg");
  font-weight: 400;
  font-style: normal;
}

      
    </style>
    
    <script type="text/javascript" nonce="{{nonce}}">
        window.CONFIG_LIST = {};
        window.ERROR = [];
        function GBI(name) { return document.getElementById(name); }


        function rand_string(length = 32) {
            let result           = '';
            let characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            for ( var i = 0; i < length; i++ ) {
              result += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return result;
        }

        async function BitFire_api(api_method = '', data = {}) {
          url = "{{self}}&BITFIRE_API=" + api_method;
          data.BITFIRE_API = api_method;
          data.BITFIRE_NONCE = "{{api_code}}";
          data.ts = Date.now();
          const response = await fetch(url, {
          method: 'POST',
          mode: 'cors',
          cache: 'no-cache',
          credentials: 'same-origin',
          headers: { 'Content-Type': 'application/json' },
          redirect: 'follow',
          referrerPolicy: 'same-origin',
          body: JSON.stringify(data)
          });
          return response; // parses JSON response into native JavaScript objects
        }

                
        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) {
          BitFire_api("toggle_config_value", {"param":config,"value":value})
            .then(r => r.json())
            .then(data => {
              window.location="{{self}}?page=bitfire";
            });
        }


   </script>

    <script type="text/template" id="alert_template">
      <div class="alert alert-warning alert-dismissible fade show">
        {{text}}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    </script>

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

    <div class="main-content">
      
      <!-- HEADER -->
      <div class="header">
        <div class="container-fluid">

          <!-- Body -->
          <div class="header-body">
            <div class="row align-items-end">
              <div class="left">
                <!-- Pretitle -->
                <h6 class="header-pretitle">
                  {{release}}
                </h6>
                <p style="font-size:.75rem;color:#666;">
                  <div class="{{showfree_class}} alert alert-info alert-dismissible fade">
                  <a href="https://bitfire.co/pricing" target="_blank">Upgrade to <span class="blue font-weight-bold">PRO</span></a> to enable File-Lock to prevent file modification, WordPress integrity check, Redirect protection and Multi Factor Authentication
                  </div>
                </p>

              </div>
            </div> <!-- / .row -->


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

                <!-- Nav -->
                <ul class="nav nav-tabs header-tabs">
                  <li class="nav-item">
                    <a href="{{self}}?page=bitfire" class="nav-link grow" title="view blocked traffic">
                      Dashboard
                    </a>
                  </li>
                  <li class="nav-item {{has_scanner}}">
                    <a href="{{self}}&{{page}}=MALWARESCAN" class="nav-link grow" title="scan your website for malware">
                      Malware Scan
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="{{self}}&{{page}}=SETTINGS" class="nav-link grow" title="adjust firewall settings">
                      Settings
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="{{self}}&{{page}}=EXCEPTIONS" class="nav-link grow" title="edit site blocking exceptions">
                      Exceptions
                    </a>
                  </li>
                  <li class="nav-item {{hidefree_class}}">
                    <a href="{{self}}&{{page}}=ADVANCED" class="nav-link grow" title="enable PRO features">
                      Advanced
                    </a>
                  </li>

                </ul>
              </div>
            </div>
          </div> <!-- / .header-body -->

        </div>
      </div> <!-- / .header -->

    

      <!-- CARDS -->
      <div class="container-fluid">
        <div class="row justify-content-center">

          <div class="col-12 col-lg-10 col-xl-8" id="alert_block">
          </div>

          <div class="col-12 col-lg-10 col-xl-8">

            <div class="card">
              <div class="card-header">
                <h3 class="card-header-title text-primary">
                  Malware Scanner
                </h3>
              </div>
              <div class="card-body mb-4" style="padding:1rem !important">
                <p>The Malware scanner is currently only available for WordPress.  Please open a <a href="https://github.com/bitslip6/bitfire/issues">feature request ticket</a> to support your system.</p>
              </div>
           </div>
          </div>
        </div>

      </div>
    </div>

    
  <script type="text/javascript">
    window.BITFIRE_NONCE = '{{api_code}}';
  </script>

    
  {{gtag}}
