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

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

{% block app-content %}
	<div class="row">
		<div class="col-md-12">
			<div id="resources"></div>
        </div>
	</div>
	{% if app.service_instances %}
	<div class="row">
		<div class="col-md-12">
            <h3>Services</h3>
            <div class="content">
                <table class="table containers-app">
                    <thead>
                    <tr>
                        <th>service</th>
                        <th>name</th>
                    </tr>
                    </thead>
                    <tbody>
					{% for instance in app.service_instances %}
                    <tr>
                        <td>{{ instance.servicename }}</td>
                        <td><a href="{% url 'service-detail' instance.servicename instance.name %}"> {{ instance.name }} </a></td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
	</div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static "js/jquery.min.js" %}"></script>
<script src="{% static "js/jquery.flot.min.js" %}"></script>
<script src="{% static "js/jquery.flot.time.min.js" %}"></script>
<script src="{% static "js/jquery.flot.tooltip.min.js" %}"></script>
<script src="{% static "js/resources.js" %}"></script>
{% endblock %}
