<!--@head@
<component class_key="css_loader" src="/interface_default/infocapture/assets/css/admin.scss" >
-->

<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><a href="../panels/helpdesk_edit_project.php?id=${project_id_val.value}"><txt name="helpdesk:project:edit_project">Edit project</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 active" aria-current="page"><txt name="helpdesk:project:edit_assigning">Edit assigning</txt></li>
</block>

<block id="page_body">
	<include file="../../common/js_localize.inc.html" />
	<txt name="xajax"></txt>

	<script type="text/javascript">
        require(['infocapture/dynamic_field_changes', 'domReady'], function (ICDynamicFieldChanges, domReady) {
            window.fields = ${fields.json};
            window.symNames = ${symNames.json};
            window.triggers = ${triggers.json};
            window.projectId = ${project_id};
            domReady(function () {
                ICDynamicFieldChanges.init();
            });
        });
	</script>

	<h3 name="project_name"></h3>
	<div class="alert alert-warning">
	    <strong><loc>Note</loc>: </strong>
	    <loc>Dynamic fields take precedence over the previous condition set in this list.</loc>
	</div>
	<div class="card bg-light field-group-actions" data-spy="affix" data-offset-top="200">
		<div class="card-body">
			<div class="row">
				<div class="col-md-5">
					<form action="" method="post" class="form-inline" id="add-field">
						<div class="form-group">
							<select id="add-rule-select">
								<option value="">Select field</option>
							</select>
							<input type="submit" name="infocapture:admin:field_groups:add_group" id="newGroup" value="Add" class="btn btn-secondary"/>
						</div>
					</form>
				</div>
				<div class="col-md-5">
					<form action="" method="post" class="form-inline">
						<input type="text" name="infocapture:admin:field_groups:filter_input" id="filterGroups" class="input-large form-control" placeholder="Filter.." />
						<input type="button" name="infocapture:admin:field_groups:filter_clear" id="resetFilterGroups" value="Clear" class="btn btn-secondary" />
					</form>
				</div>
				<div class="col-md-2 text-right">
					<div class="btn-group" role="group" aria-label="edit assigning 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 float-right btn-primary saveFields" rel="tooltip" style="display: none;" data-project-id="{project_id}">
								<ion-icon name="checkbox-outline"></ion-icon> <loc name="infocapture:admin:save"></loc></a>
							</div>
						</div>
					</div>
				</div>
			</div>
	<div id="fields-list"></div>
	<div id="modal-container"></div>

<script type="text/template" id="add-field-tmpl">
	<div class="modal hide fade" id="add-rule">
		<div class="modal-header">
			<h5 class="modal-title">{{- mode }} rule</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>
		<div class="modal-body">
			<div class="form-group row">
				<label class="col-form-label col-md-3 col-sm-2"><txt name="helpdesk:project:edit_assigning:field">Field</txt></label>
				<div class="col-md-9 col-sm-10">
					<p>{{- label }}</p>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-form-label col-md-3 col-sm-2"><loc>Trigger</loc></label>
				<div class="col-md-9 col-sm-10" visible="0" name="warning_triggers_visible">
					<div class="alert alert-warning"><txt name="warning_triggers_text">no triggers exist</txt><br>
						<a name="add_trigger_link" href="javascript:void(0);"><loc>Add new trigger</loc></a><br />
					</div>
				</div>
				<div class="col-md-9 col-sm-10">
					<select id="trigger-select"></select>
					<a name="add_trigger_link" href="javascript:void(0);"><loc>Add new trigger</loc></a>
					<br />
				</div>
			</div>
			<div class="alert alert-warning" visible="0" name="warning_span"></div>
			<div class="form-group row">
				<label class="col-form-label col-md-3 col-sm-2"><txt name="helpdesk:project:edit_assigning:new_value">New value of field</txt> &quot;{{- label }}&quot;</label>
				<div class="col-md-9 col-sm-10" id="form-test"></div>
			</div>
		</div>
		<div class="modal-footer">
			<a href="javascript:void(0);" class="btn btn-primary" name="save-rule">{{- mode }}</a>
		</div>
	</div>
</script>

<script type="text/template" id="field-tmpl">
	<div data-sym-name="{{= symName }}">
		<h4>
			<a href="javascript:void(0);" name="edit_link">{{- label }}</a>
			<small>
				{{- symName }}
				<span class="float-right badge">{{- type }}</span>
			</small>
		</h4>
		<div class="table-wrapper">
			<table cellspacing="0" cellpadding="0" width="100%" class="table table-bordered table-striped">
				<colgroup>
					<col width="40%" />
					<col width="50%" />
					<col width="40" />
				</colgroup>
				<thead>
					<tr>
						<th>Field condition set</th>
						<th>New field value</th>
						<th>&nbsp;</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="3" class="text-right">
							<a href="javascript:void(0);" name="new_rule_link" class="btn btn-secondary btn-sm" data-sym-name="{{- symName }}">
								<ion-icon name="add-outline"></ion-icon> Add rule
							</a>
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
	</div>
</script>

<script type="text/template" id="field-rule-tmpl">
	<option value="{{- symName }}">{{- label }} ({{- symName }})</option>
</script>

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

<script type="text/template" id="rule-tmpl">
	<tr data-rule-id="{{- id }}">
		<td>
			<a href="javascript:void(0);"><span class="glyphicons-drag glyphicons js-drag-handle" style="cursor: move"></span></a>
			<a href="javascript:void(0);" name="edit_link">{{- name }}</a>
		</td>
		<td>{{- newValueText }}</td>
		<td class="text-center">
			<a href="javascript:void(0);" name="edit_link" rel="tooltip" title="Edit" data-rule-id="{{- id }}">
				<ion-icon name="create-outline"></ion-icon>
			</a>
			<a href="javascript:void(0);" name="del_link" rel="tooltip" title="Delete" data-rule-id="{{- id }}">
				<ion-icon name="trash-outline"></ion-icon>
			</a>
		</td>
	</tr>
</script>

</block>

<include file="../layouts/admin_with_project.html" />
