<div style="padding: 20px; border-bottom: 1px solid #ddd; background: #fff; margin-bottom: 20px;">
  <div style="width: 500; margin: 0 auto">
    {% if preview.subject %}<h1>{{ preview.subject }}</h1>{% endif %}
    <label for="event" style="margin-right: 10px">Selection:</label>
    <select id="event" style="width: 200px; margin-right: 20px;">
      <option></option>
      <optgroup label="Activity">
        <option value="mail/assigned/">Assigned</option>
        <option value="mail/assigned/self/">Assigned (Self)</option>
        <option value="mail/note/">Note</option>
        <option value="mail/new-release/">Release</option>
        <option value="mail/regression/">Regression</option>
        <option value="mail/regression/release/">Regression (w/ Release)</option>
        <option value="mail/resolved/">Resolved</option>
        <option value="mail/resolved-in-release/">Resolved In Release</option>
        <option value="mail/resolved-in-release/upcoming/">Resolved In Release (Upcoming)</option>
        <option value="mail/unassigned/">Unassigned</option>
      </optgroup>
      <optgroup label="Alerts">
        <option value="mail/alert/">Alert</option>
        <option value="mail/digest/">Digest</option>
      </optgroup>
      <optgroup label="Account">
        <option value="mail/confirm-email/">Confirm Email</option>
        <option value="mail/recover-account/">Reset Password</option>
      </optgroup>
      <optgroup label="Membership">
        <option value="mail/request-access/">Access Requested</option>
        <option value="mail/access-approved/">Access Approved</option>
        <option value="mail/invitation/">Membership Invite</option>
      </optgroup>
      <optgroup label="Reports">
        <option value="mail/report/">Weekly Report</option>
      </optgroup>
    </select>

    <label for="format" style="margin-right: 10px">Format:</label>
    <select id="format" style="width: 100px">
      <option value="html">HTML</option>
      <option value="txt" {% if format == 'txt' %} selected="selected"{% endif %}>Plaintext</option>
    </select>
  </div>
</div>

<script type="text/javascript">
function selectEmail(e) {
  var value = e.target.value;
  window.location.href = '/debug/' + value;
}

function selectFormat(e) {
  var value = e.target.value;
  window.location.href = window.location.pathname + '?format=' + value;
}

var eventSelect = document.getElementById('event');
eventSelect.addEventListener('change', selectEmail);

var formatSelect = document.getElementById('format');
formatSelect.addEventListener('change', selectFormat);
</script>

<div id="preview">
  {% if format == 'txt' %}
    <pre>{{ preview.text_body|safe }}</pre>
  {% else %}
    {{ preview.html_body|safe }}
  {% endif %}
</div>
