{********************************************************* 
@author:Julien George
@ email: j.george@esia-sa.com
**********************************************************} 
{if $tab eq ''}
    {include file='overall_header.html'}
       <link rel="stylesheet" type="text/css" href="{$apache_path}iplabel.css"/>
        <div id="messages"></div>
        {include file='overall_node_control_header.html' node=$node status=$node_status idListService='ListService' jsCloseDialog="Utils.reload_active_tabs('#tabs')"}
	    <div id="tabs" style="float:left;height:100%; width:99%;margin:1px;">
		    <ul>
		        <li class="node-state"><a href="{$apache_path}/control_iplabel.php?nodeid={$node.id}&amp;tab=servicestate" class="menutabs">
		        	{$lang.SHOW_SERVICE}</a>
		        </li>
				{include file='overall_node_control_header.html' node=$node default_tab='on'}
		        <li class="node-state">
		            <a href="{$apache_path}/control_iplabel.php?nodeid={$node.id}&amp;tab=scenarios" class="menutabs">	
				    {$lang.IPLABEL_SCENARIOS}
			        </a>
			    </li>
		        <li class="node-state">
		            <a href="{$apache_path}/control_iplabel.php?nodeid={$node.id}&amp;tab=incidents" class="menutabs">	
				    {$lang.IPLABEL_SCENARIOS_INCIDENTS}
			        </a>
			    </li>
		    </ul>
	    </div>
        {include file='overall_node_control_footer.html'}  
        <script type="text/javascript">
        /* <![CDATA[ */ {literal}

          $(function() {
            $( "#tabs" ).tabs({
            	heightStyle: "content",
              beforeLoad: function( event, ui ) {
	              	$('#esiaOverlay').show();
	              	$('#loadingGif').show();
			        return true;
                ui.jqXHR.fail(function() {
                  ui.panel.html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo." );
	              	$('#esiaOverlay').hide();
	              	$('#loadingGif').hide();
                });
              },
              load: function (event, ui){
	              	$('#esiaOverlay').hide();
	              	$('#loadingGif').hide();
			        if(ui.panel.find("#page_login_detect").length > 0) location.reload();
		        },
            });
          });
            {/literal} 
          </script>
    {include file='overall_footer.html'}
{elseif $tab =='servicestate'}
        {*Onglet par défaut*}
 <div id="iplabel_view" class="small800" style="background: #efeeee;">
        <div id="debug"></div>
            <p id="iplabel_request_error" class="EventCritical" style="display:none"></p>
            <div id="iplabel_stats" class="bigFive small800 nodeViewInnerIplabel">
                    <img src="{$apache_path}/img/ip-label.png" style="width:400px;" />
                    <table class="tab">
                        <tr>
                                <td style="width:50%;">{$lang.IPLABEL_IP}</td>
                                <td id="ip_url">
                                	 <a href="https://ekara.ip-label.net" target="_blank">ekara.ip-label.net
                                		{*<input style="cursor:pointer;margin:5px;float:right;vertical-align:middle; background: #83bc00;height:31px;border-radius:0;border:none;color:#fff;padding:5px 18px;" type="button" value="{$lang.IPLABEL_EKARA_ACCESS} " />*}
                                	</a>
                                </td>
                        </tr>
                        <tr>
                                <td>{$lang.IPLABEL_SCENARIOS_NUMBER}</td>
                                <td id="ip_scenarios_number" style="text-align:center"></td>
                        </tr>
                        <tr>{$noExecution}
                        	{if isset($noexecution)}
                        		<td style="text-align:center;" colspan="2">
	      							{$noexecution}
	                            </td>
                        	{else}
	                            <td style="font-size:xxx-large;text-align:center;">
	                                {if $openState == 0}
	                                    <p class="TextOK">{$openIncident}</p>
	                                {elseif $openState == 1}
	                                    <p class="TextWarning">{$openIncident}</p>
	                                {elseif $openState == 2}
	                                    <p class="TextCritical">{$openIncident}</p>
	                                {else}
	                                    <p>{$openIncident}</p>
	                                {/if}   
	                                <h2 style="font-size:13.2px;"> {$lang.IPLABEL_SCENARIOS_INCIDENT_OPEN}</h2>
	                            </td>
	                            <td style="font-size:xxx-large;text-align:center;">
	                                {if $totalState == 0}
	                                    <p class="TextOK">{$totalIncident}</p>
	                                {elseif $totalState == 1}
	                                    <p class="TextWarning">{$totalIncident}</p>
	                                {elseif $totalState == 2}
	                                    <p class="TextCritical">{$totalIncident}</p>
	                                {else}
	                                    <p>{$totalIncident}</p>
	                                {/if}   
	                                <h2 style="font-size:13.2px;"> {$lang.IPLABEL_SCENARIOS_INCIDENT_LASTDAY}</h2>
	                            </td>
                           {/if}
                        </tr>
                    </table>
            </div>
            <div id="iplabel_scenario" class="bigFive small800 nodeViewInnerIplabel">
                <div style="overflow-y:scroll; width:100%; height:100%">
                    <table id="iplabel_table_scenarios" class="tab ui-widget-content">
                    <thead>
                        <tr>
                            <th>{$lang.IPLABEL_SCENARIOS}</th>
                            <th>{$lang.IPLABEL_ROBOTS_STATE}</th>
                            <th>{$lang.IPLABEL_SCENARIOS_TIME}</th>
                            <th>{$lang.IPLABEL_SCENARIOS_AVAILABILITY}</th>
                            <th style="width:40px">{$lang.IPLABEL_SCENARIOS_DETAIL}</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div id="screen_node"></div>
        <script type="text/javascript">
            /* <![CDATA[ */
            Utils.getServiceState({$node.id},'screen_node');
            var nodeid = {$node.id};
            var lang_dialog = "{$lang.IPLABEL_SCENARIOS_DETAIL}";
            var lang_incident= "{$lang.IPLABEL_SCENARIOS_INCIDENT_LASTDAY}";
            var url = "/plugin/iplabel/display_iplabel.php?nodeid={$node.id}";
            var totalincident= {$totalIncident};
            var max;
            {if $totalState == 1}
                var color="#ffcb1f";
            {elseif $totalState == 2}
                var color="#da002e";
                max = totalincident;
            {else}
                var color="#83bc00";
             {/if}

            {literal}
            function createLine(id,item)
            {
            	var tr = $('<tr></tr>');
                var td = $('<td>'+item.scenarioName+'</td>');
                tr.append(td);
                td = $('<td>'+item.statusMessage+'</td>');
                if(item.esiaState=='OK')
                {
                    td.addClass('EventOK');
                }
                else if(item.esiaState=='UNKNOWN')
                {
                    td.addClass('EventUnknown');
                }
                else if(item.esiaState=='CRITICAL')
                {
                    td.addClass('EventCritical');
                }
                else if(item.esiaState=='WARNING')
                {
                    td.addClass('EventWarning');
                }
                tr.append(td);
                td = $('<td>'+item.time+' s</td>');
				if(item.time < 5)
               	{
					 td.addClass('TextOK');
               	}
				else if(item.time < 7)
               	{
					 td.addClass('TextWarning');
               	}
				else
               	{
					 td.addClass('TextCritical');
               	}
                tr.append(td);
                td = $('<td>'+item.availability+' %</td>');
				if(item.availability > 99)
               	{
					 td.addClass('TextOK');
               	}
				else if(item.availability >= 98)
               	{
					 td.addClass('TextWarning');
               	}
				else if(item.availability < 98)
               	{
					 td.addClass('TextCritical');
               	}
                tr.append(td);
                let link =  $('<a class="tooltipstered"></a>');
                link.append($('<img class="button" src="/theme/default-image/esia_search_button.png" alt="Show scenario">'));
                link.attr("href",'/plugin/iplabel/dialog_iplabel.php?nodeid='+nodeid+'&sceid='+item.scenarioId);
                link.on( "click", function() 
                {
                	Adm.openDialog(this,lang_dialog,null,null,null,null,true); 
                	return false;
                });
                td = $('<td></td>');
                td.append(link);
                tr.append(td);
                $('#'+id+' tbody').append(tr);
            }
            $.get( url+"&show=control" ).done(function( data )
            {
                          //  $('#debug').html(data);
				data = JSON.parse(data);
				if('error' in data)
                {
               		$('#iplabel_request_error').html(data.error);
                    $('#iplabel_request_error').show();
				}
                else
                {
				    let total = 0;
				    data.scenarios.forEach( function(item,index)
				    {
					    createLine('iplabel_table_scenarios',item);
                        total++;
				    });
                    $('#ip_scenarios_number').html(total);
                }

            });
                
            {/literal}
            /* ]]> */
        </script>   
{elseif $tab =='scenarios'}
	<script type="text/javascript">
	/* <![CDATA[ */ {literal}
	function selectall(event)
	{
		if($('#selecctall').is(':checked'))
		{
			$('#iplabel_selectscenario tr:not(.filtered) input.checkbox1').each(function()
			{
	     		this.checked = true;
	       	});
	    }
	    else
	    {
	      	$('.checkbox1').each(function() 
	      	{
	        	this.checked = false; 
	        });
	    }
	}
	function onChangeSelect(select)
	{
		let htmlid = select.id;
		let keyid = htmlid.match(/site\-([0-9]*)/);
		if(keyid)
		{
			keyid = keyid[1];
			$('#sce-'+keyid).prop('checked', true);
		}
		
	}
	{/literal}/* ]]> */
	</script> 
	<form id="f_add_sce" method="post" action="control_iplabel.php?nodeid={$node.id}&amp;&tab=scenarios&amps;action=addScenarios">
	  <input type="hidden" name="nodeid" value="{$node.id}" />
      <table id="iplabel_selectscenario" class="tab ui-widget-content">
        <thead>
        <tr>
            <th><input type="checkbox" id="selecctall" name="selecctall" onclick="selectall()"/></th>
            <th>{$lang.IPLABEL_SCENARIOS}</th>
           	<th>{$lang.IPLABEL_ROBOTS_STATE}</th>
           	<th>{$lang.IPLABEL_SCENARIOS_TYPE}</th>
           	<th>{$lang.IPLABEL_SCENARIOS_APP}</th>
           	<th>{$lang.IPLABEL_SITE}</th>
            <th>{$lang.IPLABEL_SCENARIOS_TIME}</th>
            <th>{$lang.IPLABEL_SCENARIOS_AVAILABILITY}</th>	
        </tr>
        </thead>
        <tbody>
        	{foreach name=indext key=key item=sce from=$scenarios} 
				<tr>
					<td><input type="checkbox" class="checkbox1" id="sce-{$key}" name="sce-{$key}" value="{$sce.scenarioName}" /></td>
                    <td>{$sce.scenarioName}</td>
                    {if $sce.esiaState eq 'OK'}
                    	<td class="EventOK">{$sce.statusMessage}</td>
                    {elseif $sce.esiaState eq 'CRITICAL'}
                    	<td class="EventCritical">{$sce.statusMessage}</td>
                    {elseif $sce.esiaState eq 'WARNING'}
                    	<td class="EventWarning">{$sce.statusMessage}</td>
                    {else}
                    	<td class="EventUnknown">{$sce.statusMessage}</td>
                    {/if}
                    <td>{$sce.scenarioType}</td>
                    <td>{$sce.applicationName}</td>
                    <td>
                    	<select name="site-{$key}[]" id="site-{$key}" style="width:250px;" onchange="onChangeSelect(this);"  multiple>
                    		<option value='global' selected="selected">{$lang.IPLABEL_GLOBAL}</option>
                    	{foreach name=indext key=key item=site from=$sce.sites} 
                    		<option value='{$site.name}' data-id="{$key}">{$site.name}</option>
                    	{/foreach}
                    	</select>
                    	 <script type="text/javascript">
                    	 	new SlimSelect({ldelim}select: '#site-{$key}',{literal} 
 
                    	 	   			});
                    	 {/literal}</script>
                    </td>
                    <td>{$sce.time}s</td>
                    <td>{$sce.availability}%</td>
				</tr>
        	{/foreach}
            </tbody>
        </table>
		<input type="submit" value="{$lang.ADD_SERVICES}" />
        <script type="text/javascript">
            /* <![CDATA[ */
            {literal}
            	Utils.createTable("#iplabel_selectscenario");
            {/literal}
            /* ]]> */
        </script>   
