{% extends 'base.html' %}

{% block head %}
<title>{{ current_issue.title }}</title>
<script type="text/javascript">
$(document).ready(function() {
  $('#subscribeForm').submit(function(e) {
    e.preventDefault();
    var email = $('#email').val();
    $('#subscribeBtn').attr("disabled", "disabled").text("Subscribing...");
    $.post("/erang/subscribe/", {
      'email': email
    }, function(response) {
      $('#subscribe').slideUp("slow", function() {
        $(this).addClass("response").html("<b>" + email + "</b>" + " has been subscribed to eRang. Thanks!");
        $(this).slideDown("slow");
      });
    });
  });
  $('#commentForm').submit(function(e) {
    e.preventDefault();
    $('#commentSubmit').attr("disabled", "disabled").text("Submitting...");
    $.post("/erang/postfeedback/", {
      'name': $('#commentName').val(),
      'email': $('#commentEmail').val(),
      'comment': $('#commentComment').val(),
      'issue': document.title
    }, function(response) {
      $('#commentWrapper').slideUp("slow", function() {
        $(this).addClass("response").html("Your feedback has been emailed to us at erang" + "@" + "theatreforum.in. Thanks!");
        $(this).slideDown("slow", function() { 
          $(document).scrollTop($(document).height());
        });
      });
    });    
  });
});  

</script>
<style type="text/css">
  body {
   
  }

  #leftMenu {
    float: left;
    width: 200px;
    margin-top: 250px;
  }

  #wrapper {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
  }

  #newsletterContent {
    width: 780px;
    float: left;
    margin-left: 15px;
  }

  #commentTable {
    width: 100%;
  }

  .label {
    text-align: right;
    width: 30%;
  }

  #commentComment {
    width: 400px;
    height: 250px;
  }

  .newsletterList a {
    text-decoration: none;
  }

  .response {
    font-size: 11px;
    text-align: center;
    color: #363636;
  }

  ul {
    padding-top: 0px;
  }

  h3 {
    padding: 0px;
    margin-bottom: 4px;
  }
</style>
{% endblock %}

{% block body %}
  <div id="leftMenu">
    <h3>Past Issues:</h3>
    <ul class="newsletterList">
      {% for p in past_issues %}
        <li><a href="?issue_id={{p.id}}">{{ p.title }}</a></li>
      {% endfor %}
    </ul>
    <div id="subscribe">
      <h3>Subscribe:</h3>
      <form id="subscribeForm">
        <input id="email" name="email" data-placeholder="E-Mail" /><br />
        <button id="subscribeBtn">Subscribe!</button>
      </form>
    </div>
  </div>
  <div id="newsletterContent">
    {% autoescape off %}
    {{ current_issue.html }}
    {% endautoescape %}
    <div id="commentWrapper">
      <h3>Comments and Feedback</h3>
      <a name="comments"></a>
      <form id="commentForm" action="">
        <table id="commentTable">
          <tr>
            <td class="label">Name:</td>
            <td><input name="commentName" id="commentName" /></td>
          </tr>
          <tr>
            <td class="label">Email:</td>
            <td><input name="commentEmail" id="commentEmail" /></td>
          </tr>
          <tr>
            <td class="label">Comment:</td>
            <td><textarea name="commentComment" id="commentComment"></textarea></td>
          </tr>
          <tr>
            <td class="label"></td>
            <td><button id="commentSubmit">Submit</button></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
{% endblock %}