<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <title><%= t('talk-plugin-notifications.unsubscribe_page.unsubscribe') %></title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <link rel="stylesheet" href="<%= BASE_PATH %>public/css/admin.css">
    <%- include(root + '/partials/head') %>
  </head>
  <body class="confirm-email-page">
    <div id="root">
      <div class="error-console container"><%= t('talk-plugin-notifications.unsubscribe_page.token_invalid') %></div>
      <div id="success" style="display:none;" class="legend container"><%= t('talk-plugin-notifications.unsubscribe_page.are_unsubscribed') %></div>
      <form id="unsubscribe-form" class="container">
        <legend class="legend"><%= t('talk-plugin-notifications.unsubscribe_page.click_to_confirm') %></legend>
        <button type="submit"><%= t('talk-plugin-notifications.unsubscribe_page.confirm') %></button>
      </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var submitting = false;
        var payload = JSON.stringify({token: location.hash.replace('#', '')});
        function handleSubmit(e) {
          e.preventDefault();

          if (submitting) {
              return;
          }

          submitting = true;
          $('.error-console').removeClass('active');

          $.ajax({
            url: '<%= BASE_PATH %>api/v1/account/unsubscribe-notifications',
            contentType: 'application/json',
            method: 'POST',
            data: payload,
          }).then(function (success) {
            $('#unsubscribe-form').fadeOut(function () {
                $('#success').fadeIn();
            });
          }).catch(function () {
            submitting = false;
            $('.error-console').addClass('active');
          });
        }

        $.ajax({
          url: '<%= BASE_PATH %>api/v1/account/unsubscribe-notifications/verify',
          contentType: 'application/json',
          method: 'POST',
          data: payload,
        })
        .then(function () {
          $('#unsubscribe-form').fadeIn().on('submit', handleSubmit);
        })
        .catch(function () {
          $('.error-console').addClass('active');
        });
      });
    </script>
  </body>
</html>