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

{% block extra_css %}
<link rel="stylesheet" href="{% static "css/abyss.widget.css" %}" />
<link rel="stylesheet" href="{% static "css/abyss.services.css" %}" />
{% endblock %}

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

{% block header %}
<h1>{{ team.name }}</h1>
{% endblock %}

{% block content %}
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div class="widget">
				<div class="title">
					<span class="icon">
						<i class="icon-signal"></i>
					</span>
					<h5>Add user to team</h5>
				</div>
				<div class="content">
					<form action="{% url 'team-user-add' team.name %}" method="post">
						{% csrf_token %}
						<fieldset>
							<div class="control-group">
								<label>Username</label>
								<input type="text" class="input-xlarge" name="user">
							</div>
							<button class="btn primary" type="submit">Add</button>
						</fieldset>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="widget">
				<div class="title">
					<span class="icon">
						<i class="icon-signal"></i>
					</span>
					<h5>Users</h5>
				</div>
				<div class="content">
					<ul class="no-style">
						{% for user in team.users %}
						<li>
						<div class="row">
							<div class="col-md-3">
								{{ user }}
							</div>
							<div class="col-md-8">
								<a class="btn btn-danger" href="{% url 'team-user-remove' team.name user %}" title="with team=team.name %}remove {{ user }} from {{ team }}">remove</a>
							</div>
						</div>
						</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="widget">
				<div class="title">
					<span class="icon">
						<i class="icon-signal"></i>
					</span>
					<h5>Dangerous!</h5>
				</div>
				<div class="content">
					<a class="btn btn-danger" href="#confirmation" data-toggle="modal"><i class="icon-remove icon-white"></i>Delete team</a>
				</div>
			</div>
		</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">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		<h3 id="myModalLabel">Are you sure?</h3>
	</div>
	<div class="modal-body">
		<p>with {{ team.name }} This action CANNOT be undone. This will delete the <strong>{{ team.name }}</strong></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="{% url 'team-remove' team.name %}">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
			<button class="btn btn-danger btn-remove" disabled="disabled">Delete team</button>
		</form>
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static "js/confirmation.js" %}"></script>
<script type="text/javascript">
	$.confirmation(".btn-remove", ".remove-confirmation", '{{ team.name }}');
</script>
{% endblock %}
