<?php
/**
 * Calculator settings navigation.
 *
 * @link       https://belovdigital.agency
 * @since      1.0.0
 *
 * @package    ultimate-pregnancy-ovulation-calculator
 * @subpackage ULPC/admin/partials
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

?>

<div class="ulpc-settings-tabs-links">
	<ul class="ulpc-settings-tabs-links-list" id="ulpc-settings-tab-links">
		<li>
			<div class="ulpc-shortcode-desktop">
				<div class="ulpc-shortcode">
					<button class="ulpc-shortcode-title" type="button"><?php esc_html_e( 'Your Shortcode', 'ultimate-pregnancy-ovulation-calculator' ); ?></button>
					<div class="ulpc-shortcode-result-wrapper">
						<textarea class="ulpc-shortcode-result" rows="1" readonly>[ultimate-pregnancy-ovulation]</textarea>
						<button class="ulpc-shortcode-copy ulpc-tooltip" type="button">
							<div class="ulpc-tooltip-text"><?php esc_html_e( 'Copy shortcode', 'ultimate-pregnancy-ovulation-calculator' ); ?></div>
						</button>
					</div>
				</div>
			</div>
		</li>
		<li>
			<a href="#main-settings" class="active">
				<span><?php esc_html_e( 'Settings', 'ultimate-pregnancy-ovulation-calculator' ); ?></span>
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
			</a>
		</li>
		<li>
			<a href="#styling-settings">
				<span><?php esc_html_e( 'Styling', 'ultimate-pregnancy-ovulation-calculator' ); ?></span>
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>
			</a>
		</li>
		<li>
			<a href="#pro-integrations-settings">
				<span><?php esc_html_e( 'Integrations', 'ultimate-pregnancy-ovulation-calculator' ); ?></span>
				<span class="ulpc-tab-pro-badge">PRO</span>
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/></svg>
			</a>
		</li>
		<li>
			<a href="#pro-labels-settings">
				<span><?php esc_html_e( 'Labels', 'ultimate-pregnancy-ovulation-calculator' ); ?></span>
				<span class="ulpc-tab-pro-badge">PRO</span>
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
			</a>
		</li>
		<li>
			<a href="#pro-templates-settings">
				<span><?php esc_html_e( 'Email/PDF', 'ultimate-pregnancy-ovulation-calculator' ); ?></span>
				<span class="ulpc-tab-pro-badge">PRO</span>
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
			</a>
		</li>
	</ul>
</div>
