<block id="admin_breadcrumb">
	<li class="breadcrumb-item"><a href="../panels/helpdesk_admin.php"><txt name="panels:general:helpdesk">Helpdesk control panel</txt></a></li>
	<li class="breadcrumb-item"><a name="project_properties_link" href="../panels/helpdesk_edit_project.php?id={project_id}"><txt name="helpdesk:project:edit_project">Edit project</txt></a></li>
	<li class="breadcrumb-item"><a name="project_properties_link" href="../infocapture/admin_edit_fields_rights.php?id={project_id}"><txt name="helpdesk:project:edit_fields_rights">Edit rights for issues fields</txt></a></li>
	<li class="breadcrumb-item active" aria-current="page"><loc>Field Groups</loc></li>
</block>

<block id="page_body">
	<!--@head@
	<component class="\Claromentis\Core\Widget\CssLoader" src="/interface_default/infocapture/assets/css/admin.scss">
-->
<include file="../../common/js_localize.inc.html" />
<txt name="xajax"></txt>

<script type="text/javascript">
	require(['infocapture/field_groups', 'domReady'], function (ICFieldGroups, domReady) {
		window.groups = ${groups.json};
		window.projectId = ${project_id};
		domReady(function () {
			ICFieldGroups.init();
		});
	});
</script>

<h4 name="project_name">Project Name</h4>

<div class="card field-group-actions mb-3" data-spy="affix" data-offset-top="200">
	<div class="card-body">
		<form action="" method="post">
			<div class="row">
				<div class="col-md-5 col-sm-5">
					<input type="text" name="infocapture:admin:field_groups:filter_input" id="filterGroups" class="form-control" placeholder="Filter.." />
				</div>
				<div class="col-md-1 col-sm-1">
					<input type="button" name="infocapture:admin:field_groups:filter_clear" id="resetFilterGroups" value="Clear" class="btn btn-secondary" />
				</div>
				<div class="col-md-6 col-sm-6">
					<div class="btn-group float-right" role="group" aria-label="admin controls group">
						<a href="javascript:void(0);" id="undo" class="btn btn-secondary" rel="tooltip" style="display: none;">
							<ion-icon name="arrow-undo-outline"></ion-icon> <loc name="infocapture:admin:undo"></loc>
						</a>
						<a href="javascript:void(0);" id="save" class="btn btn-primary saveGroups" rel="tooltip" style="display: none;" data-project-id="{project_id}">
							<ion-icon name="save-outline"></ion-icon>
							<loc name="infocapture:admin:save"></loc>
						</a>
						<a href="javascript:void(0);" id="saving" class="btn btn-primary" style="display: none;">
							<ion-icon name="save-outline"></ion-icon>
							Saving
						</a>
						<a href="#addGroup" role="button" data-toggle="modal" class="btn btn-success">
							<ion-icon name="add-outline"></ion-icon>
							<loc name="helpdesk:status_group:add_new_group">Add new group</loc>
						</a>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>

<div id="addGroup" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" name="helpdesk:status_group:add_new_group">Add new Group</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">
						<ion-icon name="close-outline"></ion-icon>
					</span>
				</button>
			</div>
			<form action="" method="post" id="add-group">
				<div class="modal-body">
					<div class="form-group row">
						<label for="newGroupName" class="col-form-label col-md-3 col-sm-2"><loc name="helpdesk:status_group:name">Group name</loc></label>

						<div class="col-md-9 col-sm-10">
							<input type="text" name="infocapture:admin:field_groups:add_group_input" id="newGroupName" data-placement="right" class="form-control required" placeholder="New group name.." data-trigger="manual" maxlength="100"/>
						</div>
					</div>
				</div>

				<div class="modal-footer">
					<input type="submit" name="infocapture:admin:field_groups:add_group" id="newGroup" value="Add" class="btn btn-secondary"/>
				</div>
			</form>
		</div>
	</div>
</div>

<div id="group-list" class="mt-2"></div>

<script type="text/template" id="group-tmpl">
	<div class="col-md-6 js-group-block" data-group-id="{{=id}}">
		<div class="card mb-3">
			<div class="card-body">
				<div class="js-group-name">
					{{ if(id !== 0) { }}
					<div class="btn-group float-right" role="group" aria-label="actions group">
						<a href="javascript:void(0);" class="btn editGroupName btn-secondary" rel="tooltip" title="${common:edit.body}" data-group-id="{{=id}}">
							<ion-icon name="create-outline"></ion-icon>
						</a>
						<a href="javascript:void(0);" class="btn deleteGroup btn-secondary" rel="tooltip" title="${common:delete.body}" data-group-id="{{=id}}">
							<ion-icon name="trash-outline"></ion-icon>
						</a>
					</div>
					{{ } }}

					<div class="form-control-plaintext">
						<div class="form-check form-check-inline">
							{{ if(fields.collection.fields.length > 0) { }}
							<input class="form-check-input" type="checkbox" name="select_all" />
							{{ } }}
							<label class="form-check-label text-break mt-3"><strong class="js-group-name-text">{{- name }}</strong></label>
						</div>
					</div>
				</div>

				<form action="" method="post" class="form-inline js-edit-group" name="edit_group" style="display: none;">
					<div class="input-group" role="group" aria-label="edit group">
						<input type="text" name="edit_group" class="form-control" maxlength="50" data-group-id="{{=id}}"/>
						<div class="input-group-append">
							<a href="javascript:void(0);" class="btn acceptEditGroupName btn-secondary" rel="tooltip" title="${common:accept.body}"  data-group-id="{{=id}}">
								<ion-icon name="checkmark-circle-outline"></ion-icon>
							</a>
							<a href="javascript:void(0);" class="btn cancelEditGroupName btn-secondary" rel="tooltip" title="${common:cancel_button.value}">
								<ion-icon name="ban-outline"></ion-icon>
							</a>
						</div>
					</div>
				</form>

				<div class="field-list" data-group-id="{{=id}}"></div>

				{{ if(fields.collection.fields.length > 0) { }}
				<div class="form-inline">
					<select name="move_to" id="" class="form-control mw-100">
						<option value="" name="infocapture:admin:field_groups:move_fields_select">Select a group...</option>
					</select>
					<input type="button" value="${infocapture:admin:field_groups:move_fields_button.value}" class="btn js-move-fields btn-secondary" disabled="disabled"/>
				</div>
				{{ } }}
			</div>
		</div>
	</div>
</script>

<script type="text/template" id="field-tmpl">
	<div class="form-check mb-1">
		<input class="form-check-input js-field-checkbox" type="checkbox" name="" id="{{- symName }}" value="{{- symName }}"/>
		<label class="form-check-label" for="{{- symName }}">{{- label }}
			<span class="badge badge-pill badge-secondary">{{- symName }}</span>
		</label>
	</div>
</script>

<script type="text/template" id="group-dropdown-tmpl">
	<option value="{{= id }}">{{- name }}</option>
</script>

</block>

<include file="../../common/layouts/admin_page.html" />
