<?php if ( ! defined( 'ABSPATH' ) ) { exit; } ?>
<div class="wrap">
	<div class="zacls-action-bar">
		<div class="zacls-action-left">
			<h1 class="zacls-page-title"><?php esc_html_e( 'Notification Center', 'za-creative-login-shield' ); ?></h1>
		</div>
		<div class="zacls-action-right">
			<button type="button" class="zacls-btn" id="zacls-clear-notifications"><?php esc_html_e( 'Dismiss All', 'za-creative-login-shield' ); ?></button>
		</div>
	</div>
	<p class="zacls-page-description"><?php esc_html_e( 'View all security notifications and alerts.', 'za-creative-login-shield' ); ?></p>

	<?php $notifications = ZACLS_Notifications::get_all(); ?>

	<?php if ( empty( $notifications ) ) : ?>
		<div class="zacls-empty-state">
			<span class="dashicons dashicons-bell"></span>
			<p><?php esc_html_e( 'No notifications.', 'za-creative-login-shield' ); ?></p>
		</div>
	<?php else : ?>
		<div class="zacls-notif-list">
			<?php foreach ( $notifications as $n ) : ?>
				<div class="zacls-notif-item">
					<div class="notif-icon">
						<span class="dashicons dashicons-<?php echo esc_attr( 'error' === $n['type'] ? 'warning' : ( 'success' === $n['type'] ? 'yes' : 'info' ) ); ?>"></span>
					</div>
					<div class="notif-content">
						<div class="notif-title"><?php echo wp_kses_post( $n['message'] ); ?></div>
					</div>
					<div class="notif-time"><?php echo esc_html( $n['created'] ); ?></div>
				</div>
			<?php endforeach; ?>
		</div>
	<?php endif; ?>
</div>

<script>
jQuery(function($) {
	$('#zacls-clear-notifications').on('click', function() {
		$('.zacls-notif-item').fadeOut(300, function() { $(this).remove(); });
	});
});
</script>
