{% 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="services" %}
{% endblock %}

{% block header %}
<h1>{{ instance.Name }}</h1>
{% endblock %}

{% block content %}
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<div class="widget">
				<div class="title">
					<span class="icon">
						<i class="icon-signal"></i>
					</span>
					<h5>Bound apps</h5>
				</div>
				<div class="content">
					<ul class="no-style">
						{% for app in instance.Apps %}
						<li>
						<div class="row-fluid">
							<div class="span3">
								{{ app }}
							</div>
							<div class="span8">
								<a class="btn btn-primary" href="{% url 'unbind' instance.ServiceName instance.Name app %}">Unbind</a>
							</div>
						</div>
						</li>
						{% endfor %}
						<li>
						<div class="row-fluid">
							<form action="{% url 'bind' instance.ServiceName instance.Name %}" method="post">
								<div class="span3">
									{% csrf_token %}
									<select name="app">
										<option>Select an app...</option>
										{% for app in apps %}
										<option value="{{ app }}">{{ app }}</option>
										{% endfor %}
									</select>
								</div>
								<div class="span8">
									<button class="btn btn-primary" href="#">Bind</button>
								</div>
							</form>
						</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span12">
			<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 instance</a>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="confirmation" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<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 {{ instance.Name }} This action CANNOT be undone. This will delete the <strong>{{ instance.Name }}</strong></p>

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

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