<!DOCTYPE html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-beta19
* @link https://tabler.io
* Copyright 2018-2023 The Tabler Authors
* Copyright 2018-2023 codecalm.net PaweÅ‚ Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title data-translate="RegisterVerify.Title"></title>
    <!-- Essential JS -->
    <script>
      const lang = <%- JSON.stringify(language) %>
    </script>
    <script src="<%= domain %>/appjs/i18next.js?<%= curentUnixTime %>"></script>
    <!-- CSS files -->
    <link href="<%= domain %>/dist/css/tabler.min.css?<%= curentUnixTime %>" rel="stylesheet"/>
    <link href="<%= domain %>/dist/css/tabler-flags.min.css?<%= curentUnixTime %>" rel="stylesheet"/>
    </style>
  </head>
  <body class="d-flex flex-column">
    <script src="<%= domain %>/appjs/format.js"></script>
    <div class="page page-center">
      <div class="container container-tight py-4">
        <div class="text-center mb-4">
          <a href="." class="navbar-brand navbar-brand-autodark"><img src="<%= domain %>/dist/logo-transparent.png" height="36" alt="" /></a>
        </div>
        <div class="card card-md">
          <div class="card-body">
            <h2 class="card-title text-center mb-4" data-translate="RegisterVerify.Headline"></h2>
            <div id="ErrorLine"></div>
            <div class="form-footer">
              <button type="submit" id="RegVerifyButton" class="btn btn-primary w-100" data-translate="RegisterVerify.VerifyMail"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="<%= domain %>/appjs/permission.js?<%= curentUnixTime %>" defer></script>
    <script src="<%= domain %>/appjs/translate.js?<%= curentUnixTime %>"></script>
    <script src="<%= domain %>/dist/js/tabler.min.js?<%= curentUnixTime %>" defer></script>
    <script src="<%= domain %>/appjs/layout.js?<%= curentUnixTime %>"></script>
    <script>
      document.getElementById("RegVerifyButton").addEventListener("click", function () {
        const url = window.location.href;

        fetch(`<%= domain %>/api/v1/register/<%= params.urlPath %>/verify`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
        }).then(async (response) => {
          const response_json = await response.json();
          if (response.status == 200) {
            document.getElementById('ErrorLine').innerHTML = '<div class="alert alert-success">' + i18next.t('RegisterVerify.Success') + '</div>';
            document.getElementById("RegVerifyButton").classList.add("btn-success");
            document.getElementById("RegVerifyButton").disabled = true;
            setTimeout(() => {
              window.location.href = "/login";
            }, 5000);
          } else {
            document.getElementById("RegVerifyButton").classList.add("btn-danger");
            document.getElementById("ErrorLine").innerHTML = `<div class="alert alert-danger" role="alert">${response_json.message}</div>`;
          }
        });
      });
    </script>
  </body>
</html>
