<html>
<head profile="http://www.w3.org/1999/xhtml/vocab">
  <title><%-lng(page.title)%></title>
  <meta charset="utf-8">
  <%-css('status/compatibility')%>
  <%-js('lib/ua-parser.min')%>
  <%-js('main/compatibility')%>
</head>

  <body>
    <img class="logo" src="<%-get_media('logo/small')%>">
    <div id="message-compatible" class="hidden">
      <h3><%-lng(page.compatible.title)%></h3>
      <p><%-lng(page.compatible.description)%></p>
        <a class="button" href="<%-get_path('/')%>"><%-lng(page.compatible.action)%></a>
    </div>
    <div id="message-incompatible" class="hidden">
    <h3><%-lng(page.incompatible.title)%></h3>
    <p><%-lng(page.incompatible.description)%></p>

    <div class="suggest">

      <p><%-lng(page.suggest.message)%></p>

      <%for(var item of page.suggest.list){%>
        <a class="suggestion" href="<%-item.url%>" target="_blank">
        <div>
        <img src="<%-get_media('icons/general/'+item.name+'/small')%>">
        <p><%-lng(item.title)%></p>
        </div>
        </a>
      <%}%>
    </div>
    </div>
    <p><%-lng(page.browser.intro)%></p>
    <p>
      <span id="browser-value"></span> <span id="version-value"></span>
    </p>

    <%-js('status/compatibility')%>

  </body>
</html>
