<div>
	<a href="#;" class="chooseServices"
		onClick="$('servicesList_{$filter}').toggle();"
	>{$_LANG.reportsManagement.admin.filters.servicesAdvanced.chooseButton}</a>
</div>

<div id="servicesList_{$filter}" style="position: absolute;display:none;z-index: 5">
	<div class="servicesAdvanced_div">

		<table class="remoteLoad" cellspacing="0" cellpadding="1" width="100%">
			<tr>
				<td class="title center" colspan="2">{$_LANG.reportsManagement.admin.filters.servicesAdvanced.popupTitle}</td>
				<td width="1%" class="title right"><span onClick="$('servicesList_{$filter}').hide();" class="closeButton"><b>X</b></span></td>
			</tr>
		</table>

		<div style="overflow:auto;height:200px;margin-top:2px;">
			<table width="405" class="servicesAdvanced_table">

				{* === table head === *}
				<tr>
					<th>#</th>
					<th>
						<a href="#;" tooltip="{$_LANG.reportsManagement.admin.filters.servicesAdvanced.toggleServices}"
							onclick="
								var fieldsList=$('servicesList_{$filter}').select('input[serviceCode]');
								var checked=!(fieldsList[0].checked);
								$A(fieldsList).each(function(input){ldelim}input.checked=checked;{rdelim});
							"
						>{$_LANG.reportsManagement.admin.filters.servicesAdvanced.serviceTh}</a>
					</th>
					{foreach from=$servicesLocations key=location item=locationCode}
						<th class="center">
							<a href="#;" tooltip="{$_LANG.reportsManagement.admin.filters.servicesAdvanced.toggleColumn}"
								onclick="
									var fieldsList=$('servicesList_{$filter}').select('input[location={$locationCode}]');
									var checked=!(fieldsList[0].checked);
									$A(fieldsList).each(function(input){ldelim}input.checked=checked;{rdelim});
								"
							>{$_LANG.locations.countriesCriteria.short[$locationCode]}</a>
						</th>
					{/foreach}
				</tr>

				{* === services head === *}

				{counter name="servicesList" start=0 print=false}
				{foreach from=$servicesList key=serviceCode item=serviceDetails}
					<tr>
						<td width="20">{counter name="servicesList"}.</td>
						<td {if $serviceDetails.group}class="servicesAdvanced_group"{/if}{if $serviceDetails.grouped}class="servicesAdvanced_grouped"{/if}>
							{if $serviceDetails.group}
								{$serviceDetails.name}
							{else}
								<a href="#;"
									onclick="
										var fieldsList=$('servicesList_{$filter}').select('input[serviceCode={$serviceCode}]');
										var checked=!(fieldsList[0].checked);
										$A(fieldsList).each(function(input){ldelim}input.checked=checked;{rdelim});
									"
								>{$serviceDetails.name}</a>
							{/if}
						</td>

						{* --- locations loop --- *}
						{if $serviceDetails.group}
							{foreach from=$servicesLocations key=location item=locationCode}
								<td class="center">-</td>
							{/foreach}
						{else}
							{foreach from=$servicesLocations key=location item=locationCode}
								<td class="center">
									<input type="checkbox" location="{$locationCode}" serviceCode="{$serviceCode}"
										name="filters[{$filter}][d][{$serviceCode}][{$locationCode}]" value="1"
										class="noBorder"
										{if $filterDet.default[$serviceCode][$locationCode]}checked="1"{/if}
									/>
								</td>
							{/foreach}
						{/if}

					</tr>
				{/foreach}
			</table>
		</div>

	</div>
</div>
