<?php if (!defined('PICONTROL')) exit(); ?>
<link rel="stylesheet" type="text/css" href="<?php echo PLUGIN_PUBLIC_PATH; ?>public_html/css/style.css" />
<script type="text/javascript" src="<?php echo PLUGIN_PUBLIC_PATH; ?>public_html/js/status_refresh.js"></script>
<div class="sidebar">
	<div class="box">
		<div class="inner-header">
			<span><?php _e('Benutzeroberfl&auml;che'); ?></span>
		</div>
		<div class="inner">
			<a href="<?php echo $data['address']; ?>" target="_blank" class="button" style="width: 100%; box-sizing: border-box; text-align: center;"><?php _e('Zur Benutzeroberfl&auml;che'); ?></a>
		</div>
	</div>
</div>
<div class="container-600">
	<div class="box">
		<div class="inner-header">
			<span><?php _e('Fritz!Box'); ?></span>
			<?php showSettingsIcon('?s=plugins&amp;id=fritzbox&amp;settings'); ?>
		</div>
<?php if ($data['connectionFritzbox'] == true) { ?>
		<div class="inner-table">
			<div>
				<div class="refresh">
					<div>
						<div class="refresh-bar background-color-7"></div>
					</div>
					<a href="#refresh"><img src="public_html/img/refresh-icon.svg" title="<?php _e('Aktualisieren'); ?>" /></a>
				</div>
			</div>
			<table class="table table-borderless table-form">
				<tr>
					<td style="width: 40%;"><?php _e('Modell'); ?></td>
					<td><?php echo $data['model']; ?></td>
				</tr>
				<tr>
					<td><?php _e('Status'); ?></td>
					<td><?php echo $data['connection']; ?></td>
				</tr>
				<tr>
					<td><?php _e('Verbunden seit'); ?></td>
					<td><?php echo $data['uptime']; ?></td>
				</tr>
				<tr>
					<td><?php _e('&Ouml;ffentliche IP-Adresse'); ?></td>
					<td><a href="http://<?php echo $data['publicIP']; ?>" target="_blank"><?php echo $data['publicIP']; ?></a></td>
				</tr>
				<tr>
					<td><?php _e('Datenvolumen empfangen'); ?></td>
					<td><?php echo sizeUnit($data['totalReceived']); ?></td>
				</tr>
				<tr>
					<td><?php _e('Datenvolumen gesendet'); ?></td>
					<td><?php echo sizeUnit($data['totalSent']); ?></td>
				</tr>
				<tr>
					<td><?php _e('Auslastung Download'); ?></td>
					<td><div class="custom-progressbar" data-text="<?php echo $data['currentBandwidthDown']; ?> / <?php echo $data['maxBandwidthDown']; ?>">
							<div class="background-color-3" style="width: <?php echo $data['percentageBandwidthDown']; ?>%;"></div>
					</div></td>
				</tr>
				<tr>
					<td><?php _e('Auslastung Upload'); ?></td>
					<td><div class="custom-progressbar" data-text="<?php echo $data['currentBandwidthUp']; ?> / <?php echo $data['maxBandwidthUp']; ?>">
							<div class="background-color-3" style="width: <?php echo $data['percentageBandwidthUp']; ?>%;"></div>
					</div></td>
				</tr>
			</table>
		</div>
<?php } else { ?>
		<div class="inner-info">
			<div><?php _e('Momentan besteht keine Verbindung zu einer Fritz!Box!'); ?></div>
		</div>
<?php } ?>
	</div>
</div>
<div class="clear-both"></div>
<div>
<?php foreach ($data['statistics'] as $statistic) { ?>
	<div class="box google-controls" id="dashboard_log_<?php echo $statistic['array']['id']; ?>">
		<div class="inner-header">
			<span><?php _e($statistic['array']['title']); ?></span>
		</div>
		<div class="inner text-center padding-0" id="chart_log_<?php echo $statistic['array']['id']; ?>">
			<img src="public_html/img/loader.svg" style="margin: 20px;" />
		</div>
		<div class="inner text-center" id="chart_control_log_<?php echo $statistic['array']['id']; ?>">
		</div>
	</div>
<?php } ?>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="public_html/js/statistic_builder.js"></script>
<script type="text/javascript">
	google.load('visualization', '1', {packages:['controls']});
	google.setOnLoadCallback(createTable);

	function createTable()
	{
<?php foreach ($data['statistics'] as $statistic) { ?>
		statisticBuilder(<?php echo $statistic['json']; ?>, 'fritzbox');
<?php } ?>
	}
</script>