<?php
/**
 * Responsive Visibility settings page shell.
 *
 * @package CraftAddonsForWPBakery
 *
 * @var array  $cafw_breakpoints Active breakpoints.
 * @var string $cafw_upgrade_url Pro upgrade URL (may be empty).
 * @var bool   $cafw_updated     Whether settings were just saved.
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<div class="wrap cafw-wrap">

	<div class="cafw-header">
		<div class="cafw-header__brand">
			<img class="cafw-header__logo" src="<?php echo esc_url( CAFW_URL . 'admin/images/cafw-logo-white.svg' ); ?>" alt="" />
			<div>
				<h1><?php esc_html_e( 'Responsive Visibility', 'craft-addons-for-wpbakery' ); ?></h1>
				<p class="cafw-header__tagline">
					<?php esc_html_e( 'Set the breakpoints used by the "Hide on" controls on every element.', 'craft-addons-for-wpbakery' ); ?>
				</p>
			</div>
		</div>
		<span class="cafw-version">v<?php echo esc_html( CAFW_VERSION ); ?></span>
	</div>

	<hr class="wp-header-end" />

	<?php if ( $cafw_updated ) : ?>
		<div class="cafw-toast" role="status">
			<span class="cafw-toast__icon" aria-hidden="true">
				<svg viewBox="0 0 20 20" width="13" height="13" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5l4 4 8-9"/></svg>
			</span>
			<span class="cafw-toast__msg"><?php esc_html_e( 'Breakpoints saved.', 'craft-addons-for-wpbakery' ); ?></span>
		</div>
	<?php endif; ?>

	<div class="cafw-toolbar">
		<h2><?php esc_html_e( 'Breakpoints', 'craft-addons-for-wpbakery' ); ?></h2>
		<p class="cafw-toolbar__hint">
			<?php esc_html_e( 'Each breakpoint becomes a "Hide on" option on every element. Min and Max are the screen widths in pixels where hiding applies.', 'craft-addons-for-wpbakery' ); ?>
		</p>
	</div>

	<?php
	if ( has_action( 'cafw_breakpoints_editor' ) ) {
		do_action( 'cafw_breakpoints_editor', $cafw_breakpoints );
	} else {
		require CAFW_PATH . 'admin/views/partials/breakpoints-readonly.php';
	}
	?>

</div>
