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

	<div class="udock-header">
		<div class="udock-header-left">
			<img src="<?php echo esc_url( UNODOCK_URL . 'assets/images/unodock-logo.png' ); ?>" alt="UnoDock" class="udock-header-logo" />
			<div>
				<h1>UnoDock <span class="udock-header-subtitle"><?php esc_html_e( 'Mobile Bottom Navigation', 'unodock' ); ?></span></h1>
				<p><?php esc_html_e( 'by', 'unodock' ); ?> <strong>UnoizeStudio</strong></p>
			</div>
		</div>
		<div class="udock-header-actions">
			<div class="udock-enable-row">
				<label class="udock-switch">
					<input type="checkbox" id="g-enabled" />
					<span class="udock-slider"></span>
				</label>
				<span class="udock-enable-label"><?php esc_html_e( 'Enable bar', 'unodock' ); ?></span>
			</div>
			<span class="udock-save-status" id="udock-save-status"></span>
			<button type="button" class="udock-btn udock-btn-primary" id="udock-save-btn">
				<span class="dashicons dashicons-saved"></span> <?php esc_html_e( 'Save changes', 'unodock' ); ?>
			</button>
		</div>
	</div>

	<div class="udock-tabs">
		<button type="button" class="udock-tab active" data-tab="templates"><?php esc_html_e( 'Templates', 'unodock' ); ?></button>
		<button type="button" class="udock-tab" data-tab="buttons"><?php esc_html_e( 'Buttons', 'unodock' ); ?></button>
		<button type="button" class="udock-tab" data-tab="appearance"><?php esc_html_e( 'Appearance', 'unodock' ); ?></button>
		<button type="button" class="udock-tab" data-tab="behavior"><?php esc_html_e( 'Behavior', 'unodock' ); ?></button>
		<button type="button" class="udock-tab" data-tab="preview"><?php esc_html_e( 'Preview', 'unodock' ); ?></button>
	</div>

	<!-- TAB: TEMPLATES -->
	<div class="udock-panel active" data-panel="templates">
		<div class="udock-panel-head">
			<h2><?php esc_html_e( 'Ready-made templates', 'unodock' ); ?></h2>
			<p><?php esc_html_e( 'Pick a starting point and customize it further. Applying a template replaces your current buttons and appearance settings.', 'unodock' ); ?></p>
		</div>
		<div class="udock-templates-grid" id="udock-templates-grid"></div>
	</div>

	<!-- TAB: BUTTONS -->
	<div class="udock-panel" data-panel="buttons">
		<div class="udock-panel-head">
			<h2><?php esc_html_e( 'Nav bar buttons', 'unodock' ); ?></h2>
			<p><?php esc_html_e( "Drag to reorder. Maximum of 6 buttons. The number shown is the button's position in the bar.", 'unodock' ); ?></p>
		</div>
		<div class="udock-buttons-list" id="udock-buttons-list"></div>
		<button type="button" class="udock-btn udock-btn-outline" id="udock-add-button">
			<span class="dashicons dashicons-plus"></span> <?php esc_html_e( 'Add button', 'unodock' ); ?>
		</button>

		<div class="udock-card" style="margin-top: 20px;">
			<h3><?php esc_html_e( 'Featured button', 'unodock' ); ?> <span class="udock-pro-badge udock-inline-badge">PRO</span></h3>
			<div class="udock-switch-row">
				<label class="udock-switch">
					<input type="checkbox" id="g-featured_enabled" />
					<span class="udock-slider"></span>
				</label>
				<div>
					<strong><?php esc_html_e( 'Feature one button', 'unodock' ); ?></strong>
					<p><?php esc_html_e( 'Makes one button stand out with a larger icon (e.g. a center action button).', 'unodock' ); ?></p>
				</div>
			</div>
			<div class="udock-field" id="g-featured_number-wrap">
				<label><?php esc_html_e( 'Which button number should be featured?', 'unodock' ); ?></label>
				<select id="g-featured_button_number">
					<option value="1"><?php esc_html_e( 'Button 1', 'unodock' ); ?></option>
					<option value="2"><?php esc_html_e( 'Button 2', 'unodock' ); ?></option>
					<option value="3"><?php esc_html_e( 'Button 3', 'unodock' ); ?></option>
					<option value="4"><?php esc_html_e( 'Button 4', 'unodock' ); ?></option>
					<option value="5"><?php esc_html_e( 'Button 5', 'unodock' ); ?></option>
					<option value="6"><?php esc_html_e( 'Button 6', 'unodock' ); ?></option>
				</select>
				<p class="udock-hint"><?php esc_html_e( 'Numbers match the position shown next to each button above.', 'unodock' ); ?></p>
			</div>
			<div class="udock-field" id="g-featured_size-wrap">
				<label><?php esc_html_e( 'Featured button size', 'unodock' ); ?></label>
				<div class="udock-size-bar" id="g-featured_size-bar" data-value="1">
					<div class="udock-size-bar-track"></div>
					<button type="button" class="udock-size-bar-dot" data-size="1"></button>
					<button type="button" class="udock-size-bar-dot" data-size="2"></button>
					<button type="button" class="udock-size-bar-dot" data-size="3"></button>
					<button type="button" class="udock-size-bar-dot" data-size="4"></button>
					<button type="button" class="udock-size-bar-dot" data-size="5"></button>
				</div>
				<p class="udock-hint"><?php esc_html_e( 'From subtle to bold — each step makes the featured icon a little bigger.', 'unodock' ); ?></p>
			</div>
		</div>
	</div>

	<!-- TAB: APPEARANCE -->
	<div class="udock-panel" data-panel="appearance">
		<div class="udock-card">
			<h3><?php esc_html_e( 'Bar background', 'unodock' ); ?></h3>
			<div class="udock-field">
				<label><?php esc_html_e( 'Background type', 'unodock' ); ?></label>
				<div class="udock-radio-row">
					<label><input type="radio" name="bg_type" id="g-bg_type-color" value="color" /> <?php esc_html_e( 'Solid color', 'unodock' ); ?></label>
					<label><input type="radio" name="bg_type" id="g-bg_type-gradient" value="gradient" /> <?php esc_html_e( 'Gradient', 'unodock' ); ?></label>
				</div>
			</div>
			<div class="udock-grid-4" id="g-bg_color-wrap">
				<div class="udock-field">
					<label><?php esc_html_e( 'Bar background', 'unodock' ); ?></label>
					<input type="text" class="udock-color" id="g-bg_color" />
				</div>
			</div>
			<div class="udock-grid-4" id="g-bg_gradient-wrap">
				<div class="udock-field">
					<label><?php esc_html_e( 'Gradient start', 'unodock' ); ?></label>
					<input type="text" class="udock-color" id="g-bg_gradient_start" />
				</div>
				<div class="udock-field">
					<label><?php esc_html_e( 'Gradient end', 'unodock' ); ?></label>
					<input type="text" class="udock-color" id="g-bg_gradient_end" />
				</div>
			</div>
		</div>

		<div class="udock-card">
			<h3><?php esc_html_e( 'Colors', 'unodock' ); ?></h3>
			<div class="udock-grid-4">
				<div class="udock-field">
					<label><?php esc_html_e( 'Icon (inactive)', 'unodock' ); ?></label>
					<input type="text" class="udock-color" id="g-icon_color" />
				</div>
				<div class="udock-field">
					<label><?php esc_html_e( 'Text', 'unodock' ); ?></label>
					<input type="text" class="udock-color" id="g-text_color" />
				</div>
			</div>
			<p class="udock-hint"><?php esc_html_e( 'Button text always stays the same color. Use the options below to highlight the active button instead.', 'unodock' ); ?></p>

			<div class="udock-card-divider"></div>

			<div class="udock-switch-row udock-switch-row-compact">
				<label class="udock-switch">
					<input type="checkbox" id="g-underline_enabled" />
					<span class="udock-slider"></span>
				</label>
				<div>
					<strong><?php esc_html_e( 'Active underline', 'unodock' ); ?></strong>
					<p><?php esc_html_e( 'Highlights the active button with an animated underline beneath its text.', 'unodock' ); ?></p>
				</div>
			</div>
			<div class="udock-grid-4" id="g-underline_color-wrap">
				<div class="udock-field">
					<label><?php esc_html_e( 'Underline color', 'unodock' ); ?></label>
					<input type="text" class="udock-color" id="g-underline_color" />
				</div>
			</div>

			<div class="udock-card-divider"></div>

			<div class="udock-switch-row udock-switch-row-compact">
				<label class="udock-switch">
					<input type="checkbox" id="g-active_icon_enabled" />
					<span class="udock-slider"></span>
				</label>
				<div>
					<strong><?php esc_html_e( 'Active icon color', 'unodock' ); ?></strong>
					<p><?php esc_html_e( "Changes the icon's color when its button is active.", 'unodock' ); ?></p>
				</div>
			</div>
			<div class="udock-grid-4" id="g-icon_color_active-wrap">
				<div class="udock-field">
					<label><?php esc_html_e( 'Icon (active)', 'unodock' ); ?></label>
					<input type="text" class="udock-color" id="g-icon_color_active" />
				</div>
			</div>
		</div>

		<div class="udock-card">
			<h3><?php esc_html_e( 'Dimensions', 'unodock' ); ?></h3>
			<div class="udock-grid-3">
				<div class="udock-field">
					<label><?php esc_html_e( 'Bar height', 'unodock' ); ?> <span class="udock-range-val" id="val-bar_height"></span>px</label>
					<input type="range" id="g-bar_height" min="44" max="90" step="1" />
				</div>
				<div class="udock-field">
					<label><?php esc_html_e( 'Icon size', 'unodock' ); ?> <span class="udock-range-val" id="val-icon_size"></span>px</label>
					<input type="range" id="g-icon_size" min="14" max="36" step="1" />
				</div>
				<div class="udock-field">
					<label><?php esc_html_e( 'Text size', 'unodock' ); ?> <span class="udock-range-val" id="val-font_size"></span>px</label>
					<input type="range" id="g-font_size" min="8" max="16" step="1" />
				</div>
			</div>
			<div class="udock-grid-3">
				<div class="udock-field">
					<label><?php esc_html_e( 'Top corner radius', 'unodock' ); ?> <span class="udock-range-val" id="val-top_corner_radius"></span>/10 <span class="udock-pro-badge udock-inline-badge">PRO</span></label>
					<input type="range" id="g-top_corner_radius" min="0" max="10" step="1" />
				</div>
			</div>
		</div>
	</div>

	<!-- TAB: BEHAVIOR -->
	<div class="udock-panel" data-panel="behavior">
		<div class="udock-card">
			<h3><?php esc_html_e( 'Visibility', 'unodock' ); ?></h3>

			<div class="udock-switch-row">
				<label class="udock-switch">
					<input type="checkbox" id="g-sticky" />
					<span class="udock-slider"></span>
				</label>
				<div>
					<strong><?php esc_html_e( 'Sticky bar', 'unodock' ); ?></strong>
					<p><?php esc_html_e( 'Keeps the bar visible at all times while scrolling.', 'unodock' ); ?></p>
				</div>
			</div>

			<div class="udock-switch-row">
				<label class="udock-switch">
					<input type="checkbox" id="g-safe_area" />
					<span class="udock-slider"></span>
				</label>
				<div>
					<strong><?php esc_html_e( 'Safe area (iPhone)', 'unodock' ); ?></strong>
					<p><?php esc_html_e( 'Avoids overlapping the "swipe to home" gesture bar on notched iPhones.', 'unodock' ); ?></p>
				</div>
			</div>

			<div class="udock-switch-row">
				<label class="udock-switch">
					<input type="checkbox" id="g-vibrate_enabled" />
					<span class="udock-slider"></span>
				</label>
				<div>
					<strong><?php esc_html_e( 'Vibrate on tap', 'unodock' ); ?> <span class="udock-pro-badge udock-inline-badge">PRO</span></strong>
					<p><?php esc_html_e( "Doesn't work on iPhone — Apple doesn't allow websites to trigger vibration on Safari. Works on Android, but only if vibration is turned on in the phone's settings.", 'unodock' ); ?></p>
				</div>
			</div>

			<div class="udock-switch-row">
				<label class="udock-switch">
					<input type="checkbox" id="g-hide_for_admins" />
					<span class="udock-slider"></span>
				</label>
				<div>
					<strong><?php esc_html_e( 'Hide for administrators', 'unodock' ); ?></strong>
					<p><?php esc_html_e( "Don't show the bar to users with the administrator role.", 'unodock' ); ?></p>
				</div>
			</div>

			<div class="udock-field">
				<label><?php esc_html_e( 'Show for', 'unodock' ); ?> <span class="udock-pro-badge udock-inline-badge">PRO</span></label>
				<select id="g-visibility">
					<option value="everyone"><?php esc_html_e( 'Everyone', 'unodock' ); ?></option>
					<option value="logged_in"><?php esc_html_e( 'Logged-in users only', 'unodock' ); ?></option>
					<option value="logged_out"><?php esc_html_e( 'Logged-out visitors only', 'unodock' ); ?></option>
				</select>
			</div>

			<div class="udock-field">
				<label><?php esc_html_e( 'Where to show the bar', 'unodock' ); ?></label>
				<select id="g-show_on">
					<option value="all"><?php esc_html_e( 'Everywhere on the site', 'unodock' ); ?></option>
					<option value="specific"><?php esc_html_e( 'Specific pages only', 'unodock' ); ?></option>
					<option value="exclude"><?php esc_html_e( 'Everywhere, except specific pages', 'unodock' ); ?></option>
				</select>
			</div>
			<div class="udock-field" id="g-show_on_pages-wrap" style="display:none;">
				<label><?php esc_html_e( 'Pages where the bar appears', 'unodock' ); ?></label>
				<div class="udock-checkbox-list" id="g-show_on_pages-list"></div>
			</div>
			<div class="udock-field" id="g-show_on_exclude_pages-wrap" style="display:none;">
				<label><?php esc_html_e( 'Pages where the bar should NOT appear', 'unodock' ); ?></label>
				<div class="udock-checkbox-list" id="g-show_on_exclude_pages-list"></div>
			</div>

			<div class="udock-field">
				<label><?php esc_html_e( 'Z-index', 'unodock' ); ?> <span class="udock-hint">(<?php esc_html_e( "adjust if there's a conflict with a chat widget, cookie banner, etc.", 'unodock' ); ?>)</span></label>
				<input type="number" id="g-z_index" min="1" max="999999" />
			</div>
		</div>

		<div class="udock-card">
			<h3><?php esc_html_e( 'Maintenance', 'unodock' ); ?></h3>
			<div class="udock-switch-row">
				<div>
					<strong><?php esc_html_e( 'Clear cache', 'unodock' ); ?></strong>
					<p><?php esc_html_e( 'Clears internal UnoDock data (old/orphaned entries from previous versions). Your current settings are kept.', 'unodock' ); ?></p>
				</div>
				<button type="button" class="udock-btn udock-btn-outline" id="udock-clear-cache-btn"><?php esc_html_e( 'Clear cache', 'unodock' ); ?></button>
			</div>
			<div class="udock-switch-row">
				<label class="udock-switch">
					<input type="checkbox" id="g-uninstall_cleanup" />
					<span class="udock-slider"></span>
				</label>
				<div>
					<strong><?php esc_html_e( 'Delete all settings when the plugin is uninstalled', 'unodock' ); ?></strong>
					<p><?php esc_html_e( 'If disabled, your settings are kept in case you reinstall the plugin later.', 'unodock' ); ?></p>
				</div>
			</div>
		</div>
	</div>

	<!-- TAB: PREVIEW -->
	<div class="udock-panel" data-panel="preview">
		<div class="udock-card">
			<h3><?php esc_html_e( 'Preview', 'unodock' ); ?></h3>
			<p class="udock-hint"><?php esc_html_e( 'Approximate simulation — the final result may vary slightly depending on your theme.', 'unodock' ); ?></p>
			<div class="udock-preview-frame">
				<div class="udock-preview-bar" id="udock-preview-bar"></div>
			</div>
		</div>
	</div>

	<div class="udock-footer">
		<div class="udock-footer-brand">
			<img src="<?php echo esc_url( UNODOCK_URL . 'assets/images/unoizestudio-logo.png' ); ?>" alt="UnoizeStudio" class="udock-footer-logo" />
			<a href="https://unoizestudio.com" target="_blank" rel="noopener noreferrer" class="udock-footer-link">unoizestudio.com</a>
		</div>
		<div class="udock-footer-upsell">
			<?php if ( udock_is_pro() ) : ?>
				<p>
					<?php esc_html_e( 'You are using the PRO version of UnoDock. Thanks for your support :)', 'unodock' ); ?>
				</p>
			<?php else : ?>
				<p>
					<?php
					/* translators: %s: "PRO" (kept as brand term, not translated) */
					printf( esc_html__( 'Like UnoDock? Unlock its full potential with the %s version.', 'unodock' ), '<strong>PRO</strong>' );
					?>
				</p>
				<a href="https://unoizestudio.com/unodock-pro" target="_blank" rel="noopener noreferrer" class="udock-btn udock-btn-upgrade">
					<?php esc_html_e( 'Buy PRO version', 'unodock' ); ?>
				</a>
			<?php endif; ?>
		</div>
	</div>

	<div class="udock-version-tag">
		<?php
		/* translators: %s: plugin version number */
		printf( esc_html__( 'UnoDock v%s', 'unodock' ), esc_html( UNODOCK_VERSION ) );
		?>
	</div>

	<button type="button" class="udock-floating-save" id="udock-floating-save-btn">
		<span class="dashicons dashicons-saved"></span>
		<?php esc_html_e( 'Save changes', 'unodock' ); ?>
	</button>

