PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.49
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.49
51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 51.1.47 51.1.49 All 37 releases
king-addons / includes / extensions / Custom_Code_Manager / templates / admin-editor.php

admin-editor.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.49, at includes/extensions/Custom_Code_Manager/templates/admin-editor.php

408 lines 26.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * Custom Code Manager - Editor Page Template
4 *
5 * @package King_Addons
6 */
7
8 defined('ABSPATH') || exit;
9
10 use King_Addons\Custom_Code_Manager;
11
12 /** @var array|null $snippet */
13 /** @var bool $is_new */
14 /** @var bool $has_pro */
15 /** @var array $defaults */
16 /** @var array $config */
17
18 $type_icons = [
19 'css' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M4 4h16v16H4z"/><path d="M9 9h6v6H9z"/></svg>',
20 'js' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M12 2v20M2 12h20"/></svg>',
21 'html' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
22 ];
23 ?>
24 <script>
25 window.kngCCInitialConfig = <?php echo wp_json_encode($config); ?>;
26 </script>
27
28 <div class="kng-cc-admin kng-cc-editor-page">
29 <form id="kng-cc-editor-form" class="kng-cc-editor-form" autocomplete="off">
30 <!-- Header -->
31 <header class="kng-cc-header kng-cc-header--sticky">
32 <div class="kng-cc-header-left">
33 <a href="<?php echo esc_url(admin_url('admin.php?page=king-addons-custom-code')); ?>" class="kng-cc-back-btn">
34 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
35 <line x1="19" y1="12" x2="5" y2="12"/>
36 <polyline points="12 19 5 12 12 5"/>
37 </svg>
38 <?php esc_html_e('Back to snippets', 'king-addons'); ?>
39 </a>
40 <h1 class="kng-cc-title">
41 <?php echo $is_new ? esc_html__('New Snippet', 'king-addons') : esc_html__('Edit Snippet', 'king-addons'); ?>
42 </h1>
43 </div>
44 <div class="kng-cc-header-right">
45 <div class="kng-cc-status-wrap">
46 <label class="kng-v3-toggle-wrap">
47 <input type="checkbox" name="status" id="kng-cc-status" <?php checked($config['status'], 'enabled'); ?> />
48 <span class="kng-v3-toggle-slider"></span>
49 </label>
50 <span class="kng-cc-status-label" id="kng-cc-status-label">
51 <?php echo $config['status'] === 'enabled' ? esc_html__('Enabled', 'king-addons') : esc_html__('Disabled', 'king-addons'); ?>
52 </span>
53 </div>
54 <button type="submit" class="kng-v3-btn kng-v3-btn--primary" id="kng-cc-save-btn">
55 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18" class="kng-cc-save-icon">
56 <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
57 <polyline points="17 21 17 13 7 13 7 21"/>
58 <polyline points="7 3 7 8 15 8"/>
59 </svg>
60 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18" class="kng-cc-spinner" style="display: none;">
61 <circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="32">
62 <animate attributeName="stroke-dashoffset" values="32;0;32" dur="1s" repeatCount="indefinite"/>
63 </circle>
64 </svg>
65 <span class="kng-cc-save-text"><?php esc_html_e('Save Snippet', 'king-addons'); ?></span>
66 </button>
67 </div>
68 </header>
69
70 <input type="hidden" name="id" id="kng-cc-id" value="<?php echo esc_attr($config['id']); ?>" />
71
72 <div class="kng-cc-editor-layout">
73 <!-- Main Content -->
74 <div class="kng-cc-editor-main">
75 <!-- Title -->
76 <div class="kng-cc-editor-section kng-cc-title-section">
77 <input type="text"
78 name="title"
79 id="kng-cc-title"
80 class="kng-cc-title-input"
81 placeholder="<?php esc_attr_e('Snippet name...', 'king-addons'); ?>"
82 value="<?php echo esc_attr($config['title']); ?>"
83 required />
84 </div>
85
86 <!-- Code Editor -->
87 <div class="kng-cc-editor-section kng-cc-code-section">
88 <div class="kng-cc-code-header">
89 <div class="kng-cc-type-tabs" role="tablist">
90 <button type="button"
91 class="kng-cc-type-tab <?php echo $config['type'] === 'css' ? 'is-active' : ''; ?>"
92 data-type="css"
93 role="tab"
94 aria-selected="<?php echo $config['type'] === 'css' ? 'true' : 'false'; ?>">
95 <?php echo $type_icons['css']; // phpcs:ignore ?>
96 <span>CSS</span>
97 </button>
98 <button type="button"
99 class="kng-cc-type-tab <?php echo $config['type'] === 'js' ? 'is-active' : ''; ?>"
100 data-type="js"
101 role="tab"
102 aria-selected="<?php echo $config['type'] === 'js' ? 'true' : 'false'; ?>">
103 <?php echo $type_icons['js']; // phpcs:ignore ?>
104 <span>JavaScript</span>
105 </button>
106 <button type="button"
107 class="kng-cc-type-tab <?php echo $config['type'] === 'html' ? 'is-active' : ''; ?> <?php echo !$has_pro ? 'is-pro' : ''; ?>"
108 data-type="html"
109 role="tab"
110 aria-selected="<?php echo $config['type'] === 'html' ? 'true' : 'false'; ?>"
111 <?php echo !$has_pro ? 'disabled' : ''; ?>>
112 <?php echo $type_icons['html']; // phpcs:ignore ?>
113 <span>HTML</span>
114 <?php if (!$has_pro): ?>
115 <span class="kng-cc-pro-badge">PRO</span>
116 <?php endif; ?>
117 </button>
118 </div>
119 <div class="kng-cc-code-actions">
120 <button type="button" class="kng-cc-code-action" id="kng-cc-fullscreen" title="<?php esc_attr_e('Fullscreen', 'king-addons'); ?>">
121 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
122 <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
123 </svg>
124 </button>
125 </div>
126 </div>
127 <input type="hidden" name="type" id="kng-cc-type" value="<?php echo esc_attr($config['type']); ?>" />
128 <div class="kng-cc-code-editor-wrap" id="kng-cc-code-wrap">
129 <textarea name="code" id="kng-cc-code" class="kng-cc-code-textarea"><?php echo esc_textarea($config['code']); ?></textarea>
130 </div>
131 </div>
132
133 <!-- Notes -->
134 <div class="kng-cc-editor-section kng-cc-notes-section">
135 <div class="kng-cc-section-header" data-collapsible="notes">
136 <h3 class="kng-cc-section-title">
137 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
138 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
139 <polyline points="14 2 14 8 20 8"/>
140 <line x1="16" y1="13" x2="8" y2="13"/>
141 <line x1="16" y1="17" x2="8" y2="17"/>
142 </svg>
143 <?php esc_html_e('Notes', 'king-addons'); ?>
144 </h3>
145 <svg class="kng-cc-collapse-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
146 <polyline points="6 9 12 15 18 9"/>
147 </svg>
148 </div>
149 <div class="kng-cc-section-content" id="kng-cc-notes-content">
150 <textarea name="notes" id="kng-cc-notes" class="kng-v3-textarea" rows="3" placeholder="<?php esc_attr_e('Add notes about this snippet...', 'king-addons'); ?>"><?php echo esc_textarea($config['notes']); ?></textarea>
151 </div>
152 </div>
153 </div>
154
155 <!-- Sidebar -->
156 <div class="kng-cc-editor-sidebar">
157 <!-- Injection Settings -->
158 <div class="kng-cc-sidebar-section">
159 <h3 class="kng-cc-sidebar-title">
160 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
161 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
162 <polyline points="17 8 12 3 7 8"/>
163 <line x1="12" y1="3" x2="12" y2="15"/>
164 </svg>
165 <?php esc_html_e('Injection', 'king-addons'); ?>
166 </h3>
167 <div class="kng-cc-sidebar-content">
168 <div class="kng-v3-field">
169 <label class="kng-v3-label"><?php esc_html_e('Location', 'king-addons'); ?></label>
170 <select name="location" id="kng-cc-location" class="kng-v3-select">
171 <option value="head" <?php selected($config['location'], 'head'); ?>><?php esc_html_e('Head (wp_head)', 'king-addons'); ?></option>
172 <option value="footer" <?php selected($config['location'], 'footer'); ?>><?php esc_html_e('Footer (wp_footer)', 'king-addons'); ?></option>
173 <?php if ($has_pro): ?>
174 <option value="body_open" <?php selected($config['location'], 'body_open'); ?>><?php esc_html_e('Body Open (wp_body_open)', 'king-addons'); ?></option>
175 <option value="custom_hook" <?php selected($config['location'], 'custom_hook'); ?>><?php esc_html_e('Custom Hook', 'king-addons'); ?></option>
176 <?php else: ?>
177 <option value="body_open" disabled><?php esc_html_e('Body Open', 'king-addons'); ?> (PRO)</option>
178 <option value="custom_hook" disabled><?php esc_html_e('Custom Hook', 'king-addons'); ?> (PRO)</option>
179 <?php endif; ?>
180 </select>
181 </div>
182
183 <div class="kng-v3-field kng-cc-custom-hook-field" id="kng-cc-custom-hook-wrap" style="<?php echo $config['location'] !== 'custom_hook' ? 'display: none;' : ''; ?>">
184 <label class="kng-v3-label"><?php esc_html_e('Hook Name', 'king-addons'); ?></label>
185 <input type="text" name="custom_hook" id="kng-cc-custom-hook" class="kng-v3-input" placeholder="my_custom_hook" value="<?php echo esc_attr($config['custom_hook']); ?>" />
186 </div>
187
188 <div class="kng-v3-field">
189 <label class="kng-v3-label"><?php esc_html_e('Priority', 'king-addons'); ?></label>
190 <input type="number" name="priority" id="kng-cc-priority" class="kng-v3-input" min="1" max="9999" value="<?php echo esc_attr($config['priority']); ?>" />
191 <p class="kng-v3-field-help"><?php esc_html_e('Lower numbers run first (default: 10)', 'king-addons'); ?></p>
192 </div>
193 </div>
194 </div>
195
196 <!-- JS Options (only for JS type) -->
197 <div class="kng-cc-sidebar-section kng-cc-js-options" id="kng-cc-js-options" style="<?php echo $config['type'] !== 'js' ? 'display: none;' : ''; ?>">
198 <h3 class="kng-cc-sidebar-title">
199 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
200 <rect x="2" y="7" width="20" height="15" rx="2" ry="2"/>
201 <polyline points="17 2 12 7 7 2"/>
202 </svg>
203 <?php esc_html_e('JavaScript Options', 'king-addons'); ?>
204 </h3>
205 <div class="kng-cc-sidebar-content">
206 <div class="kng-v3-field">
207 <label class="kng-v3-toggle-wrap kng-v3-toggle-row">
208 <input type="checkbox" name="js_dom_ready" id="kng-cc-js-dom-ready" <?php checked($config['js_dom_ready']); ?> />
209 <span class="kng-v3-toggle-slider"></span>
210 <span class="kng-v3-toggle-text"><?php esc_html_e('Wrap in DOMContentLoaded', 'king-addons'); ?></span>
211 </label>
212 </div>
213
214 <div class="kng-v3-field <?php echo !$has_pro ? 'is-pro-field' : ''; ?>">
215 <label class="kng-v3-toggle-wrap kng-v3-toggle-row">
216 <input type="checkbox" name="js_defer" id="kng-cc-js-defer" <?php checked($config['js_defer']); ?> <?php echo !$has_pro ? 'disabled' : ''; ?> />
217 <span class="kng-v3-toggle-slider"></span>
218 <span class="kng-v3-toggle-text">
219 <?php esc_html_e('Defer', 'king-addons'); ?>
220 <?php if (!$has_pro): ?><span class="kng-cc-pro-badge-sm">PRO</span><?php endif; ?>
221 </span>
222 </label>
223 </div>
224
225 <div class="kng-v3-field <?php echo !$has_pro ? 'is-pro-field' : ''; ?>">
226 <label class="kng-v3-toggle-wrap kng-v3-toggle-row">
227 <input type="checkbox" name="js_async" id="kng-cc-js-async" <?php checked($config['js_async']); ?> <?php echo !$has_pro ? 'disabled' : ''; ?> />
228 <span class="kng-v3-toggle-slider"></span>
229 <span class="kng-v3-toggle-text">
230 <?php esc_html_e('Async', 'king-addons'); ?>
231 <?php if (!$has_pro): ?><span class="kng-cc-pro-badge-sm">PRO</span><?php endif; ?>
232 </span>
233 </label>
234 </div>
235
236 <div class="kng-v3-field <?php echo !$has_pro ? 'is-pro-field' : ''; ?>">
237 <label class="kng-v3-toggle-wrap kng-v3-toggle-row">
238 <input type="checkbox" name="js_module" id="kng-cc-js-module" <?php checked($config['js_module']); ?> <?php echo !$has_pro ? 'disabled' : ''; ?> />
239 <span class="kng-v3-toggle-slider"></span>
240 <span class="kng-v3-toggle-text">
241 <?php esc_html_e('ES Module', 'king-addons'); ?>
242 <?php if (!$has_pro): ?><span class="kng-cc-pro-badge-sm">PRO</span><?php endif; ?>
243 </span>
244 </label>
245 </div>
246 </div>
247 </div>
248
249 <!-- Targeting Rules -->
250 <div class="kng-cc-sidebar-section kng-cc-rules-section">
251 <h3 class="kng-cc-sidebar-title">
252 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
253 <circle cx="12" cy="12" r="10"/>
254 <circle cx="12" cy="12" r="6"/>
255 <circle cx="12" cy="12" r="2"/>
256 </svg>
257 <?php esc_html_e('Targeting Rules', 'king-addons'); ?>
258 </h3>
259 <div class="kng-cc-sidebar-content">
260 <div class="kng-v3-field">
261 <label class="kng-v3-label"><?php esc_html_e('Scope', 'king-addons'); ?></label>
262 <div class="kng-cc-scope-options">
263 <label class="kng-cc-radio-card <?php echo $config['scope_mode'] === 'global' ? 'is-selected' : ''; ?>">
264 <input type="radio" name="scope_mode" value="global" <?php checked($config['scope_mode'], 'global'); ?> />
265 <span class="kng-cc-radio-card-content">
266 <span class="kng-cc-radio-icon">
267 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
268 <circle cx="12" cy="12" r="10"/>
269 </svg>
270 </span>
271 <span class="kng-cc-radio-text"><?php esc_html_e('Global', 'king-addons'); ?></span>
272 </span>
273 </label>
274 <label class="kng-cc-radio-card <?php echo $config['scope_mode'] === 'include' ? 'is-selected' : ''; ?>">
275 <input type="radio" name="scope_mode" value="include" <?php checked($config['scope_mode'], 'include'); ?> />
276 <span class="kng-cc-radio-card-content">
277 <span class="kng-cc-radio-icon">
278 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
279 <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
280 <polyline points="22 4 12 14.01 9 11.01"/>
281 </svg>
282 </span>
283 <span class="kng-cc-radio-text"><?php esc_html_e('Include', 'king-addons'); ?></span>
284 </span>
285 </label>
286 <label class="kng-cc-radio-card <?php echo $config['scope_mode'] === 'exclude' ? 'is-selected' : ''; ?>">
287 <input type="radio" name="scope_mode" value="exclude" <?php checked($config['scope_mode'], 'exclude'); ?> />
288 <span class="kng-cc-radio-card-content">
289 <span class="kng-cc-radio-icon">
290 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
291 <circle cx="12" cy="12" r="10"/>
292 <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
293 </svg>
294 </span>
295 <span class="kng-cc-radio-text"><?php esc_html_e('Exclude', 'king-addons'); ?></span>
296 </span>
297 </label>
298 </div>
299 </div>
300
301 <!-- Rules Builder -->
302 <div class="kng-cc-rules-builder" id="kng-cc-rules-builder" style="<?php echo $config['scope_mode'] === 'global' ? 'display: none;' : ''; ?>">
303 <?php if ($has_pro): ?>
304 <div class="kng-v3-field">
305 <label class="kng-v3-label"><?php esc_html_e('Match Mode', 'king-addons'); ?></label>
306 <select name="match_mode" id="kng-cc-match-mode" class="kng-v3-select">
307 <option value="any" <?php selected($config['match_mode'], 'any'); ?>><?php esc_html_e('Match ANY rule', 'king-addons'); ?></option>
308 <option value="all" <?php selected($config['match_mode'], 'all'); ?>><?php esc_html_e('Match ALL rules', 'king-addons'); ?></option>
309 </select>
310 </div>
311 <?php endif; ?>
312
313 <div class="kng-cc-rules-list" id="kng-cc-rules-list">
314 <!-- Rules will be rendered by JS -->
315 </div>
316
317 <button type="button" class="kng-v3-btn kng-v3-btn--ghost kng-v3-btn--sm kng-cc-add-rule-btn" id="kng-cc-add-rule">
318 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
319 <line x1="12" y1="5" x2="12" y2="19"/>
320 <line x1="5" y1="12" x2="19" y2="12"/>
321 </svg>
322 <?php esc_html_e('Add Rule', 'king-addons'); ?>
323 </button>
324 </div>
325 </div>
326 </div>
327
328 <?php if (!$has_pro): ?>
329 <!-- Pro Features Upsell -->
330 <div class="kng-cc-sidebar-section kng-cc-pro-section">
331 <div class="kng-cc-pro-box">
332 <div class="kng-cc-pro-box-icon">
333 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24">
334 <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
335 </svg>
336 </div>
337 <h4><?php esc_html_e('Pro Features', 'king-addons'); ?></h4>
338 <ul class="kng-cc-pro-features-list">
339 <li><?php esc_html_e('HTML snippets', 'king-addons'); ?></li>
340 <li><?php esc_html_e('Unlimited snippets', 'king-addons'); ?></li>
341 <li><?php esc_html_e('Body Open & Custom Hooks', 'king-addons'); ?></li>
342 <li><?php esc_html_e('Advanced JS attributes', 'king-addons'); ?></li>
343 <li><?php esc_html_e('User role rules', 'king-addons'); ?></li>
344 <li><?php esc_html_e('Device targeting', 'king-addons'); ?></li>
345 <li><?php esc_html_e('URL regex matching', 'king-addons'); ?></li>
346 </ul>
347 <a href="<?php echo esc_url(admin_url('admin.php?page=king-addons-upgrade')); ?>" class="kng-v3-btn kng-v3-btn--accent kng-v3-btn--sm">
348 <?php esc_html_e('Upgrade to Pro', 'king-addons'); ?>
349 </a>
350 </div>
351 </div>
352 <?php endif; ?>
353 </div>
354 </div>
355 </form>
356 </div>
357
358 <!-- Rule Template -->
359 <script type="text/html" id="kng-cc-rule-template">
360 <div class="kng-cc-rule" data-index="{{index}}">
361 <div class="kng-cc-rule-header">
362 <select class="kng-v3-select kng-cc-rule-type" name="rules[{{index}}][type]">
363 <optgroup label="<?php esc_attr_e('Content', 'king-addons'); ?>">
364 <option value="page"><?php esc_html_e('Specific Page', 'king-addons'); ?></option>
365 <option value="post"><?php esc_html_e('Specific Post', 'king-addons'); ?></option>
366 <option value="post_type"><?php esc_html_e('Post Type', 'king-addons'); ?></option>
367 <?php if ($has_pro): ?>
368 <option value="taxonomy"><?php esc_html_e('Taxonomy', 'king-addons'); ?></option>
369 <?php endif; ?>
370 </optgroup>
371 <optgroup label="<?php esc_attr_e('Special Pages', 'king-addons'); ?>">
372 <option value="front_page"><?php esc_html_e('Front Page', 'king-addons'); ?></option>
373 <option value="blog_page"><?php esc_html_e('Blog Page', 'king-addons'); ?></option>
374 <option value="archive"><?php esc_html_e('Archive Pages', 'king-addons'); ?></option>
375 <option value="search"><?php esc_html_e('Search Results', 'king-addons'); ?></option>
376 <option value="404"><?php esc_html_e('404 Page', 'king-addons'); ?></option>
377 </optgroup>
378 <optgroup label="<?php esc_attr_e('URL', 'king-addons'); ?>">
379 <option value="url_contains"><?php esc_html_e('URL Contains', 'king-addons'); ?></option>
380 <?php if ($has_pro): ?>
381 <option value="url_starts"><?php esc_html_e('URL Starts With', 'king-addons'); ?></option>
382 <option value="url_ends"><?php esc_html_e('URL Ends With', 'king-addons'); ?></option>
383 <option value="url_regex"><?php esc_html_e('URL Regex', 'king-addons'); ?></option>
384 <?php endif; ?>
385 </optgroup>
386 <?php if ($has_pro): ?>
387 <optgroup label="<?php esc_attr_e('User', 'king-addons'); ?>">
388 <option value="user_logged_in"><?php esc_html_e('User Logged In', 'king-addons'); ?></option>
389 <option value="user_role"><?php esc_html_e('User Role', 'king-addons'); ?></option>
390 </optgroup>
391 <optgroup label="<?php esc_attr_e('Device', 'king-addons'); ?>">
392 <option value="device"><?php esc_html_e('Device Type', 'king-addons'); ?></option>
393 </optgroup>
394 <?php endif; ?>
395 </select>
396 <button type="button" class="kng-cc-rule-remove" title="<?php esc_attr_e('Remove', 'king-addons'); ?>">
397 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
398 <line x1="18" y1="6" x2="6" y2="18"/>
399 <line x1="6" y1="6" x2="18" y2="18"/>
400 </svg>
401 </button>
402 </div>
403 <div class="kng-cc-rule-value">
404 <!-- Value field rendered based on type -->
405 </div>
406 </div>
407 </script>
408