{% extends 'pagination/pagination_base.html' %}
{% load custom_tags_and_filters %}
{% block title %}Accounts and projects{% endblock %}
{% block before_pagination %}
	<h1>
		Accounts and projects
		<span class="hidden-sm hidden-xs">
			<a href="{% url 'create_project' %}" class="btn btn-success pull-right" style="margin-left:17px">New project</a>
			<a href="{% url 'create_account' %}" class="btn btn-success pull-right">New account</a>
		</span>
	</h1>
	<div class="row visible-sm visible-xs" style="margin-bottom:17px">
		<div class="col-sm-12">
			<a href="{% url 'create_project' %}" class="btn btn-success pull-right">New project</a>
			<a href="{% url 'create_account' %}" class="btn btn-success">New account</a>
		</div>
	</div>
	<div class="row">
		<div class="col-md-4" id="search_container">
			<input id="search" type="text" placeholder="Search for an account or project" class="form-control" autofocus>
		</div>
	</div>
{% endblock %}
{% block pagination_content %}
	<table class="table table-bordered table-condensed table-hover thead-light">
			<thead>
				<tr>
					<th>{% include 'pagination/pagination_column.html' with order_by='name' name='Name' %}</th>
					<th>Project Identifier</th>
					<th class="button-column-minimum">{% include 'pagination/pagination_column.html' with order_by='active' name='Active' %}</th>
					<th class="button-column-minimum"></th>
				</tr>
			</thead>
			<tbody>
				{% for account in page %}
					<tr style="background-color: #f9f9f9">
						<td id="chevron_{{ account.id }}" data-toggle="collapse" data-target=".projects_{{ account.id }}" onclick="toggle_details($('#chevron_{{ account.id }}'))" style="font-weight: bold">
							<span class="glyphicon glyphicon-chevron-down pull-left chevron"></span>
							{{ account.name }}
						</td>
						<td data-toggle="collapse" data-target=".projects_{{ account.id }}" onclick="toggle_details($('#chevron_{{ account.id }}'))"></td>
						<td class="text-center">
							<form method="post" action="{% url 'toggle_active' 'account' account.id %}">
								{% csrf_token %}
								{% if account.active %}
									<button type="submit" class="btn btn-xs btn-success" title="Deactivate"><i class="glyphicon glyphicon-ok"></i></button>
								{% else %}
									<button type="submit" class="btn btn-xs btn-danger" title="Reactivate"><i class="glyphicon glyphicon-remove"></i></button>
								{% endif %}
							</form>
						</td>
						<td>
							<button type="button" class="btn btn-xs btn-primary" title="View account" onclick="window.location = '{% url 'account' account.id %}'"><i class="glyphicon glyphicon-search"></i></button>
						</td>
					</tr>
					{% for project in account.project_set.all %}
						<tr class="collapse in projects_{{ account.id }}">
							<td style="padding-left: 28px">{{ project.name }}</td>
							<td>{{ project.application_identifier }}</td>
							<td class="text-center">
								<form style="display:inline" method="post" action="{% url 'toggle_active' 'project' project.id %}">
									{% csrf_token %}
									{% if project.active %}
										<button type="submit" class="btn btn-xs btn-success" title="Deactivate"><i class="glyphicon glyphicon-ok"></i></button>
									{% else %}
										<button type="submit" class="btn btn-xs btn-danger" title="Reactivate"><i class="glyphicon glyphicon-remove"></i></button>
									{% endif %}
								</form>
							</td>
							<td>
								<button type="button" class="btn btn-xs btn-primary" title="View project" onclick="window.location = '{% url 'project' project.id %}'"><i class="glyphicon glyphicon-search"></i></button>
							</td>
						</tr>
					{% empty %}
						<tr class="collapse in projects_{{ account.id }}">
							<td colspan="4" style="padding-left: 28px">
								<span class="grey">This account does not have any projects</span>
							</td>
						</tr>
					{% endfor %}
				{% endfor %}
			</tbody>
		</table>
{% endblock %}
{% block after_pagination %}
	<script>
		function get_account(jquery_event, search_selection, dataset_name)
		{
			if(search_selection.type === 'project')
				window.location.href = "{% url 'project' 999 %}".replace('999', search_selection.id);
			else if(search_selection.type === 'account')
				window.location.href = "{% url 'account' 999 %}".replace('999', search_selection.id);
		}
		function on_load()
		{
			$('#search').autocomplete('accounts_and_projects', get_account, {% json_search_base_with_extra_fields accounts_and_projects 'application_identifier' %});
		}
		window.addEventListener('load', on_load, true);
	</script>
	<style>
		#search_container .tt-dropdown-menu
		{
			min-width: 400px;
			max-height: 600px;
		}
	</style>
{% endblock %}