{% extends "base.html" %}
{% set page = 'pools' %}

{% block body_attributes %}ng-controller="PoolListController"{% endblock %}

{% block content %}

<div style="text-align: center; padding: 20px;">
	<div style="display: inline-block; text-align: left; width: 70%;">
		Pools is simply a time-saver for getting new prefixes. One or more larger prefixes are grouped together in a pool and when you want a new prefix, you can request one and the system will automatically allocate the first available one in that pool, for you.<br/><br/>
		Every pool can have a default type and default prefix-length which are used as the default for new prefixes that you request. You can naturally override the defaults on a per request basis.<br/><br/> 
		This page is used to administrate pools. If you want to get a new prefix, please go to the "prefixes" page and click "Add prefix".
	</div>
</div>

<div style="position: absolute; right: 20px; top: 14px;">
	<a href="/ng/pool#/pool/add" class="btn btn-success">Add pool</a>
</div>

<div style="text-align: center; padding: 30px;">
	<label>Search: <input type="text" ng-model="query"></label>
</div>
{% raw %}
<table class="listing" id="pool_table" style="width: 100%;" border=0>
	<thead class="listing">
		<tr>
			<th style="padding-left: 30px;">Name</th><th></th><th>Description</th><th>Default type</th><th width="75">4 / 6</th><th></th><th></th>
		</tr>
	</thead>
	<tbody class="listing">
		<tr ng-repeat="pool in pools | filter:query" id="pool_row{{ pool.id }}" data-pool-id="{{pool.id}}">
			<td style="padding-left: 30px;">{{ pool.name }}</td>
			<td><img ng-if="pool.tags|notEmpty" src="/images/tag-16.png" tooltip-html-unsafe="{{pool.tags|popoverFormatTags}}"></td>
			<td>{{ pool.description }}</td>
			<td>{{ pool.default_type }}</td>
			<td>{{ pool.ipv4_default_prefix_length || '-' }}&nbsp;/&nbsp;{{ pool.ipv6_default_prefix_length || '-' }}</td>
			<td style="padding-right: 0;">
				<div class="dropdown">
					<div class="dropdown-toggle minibutton">
						<div class="popup_button_icon">&nbsp;</div>
					</div>
					<div class="dropdown-menu popup_menu">
						<h3>Pool</h3>
						<a href="/ng/pool#/pool/edit/{{ pool.id }}">Edit</a>
						<a href="#" ng-click="poolConfirmRemove($event, pool)">Remove</a>
					</div>
				</div>
			</td>
			<td>
				<a type="button" class="btn btn-xs btn-success" href="/ng/prefix#/prefix/add/from-pool/{{ pool.id }}" tooltip="Add a prefix from this pool"><span class="glyphicon glyphicon-cloud-download"></span></a>
			</td>
		</tr>
	</tbody>
</table>
{% endraw %}

{% endblock %}