<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Onfido SDK Demo</title>
    <meta name="viewport" content="width=device-width, minimal-ui" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <% if (process.env.NODE_ENV !== "development"){ %>
    <meta
      http-equiv="Content-Security-Policy"
      content="
        default-src 'self';
        script-src 'self' https://www.woopra.com https://sentry.io;
        style-src 'self' 'unsafe-inline' https://assets.onfido.com;
        connect-src blob: <%= process.env.NODE_ENV === 'test' ? 'https://localhost:8080' : '' %> *.onfido.com wss://*.onfido.com *.dev.onfido.xyz wss://*.dev.onfido.xyz https://www.woopra.com https://sentry.io;
        img-src 'self' data: blob: https://lipis.github.io/flag-icon-css/;
        media-src blob:;
        object-src 'self' blob:;
        frame-src 'self' data: blob:;
    "
    />
    <% } %>
    <style type="text/css">
      html,
      body,
      #previewer-app {
        height: 100%;
        margin: 0;
      }
      iframe,
      .iframe-wrapper {
        width: 100%;
        height: 100%;
        border: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .iframe-wrapper {
        overflow: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .iframe-wrapper.dark {
        background: rgb(43, 45, 51);
      }
      iframe {
        outline: 10px solid rgba(255, 0, 0, 0.3);
        overflow: hidden;
      }
      #previewer-app {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .previewer {
        display: flex;
        height: 100%;
      }
      .sidebar {
        flex-shrink: 0;
        width: 280px;
        height: 100%;
        overflow: auto;
        padding: 16px;
        box-sizing: border-box;
        background: rgb(43, 45, 51);
        border-left: 2px solid rgb(30, 30, 36);
        color: rgb(233, 236, 240);
        font: 14px/1.2 monospace;
      }
      .sidebar > div {
        margin-top: 52px;
      }
      .sidebar h1 {
        color: rgb(92, 108, 255);
        margin-top: 0;
        margin-bottom: 0.1em;
      }
      .sidebar a {
        color: rgb(92, 108, 255);
      }
      .sidebar label,
      .sidebar .label {
        display: block;
        margin-bottom: 1em;
      }
      .sidebar .small {
        width: 40px;
      }
      .systemInfo {
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <div id="previewer-app"></div>
  </body>
</html>
