<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
</html>
<?php
/**
 * Template for JS component for Header Footer Grid.
 *
 * Name:    Header Footer Grid
 * Author:  
 *
 * @version 1.0.1
 * @package HFG
 */

namespace HFG;

?>
<script type="text/html" id="tmpl-hfg--cb-panel">
	<div class="hfg--cp-rows">

		<# if ( ! _.isUndefined( data.rows.top ) ) { #>
		<div class="hfg--row-top hfg--cb-row" data-id="{{ data.id }}_top">
			<a class="hfg--cb-row-settings" title="{{ data.rows.top.title || data.rows.top }}" data-id="top" href="#"></a>
			<div class="hfg--row-inner">
				<div class="row--title">{{ data.rows.top.title || data.rows.top }}</div>
				<div class="row--grid">
					<?php
					for ( $i = 1; $i <= 12; $i ++ ) {
						echo '<div><button class="add-button--grid" data-slot="' . esc_attr( $i - 1 ) . '">+</button></div>';
					}
					?>
				</div>
				<div class="hfg--cb-items grid-stack gridster" data-id="top"></div>
			</div>
		</div>
		<# } #>

		<# if ( ! _.isUndefined( data.rows.main ) ) { #>
		<div class="hfg--row-main hfg--cb-row" data-id="{{ data.id }}_main">
			<a class="hfg--cb-row-settings" title="{{ data.rows.main.title || data.rows.main }}" data-id="main" href="#"></a>

			<div class="hfg--row-inner">
				<div class="row--title">{{ data.rows.main.title || data.rows.main }}</div>
				<div class="row--grid">
					<?php
					for ( $i = 1; $i <= 12; $i ++ ) {
						echo '<div><button class="add-button--grid" data-slot="' . esc_attr( $i - 1 ) . '">+</button></div>';
					}
					?>
				</div>
				<div class="hfg--cb-items grid-stack gridster" data-id="main"></div>
			</div>
		</div>
		<# } #>

		<# if ( ! _.isUndefined( data.rows.bottom ) ) { #>
		<div class="hfg--row-bottom hfg--cb-row" data-id="{{ data.id }}_bottom">
			<a class="hfg--cb-row-settings" title="{{ data.rows.bottom.title || data.rows.bottom }}" data-id="bottom" href="#"></a>
			<div class="hfg--row-inner">
				<div class="row--title">{{ data.rows.bottom.title || data.rows.bottom }}</div>
				<div class="row--grid">
					<?php
					for ( $i = 1; $i <= 12; $i ++ ) {
						echo '<div><button class="add-button--grid" data-slot="' . esc_attr( $i - 1 ) . '">+</button></div>';
					}
					?>
				</div>
				<div class="hfg--cb-items grid-stack gridster" data-id="bottom"></div>
			</div>
		</div>
		<# } #>
	</div>

	<# if ( data.device != 'desktop' ) { #>
	<# if ( ! _.isUndefined( data.rows.sidebar ) ) { #>
	<div class="hfg--cp-sidebar">
		<h4><?php echo __( 'Mobile menu content', 'solace' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></h4>
		<div class="hfg--row-bottom hfg--cb-row" data-id="{{ data.id }}_sidebar">
			<a href="#" class="toggle">
				<span class="show"><?php echo esc_html__( 'Show', 'solace' ); ?></span>
				<span class="hide"><?php echo esc_html__( 'Hide', 'solace' ); ?></span>
			</a>
			<a class="hfg--cb-row-settings" title="{{ data.rows.sidebar.title || data.rows.sidebar }}" data-id="sidebar" href="#"></a>
			<div class="hfg--row-inner">
				<div class="row--title">{{ data.rows.sidebar.title || data.rows.sidebar }}</div>
				<div class="hfg--cb-items hfg--sidebar-items" data-id="sidebar"></div>
				<div class="row--grid">
					<div>
						<button class="add-button--grid" data-slot="1">+</button>
					</div>
				</div>
			</div>
		</div>
	</div>
			<# } #>
			<# } #>
</script>
