{if $action=='generate'}
   <!-- code de mise en page du rapport  -->
   <!-- affichage de données par défaut du bloc et gère la mise en forme du titre et du texte.  -->
   {include file='./overall_block.html' view='title' block=$block parameter=$parameters}
   {if $parameters.type == 'period_state' || $parameters.type == 'last_state' }
           <div class="backup_states tab">
               <div class="column-item">
                   <div class='tableview_title'><h1 class="column-title case">{$lang.LGD_OK}</h1></div>
                   <div class="tableview case EventOK">{$stats.OK}</div>
               </div>
               <div class="column-item">
                   <div class='tableview_title'><h1 class="column-title case">{$lang.INPROGRESS}</h1></div>
                   <div class="tableview case EventPending">{$stats.IN_PROGRESS}</div>
               </div>
               <div class="column-item">
                   <div class='tableview_title'><h1 class="column-title case">{$lang.BCK_TITLE_WARNING}</h1></div>
                   <div class="tableview case EventWarning">{$stats.WARNING}</div>
               </div>
               <div class="column-item">
                   <div class='tableview_title'><h1 class="column-title case">{$lang.BCK_TITLE_FAILED}</h1></div>
                   <div class="tableview case EventCritical">{$stats.ERRORS}</div>
               </div>
               <div class="column-item">
                   <div class='tableview_title'><h1 class="column-title case">{$lang.BCK_SIZE}</h1></div>
                   <div class="tableview case info">{$stats.SIZE}</div>
               </div>
           <style>
           .backup_states
           {
               width:100%;
               display:flex;
               flex-direction:row;
               justify-content: space-around;
           }
           .backup_states .column-item
           {
               width:15%;
               margin:0;
               padding:0;
               display:flex;
               flex-direction:column;
               align-content: center;
           }
           .backup_states .column-item .tableview_title
           {
               display:flex;
               flex-direction:column;
               align-content: center;
           }
           .backup_states .case
           {
               text-align: center;

           }
           .backup_states .tableview
           {
               padding:25px 0;
               font-size: 40px;
               vertical-align: center;
           }
           .backup_states .info
           {
               height:110px;
               background: #eee;
               text-align: center !important;
               font-weight: bold;
               display: flex;
               justify-content: center; /* horizontal */
               align-items: center;     /* vertical */
           }
        }
        </style>
        {elseif $parameters.type == 'history_bar'}
         <style>
             /** Progress bar **/
             .bar {
                 min-width:50px;
                 position: relative;
                 display: flex;
                 height: 100%;
                 overflow: hidden;
                 border: 1px solid #aaaaaa;
             }

             .bar-back {
               display: flex;
               justify-content: center;
               align-items: center;
               width: 100%;
               color: white;
             }

             .bar-front {
               position: absolute;
               display: flex;
               justify-content: center;
               align-items: center;
               left: -1px;
               right: -1px;
               top: -1px;
               bottom: -1px;
               background: #efeeee;
               color: black;
               clip-path: inset(0 0 0 0);
               transition: clip-path 1s linear;
             }
             .bar-ok .bar-back{
                  background: #83bc00;
             }
             .bar-warning .bar-back{
                 background: #ffcb1f;
             }

             .bar-critical .bar-back{
                 background: #da002e;
             }
             .bar-info .bar-back{
                 background: #575759;
             }
             .TextOK
             {
              text-align: center;
              color: #83bc00;
             }
             .TextWarning
             {
              text-align: center;
              color: #ffcb1f;
             }
             .TextCritical
             {
              text-align: center;
              color: #da002e;
             }
             .TextInfo
             {
               text-align: center;
               color: #575759;
             }
             .flex-row
             {
                 display: flex;
             }
             .flex-row .bar
             {
                 flex-grow: 9;
             }
             .flex-row .text
             {
                 flex-grow: 1;
             }
         </style>
              <table class="tab tablesorter">
                  <thead>
                      <th style="width:130px;">Date</th>
                      <th style="width:50%;">Success</th>
                      <th style="width:50%;">Failed</th>
                      <th style="width:50%;">Total</th>
                  </thead>
                  </<tbody>
                      {foreach $stats item=row}
                      <tr>
                          <td>{$row.date}</td>
                          <td>
                              <div class="flex-row">
                                  <div class="bar bar-ok">
                                      <div class="bar-back">{$row.success_percent}%</div>
                                      <div style="clip-path: inset(0 0 0 {$row.success_percent}%);" class="bar-front">{$row.success_percent}%</div>
                                  </div>
                                  <div class="text TextOK">{$row.success}</div>
                              </div>
                          </td>
                          <td>
                              <div class="flex-row">
                                  <div class="bar bar-critical">
                                      <div class="bar-back">{$row.failed_percent}%</div>
                                      <div style="clip-path: inset(0 0 0 {$row.failed_percent}%);" class="bar-front">{$row.failed_percent}%</div>
                                  </div>
                                  <div class="text TextCritical">{$row.failed}</div>
                              </div>
                          </td>
                          <td>
                              <div class="flex-row">
                                  <div class="bar bar-info">
                                      <div class="bar-back">{$row.total_percent}%</div>
                                      <div style="clip-path: inset(0 0 0 {$row.total_percent}%);" class="bar-front">{$row.total_percent}%</div>
                                  </div>
                                  <div class="text TextInfo">{$row.total}</div>
                              </div>
                          </td>
                      </tr>
                      {/foreach}
                  </tbody>
              </table>
              {elseif $parameters.type =='history_gantt' || $parameters.type =='last_state_tab' || $parameters.type == 'period_error_tab' || $parameters.type == 'node_error' }
          	{if $parameters.type =='node_error' }
            <style>
          		#rep_bck_node_error table.tab.tablesorter th
          		{
          		   width:auto;
                     min-width:3px;
          		}
          		#rep_bck_node_error table.tab.tablesorter th:first-child
          		{
          			width:100px;
          		}
          		#rep_bck_node_error table.tab.tablesorter th:last-child
          		{
          			width:500px;
          		}
          		#rep_bck_node_error table.tab.tablesorter td
          		{
          			text-align:center;
          		}
          	</style>
            <div id='rep_bck_node_error'>
          	{elseif $parameters.type =='history_gantt' || $parameters.type == 'history_bar'}
                 <style>
                     #rep_bck_gant table.tab.tablesorter{
                         width:100%;
                     }
                     #rep_bck_gant table.tab.tablesorter th.title_case{
                          width:200px;
                     }
                     #rep_bck_gant table.tab.tablesorter td:not(.small_case){
                          overflow: hidden;
                          text-overflow: ellipsis;
                     }
                     #rep_bck_gant table.tab.tablesorter th.small_case{
                         width:auto;
                         min-width:3px;
                         padding:5px 0px !important;
                         margin:0px;
                     }
                 </style>

                <div id='rep_bck_gant'>
                {else}
                <style>
                    #rep_bck_other table.tab.tablesorter th:last-child
                    {
                        width:250px;
                    }
                </style>
                <div id='rep_bck_other'>
          		{/if}
                 {if isset($l_error)}
                 	<p class="EventCritical messageUtilisateurs">{$l_error}</p>
                 {/if}
                     <link rel="stylesheet" type="text/css" href="{$plugin_path}css/common_bck.css">
                     <div>
                     {if isset($table)}
                     <div style="overflow-x: auto;width:100%;">
                     <table id="{$table.name}" class="tab tablesorter">
                     	<thead>
                      {if isset($month_name)}
                          <tr style="align-items: center;">
                              <th class="title_case" style="border:0 !important;background:white !important;"></th>
                              {foreach $month_name key=month item=size}
                              <th colspan="{$size}">{$month}</th>
                              {/foreach}
                          </tr>
                      {/if}
                     	<tr>
                     	{foreach $table.data[0] key=col item=data}
                     		{if isset($table.header.$col.cl)}
                     			<th class="{$table.header.$col.cl}">{$col|strip}</th>
                     		{else}
                     			<th>{$col|strip}</th>
                     		{/if}
                     	{/foreach}
                     	</tr>
                     	</thead>
                     	<tbody>
                     	{foreach $table.data item=row}
                     		<tr>
                     		{foreach $row key=col item=cell}
                     			{if isset($cell.cl) || isset($cell.data) || isset($cell.title)}
                     				{if isset($cell.title)}
                     					<td title='{$cell.title|nl2br}' class="{$cell.cl}">{$cell.data}</td>
                     				{else}
                     					<td class="{$cell.cl}">{$cell.data|default:''}</td>
                     				{/if}
                     			{else}
                     				<td>{$cell}</td>
                     			{/if}
                     		{/foreach}
                     		</tr>
                     	{/foreach}
                     	</tbody>
                     </table>
                     </div>
                     </div>
                     {/if}
                 </div>
   {/if}

   <!-- affichage de la fin du block -->
   {include file='./overall_block.html' view='end'}
{elseif $action=='update'}
   <!-- Code pour l'administration -->
	{include file='overall_adm_iframe.html'}
		{include file='./overall_block.html' view='header' block=$block parameter=$parameters}
	<form method="post" action="backup.php?action=update" id="formBlock">
                <!-- affiche l'en-tête des blocs et le paramétrage des styles du titre et de la description -->
		{include file='./overall_block.html' view='administration' lang=$lang block=$block titlestyle=$titlestyle descriptionstyle=$descriptionstyle}
        <div class="miPage">
			<div class="tableview_title">
				<h1>{$lang.ADM_PLUGIN_PARAMETER}</h1>
			</div>
			<div class="tableview padMore">
				<div class="anInput">
					<label>{$lang.BCK_SERVER}</label>
					<select id="backup_server" name="nodeid" data-placeholder="{$lang.BCK_SERVER}">
						{foreach name=outer key=server_id item=server_name from=$server_list}
							<option value="{$server_id}" {if $server_id == $block.option.nodeid}selected{/if}>{$server_name}</option>
						{/foreach}
					</select>
                    {if $parameters.type == 'history_gantt'}
                    <label>{$lang.BCK_WIDGET_PERIOD}</label>
                    <input type="number" name="period" min="1" max="31" value="{$block.option.period}" />
                    {elseif $parameters.type == 'history_bar' || $parameters.type == 'period_error_tab'  || $parameters.type == 'period_state' || $parameters.type == 'node_error'}
					<label>{$lang.BCK_WIDGET_PERIOD}</label>
					<input type="number" name="period" min="1" max="100" value="{$block.option.period}" />
                    {/if}
				</div>
			</div>
		</div>
		{if $parameters.type == 'period_error_tab' || $parameters.type == 'period_state' || $parameters.type == 'last_state' || $parameters.type == 'node_error'}
		<div style="height:128px;" class="miPage miPageEnd">

		</div>
		{else}
		<div class="miPage miPageEnd">
			<div class="tableview_title">
				<h1>{$lang.BCK_WIDGET_TYPE}</h1>
			</div>
             {if $parameters.type == 'history_gantt' || $parameters.type == 'history_bar'}
                <div class="tableview padMore choixCustom">
             {else}
                <div style="display:none;" class="tableview padMore choixCustom">
             {/if}
				<input type="radio" id="service_or_node" name="job_or_source" value="source" {if $block.option.job_or_source=='source'}checked="checked"{/if} />
				<label>{$lang.BCK_SOURCE}</label>
				<input type="radio" id="service_or_node" name="job_or_source" value="job" {if $block.option.job_or_source=='job'}checked="checked"{/if}/>
				<label>{$lang.BCK_JOB_NAME}</label>
			</div>

			<div class="tableview padMore">
				<div class="anInput">
						<select id="select_item" name="items[]" multiple="multiple" style="width:90%;" disabled="disabled" data-placeholder="{$lang.ADV_NODE_BACKUP}s">
						</select>
					<script type="text/javascript">
				<!--
					var itemselect = {$block.option.items|@json_encode};
					{literal}
					$("#backup_server").on('change', function()	{selectItem(); });
					$('input[name="job_or_source"]').on('change', function() {selectItem(); });

					$("#backup_server").chosen({no_results_text: "{/literal}{$lang.SEARCH_NONE}{literal}",search_contains:true});
					$("#select_item").chosen({no_results_text: "{/literal}{$lang.SEARCH_NONE}{literal}",search_contains:true});

					function selectItem()
					{
						var nodeid = $( "#backup_server" ).val();
						var job_or_source = $( 'input[name="job_or_source"]:checked' ).val();

						$.getJSON($(location).attr('href')+"&action=getItemList&nodeid="+nodeid+"&job_or_source="+job_or_source, function(data){
							$("#select_item").empty();
							$("#select_item").prop('disabled',false);
							$.each( data, function( key, val )
							{
								$("#select_item").append("<option value='"+key+"'>"+val+"</option>");
							});
							$("#select_item").val(itemselect);
							$("#select_item").trigger("chosen:updated");
						});
					}
					{/literal}
					//$('#selectservices').val(serselect);
					selectItem();
				-->
				</script>
			</div>
		</div>
		</div>
		{/if}

        <a class="btnBack" href="../dialog_block.php?action=update&id={$block.include_canevas_id}" >{$lang.RETURN}</a>
		<input type="submit" value="{$lang.SAVE}" />
	</form>
    <script type="text/javascript">
    <!--
    {literal}
    function selectType()
    {
        $("input[type='radio']").parent().removeClass("active");
        $("input[type='radio']:checked").parent().addClass("active");
        var val = $("input[type='radio']:checked").val();
        $( ".selecttype").css("display","none");
        $( "#type"+val).css("display","block");
    }

    $(document).ready(function()
    {   Utils.setFormClientValidation();
        selectType();

        //SlimSelect
        var select = new SlimSelect(
        {
            select: '#selectNetwork'
        });
        $("#ts_all_select input").on( "change", function()
        {
            var ts_value = $("#ts_all_select input:checked").val();
            var is_disabled = (ts_value=='all');
            $('#selectNetwork').prop('disabled',is_disabled);
            if( is_disabled )
            {
                $('#selectNetwork option').hide();
            }
            else
            {
                $('#selectNetwork option').show();
            }
        }).trigger('change');
    });

    {/literal}
-->
</script>
{/if}