</div>

<!-- Button template (used by JS) -->
<script type="text/template" id="udock-button-template">
<div class="udock-button-item" data-id="{{id}}">
	<div class="udock-button-item-head">
		<span class="udock-drag-handle dashicons dashicons-move"></span>
		<span class="udock-button-number"></span>
		<span class="udock-button-icon-preview"><i class="fa-solid {{icon}}"></i></span>
		<span class="udock-button-item-label">{{label}}</span>
		<button type="button" class="udock-button-toggle dashicons dashicons-arrow-down-alt2"></button>
		<button type="button" class="udock-button-remove dashicons dashicons-trash"></button>
	</div>
	<div class="udock-button-item-body">
		<div class="udock-grid-2">
			<div class="udock-field">
				<label><?php esc_html_e( 'Icon', 'unodock' ); ?></label>
				<button type="button" class="udock-icon-picker-btn"><i class="fa-solid {{icon}}"></i> <?php esc_html_e( 'Choose icon', 'unodock' ); ?></button>
			</div>
			<div class="udock-field">
				<label><?php esc_html_e( 'Button text', 'unodock' ); ?></label>
				<input type="text" class="udock-input udock-b-label" placeholder="<?php echo esc_attr__( 'e.g. Home', 'unodock' ); ?>" />
			</div>
		</div>

		<div class="udock-grid-2">
			<div class="udock-switch-row udock-switch-row-compact">
				<label class="udock-switch">
					<input type="checkbox" class="udock-b-show_label" />
					<span class="udock-slider"></span>
				</label>
				<strong><?php esc_html_e( 'Show text', 'unodock' ); ?></strong>
			</div>
			<div class="udock-field">
				<label><?php esc_html_e( 'Text position', 'unodock' ); ?></label>
				<select class="udock-b-label_position">
					<option value="bottom"><?php esc_html_e( 'Below the icon', 'unodock' ); ?></option>
					<option value="top"><?php esc_html_e( 'Above the icon', 'unodock' ); ?></option>
				</select>
			</div>
		</div>

		<div class="udock-field">
			<label><?php esc_html_e( 'Link type', 'unodock' ); ?></label>
			<div class="udock-radio-row">
				<label><input type="radio" name="link_type_{{id}}" class="udock-b-link_type" value="url" /> <?php esc_html_e( 'Manual URL', 'unodock' ); ?></label>
				<label><input type="radio" name="link_type_{{id}}" class="udock-b-link_type" value="page" /> <?php esc_html_e( 'Existing page', 'unodock' ); ?></label>
				<label><input type="radio" name="link_type_{{id}}" class="udock-b-link_type" value="search" /> <?php esc_html_e( 'Search box', 'unodock' ); ?></label>
			</div>
		</div>
		<div class="udock-field udock-b-url-wrap">
			<label><?php esc_html_e( 'Target URL', 'unodock' ); ?></label>
			<input type="text" class="udock-input udock-b-url" placeholder="https://..." />
		</div>
		<div class="udock-field udock-b-page-wrap">
			<label><?php esc_html_e( 'Target page', 'unodock' ); ?></label>
			<select class="udock-b-page_id"></select>
		</div>
		<div class="udock-field udock-b-search-note-wrap">
			<p class="udock-hint"><?php esc_html_e( 'This button opens a search box directly in the bar, instead of linking anywhere.', 'unodock' ); ?></p>
		</div>

		<div class="udock-card-divider"></div>

		<div class="udock-field">
			<label><?php esc_html_e( 'Click animation', 'unodock' ); ?> <span class="udock-pro-badge udock-inline-badge">PRO</span></label>
			<select class="udock-b-click_animation">
				<option value="none"><?php esc_html_e( 'None', 'unodock' ); ?></option>
				<option value="shrink"><?php esc_html_e( 'Shrink', 'unodock' ); ?></option>
				<option value="zoom"><?php esc_html_e( 'Zoom', 'unodock' ); ?></option>
			</select>
		</div>

		<div class="udock-card-divider"></div>

		<div class="udock-switch-row udock-switch-row-compact">
			<label class="udock-switch">
				<input type="checkbox" class="udock-b-icon_bg_enabled" />
				<span class="udock-slider"></span>
			</label>
			<div>
				<strong><?php esc_html_e( 'Icon background', 'unodock' ); ?></strong>
				<p><?php esc_html_e( "Adds a filled background circle behind this button's icon.", 'unodock' ); ?></p>
			</div>
		</div>

		<div class="udock-icon-bg-options">
			<div class="udock-field">
				<label><?php esc_html_e( 'Background type', 'unodock' ); ?></label>
				<div class="udock-radio-row">
					<label><input type="radio" name="icon_bg_type_{{id}}" class="udock-b-icon_bg_type" value="color" /> <?php esc_html_e( 'Solid color', 'unodock' ); ?></label>
					<label><input type="radio" name="icon_bg_type_{{id}}" class="udock-b-icon_bg_type" value="gradient" /> <?php esc_html_e( 'Gradient', 'unodock' ); ?></label>
				</div>
			</div>

			<div class="udock-grid-2 udock-b-icon_bg_color-wrap">
				<div class="udock-field">
					<label><?php esc_html_e( 'Color', 'unodock' ); ?></label>
					<input type="text" class="udock-color udock-b-icon_bg_color" />
				</div>
			</div>

			<div class="udock-grid-2 udock-b-icon_bg_gradient-wrap">
				<div class="udock-field">
					<label><?php esc_html_e( 'Gradient start', 'unodock' ); ?></label>
					<input type="text" class="udock-color udock-b-icon_bg_gradient_start" />
				</div>
				<div class="udock-field">
					<label><?php esc_html_e( 'Gradient end', 'unodock' ); ?></label>
					<input type="text" class="udock-color udock-b-icon_bg_gradient_end" />
				</div>
			</div>
		</div>

		<div class="udock-card-divider udock-b-woo-divider"></div>

		<div class="udock-switch-row udock-switch-row-compact udock-b-woo-row">
			<label class="udock-switch">
				<input type="checkbox" class="udock-b-show_cart_count" />
				<span class="udock-slider"></span>
			</label>
			<div>
				<strong><?php esc_html_e( 'Show WooCommerce cart item count', 'unodock' ); ?> <span class="udock-pro-badge udock-inline-badge">PRO</span></strong>
				<p><?php esc_html_e( 'Displays a badge with the number of items currently in the cart.', 'unodock' ); ?></p>
			</div>
		</div>
	</div>
</div>
</script>

<!-- Icon picker modal -->
<div class="udock-modal-overlay" id="udock-icon-modal">
	<div class="udock-modal">
		<div class="udock-modal-head">
			<h3><?php esc_html_e( 'Choose an icon', 'unodock' ); ?></h3>
			<button type="button" class="udock-modal-close dashicons dashicons-no-alt"></button>
		</div>
		<input type="text" id="udock-icon-search" placeholder="<?php echo esc_attr__( 'Search icon...', 'unodock' ); ?>" class="udock-input" />
		<div class="udock-icon-grid" id="udock-icon-grid"></div>
	</div>
</div>
