<div class="modal fade" id="edit-contributor-modal">
  <div class="modal-dialog">
    <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 Contributor</h4>
      </div>

      <div class="modal-left-image" style="float: left;"></div>
      <div class="modal-body" style="padding: 20px 20px 0 220px;">
        <h2 class="full_name" style="margin-top: 0;"></h2>

        <form method="post" action="" id="edit-contributor-form">{% csrf_token %}
          {% for field in edit_contributor_form %}
          <div class="form-group">
            {{ field.errors }}
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
          </div>
          {% endfor %}
          <button type="submit" class="btn btn-default pull-right">Change Role</button>
          <div class="clearfix"></div>
        </form>
      </div>

      <div class="modal-footer" style="margin-top: 0;">
        <button type="button" class="btn btn-danger" id="remove-contributor">Remove Contributor</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
$(document).ready(function() {
  $('#edit-contributor-form').ajaxForm({
    'dataType': 'json',
    'resetForm': true,
    'success': function(data) {
      if(data.success) {
        $('#edit-contributor-modal').modal('hide');

        $bubble = $('#contributor-list').children('[data-pk=' + data.pk + ']');

        $bubble.attr('title', data.full_name + ', ' + data.role).tooltip('destroy');
        $bubble.attr('data-role-pk', data.role_pk);
        $bubble.attr('data-role', data.role);
        $bubble.children('img').attr('alt', data.full_name + ', ' + data.role);
      } else {
        alert("Sorry, an error occored: " + data.error);
      }
    }
  });

  $('#remove-contributor').click(function() {
    if(confirm('Are you sure you want to remove this contributor?')) {
      $.get("{% url 'remove_contributor' pk=post.pk %}" + $(this).attr('data-pk') + '/', function(data) {
        if(data.success) {
          $('#edit-contributor-modal').modal('hide');

          $bubble = $('#contributor-list').children('[data-pk=' + data.pk + ']');
          $bubble.remove();        
        } else {
          alert("Sorry, an error occored: " + data.error);
        }
      });
    }
  });
})
</script>

{{ edit_contributor_form.media }}
