{% extends "layout.html" %}

{% block body %}

<script type="text/javascript">

  function deletePost(post_id) {

    if(confirm("Do you really want to delete this post?")) {

      $.post(

        '/posts/delete/',

        {'post_id': post_id},

        function() {

          alert("The post has been deleted!!");

          window.location.href = '/';

        });

    }

    return false;

  }

  function editPost(entry) {

  t = _.template($("#editTemplate").html());

  $(".modal-body").append(t(items=entry));

  $("input").each(function(item) {

    $(this).val(entry[$(this).attr('for')]);

  }, this);

  $("#editModal").modal();

  }

</script>

<ul class="entries">

  {% for entry in entries %}

    <li>

      @<b>{{ entry.who }}</b>

      <b>#{{ entry.what }}</b> /{{ entry.where }} {{ entry.how|safe }}

      {% if session.logged_in %}

      {% if session.isAdmin or session.username == entry.who %}

      <button class="right btn btn-sm btn-default" onclick='editPost({{entry.how|tojson|safe}})'>

        <i class="glyphicon glyphicon-edit"></i>

      </button>

      <a class="pull-right" href="#" onclick='deletePost({{entry.id|string|tojson|safe}})'>

        <i class="glyphicon glyphicon-trash"></i>

      </a>

      {% endif %}

      {% endif %}

    </li>

	{% endfor %}

</ul>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">

  <div class="modal-dialog modal-lg">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

        <h4 class="modal-title">Edit SWeeT</h4>

      </div>

      <div class="modal-body row">

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>

    </div><!-- /.modal-content -->

  </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script type="text/template" id="editTemplate">

<form action="" method="post">

  <% _.each(items, function(item, key) { %>

    <div class="input-group col-md-12">

  <label> <%= key %> </label>

    <input name=<%= key %>  for=<%= key %> class="form-control" type="text"> </input>

  </div>

  </br>

    <% }) %>

    <button class="btn btn-default" type="submit">Save</button>

</form>

</script>

{% endblock %}