{% extends "skeleton.html" %}
{% block page_title %}Inbound Mail{% endblock %}

{% block page_head %}
  <style type="text/css">{% include "mail.css" %}</style>
{% endblock %}


{% block body %}
<div id="mail">
  <h3>Inbound Mail</h3>
  <div id="mail-feedback"></div>
  <form id="mail-form" action="/mail" method="post">

    <div class="ae-settings-block">
      <label for="from">From</label>
      <input type="text" id="from" name="from" size="40">
    </div>

    <div class="ae-settings-block">
      <label for="to">To</label>
      <input type="text" id="to" name="to" size="40">
    </div>

    <div class="ae-settings-block">
      <label for="cc">Cc</label>
      <input type="text" id="cc" name="cc" size="40">
    </div>

    <div class="ae-settings-block">
      <label for="subject">Subject</label>
      <input type="text" id="subject" name="subject" size="40">
    </div>

    <div id="body-fields" class="ae-settings-block">
      <label for="body">Message body (plain text)</label>
      <textarea id="body" name="body" rows="10" cols="50"></textarea>
    </div>

    <div id="mail-submit">
      <input class="ae-button ae-button-submit" type="submit" value="Send Email">
    </div>
  </form>

  <script>
$('#mail-form').submit(function() {
  var data = {'from': $('#from').val(),
              'to': $('#to').val(),
              'cc': $('#cc').val(),
              'subject': $('#subject').val(),
              'body': $('#body').val(),
              'xsrf_token': '{{ xsrf_token }}',
             };

  var request = $.ajax({
    url: '/mail',
    type: 'POST',
    data: data
  })
  .done(function() {
    $('#mail-feedback').removeClass().addClass('messagebox').text(
        'Request suceeded!');
  })
  .fail(function(xhr, textStatus) {
    $('#mail-feedback').removeClass().addClass('errorbox').text(
        'Request failured with status: ' + request.status);
  });
  return false;
});
  </script>
</div>
{% endblock %}
