{% extends "apps/base.html" %}
{% load staticfiles %}

{% block sidebar %}
{% include "sidebar.html" with active="apps" %}
{% endblock %}

{% block app-content %}
<div class="row">
	<div class="col-md-12 teams">
		{% for team in app.teams %}
		<div class="row">
			<div class="col-md-10 app-teams">
				<p>{{ team }}</p>
			</div>
			<div class="content">
				<a class="btn btn-danger" href="#confirmation" data-toggle="modal" team-name="{{ team }}" team-url="{% url 'app-revoke-team' app.name team %}"><i class="icon-remove icon-white"></i> Revoke Team</a>
			</div>
		</div>
		{% endfor %}
	</div>
</div>
<div class="row">
	<div class="col-md-10 add-create">
		<a href="{% url 'app-add-team' app.name %}" class="btn btn-info">Add Team</a>
	</div>
</div>
</div>
<div id="confirmation" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h3 id="myModalLabel">Are you sure?</h3>
			</div>
			<div class="modal-body">
				<p> Are you sure you want to revoke access to this app? </p>

				<p>Please type in the name of your team to confirm.</p>
				<input type="text" class="remove-confirmation" />
			</div>
			<div class="modal-footer">
				<form method="get" action="team-url">
					<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
					<button class="btn btn-danger btn-remove" disabled="disabled">Revoke Team</button>
				</form>
			</div>
		</div>
	</div>
	{% endblock %}

	{% block extra_js %}
	<script src="{% static "js/confirmation.js" %}"></script>
	<script type="text/javascript">
	$(".teams .btn").on('click', function(ev) {
		ev.preventDefault();
		var teamName = $(this).attr("team-name");
		var teamUrl = $(this).attr("team-url");
		var confirmationForm = $("#confirmation form");
		confirmationForm.attr("action", teamUrl);
		$.confirmation(".btn-remove", ".remove-confirmation", teamName);
	});
	</script>
	{% endblock %}
