<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./icon.png" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Trend Micro Vision One - XDR Endpoint Checker</title>
    <script src="./jsrender.js"></script>
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <script>
      var userAgent = navigator.userAgent
      if (userAgent.indexOf('IE') === -1) {
        if (userAgent.indexOf('Trident') != -1) {
          window.location =
            'http://' + location.host + '/UI/IE_index.html' + location.search
        } else {
          window.location =
            'http://' + location.host + '/UI/index.html' + location.search
        }
      }
    </script>

    <div id="root" class="root"></div>

    <script id="myTmpl" type="text/x-jsrender">
      <div class="box_logo">
        <img src="./warning.png" class="logo" />
      </div>
      <div class="span_hint">
        {{:hint}}
      </div>
      <div class="box_card">
        <h3>
          {{:card1}}
        </h3>
        <p>{{:Supported_browsers}}</p>
        <ul>
          <li>{{:browser1}}</li>
          <li>{{:browser2}}</li>
          <li>{{:browser3}}</li>
          <li>{{:browser4}}</li>
          <li>{{:browser5}}</li>
        </ul>
      </div>

      <div class="box_card">
        <h3>{{:command_card}}</h3>
        <p class="indent relative">
          {{:step1}}
          <span class="index">1</span>
        </p>
        <p class="indent relative">
          {{:step2}}
          <span class="index">2</span>
        </p>
        <p class="indent">
          {{:cert}}
        </p>
      </div>
    </script>

    <script>
      var site = window.location.search.split('=').pop()
      var xmlhttp = new XMLHttpRequest()
      var t = new Date().getTime()
      var url = '/UI/' + (site === 'JP' ? 'ja' : 'en') + '.json?t=' + t
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var myData = JSON.parse(xmlhttp.responseText)
          myFunction(myData) //
        }
      }
      xmlhttp.open('GET', url, true)
      xmlhttp.send()
      function myFunction(data) {
        var $ = window.jsrender
        var tmpl = $.templates('#myTmpl')
        var html = tmpl.render(data)
        document.getElementById('root').innerHTML = html
      }
    </script>

    <!-- <div class="root"> -->
    <!-- <div class="box_logo">
        <img src="./icon.png" class="logo" />
        <span class="box_title">
          <span class="title">TREND MICRO VISION ONE</span>
          <br />
          <span class="subTitle">XDR Endpoint Checker</span>
        </span>
      </div> -->
    <!-- </div> -->
  </body>
</html>
