{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_ONEDRIVE_FILES_ACTIVITY}</h3>
				{if isset($displayErrors[$show])}
					<p class="EventCritical messageUtilisateursFix">{$displayErrors[$show]}</p>
				{/if}
				<div id="oneDriveFilesActivityGraph{$block.id}"></div>
				<div id="oneDriveFilesTotalGraph{$block.id}"></div>
				<script type="text/javascript">
					var activityData = {$activityData};
					var LANG_REPORT_365_ONEDRIVE_GRAPH_FILES = "{$lang.REPORT_365_ONEDRIVE_GRAPH_FILES}";

					{literal}
						genReport365ActivityGraph(
							'oneDriveFilesActivityGraph' + blockId,
							[ activityData.x, activityData.active ],
							LANG_REPORT_365_ONEDRIVE_GRAPH_FILES,
							{
								color: {
									pattern: ['#F79F81'],
								},
							},
						);
						genReport365ActivityGraph(
							'oneDriveFilesTotalGraph' + blockId,
							[ activityData.x, activityData.total ],
							LANG_REPORT_365_ONEDRIVE_GRAPH_FILES,
							{
								color: {
									pattern: ['#58ACFA'],
								},
							},
						);
					{/literal}
				</script>
			{elseif $show === 'storage'}
				<h3>{$lang.REPORT_365_ONEDRIVE_STORAGE_USED}</h3>
				{if isset($displayErrors[$show])}
					<p class="EventCritical messageUtilisateursFix">{$displayErrors[$show]}</p>
				{/if}
				<div id="oneDriveStorageGraph{$block.id}"></div>
				<script type="text/javascript">
					var storageData = {$storageData};
					var LANG_REPORT_365_ONEDRIVE_GRAPH_STORAGE = "{$lang.REPORT_365_ONEDRIVE_GRAPH_STORAGE}";

					{literal}
						genReport365StorageGraph(
							'oneDriveStorageGraph' + blockId,
							[ storageData.x, storageData.used ],
							LANG_REPORT_365_ONEDRIVE_GRAPH_STORAGE,
						);
					{/literal}
				</script>
			{elseif $show === 'topusage'}
				<h3>
					{if $topusageParams.sortType === 'percent'}
						{$lang.REPORT_365_ONEDRIVE_TOP_USAGE_PERCENT}
					{else}
						{$lang.REPORT_365_ONEDRIVE_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_ONEDRIVE_GRAPH_TOP_USERS = "{$lang.REPORT_365_ONEDRIVE_GRAPH_TOP_USERS}";
					</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="oneDriveTopUsageGraph{$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(
									'oneDriveTopUsageGraph' + blockId + '-' + graphNum,
									topusageSort,
									{
										values: topusageData.used,
										labels: topusageData.name,
									},
									{
										label: LANG_REPORT_365_ONEDRIVE_GRAPH_TOP_USERS,
										leftPad: 170,
										maxChar: 20,
									},
								);
							})();
						{/literal}
						</script>
					{/foreach}
				{elseif $topusageParams.topusageType === 'table'}
					<div class="reportTable-container">
						<table id="oneDriveTopUsageTable{$block.id}" class="tab">
							<thead>
								<tr>
									<th>{$lang.REPORT_365_ONEDRIVE_GRAPH_USER_NAME}</th>
									{if isset($topusageColumnshow.last_activity)}
										<th>{$lang.365_ONEDRIVE_LAST_ACTIVITY}</th>
									{/if}
									{if isset($topusageColumnshow.file)}
										<th>{$lang.365_ONEDRIVE_USER_FILE}</th>
									{/if}
									{if isset($topusageColumnshow.active_file)}
										<th>{$lang.365_ONEDRIVE_USER_FILE_ACTIVATED}</th>
									{/if}
									{if isset($topusageColumnshow.used)}
										<th>{$lang.REPORT_365_STORAGE_USED}</th>
									{/if}
									{if isset($topusageColumnshow.allocated)}
										<th>{$lang.REPORT_365_STORAGE_ALLOCATED}</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.name}</td>
									{if isset($topusageColumnshow.last_activity)}
										<td>{$topusage.last_activity}</td>
									{/if}
									{if isset($topusageColumnshow.file)}
										<td>{$topusage.file}</td>
									{/if}
									{if isset($topusageColumnshow.active_file)}
										<td>{$topusage.active_file}</td>
									{/if}
									{if isset($topusageColumnshow.used)}
										<td>{$topusage.used}</td>
									{/if}
									{if isset($topusageColumnshow.allocated)}
										<td>{$topusage.allocated}</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}
			{/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_onedrive.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_ONEDRIVE_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_name" type="checkbox" name="topusage[columnshow][name]" checked="checked" disabled="disabled"/>
							<label for="col_name">{$lang.REPORT_365_ONEDRIVE_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_ONEDRIVE_LAST_ACTIVITY}</label>
						</li>
						<li class="showCol-item">
							<input id="col_file" type="checkbox" name="topusage[columnshow][file]" {if in_array("file", $params.topusage.columnshow)}checked="checked"{/if}/>
							<label for="col_file">{$lang.365_ONEDRIVE_USER_FILE}</label>
						</li>
						<li class="showCol-item">
							<input id="col_active_file" type="checkbox" name="topusage[columnshow][active_file]" {if in_array("active_file", $params.topusage.columnshow)}checked="checked"{/if}/>
							<label for="col_active_file">{$lang.365_ONEDRIVE_USER_FILE_ACTIVATED}</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.REPORT_365_STORAGE_USED}</label>
						</li>
						<li class="showCol-item">
							<input id="col_allocated" type="checkbox" name="topusage[columnshow][allocated]" {if in_array("allocated", $params.topusage.columnshow)}checked="checked"{/if}/>
							<label for="col_allocated">{$lang.REPORT_365_STORAGE_ALLOCATED}</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 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'));

			// 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}