<?php if (! $this->compact): ?>
<div class="controls">
    <?= $this->tabs; ?>
    <div style="float: right;" class="dont-print">
        <?= $intervalBox; ?>
    </div>
    <?= $this->limiter; ?>
</div>
<?php endif ?>
<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,
                    'notificationsUrl'  => $recentAlertsUrl
                )); ?>
            </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,
                'notificationsUrl'  => $notificationsUrl
            )); ?>
        </div>
    </div>
</div>
