<?php

use SlimStat\Components\View;

// Notification sidebar component
?>
<div class="slimstat-notification-sidebar">
    <div class="slimstat-notification-sidebar__menu">
        <div class="slimstat-notification-sidebar__header">
            <div>
                <h2 class="slimstat-notification-sidebar__title"><?php esc_html_e('Notifications', 'wp-slimstat'); ?></h2>
                <div class="slimstat-notification-sidebar__actions">
                    <button type="button" class="slimstat-notification-sidebar__reload" aria-label="<?php esc_attr_e('Refresh notifications', 'wp-slimstat'); ?>">
                        <span class="screen-reader-text"><?php esc_html_e('Refresh notifications', 'wp-slimstat'); ?></span>
                    </button>
                    <button type="button" class="slimstat-notification-sidebar__close" aria-label="<?php esc_attr_e('Close notifications', 'wp-slimstat'); ?>">
                        <span class="screen-reader-text"><?php esc_html_e('Close notifications', 'wp-slimstat'); ?></span>
                    </button>
                </div>
            </div>
            <div>
                <ul class="slimstat-notification-sidebar__tabs">
                    <li class="slimstat-notification-sidebar__tab slimstat-notification-sidebar__tab--active"
                        data-tab="tab-1"><?php esc_html_e('Inbox', 'wp-slimstat'); ?></li>
                    <li class="slimstat-notification-sidebar__tab"
                        data-tab="tab-2"><?php esc_html_e('Dismissed', 'wp-slimstat'); ?></li>
                </ul>

                <?php if (!empty($notifications)) : ?>
                    <?php
                    $hasNotifications = false;
                    foreach ($notifications as $notification) {
                        if (!$notification->getDismiss()) {
                            $hasNotifications = true;
                            break;
                        }
                    }
                    ?>
                    <?php if ($hasNotifications) : ?>
                        <a href="#"
                           class="slimstat-notification-sidebar__dismiss-all"><?php esc_html_e('Dismiss all', 'wp-slimstat'); ?></a>
                    <?php endif; ?>
                <?php endif; ?>
            </div>
        </div>
        <div class="slimstat-notification-sidebar__content">
            <div class="slimstat-notification-sidebar__tab-pane slimstat-notification-sidebar__tab-pane--active" id="tab-1">
                <div class="slimstat-notification-sidebar__cards slimstat-notification-sidebar__cards--active">
                    <?php
                    $hasNotifications = false;
                    if (!empty($notifications)) :
                        foreach ($notifications as $notification) :
                            if ($notification->getDismiss()) continue;
                            $hasNotifications = true;
                            View::load('components/notification/card', ['notification' => $notification]);
                        endforeach;
                    endif;
                    if (!$hasNotifications) {
                        View::load('components/notification/no-data', ['tab' => __('inbox', 'wp-slimstat')]);
                    }
                    ?>
                </div>
            </div>
            <div class="slimstat-notification-sidebar__tab-pane" id="tab-2">
                <div class="slimstat-notification-sidebar__cards slimstat-notification-sidebar__cards--dismissed">
                    <?php
                    $hasDismissed = false;
                    if (!empty($notifications)) :
                        foreach ($notifications as $notification) :
                            if (!$notification->getDismiss()) continue;
                            $hasDismissed = true;
                            View::load('components/notification/card', ['notification' => $notification]);
                        endforeach;
                    endif;
                    if (!$hasDismissed) {
                        View::load('components/notification/no-data', ['tab' => __('dismissed list', 'wp-slimstat')]);
                    }
                    ?>
                </div>
            </div>
        </div>
    </div>
    <div class="slimstat-notification-sidebar__overlay"></div>
</div>