<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email page</title>
  <link rel="stylesheet" href="../ui/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../style.css">
  <style>
    .code { font: 14px/1.5 Consolas, monospace; background-color: #444; color: #fff; }
    .alert { font: 14px/1.5 Consolas, monospace; background-color: #eee; }
    .hidden { display: none; }
    .run { display: flex; justify-content: space-between; align-items: center; }
    .run:after {
      content: "Copy it";
      font-size: 75%;
      color: #0563c1;
    }
  </style>
</head>

<body class="container">

  <nav class="menu">
    <h1>
      <a href=".">Back to Alert</a>
    </h1>
  </nav>

  <section class="content">
    <h1>Send an alert</h1>

    <form method="POST" action="sendmail">
      <input type="hidden" name="_xsrf" value="{{ handler.xsrf_token }}">
      <p><label for="conf">Configuration:</label></p>
      <p><textarea class="code" name="conf" rows="12" cols="80"></textarea></p>
      <p>
        <button type="submit">Run the alert</button>
      </p>
    </form>
    <div class="alert"></div>
  </section>

  <h2 class="run">Standard alert</h2>
  <pre class="code" id="standard-alert">
  to: s.anand@gramener.com
  subject: Alert from Gramex
  html: This email will be sent to {{! config.to }} using the
        &lt;code&gt;{{! config.service }}&lt;/code&gt; service.
  </pre>

  <script src="../ui/jquery/dist/jquery.min.js"></script>
  <script>
    var $submit_button = $('button[type="submit"]')
    $('.alert').hide()
    $('form').on('submit', function(e) {
      e.preventDefault()
      $submit_button.prop('disabled', true).append('<i class="fa fa-spinner fa-spin"></i>')
      $('.alert').hide()
      $.ajax({
        url: 'sendmail',
        method: 'POST',
        data: $(this).serialize()
      }).done(function(data) {
        $('.alert').text(data).show()
      }).fail(function(xhr, status, reason) {
        $('.alert').text(reason).show()
      }).always(function() {
        $submit_button.prop('disabled', false).find('i').remove()
      })
    })

    $('.run').on('click', function() {
      $('.code').text($(this).next('pre').text())
      $(window).scrollTop(0)
    })
  </script>
</body>
</html>
{% import gramex.cache %}
{% import alertapp %}
{% set gramex.cache.reload_module(alertapp) %}
