<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Crafty Controller</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css" />
    <link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css" />
    <link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css" />
    <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css" />
    <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="Crafty" />
    <link rel="apple-touch-icon" href="../static/assets/images/Crafty_4-0.png" />

    <!-- endinject -->
    <!-- Plugin css for this page -->
    <!-- End Plugin css for this page -->
    <!-- Layout styles -->
    <link rel="stylesheet" href="/static/assets/css/dark/style.css" />
    <!-- End Layout styles -->
    <link rel="shortcut icon" type="image/svg+xml" href="/static/assets/images/logo_small.svg" />
    <link rel="alternate icon" href="/static/assets/images/favicon.png" />
  </head>
  <style>
    .auth.auth-bg-1 {
      background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
        url("/static/assets/images/auth/login_1.jpg");
      background-size: cover;
    }
  </style>

  <body class="dark-theme">
    <div class="container-scroller">
      <div class="container-fluid page-body-wrapper full-page-wrapper">
        <div class="content-wrapper d-flex align-items-center auth auth-bg-1 theme-one" >
          <div class="row w-100">
            <div class="col-lg-4 mx-auto">
              <div class="auto-form-wrapper">
                <div class="text-center">
                  <img alt="Crafty Logo" src="/static/assets/images/logo_long.svg" /><br /><br />
                  <div class="col-sm-12 grid-margin stretch-card">
                    <div class="card card-statistics social-card google-card card-colored" >
                      <div class="card-body">
                        <h4 class="platform-name mb-3 mt-4 font-weight-semibold user-name" >
                          {{ translate('accessDenied', 'accessDenied', data['lang']) }}
                        </h4>
                        <h5 class="headline font-weight-medium">
                          {{ translate('accessDenied', 'noAccess', data['lang']) }}
                        </h5>
                        <p class="mb-2 comment font-weight-light">
                          {{ translate('accessDenied', 'contactAdmin',
                          data['lang']) }}<br /><br /> 
                          <a class="d-inline font-weight-medium" href="https://discord.gg/9VJPhCE" > {{ translate('accessDenied', 'contact', data['lang']) }}</a>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="/static/assets/vendors/js/vendor.bundle.base.js"></script>
    <!-- endinject -->
    <!-- inject:js -->
    <script src="/static/assets/js/shared/off-canvas.js"></script>
    <script src="/static/assets/js/shared/hoverable-collapse.js"></script>
    <script src="/static/assets/js/shared/misc.js"></script>
    <script src="/static/assets/js/shared/settings.js"></script>
    <script src="/static/assets/js/shared/todolist.js"></script>
    <!-- endinject -->
    <script>
      $(document).ready(function () {
        let login_opacity_div = document.getElementById("login_opacity");
        let opacity = login_opacity_div.getAttribute("data-value");
        document.getElementById("login-form-background").style.background =
          "rgb(34, 36, 55, " + opacity / 100 + ")";
        //Register Service worker for mobile app
        if ("serviceWorker" in navigator) {
          navigator.serviceWorker
            .register("/static/assets/js/shared/service-worker.js", {
              scope: "/",
            })
            .then(function (registration) {
              console.log("Service Worker Registered");
            });
        }
      });
    </script>
  </body>
</html>