{strip}
{if $action === 'generate'}
	{include file=$report_tpl_path|cat:'overall_block.html' view='title' block=$block parameter=$parameters}
	{if isset($l_error)}
		<p class="EventCritical messageUtilisateursFix">{$l_error}</p>
	{else}
		<script type="text/javascript">
			var blockId = "{$block.id}";
		</script>
		{foreach from=$datashow item=show}
			{if $show === 'activity'}
				<h3>{$lang.REPORT_365_MAILBOX_MAIL_ACTIVITY}</h3>
				{if isset($displayErrors[$show])}
					<p class="EventCritical messageUtilisateursFix">{$displayErrors[$show]}</p>
				{/if}
				<div id="mailboxActivityGraph{$block.id}"></div>
				<script type="text/javascript">
					var activityData = {$activityData};
					var LANG_REPORT_365_MAILBOX_GRAPH_MAILS = "{$lang.REPORT_365_MAILBOX_GRAPH_MAILS}";

					{literal}
						genReport365ActivityGraph(
							'mailboxActivityGraph' + blockId,
							[ activityData.x, activityData.sent, activityData.received ],
							LANG_REPORT_365_MAILBOX_GRAPH_MAILS,
						);
					{/literal}
				</script>
			{elseif $show === 'storage'}
				<h3>{$lang.REPORT_365_MAILBOX_STORAGE_USED}</h3>
				{if isset($displayErrors[$show])}
					<p class="EventCritical messageUtilisateursFix">{$displayErrors[$show]}</p>
				{/if}
				<div id="mailBoxStorageGraph{$block.id}"></div>
				<script type="text/javascript">
					var storageData = {$storageData};
					var LANG_REPORT_365_MAILBOX_GRAPH_STORAGE = "{$lang.REPORT_365_MAILBOX_GRAPH_STORAGE}";

					{literal}
						genReport365StorageGraph(
							'mailBoxStorageGraph' + blockId,
							[ storageData.x, storageData.used ],
							LANG_REPORT_365_MAILBOX_GRAPH_STORAGE,
						);
					{/literal}
				</script>
			{elseif $show === 'topusage'}
				<h3>
					{if $topusageParams.sortType === 'percent'}
						{$lang.REPORT_365_MAILBOX_TOP_USAGE_PERCENT}
					{else}
						{$lang.REPORT_365_MAILBOX_TOP_USAGE_SIZE}
					{/if}
				</h3>
				{if isset($displayErrors[$show])}
					<p class="EventCritical messageUtilisateursFix">{$displayErrors[$show]}</p>
				{/if}
				{if $topusageParams.topusageType === 'bar'}
					<script type="text/javascript">
						var LANG_REPORT_365_MAILBOX_GRAPH_MAILS = "{$lang.REPORT_365_MAILBOX_GRAPH_MAILS}";
					</script>
					{foreach from=$topusageDataBar key=graphNum item=topusageData}
						<h4 class="reportSplitTitle">{$lang.REPORT_365_LIMITS_TOP} {$topusageData.limits.min} {$lang.REPORT_365_LIMITS_TO} {$topusageData.limits.max}</h4>
						<div id="mailBoxTopUsageGraph{$block.id}-{$graphNum}"></div>
						<script type="text/javascript">
						{literal}
							(() => { // Self called function to prevent smarty generated var to mixed between graphs
						{/literal}
								const graphNum = {$graphNum};
								const topusageData = {$topusageData|json_encode};
								const topusageSort = "{$topusageParams.sortType}";
						{literal}
								genReport365TopUsageBar(
									'mailBoxTopUsageGraph' + blockId + '-' + graphNum,
									topusageSort,
									{
										values: topusageData.used,
										labels: topusageData.name,
									},
									{
										label: LANG_REPORT_365_MAILBOX_GRAPH_MAILS,
										leftPad: 170,
										maxChar: 20,
										func: d => {
											const index = d.lastIndexOf('@');
											return d.slice(0, index);
										},
									},
								);
							})();
						{/literal}
						</script>
					{/foreach}
				{elseif $topusageParams.topusageType === 'table'}
					<div class="reportTable-container">
						<table id="mailBoxTopUsageTable{$block.id}" class="tab">
							<thead>
								<tr>
									<th>{$lang.REPORT_365_MAILBOX_GRAPH_MAILS}</th>
									{if isset($topusageColumnshow.name)}
										<th>{$lang.REPORT_365_MAILBOX_GRAPH_USER_NAME}</th>
									{/if}
									{if isset($topusageColumnshow.last_activity)}
										<th>{$lang.365_EXCHANGE_DATE_CONNECT}</th>
									{/if}
									{if isset($topusageColumnshow.mail_count)}
										<th>{$lang.365_EXCHANGE_MAILBOX_ELEM_COUNT}</th>
									{/if}
									{if isset($topusageColumnshow.mail_deleted)}
										<th>{$lang.365_EXCHANGE_MAILBOX_ELEM_DELETE}</th>
									{/if}
									{if isset($topusageColumnshow.used)}
										<th>{$lang.365_EXCHANGE_MAILBOX_SIZE}</th>
									{/if}
									{if isset($topusageColumnshow.warning_quota)}
										<th>{$lang.365_EXCHANGE_MAILBOX_QUOTA_WARNING}</th>
									{/if}
									{if isset($topusageColumnshow.block_quota)}
										<th>{$lang.365_EXCHANGE_MAILBOX_QUOTA_BLOCK}</th>
									{/if}
									{if isset($topusageColumnshow.percent)}
										<th>{$lang.REPORT_365_STORAGE_PERCENT}</th>
									{/if}
								</tr>
							</thead>
							<tbody>
							{foreach from=$topusageDataTable item=topusage}
								<tr>
									<td>{$topusage.email}</td>
									{if isset($topusageColumnshow.name)}
										<td>{$topusage.name}</td>
									{/if}
									{if isset($topusageColumnshow.last_activity)}
										<td>{$topusage.last_activity}</td>
									{/if}
									{if isset($topusageColumnshow.mail_count)}
										<td>{$topusage.mail_count}</td>
									{/if}
									{if isset($topusageColumnshow.mail_deleted)}
										<td>{$topusage.mail_deleted}</td>
									{/if}
									{if isset($topusageColumnshow.used)}
										<td>{$topusage.used}</td>
									{/if}
									{if isset($topusageColumnshow.warning_quota)}
										<td>{$topusage.warning_quota}</td>
									{/if}
									{if isset($topusageColumnshow.block_quota)}
										<td>{$topusage.block_quota}</td>
									{/if}
									{if isset($topusageColumnshow.percent)}
										<td>
											{eui_bars_percentbar value=$topusage.percent state=$topusage.state format=array('decimals' => 2, 'separator' => '.')}
										</td>
									{/if}
								</tr>
							{/foreach}
							</tbody>
						</table>
					</div>
				{/if}
			{elseif $show === 'inactive'}
				<h3>{$lang.REPORT_365_MAILBOX_MAILBOX_INACTIVE} - {$lang.REPORT_365_INACTIVE_SINCE} {$inactiveDays} {$lang.DAYS}</h3>
				{if isset($displayErrors[$show])}
					<p class="EventCritical messageUtilisateursFix">{$displayErrors[$show]}</p>
				{/if}
				<div class="reportTable-container">
					<table id="mailBoxInactiveTable{$block.id}" class="tab">
						<thead>
							<tr>
								<th>{$lang.REPORT_365_MAILBOX_GRAPH_MAILS}</th>
								<th>{$lang.365_EXCHANGE_DATE_CONNECT}</th>
							</tr>
						</thead>
						<tbody>
						{foreach from=$inactiveData item=row}
							<tr>
								<td>{$row.email}</td>
								<td>{$row.last_activity}</td>
							</tr>
						{/foreach}
						</tbody>
					</table>
				</div>
			{/if}
		{/foreach}
	{/if}
	{include file=$report_tpl_path|cat:'overall_block.html' view='end'}
{elseif $action === 'update'}
	{include file='overall_adm_iframe.html'}
	<link rel="stylesheet" type="text/css" href="{$webp_block_path}o365_report.css"/>
	<script type="text/javascript" src="{$webp_block_path}o365_report.js"></script>
	{include file=$report_tpl_path|cat:'overall_block.html' view='header'}
	<form id="formBlock" class="sections-twoCols" method="post" action="{$webp_block_path}365_mailbox.php?action=update">
		{include file=$report_tpl_path|cat:'overall_block.html' view='administration' lang=$lang block=$block titlestyle=$titlestyle descriptionstyle=$descriptionstyle}
		<div>
			<div class="tableview_title">
				<h1>{$lang.LINKED_NODE}</h1>
			</div>
			<div class="tableview padMore section-selectElt">
				<label for="selectGroup" class="oneLinelabel">{$lang.DASHBOARD_SELECT_GROUP_NODE}</label>
				<select id="selectGroup" name="selectGroup">
					<option value="" data-placeholder="true">{$lang.DASHBOARD_SELECT_GROUP_NODE}</option>
					{foreach from=$selectGroups item=group}
						<option value="{$group.id}" {if $group.id === $selectedElts.group}selected="selected"{/if}>{$group.name}</option>
					{/foreach}
				</select>
				<label for="selectNode" class="oneLinelabel">{$lang.DASHBOARD_SELECT_NODE}</label>
				<select id="selectNode" name="selectNode"></select>
			</div>
		</div>
		<div>
			<div class="tableview_title">
				<h1>{$lang.REPORT_DATA_TO_DISPLAY}</h1>
			</div>
			<div class="paramflex-2cols">
				<div class="tableview padMore section-params">
					{eui_sortables_checkboxes id="sortableDisplay" inputName="datashow" elements=$dataShowOrder}
				</div>
				<p class="section-params-info info-warn">{$lang.REPORT_365_DATA_AGE_MAX_INFO}</p>
			</div>
		</div>
		<div id="paramsTopusage">
			<div class="tableview_title">
				<h1>{$lang.REPORT_BLOCK_PARAMETER_CRITIC} - {$lang.REPORT_365_MAILBOX_TOP_USAGE}</h1>
			</div>
			<div class="tableview padMore">
				<fieldset class="paramSection section-topusage-type">
					<legend class="label paramSection-title">{$lang.REPORT_365_TOP_USAGE_DISPLAY_TYPE}</legend>
					<div class="inputChoose2 inputChooseSmall">
						<div>
							<label for="topusageType-bar" class="type_graphcol">
								<span>{$lang.REPORT_GRAPH_BAR}</span>
								<input id="topusageType-bar" type="radio" name="topusage[type]" value="bar" {if $params.topusage.type === 'bar'}checked="checked"{/if}/>
							</label>
						</div>
					</div>
					<div class="inputChoose2 inputChooseSmall">
						<div>
							<label for="topusageType-tab" class="type_tab2">
								<span>{$lang.TAB}</span>
								<input id="topusageType-tab" type="radio" name="topusage[type]" value="table" {if $params.topusage.type === 'table'}checked="checked"{/if}/>
							</label>
						</div>
					</div>
				</fieldset>
				<fieldset class="paramSection section-topusage-sort">
					<legend class="label paramSection-title">{$lang.REPORT_SORT_RES_BY}</legend>
					<ul class="showCol-list list-row">
						<li class="showCol-item">
							<input id="sort_size" type="radio" name="topusage[sort]" value="size" {if $params.topusage.sort == 'size'}checked="checked"{/if} required="required"/>
							<label for="sort_size">{$lang.REPORT_365_STORAGE_USED_SIZE}</label>
						</li>
						<li class="showCol-item">
							<input id="sort_percent" type="radio" name="topusage[sort]" value="percent" {if $params.topusage.sort == 'percent'}checked="checked"{/if}/>
							<label for="sort_percent">{$lang.REPORT_365_PERCENT_USED}</label>
						</li>
					</ul>
				</fieldset>
				<div class="paramSection section-topusage-limit">
					<div>
						<label class="paramSection-title" for="topusageLimit">{$lang.REPORT_365_TOP_USAGE_LIMIT_LINES}</label>
						<input id="topusageLimit" type="number" name="topusage[limit]" min="0" value="{if isset($params.topusage.limit)}{$params.topusage.limit}{else}10{/if}"/>
					</div>
					<p class="section-params-info info">{$lang.REPORT_365_LIMIT_NUMBER_ALL_INFO}</p>
				</div>
				<fieldset class="paramSection section-topusage-cols">
					<legend class="label paramSection-title">{$lang.REPORT_COLUMNS_TO_DISPLAY}</legend>
					<ol class="showCol-list list-row">
						<li class="showCol-item" title="{$lang.TAB_CONF_FIXED_COLUMN}">
							<input id="col_email" type="checkbox" name="topusage[columnshow][email]" checked="checked" disabled="disabled"/>
							<label for="col_email">{$lang.REPORT_365_MAILBOX_GRAPH_MAILS}</label>
						</li>
						<li class="showCol-item">
							<input id="col_name" type="checkbox" name="topusage[columnshow][name]" {if in_array("name", $params.topusage.columnshow)}checked="checked"{/if}/>
							<label for="col_name">{$lang.REPORT_365_MAILBOX_GRAPH_USER_NAME}</label>
						</li>
						<li class="showCol-item">
							<input id="col_last_activity" type="checkbox" name="topusage[columnshow][last_activity]" {if in_array("last_activity", $params.topusage.columnshow)}checked="checked"{/if}/>
							<label for="col_last_activity">{$lang.365_EXCHANGE_DATE_CONNECT}</label>
						</li>
						<li class="showCol-item">
							<input id="col_mail_count" type="checkbox" name="topusage[columnshow][mail_count]" {if in_array("mail_count", $params.topusage.columnshow)}checked="checked"{/if}/>
							<label for="col_mail_count">{$lang.365_EXCHANGE_MAILBOX_ELEM_COUNT}</label>
						</li>
						<li class="showCol-item">
							<input id="col_mail_deleted" type="checkbox" name="topusage[columnshow][mail_deleted]" {if in_array("mail_deleted", $params.topusage.columnshow)}checked="checked"{/if}/>
							<label for="col_mail_deleted">{$lang.365_EXCHANGE_MAILBOX_ELEM_DELETE}</label>
						</li>
						<li class="showCol-item">
							<input id="col_used" type="checkbox" name="topusage[columnshow][used]" {if in_array("used", $params.topusage.columnshow)}checked="checked"{/if}/>
							<label for="col_used">{$lang.365_EXCHANGE_MAILBOX_SIZE}</label>
						</li>
						<li class="showCol-item">
							<input id="col_warning_quota" type="checkbox" name="topusage[columnshow][warning_quota]" {if in_array("warning_quota", $params.topusage.columnshow)}checked="checked"{/if}/>
							<label for="col_warning_quota">{$lang.365_EXCHANGE_MAILBOX_QUOTA_WARNING}</label>
						</li>
						<li class="showCol-item">
							<input id="col_block_quota" type="checkbox" name="topusage[columnshow][block_quota]" {if in_array("block_quota", $params.topusage.columnshow)}checked="checked"{/if}/>
							<label for="col_block_quota">{$lang.365_EXCHANGE_MAILBOX_QUOTA_BLOCK}</label>
						</li>
						<li class="showCol-item">
							<input id="col_percent" type="checkbox" name="topusage[columnshow][percent]" {if in_array("percent", $params.topusage.columnshow)}checked="checked"{/if}/>
							<label for="col_percent">{$lang.REPORT_365_STORAGE_PERCENT}</label>
						</li>
					</ol>
				</fieldset>
			</div>
		</div>
		<div id="paramsInactive">
			<div class="tableview_title">
				<h1>{$lang.REPORT_BLOCK_PARAMETER_CRITIC} - {$lang.REPORT_365_MAILBOX_MAILBOX_INACTIVE}</h1>
			</div>
			<div class="tableview padMore">
				<div class="paramSection section-inactive-days">
					<div>
						<label class="paramSection-title" for="inactiveDays">{$lang.REPORT_365_INACTIVE_DAYS_NUMBER}</label>
						<input id="inactiveDays" type="number" name="inactive[days]" min="1" value="{if isset($params.inactive.days)}{$params.inactive.days}{else}7{/if}"/>
					</div>
					<p class="section-params-info info">{$lang.REPORT_365_INACTIVE_DAYS_INFO}</p>
				</div>
			</div>
		</div>
		<div class="formActions-flex">
			<a class="btnBack" href="{$path_webplugin}/dialog_block.php?action=update&id={$block.include_canevas_id}">{$lang.RETURN}</a>
			<input type="submit" value="{$lang.SAVE}"/>
		</div>
	</form>
	<script type="text/javascript">
		var selectNodes = {$selectNodes|json_encode};
		var initSelectedElts = {$selectedElts|json_encode};
		var lang = {
			SEARCH_NONE: "{$lang.SEARCH_NONE}",
			DASHBOARD_SELECT_NODE: "{$lang.DASHBOARD_SELECT_NODE}",
		};

		{literal}
		$(document).ready(function() {
			initSelectNodeConf('selectGroup', 'selectNode', selectNodes, initSelectedElts, lang);

			// Display top usage parameters
			fadeToggleOnCheck($('#paramsTopusage'), $('#sortableDisplay_topusage'));

			// Display user inactive parameters
			fadeToggleOnCheck($('#paramsInactive'), $('#sortableDisplay_inactive'));

			// Actions on top usage parameters type change
			selectTypeInput('topusage[type]');
			toggleOnMatch($('#paramsTopusage .section-topusage-cols'), $('input[name="topusage[type]"]:checked').val(), 'table');
			$('input[name="topusage[type]"]').on('change', function() {
				selectTypeInput('topusage[type]');
				toggleOnMatch($('#paramsTopusage .section-topusage-cols'), $(this).val(), 'table');
			});
		});
		{/literal}
	</script>
{/if}
{/strip}