</form>
{elseif $tab =='incidents'} 
	<!-- load month, weekday and two digit year parsers -->
	<script type="text/javascript" src="/libs/js/tablesorter/js/parsers/parser-date-month.min.js"></script>
	<script type="text/javascript" src="/libs/js/tablesorter/js/parsers/parser-date-weekday.min.js"></script>
	<script type="text/javascript" src="/libs/js/tablesorter/js/parsers/parser-date-two-digit-year.min.js"></script>
	<!-- http://sugarjs.com/dates#comparing_dates -->
	<script type="text/javascript" src="/libs/sugar.min.js"></script>
    <div class="tableview_title">
	    <h1 id="iplabel_incident_title">{$lang.IPLABEL_SCENARIOS_INCIDENTS} - {$lang.IPLABEL_SCENARIOS_INCIDENTS_1DAY}</h1>
        <div class="pager tablesorter-pager">
        <ul class="triList">
            <li class="triElement tooltipstered">
                <a href="#" class="tooltipstered" onclick="loadIncident({$node.id},1);">
						<img class="btn_img tooltipstered" src="/theme/default/images/cal1.png" alt="add node">
			    </a>
            </li>
            <li class="triElement tooltipstered">
                <a href="#" class="tooltipstered" onclick="loadIncident({$node.id},7);">
                    <img class="btn_img tooltipstered" src="/theme/default/images/cal7.png" alt="add node">
			    </a>
            </li>
            <li class="triElement tooltipstered">
                <a href="#" class="tooltipstered" onclick="loadIncident({$node.id},15);">
                    <img class="btn_img tooltipstered" src="/theme/default/images/cal15.png" alt="add node">
			    </a>
            </li>
        </ul>
        </div>
    </div>
    <table id="iplabel_incident" class="tab ui-widget-content">
    <thead>
        <tr>
            <th>{$lang.IPLABEL_SCENARIOS}</th>
           	<th>{$lang.IPLABEL_SEVERITY}</th>
           	<th>{$lang.IPLABEL_SCENARIOS_APP}</th>
           	<th>{$lang.IPLABEL_ROBOTS_STATE}</th>
            <th class="leftAlign sorter-ddmmyy">{$lang.IPLABEL_SCENARIOS_INCIDENTS_START}</th>
            <th class="leftAlign sorter-ddmmyy">{$lang.IPLABEL_SCENARIOS_INCIDENTS_END}</th>
            <th>{$lang.IPLABEL_DURATION}</th>	
        </tr>
    </thead>
    <tbody>

    </tbody>
    </table>
    <script type="text/javascript">
        /* <![CDATA[ */
        var lang_title='{$lang.IPLABEL_SCENARIOS_INCIDENTS}';
        var lang_1day='{$lang.IPLABEL_SCENARIOS_INCIDENTS_1DAY}';
        var lang_Xday='{$lang.IPLABEL_SCENARIOS_INCIDENTS_XDAY}';
        {literal}
            function loadIncident(nodeid,day)
            {
                $('#esiaOverlay').show();
	            $('#loadingGif').show();

                $('.progressbar').progressbar({value: false});
                $.ajax({
					url: "/plugin/iplabel/control_iplabel.php",
		    		type: "get",
		    		data: { 
		    			nodeid: nodeid, 
		    			tab: 'incidents-day', 
		    			day: day, 
		    		},
		    		success: function(data) 
		    		{
		    			$('#iplabel_incident tbody').html('');
		    			$('#iplabel_incident tbody').append(data);
                       
		    			$("#iplabel_incident").trigger('update');
	              	    $('#esiaOverlay').hide();
	              	    $('#loadingGif').hide();
                        if(day ==1)
                        {
                            $('#iplabel_incident_title').html(lang_title+' - '+lang_1day);
                        }
                        else
                        {
                            $('#iplabel_incident_title').html(lang_title+' - '+day+' '+lang_Xday );
                        }

		    		  }
		    		});
            }
        {/literal}
        Utils.createTable("#iplabel_incident");
        loadIncident({$node.id},1);
        /* ]]> */
    </script>   
{elseif $tab =='incidents-day'} 
    {foreach name=indext key=key item=inci from=$incident} 
		<tr>
            <td>{$inci.name}</td>
            {if $inci.severity eq 'Critical'}
               	<td class="EventCritical">{$lang.IPLABEL_SEVERITY_CRITICAL}</td>
            {else}
               	<td class="EventUnknown">{$inci.severity}</td>
            {/if}
            <td>{$inci.application}</td>
            {if $inci.status == 0}
              	<td class="TextCritical">{$lang.IPLABEL_STATUS_UNKNOWN}</td>
            {elseif $inci.status == 1}
               	<td class="textOK">{$lang.IPLABEL_STATUS_OK}</td>
            {elseif $inci.status == 2}
               	<td class="TextCritical">{$lang.IPLABEL_STATUS_FAILURE}</td>
            {elseif $inci.status == 3}
              	<td class="TextCritical">{$lang.IPLABEL_STATUS_ABORTED}</td>
            {elseif $inci.status == 4 || $inci.status == 5}
               	<td class="TextCritical">{$lang.IPLABEL_STATUS_NOEXEC}</td>
            {elseif $inci.status == 6}
               	<td class="TextCritical">{$lang.IPLABEL_STATUS_STOPPED}</td>
            {elseif $inci.status == 7}
               	<td class="TextCritical">{$lang.IPLABEL_STATUS_EXCLUDED}</td>
            {elseif $inci.status == 8}
               	<td class="TextCritical">{$lang.IPLABEL_STATUS_DEGRADED}</td>
            {else}
               	<td class="EventUnknown">{$inci.severity}</td>
            {/if}
            <td>{$inci.start}</td>
            <td>{$inci.end}</td>
            <td>{$inci.duration}</td>
		</tr>
    {/foreach}

{/if}