<?php
$helper = $this->getHelper('MonitoringState');
?>
<div class="controls">
    <?= $this->tabs ?>
    <div style="margin: 1em;" class="dontprint">
        <?= $intervalBox; ?>
    </div>
    <?= $this->widget('limiter') ?>
    <?= $this->paginationControl($notifications, null, null, array('preserve' => $this->preserve)) ?>
</div>

<div class="content alertsummary">
    <!-- <h1><?= $this->translate('Alert summary'); ?></h1> -->

    <div class="hbox">
        <div class="hbox-item">
            <h2><?= $this->translate('Notifications and Problems'); ?></h2>
            <div style="width: 400px; height: 400px;">
                <?= $defectChart->render(); ?>
            </div>
        </div>

        <div class="hbox-item">
            <h2><?= $this->translate('Time to Reaction (Ack, Recover)'); ?></h2>
            <div style="width: 400px; height: 400px;">
                <?= $healingChart->render(); ?>
            </div>
        </div>
    </div>

    <h2><?= $this->translate('Trend'); ?></h2>

    <div class="alertsummary-flex-container">
        <div class="alertsummary-flex">
            <?= $this->translate('Average') ?>
            <strong><?= $this->perf->avg; ?></strong>
            <?= $this->translate('notifications per hour'); ?>,
            <strong><?= $this->perf->last; ?></strong>
            <?= $this->translate('in the last hour'); ?>.

            <?= $this->translate('Trend for the last 24h'); ?>
            (<?= $this->trend->percent; ?>%
            <strong><?= $this->translate($this->trend->trend); ?></strong>)

            <span>
                <?php if ($this->trend->trend === 'up'): ?>
                    <?= $this->icon('up-open'); ?>
                <?php elseif ($this->trend->trend === 'unchanged'): ?>
                    <?= $this->icon('right-open'); ?>
                <?php else: ?>
                    <?= $this->icon('down-open'); ?>
                <?php endif; ?>
            </span>
        </div>
    </div>

    <?php if ($this->recentAlerts): ?>
        <h1><?= $this->translate('Top 5 Recent Alerts'); ?></h1>

        <div class="alertsummary-flex-container">
            <div class="alertsummary-flex">
                <?= $this->partial('list/notifications.phtml', array(
                    'notifications' => $this->recentAlerts,
                    'compact'       => true,
                    'inline'        => true
                )); ?>
            </div>
        </div>
    <?php endif; ?>

    <h1><?= $this->translate('History'); ?></h1>
    <div class="alertsummary-flex-container">
        <div class="alertsummary-flex">
            <?= $this->partial('list/notifications.phtml', array(
                'notifications' => $this->notifications,
                'compact'       => true,
                'inline'        => true
            )); ?>
        </div>
    </div>
</div>
