{% extends "base.html" %}

{% block extrahead  %}
    {{ block.super }}
    <script type="module" src="/static/keypme-completion.js"></script>
{% endblock %}

{% load ldap_front %}

{% block content %}
<h3>Group {{group.name}}</h3>

<div class="container group_view">
	<div class="row">
		<label class="col-sm-3 col-col-sm-3 col-form-label">Group name</label>
		<div class="col-sm-9">{{group.name}}</div>
	</div>
	<div class="row">
		<label class="col-sm-3 col-form-label">Description</label>
		<div class="col-sm-9">{{group.description}}</div>
	</div>
	<div class="row">
		<label class="col-sm-3 col-form-label">Users</label>
		<div class="col-sm-9">
			<ul class="group_view_list_user">
				{% for user in group.users %}
					<li class="group_view_user">
						<form action="{% url 'group_delete_user' name=group.name %}" method="post">
							{% csrf_token %}
							<input type="hidden" name="user_dn" value="{{user.dn}}" />
							{{user.name}}
							<button type="submit" class="btn btn-link"><i class="bi bi-trash-fill"></i></button>
						</form>
					</li>
				{% endfor %}
			</ul>
			<form action="{% url 'group_add_user' name=group.name %}" method="post" class="row">
				{% csrf_token %}
				<div class="col-auto">
					{{add_user_form.user_dn.errors}} {{add_user_form.user_dn}}
				</div>
				<!--<input type="submit" class="btn btn-primary btn-sm" value="Add" />-->
				<div class="col-auto" style="padding-left:0;">
					<button type="submit" class="btn btn-primary">Add</button>
				</div>
			</form>
		</div>
	</div>

	<div>
		<div class="panel-heading collapsed" data-bs-toggle="collapse" data-bs-target="#collapseGroupAccountInfo" aria-expanded="false" aria-controls="collapseGroupAccountInfo">Group Account Information</div>
		<div class="collapse" id="collapseGroupAccountInfo">
			<div class="row">
				<label class="col-sm-3 col-form-label">DN</label>
				<div class="col-sm-9">{{group.dn}}</div>
			</div>
	  	</div>
	</div>

	<div>
		<div class="panel-heading collapsed" data-bs-toggle="collapse" data-bs-target="#collapseGroupAccountLogs" aria-expanded="false" aria-controls="collapseGroupAccountLogs">Group Logs</div>
		<div class="collapse" id="collapseGroupAccountLogs">
			<div class="row">
				<label class="col-sm-3 col-form-label">Creation date</label>
				<div class="col-sm-9">{{group.created_datetime|default_if_none:"-"}}</div>
			</div>
			<div class="row">
				<label class="col-sm-3 col-form-label">Last modification date</label>
				<div class="col-sm-9">{{group.last_modified_datetime|default_if_none:"-"}}</div>
			</div>
		</div>
	</div>
</div>

<div style="margin-top: 10px;">
	<a class="btn btn-primary" href="{% url 'group_edit' name=group.name %}">Edit</a> <a class="btn btn-primary" href="{% url 'group_delete' name=group.name %}">Delete</a>
</div>
{% endblock %}