<?php
/**
 * Image Tools admin view.
 *
 * @package Noesia_Smart_Waiter
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}


$noesia_swa_image_tools_assets_url               = trailingslashit( NOESIA_SWA_PLUGIN_URL . 'modules/free/image-tools/assets/' );
$noesia_swa_image_tools_assets_dir               = trailingslashit( dirname( __DIR__ ) . '/assets' );
$noesia_swa_image_tools_converter_vendor_url     = trailingslashit( $noesia_swa_image_tools_assets_url . 'vendor' );
$noesia_swa_image_tools_design_filters = array(
    'original'        => __( 'Original', 'noesia-smart-waiter' ),
    'clean-daylight'  => __( 'Clean Daylight', 'noesia-smart-waiter' ),
    'soft-portrait'   => __( 'Soft Portrait', 'noesia-smart-waiter' ),
    'crisp-food'      => __( 'Crisp Food', 'noesia-smart-waiter' ),
    'miami-sunset'    => __( 'Miami Sunset', 'noesia-smart-waiter' ),
    'dark-noir'       => __( 'Dark Noir', 'noesia-smart-waiter' ),
    'morning-dew'     => __( 'Morning Dew', 'noesia-smart-waiter' ),
    'cyberpunk'       => __( 'Cyberpunk', 'noesia-smart-waiter' ),
    'vintage-80s'     => __( 'Vintage 80s', 'noesia-smart-waiter' ),
    'cinema-warm'     => __( 'Cinema Warm', 'noesia-smart-waiter' ),
    'arctic-clarity'  => __( 'Arctic Clarity', 'noesia-smart-waiter' ),
    'desert-glow'     => __( 'Desert Glow', 'noesia-smart-waiter' ),
    'urban-steel'     => __( 'Urban Steel', 'noesia-smart-waiter' ),
    'pearl-soft'      => __( 'Pearl Soft', 'noesia-smart-waiter' ),
    'forest-mist'     => __( 'Forest Mist', 'noesia-smart-waiter' ),
    'food-pop'        => __( 'Food Pop', 'noesia-smart-waiter' ),
    'retro-print'     => __( 'Retro Print', 'noesia-smart-waiter' ),
    'night-drive'     => __( 'Night Drive', 'noesia-smart-waiter' ),
    'berry-fade'      => __( 'Berry Fade', 'noesia-smart-waiter' ),
    'mono-pro'        => __( 'Mono Pro', 'noesia-smart-waiter' ),
    'teal-copper'     => __( 'Teal Copper', 'noesia-smart-waiter' ),
    'breeze'          => __( 'Breeze', 'noesia-smart-waiter' ),
    'golden-hour'     => __( 'Golden Hour', 'noesia-smart-waiter' ),
    'editorial'       => __( 'Editorial', 'noesia-smart-waiter' ),
    'clean-studio'    => __( 'Clean Studio', 'noesia-smart-waiter' ),
    'velvet-night'    => __( 'Velvet Night', 'noesia-smart-waiter' ),
    'mint-air'        => __( 'Mint Air', 'noesia-smart-waiter' ),
    'amber-room'      => __( 'Amber Room', 'noesia-smart-waiter' ),
    'lux-silver'      => __( 'Lux Silver', 'noesia-smart-waiter' ),
    'sunrise-pop'     => __( 'Sunrise Pop', 'noesia-smart-waiter' ),
    'blue-hour'       => __( 'Blue Hour', 'noesia-smart-waiter' ),
    'glass-film'      => __( 'Glass Film', 'noesia-smart-waiter' ),
);
?>
<section class="noesia-swa-image-tools" data-image-tools-root data-image-tools-view="cards" data-image-tools-tab="tools">
    <button type="button" class="button noesia-swa-image-tools__hero-toggle" data-image-tools-shell-toggle aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse image tools workspace', 'noesia-smart-waiter' ); ?>">
        <span aria-hidden="true">▾</span>
    </button>

    <div class="noesia-swa-image-tools__hero-copy noesia-swa-image-tools__hero-copy--compact">
        <div class="noesia-swa-image-tools__hero-main">
            <div>
                <span class="noesia-swa-image-tools__eyebrow"><?php esc_html_e( 'Local Browser Processing', 'noesia-smart-waiter' ); ?></span>
                <h3><?php esc_html_e( 'Image Tools', 'noesia-smart-waiter' ); ?></h3>
            </div>
            <p><?php esc_html_e( 'Queue and design inside one isolated browser-local workspace.', 'noesia-smart-waiter' ); ?></p>
        </div>

        <div class="noesia-swa-image-tools__stats">
            <article>
                <strong data-image-tools-stat-files>0</strong>
                <span><?php esc_html_e( 'Files in queue', 'noesia-smart-waiter' ); ?></span>
            </article>
            <article>
                <strong data-image-tools-stat-ready>0</strong>
                <span><?php esc_html_e( 'Processed', 'noesia-smart-waiter' ); ?></span>
            </article>
            <article>
                <strong data-image-tools-stat-savings>0%</strong>
                <span><?php esc_html_e( 'Average savings', 'noesia-smart-waiter' ); ?></span>
            </article>
        </div>
    </div>

    <div class="noesia-swa-image-tools__shell-body" data-image-tools-shell-body>
    <div class="noesia-swa-image-tools__mode-tabs" role="tablist" aria-label="<?php esc_attr_e( 'Image workspace mode', 'noesia-smart-waiter' ); ?>">
        <button type="button" class="button noesia-swa-image-tools__button is-active" data-image-tools-tab-toggle="tools" aria-selected="true"><?php esc_html_e( 'Image Tools', 'noesia-smart-waiter' ); ?></button>
        <button type="button" class="button noesia-swa-image-tools__button" data-image-tools-tab-toggle="design" aria-selected="false"><?php esc_html_e( 'Image Design', 'noesia-smart-waiter' ); ?></button>
        <button type="button" class="button noesia-swa-image-tools__button" data-image-tools-tab-toggle="converter" aria-selected="false"><?php esc_html_e( 'Universal Local Converter', 'noesia-smart-waiter' ); ?></button>
    </div>

    <div class="noesia-swa-image-tools__tab-panels">
        <div class="noesia-swa-image-tools__tab-panel is-active" data-image-tools-panel="tools">
            <div class="noesia-swa-image-tools__dropzone-wrap">
                <label class="noesia-swa-image-tools__dropzone" data-image-tools-dropzone>
                    <input class="noesia-swa-image-tools__file-input" type="file" accept="image/png,image/jpeg,image/webp,image/avif" multiple data-image-tools-input />
                    <span class="noesia-swa-image-tools__drop-icon dashicons dashicons-upload" aria-hidden="true"></span>
                    <strong><?php esc_html_e( 'Drop your images here', 'noesia-smart-waiter' ); ?></strong>
                    <span data-image-tools-dropcopy><?php esc_html_e( 'Drag PNG, JPG, WEBP, or AVIF files here, or browse from your device.', 'noesia-smart-waiter' ); ?></span>
                    <em><?php esc_html_e( 'Nothing is sent to an external service.', 'noesia-smart-waiter' ); ?></em>
                </label>

                <button type="button" class="button button-primary noesia-swa-image-tools__button noesia-swa-image-tools__button--primary noesia-swa-image-tools__button--block" data-image-tools-action="browse"><?php esc_html_e( 'Browse images', 'noesia-smart-waiter' ); ?></button>

                <div class="noesia-swa-image-tools__toolbar">
                    <button type="button" class="button noesia-swa-image-tools__button" data-image-tools-action="reprocess"><?php esc_html_e( 'Reprocess all', 'noesia-smart-waiter' ); ?></button>
                    <button type="button" class="button noesia-swa-image-tools__button" data-image-tools-action="download-all"><?php esc_html_e( 'Download all', 'noesia-smart-waiter' ); ?></button>
                    <button type="button" class="button noesia-swa-image-tools__button" data-image-tools-action="clear"><?php esc_html_e( 'Clear queue', 'noesia-smart-waiter' ); ?></button>
                </div>

                <p class="noesia-swa-image-tools__status" data-image-tools-status><?php esc_html_e( 'Add one or more images to begin.', 'noesia-smart-waiter' ); ?></p>
            </div>

            <div class="noesia-swa-image-tools__layout">
                <aside class="noesia-swa-image-tools__sidebar">
                    <div class="noesia-swa-image-tools__panel">
                        <div class="noesia-swa-image-tools__panel-head">
                            <h4><?php esc_html_e( 'Optimization settings', 'noesia-smart-waiter' ); ?></h4>
                            <p><?php esc_html_e( 'These settings apply to newly dropped files and to the “Reprocess all” action.', 'noesia-smart-waiter' ); ?></p>
                        </div>

                        <div class="noesia-swa-image-tools__field">
                            <label for="noesia-swa-image-tools-format"><?php esc_html_e( 'Output format', 'noesia-smart-waiter' ); ?></label>
                            <select id="noesia-swa-image-tools-format" data-image-tools-format>
                                <option value="keep"><?php esc_html_e( 'Keep original format', 'noesia-smart-waiter' ); ?></option>
                                <option value="image/jpeg">JPG</option>
                                <option value="image/png">PNG</option>
                                <option value="image/webp">WEBP</option>
                            </select>
                        </div>

                        <div class="noesia-swa-image-tools__field">
                            <div class="noesia-swa-image-tools__field-head">
                                <label for="noesia-swa-image-tools-quality"><?php esc_html_e( 'Quality', 'noesia-smart-waiter' ); ?></label>
                                <span data-image-tools-quality-readout>94%</span>
                            </div>
                            <input id="noesia-swa-image-tools-quality" type="range" min="0.6" max="1" step="0.02" value="0.94" data-image-tools-quality />
                            <div class="noesia-swa-image-tools__presets" role="group" aria-label="<?php esc_attr_e( 'Quality presets', 'noesia-smart-waiter' ); ?>">
                                <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-tools-preset="0.94"><?php esc_html_e( 'High quality', 'noesia-smart-waiter' ); ?></button>
                                <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-tools-preset="0.82"><?php esc_html_e( 'Balanced', 'noesia-smart-waiter' ); ?></button>
                                <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-tools-preset="0.72"><?php esc_html_e( 'Max save', 'noesia-smart-waiter' ); ?></button>
                            </div>
                            <p class="noesia-swa-image-tools__microcopy"><?php esc_html_e( 'PNG stays lossless. JPG and WEBP use quality controls. If you explicitly choose PNG, the quality controls become informational only.', 'noesia-smart-waiter' ); ?></p>
                        </div>

                        <p class="noesia-swa-image-tools__hint"><?php esc_html_e( 'Leave width and height empty to preserve the original dimensions.', 'noesia-smart-waiter' ); ?></p>

                        <div class="noesia-swa-image-tools__field-grid">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-tools-width"><?php esc_html_e( 'Max width', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-tools-width" type="number" min="1" step="1" value="" placeholder="Original" data-image-tools-width />
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-tools-height"><?php esc_html_e( 'Max height', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-tools-height" type="number" min="1" step="1" value="" placeholder="Original" data-image-tools-height />
                            </div>
                        </div>

                        <div class="noesia-swa-image-tools__checklist">
                            <label>
                                <input type="checkbox" checked data-image-tools-smart-mode />
                                <span><?php esc_html_e( 'Smart mode: prefer safer format choices and keep the original only when manual replacement is not worth it.', 'noesia-smart-waiter' ); ?></span>
                            </label>
                            <label>
                                <input type="checkbox" checked data-image-tools-auto />
                                <span><?php esc_html_e( 'Process automatically on drop', 'noesia-smart-waiter' ); ?></span>
                            </label>
                            <label>
                                <input type="checkbox" data-image-tools-download-after />
                                <span><?php esc_html_e( 'Download immediately after processing', 'noesia-smart-waiter' ); ?></span>
                            </label>
                        </div>
                    </div>

                    <div class="noesia-swa-image-tools__panel">
                        <div class="noesia-swa-image-tools__panel-head">
                            <h4><?php esc_html_e( 'How this app behaves', 'noesia-smart-waiter' ); ?></h4>
                        </div>
                        <ul class="noesia-swa-image-tools__notes">
                            <li><?php esc_html_e( 'Compression, resizing, and conversion happen locally in the browser.', 'noesia-smart-waiter' ); ?></li>
                            <li><?php esc_html_e( 'Explicit PNG, JPG, and WEBP exports now stay explicit. The app does not silently rename another format as if it matched your choice.', 'noesia-smart-waiter' ); ?></li>
                            <li><?php esc_html_e( 'JPEG export fills the background with white before drawing transparent content, so PNG-to-JPG conversions stay visually safe.', 'noesia-smart-waiter' ); ?></li>
                            <li><?php esc_html_e( 'WEBP export depends on real browser-side canvas support. Safari may preview WEBP files but still not support this local canvas export path.', 'noesia-smart-waiter' ); ?></li>
                            <li><?php esc_html_e( 'AVIF export is intentionally not offered here because reliability matters more than checkbox marketing.', 'noesia-smart-waiter' ); ?></li>
                            <li><?php esc_html_e( 'For a stable browser-side workflow, keep the queue to up to 20 images at a time.', 'noesia-smart-waiter' ); ?></li>
                        </ul>
                    </div>
                </aside>

                <div class="noesia-swa-image-tools__queue-panel">
                    <div class="noesia-swa-image-tools__queue-head">
                        <div>
                            <h4><?php esc_html_e( 'Processing queue', 'noesia-smart-waiter' ); ?></h4>
                            <p><?php esc_html_e( 'Switch between visual cards and a compact vertical list without previews.', 'noesia-smart-waiter' ); ?></p>
                        </div>
                        <div class="noesia-swa-image-tools__view-switch" role="tablist" aria-label="<?php esc_attr_e( 'Queue view', 'noesia-smart-waiter' ); ?>">
                            <button type="button" class="button noesia-swa-image-tools__button is-active" data-image-tools-view-toggle="cards"><?php esc_html_e( 'Cards', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-tools-view-toggle="list"><?php esc_html_e( 'Compact list', 'noesia-smart-waiter' ); ?></button>
                        </div>
                    </div>
                    <div class="noesia-swa-image-tools__queue" data-image-tools-queue></div>
                </div>
            </div>
        </div>


        <div class="noesia-swa-image-tools__tab-panel" data-image-tools-panel="converter" hidden>
            <div class="noesia-swa-image-tools__converter-shell" data-image-converter-panel data-image-converter-vendor-base="<?php echo esc_url( $noesia_swa_image_tools_converter_vendor_url ); ?>">
                <div class="noesia-swa-image-tools__converter-hero">
                    <div>
                        <span class="noesia-swa-image-tools__eyebrow"><?php esc_html_e( '100% Local Browser Conversion', 'noesia-smart-waiter' ); ?></span>
                        <h4><?php esc_html_e( 'Universal Local Converter', 'noesia-smart-waiter' ); ?></h4>
                        <p><?php esc_html_e( 'Images, SVG, TIFF, GIF, HEIC, PDF pages, TXT, CSV, JSON, XLSX, DOCX, and RTF. All conversions stay inside the browser.', 'noesia-smart-waiter' ); ?></p>
                    </div>
                    <div class="noesia-swa-image-tools__converter-badges">
                        <span><?php esc_html_e( 'No external API', 'noesia-smart-waiter' ); ?></span>
                        <span><?php esc_html_e( 'Self-hosted raster codecs', 'noesia-smart-waiter' ); ?></span>
                        <span><?php esc_html_e( 'Best effort for Office layouts', 'noesia-smart-waiter' ); ?></span>
                    </div>
                </div>

                <div class="noesia-swa-image-tools__converter-grid">
                    <div class="noesia-swa-image-tools__converter-column">
                        <label class="noesia-swa-image-tools__converter-dropzone" data-image-converter-dropzone>
                            <input class="noesia-swa-image-tools__file-input" type="file" accept="image/png,image/jpeg,image/webp,image/avif,image/bmp,image/gif,image/svg+xml,image/tiff,image/heic,image/heif,.svg,.tif,.tiff,.heic,.heif,.bmp,.gif,application/pdf,text/plain,text/csv,application/json,.xlsx,.xls,.xlsm,.xlsb,.docx,.doc,.rtf,application/msword" multiple data-image-converter-input />
                            <span class="dashicons dashicons-upload" aria-hidden="true"></span>
                            <strong><?php esc_html_e( 'Drop files or browse locally', 'noesia-smart-waiter' ); ?></strong>
                            <em><?php esc_html_e( 'Use one supported file, or multiple images / SVG / HEIC files to merge them into one PDF.', 'noesia-smart-waiter' ); ?></em>
                        </label>

                        <div class="noesia-swa-image-tools__converter-actions">
                            <button type="button" class="button button-primary noesia-swa-image-tools__button noesia-swa-image-tools__button--primary" data-image-converter-browse><?php esc_html_e( 'Browse files', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-converter-clear><?php esc_html_e( 'Clear selection', 'noesia-smart-waiter' ); ?></button>
                        </div>

                        <div class="noesia-swa-image-tools__panel noesia-swa-image-tools__converter-panel">
                            <div class="noesia-swa-image-tools__panel-head">
                                <h4><?php esc_html_e( 'Route selection', 'noesia-smart-waiter' ); ?></h4>
                                <p><?php esc_html_e( 'The output list changes dynamically based on the selected file type.', 'noesia-smart-waiter' ); ?></p>
                            </div>

                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-tools-converter-route"><?php esc_html_e( 'Convert to', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-tools-converter-route" data-image-converter-route></select>
                                <p class="noesia-swa-image-tools__microcopy" data-image-converter-codec-note><?php esc_html_e( 'Checking self-hosted raster export support for WEBP and AVIF…', 'noesia-smart-waiter' ); ?></p>
                            </div>

                            <div class="noesia-swa-image-tools__field" data-image-converter-page-range-wrap hidden>
                                <label for="noesia-swa-image-tools-converter-page-range"><?php esc_html_e( 'Page / frame range', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-tools-converter-page-range" type="text" placeholder="1-3,5 or all" data-image-converter-page-range />
                                <p class="noesia-swa-image-tools__microcopy" data-image-converter-page-range-note><?php esc_html_e( 'Leave this empty to export every page.', 'noesia-smart-waiter' ); ?></p>
                            </div>

                            <div class="noesia-swa-image-tools__field" data-image-converter-pdf-scale-wrap hidden>
                                <label for="noesia-swa-image-tools-converter-pdf-scale"><?php esc_html_e( 'PDF render quality', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-tools-converter-pdf-scale" data-image-converter-pdf-scale>
                                    <option value="1.5"><?php esc_html_e( 'Balanced · 1.5×', 'noesia-smart-waiter' ); ?></option>
                                    <option value="2" selected><?php esc_html_e( 'Sharp · 2×', 'noesia-smart-waiter' ); ?></option>
                                    <option value="3"><?php esc_html_e( 'Detailed · 3×', 'noesia-smart-waiter' ); ?></option>
                                </select>
                                <p class="noesia-swa-image-tools__microcopy" data-image-converter-pdf-scale-note><?php esc_html_e( 'Higher values create larger image exports and take more memory.', 'noesia-smart-waiter' ); ?></p>
                            </div>

                            <div class="noesia-swa-image-tools__field" data-image-converter-sheet-wrap hidden>
                                <label for="noesia-swa-image-tools-converter-sheet"><?php esc_html_e( 'Workbook sheet', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-tools-converter-sheet" data-image-converter-sheet></select>
                            </div>

                            <div class="noesia-swa-image-tools__field" data-image-converter-quality-wrap hidden>
                                <label for="noesia-swa-image-tools-converter-quality"><?php esc_html_e( 'Image export quality', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-tools-converter-quality" data-image-converter-quality>
                                    <option value="0.82"><?php esc_html_e( 'Compact · 82%', 'noesia-smart-waiter' ); ?></option>
                                    <option value="0.92" selected><?php esc_html_e( 'Balanced · 92%', 'noesia-smart-waiter' ); ?></option>
                                    <option value="0.98"><?php esc_html_e( 'Detailed · 98%', 'noesia-smart-waiter' ); ?></option>
                                </select>
                                <p class="noesia-swa-image-tools__microcopy" data-image-converter-quality-note><?php esc_html_e( 'Affects JPG, WEBP and AVIF output. PNG remains lossless.', 'noesia-smart-waiter' ); ?></p>
                            </div>

                            <div class="noesia-swa-image-tools__field" data-image-converter-max-edge-wrap hidden>
                                <label for="noesia-swa-image-tools-converter-max-edge"><?php esc_html_e( 'Max longest edge', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-tools-converter-max-edge" data-image-converter-max-edge>
                                    <option value="0" selected><?php esc_html_e( 'Keep original size', 'noesia-smart-waiter' ); ?></option>
                                    <option value="2560"><?php esc_html_e( 'Large · 2560px', 'noesia-smart-waiter' ); ?></option>
                                    <option value="1920"><?php esc_html_e( 'Web · 1920px', 'noesia-smart-waiter' ); ?></option>
                                    <option value="1280"><?php esc_html_e( 'Compact · 1280px', 'noesia-smart-waiter' ); ?></option>
                                </select>
                                <p class="noesia-swa-image-tools__microcopy" data-image-converter-max-edge-note><?php esc_html_e( 'Useful when exporting lighter images or converting many pages at once.', 'noesia-smart-waiter' ); ?></p>
                            </div>

                            <p class="noesia-swa-image-tools__status" data-image-converter-status><?php esc_html_e( 'Drop a supported file to start.', 'noesia-smart-waiter' ); ?></p>
                            <p class="noesia-swa-image-tools__converter-summary" data-image-converter-summary><?php esc_html_e( 'Drop a file to start the local conversion flow.', 'noesia-smart-waiter' ); ?></p>

                            <div class="noesia-swa-image-tools__converter-actions noesia-swa-image-tools__converter-actions--stacked">
                                <button type="button" class="button button-primary noesia-swa-image-tools__button noesia-swa-image-tools__button--primary" data-image-converter-convert disabled><?php esc_html_e( 'Convert & download', 'noesia-smart-waiter' ); ?></button>
                            </div>
                        </div>

                        <div class="noesia-swa-image-tools__panel noesia-swa-image-tools__converter-panel" data-image-converter-order-wrap hidden>
                            <div class="noesia-swa-image-tools__panel-head">
                                <h4><?php esc_html_e( 'PDF merge order', 'noesia-smart-waiter' ); ?></h4>
                                <p><?php esc_html_e( 'Reorder or remove image pages before creating a merged PDF.', 'noesia-smart-waiter' ); ?></p>
                            </div>
                            <div class="noesia-swa-image-tools__converter-order-list" data-image-converter-order-list></div>
                        </div>
                    </div>

                    <div class="noesia-swa-image-tools__converter-column noesia-swa-image-tools__converter-column--preview">
                        <div class="noesia-swa-image-tools__panel noesia-swa-image-tools__converter-panel noesia-swa-image-tools__converter-panel--preview">
                            <div class="noesia-swa-image-tools__panel-head">
                                <h4><?php esc_html_e( 'Output preview', 'noesia-smart-waiter' ); ?></h4>
                                <p><?php esc_html_e( 'The preview updates after a successful local conversion.', 'noesia-smart-waiter' ); ?></p>
                            </div>
                            <div class="noesia-swa-image-tools__converter-output-summary" data-image-converter-output-summary></div>
                            <div class="noesia-swa-image-tools__converter-preview" data-image-converter-preview-body>
                                <p class="noesia-swa-image-tools__converter-empty"><?php esc_html_e( 'No output preview yet.', 'noesia-smart-waiter' ); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="noesia-swa-image-tools__tab-panel" data-image-tools-panel="design" hidden>
            <div class="noesia-swa-image-tools__design-shell noesia-swa-image-tools__design-shell--stacked">
                <aside class="noesia-swa-image-tools__design-sidebar noesia-swa-image-tools__design-sidebar--left is-sticky">
                    <div class="noesia-swa-image-tools__panel noesia-swa-image-tools__panel--compact">
                        <div class="noesia-swa-image-tools__panel-head">
                            <h4><?php esc_html_e( 'Export & image source', 'noesia-smart-waiter' ); ?></h4>
                            <p><?php esc_html_e( 'Load one or more images, switch between them from the thumbnail rail, then export the selected design.', 'noesia-smart-waiter' ); ?></p>
                        </div>

                        <label class="noesia-swa-image-tools__mini-dropzone" data-image-design-dropzone>
                            <input class="noesia-swa-image-tools__file-input" type="file" accept="image/png,image/jpeg,image/webp,image/avif" multiple data-image-design-input />
                            <span class="dashicons dashicons-format-image" aria-hidden="true"></span>
                            <strong><?php esc_html_e( 'Drop or browse design images', 'noesia-smart-waiter' ); ?></strong>
                            <em><?php esc_html_e( 'Choose whether each new image opens as a new thumbnail or becomes a new image layer inside the current design.', 'noesia-smart-waiter' ); ?></em>
                        </label>

                        <div class="noesia-swa-image-tools__field">
                            <label for="noesia-swa-image-design-add-mode"><?php esc_html_e( 'When adding a new image', 'noesia-smart-waiter' ); ?></label>
                            <select id="noesia-swa-image-design-add-mode" data-image-design-add-mode>
                                <option value="thumbnail"><?php esc_html_e( 'Open as new thumbnail', 'noesia-smart-waiter' ); ?></option>
                                <option value="layer"><?php esc_html_e( 'Add as image layer', 'noesia-smart-waiter' ); ?></option>
                            </select>
                        </div>

                        <div class="noesia-swa-image-tools__field">
                            <label for="noesia-swa-image-design-format"><?php esc_html_e( 'Download format', 'noesia-smart-waiter' ); ?></label>
                            <select id="noesia-swa-image-design-format" data-image-design-format>
                                <option value="image/png">PNG</option>
                                <option value="image/jpeg">JPG</option>
                                <option value="image/webp">WEBP</option>
                            </select>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-scale"><?php esc_html_e( 'Export scale', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-design-scale" data-image-design-scale>
                                    <option value="1">1×</option>
                                    <option value="2">2×</option>
                                </select>
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <div class="noesia-swa-image-tools__field-head">
                                    <label for="noesia-swa-image-design-quality"><?php esc_html_e( 'Export quality', 'noesia-smart-waiter' ); ?></label>
                                    <span data-image-design-quality-readout>92%</span>
                                </div>
                                <input id="noesia-swa-image-design-quality" type="range" min="0.6" max="1" step="0.02" value="0.92" data-image-design-quality />
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__design-toolbar noesia-swa-image-tools__design-toolbar--stacked">
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="browse"><?php esc_html_e( 'Browse images', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="copy-image"><?php esc_html_e( 'Copy image', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="save-draft"><?php esc_html_e( 'Save draft', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--primary" data-image-design-action="download"><?php esc_html_e( 'Download', 'noesia-smart-waiter' ); ?></button>
                        </div>
                        <p class="noesia-swa-image-tools__status" data-image-design-status><?php esc_html_e( 'Load one or more images to begin visual editing.', 'noesia-smart-waiter' ); ?></p>
                        <label class="noesia-swa-image-tools__mini-dropzone noesia-swa-image-tools__mini-dropzone--design" data-image-design-dropzone>
                            <input class="noesia-swa-image-tools__file-input" type="file" accept="image/png,image/jpeg,image/webp" multiple data-image-design-input />
                            <span class="dashicons dashicons-upload" aria-hidden="true"></span>
                            <strong><?php esc_html_e( 'Drop or browse design images', 'noesia-smart-waiter' ); ?></strong>
                            <em><?php esc_html_e( 'You can also drop files directly into the central preview.', 'noesia-smart-waiter' ); ?></em>
                        </label>
                    </div>

                    <div class="noesia-swa-image-tools__panel noesia-swa-image-tools__panel--compact">
                        <div class="noesia-swa-image-tools__panel-head">
                            <h4><?php esc_html_e( 'Crop & layout', 'noesia-smart-waiter' ); ?></h4>
                            <p><?php esc_html_e( 'Aspect presets, transforms, safe area, and viewport controls stay here so the preview area remains clear.', 'noesia-smart-waiter' ); ?></p>
                        </div>
                        <div class="noesia-swa-image-tools__preset-strip" role="group" aria-label="<?php esc_attr_e( 'Aspect presets', 'noesia-smart-waiter' ); ?>">
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft is-active" data-image-design-aspect="free"><?php esc_html_e( 'Free', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-aspect="1:1"><?php esc_html_e( '1:1', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-aspect="4:5"><?php esc_html_e( '4:5', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-aspect="16:9"><?php esc_html_e( '16:9', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-aspect="9:16"><?php esc_html_e( '9:16', 'noesia-smart-waiter' ); ?></button>
                        </div>
                        <div class="noesia-swa-image-tools__toolbar noesia-swa-image-tools__toolbar--grid">
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="fit"><?php esc_html_e( 'Fit view', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="reset-view"><?php esc_html_e( 'Reset view', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="zoom-out"><?php esc_html_e( 'Zoom −', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="zoom-in"><?php esc_html_e( 'Zoom +', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="rotate-left"><?php esc_html_e( 'Rotate left', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="rotate-right"><?php esc_html_e( 'Rotate right', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="flip-x"><?php esc_html_e( 'Flip horizontal', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="flip-y"><?php esc_html_e( 'Flip vertical', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="center-crop"><?php esc_html_e( 'Center crop', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="crop-reset"><?php esc_html_e( 'Reset crop', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="toggle-safe-area"><?php esc_html_e( 'Safe area', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="before-after"><?php esc_html_e( 'Before / after', 'noesia-smart-waiter' ); ?></button>
                        </div>
                    </div>

                    <div class="noesia-swa-image-tools__panel noesia-swa-image-tools__panel--compact">
                        <div class="noesia-swa-image-tools__panel-head">
                            <h4><?php esc_html_e( 'Adjustments', 'noesia-smart-waiter' ); ?></h4>
                            <p><?php esc_html_e( 'Live tuning for the selected image.', 'noesia-smart-waiter' ); ?></p>
                        </div>
                        <div class="noesia-swa-image-tools__field">
                            <div class="noesia-swa-image-tools__field-head"><label for="noesia-swa-image-design-brightness"><?php esc_html_e( 'Brightness', 'noesia-smart-waiter' ); ?></label><span data-design-readout="brightness">100%</span></div>
                            <input id="noesia-swa-image-design-brightness" type="range" min="50" max="150" step="1" value="100" data-image-design-adjust="brightness" />
                        </div>
                        <div class="noesia-swa-image-tools__field">
                            <div class="noesia-swa-image-tools__field-head"><label for="noesia-swa-image-design-contrast"><?php esc_html_e( 'Contrast', 'noesia-smart-waiter' ); ?></label><span data-design-readout="contrast">100%</span></div>
                            <input id="noesia-swa-image-design-contrast" type="range" min="50" max="170" step="1" value="100" data-image-design-adjust="contrast" />
                        </div>
                        <div class="noesia-swa-image-tools__field">
                            <div class="noesia-swa-image-tools__field-head"><label for="noesia-swa-image-design-saturation"><?php esc_html_e( 'Saturation', 'noesia-smart-waiter' ); ?></label><span data-design-readout="saturation">100%</span></div>
                            <input id="noesia-swa-image-design-saturation" type="range" min="0" max="200" step="1" value="100" data-image-design-adjust="saturation" />
                        </div>
                        <div class="noesia-swa-image-tools__field">
                            <div class="noesia-swa-image-tools__field-head"><label for="noesia-swa-image-design-warmth"><?php esc_html_e( 'Warmth', 'noesia-smart-waiter' ); ?></label><span data-design-readout="warmth">0</span></div>
                            <input id="noesia-swa-image-design-warmth" type="range" min="-60" max="60" step="1" value="0" data-image-design-adjust="warmth" />
                        </div>
                        <div class="noesia-swa-image-tools__field">
                            <div class="noesia-swa-image-tools__field-head"><label for="noesia-swa-image-design-sharpen"><?php esc_html_e( 'Sharpen', 'noesia-smart-waiter' ); ?></label><span data-design-readout="sharpen">0</span></div>
                            <input id="noesia-swa-image-design-sharpen" type="range" min="0" max="100" step="1" value="0" data-image-design-adjust="sharpen" />
                        </div>
                        <div class="noesia-swa-image-tools__field">
                            <div class="noesia-swa-image-tools__field-head"><label for="noesia-swa-image-design-vignette"><?php esc_html_e( 'Vignette', 'noesia-smart-waiter' ); ?></label><span data-design-readout="vignette">0</span></div>
                            <input id="noesia-swa-image-design-vignette" type="range" min="0" max="100" step="1" value="0" data-image-design-adjust="vignette" />
                        </div>
                        <div class="noesia-swa-image-tools__field">
                            <div class="noesia-swa-image-tools__field-head"><label for="noesia-swa-image-design-tolerance"><?php esc_html_e( 'Selective color tolerance', 'noesia-smart-waiter' ); ?></label><span data-design-readout="splashTolerance">60</span></div>
                            <input id="noesia-swa-image-design-tolerance" type="range" min="5" max="140" step="1" value="60" data-image-design-adjust="splashTolerance" />
                        </div>
                        <div class="noesia-swa-image-tools__toolbar noesia-swa-image-tools__toolbar--grid">
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--primary" data-image-design-action="auto-enhance"><?php esc_html_e( 'Auto enhance', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="sample-color"><?php esc_html_e( 'Selective color', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="clear-selective-color"><?php esc_html_e( 'Clear selective color', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="reset-edits"><?php esc_html_e( 'Reset edits', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="undo"><?php esc_html_e( 'Undo', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="redo"><?php esc_html_e( 'Redo', 'noesia-smart-waiter' ); ?></button>
                        </div>
                    </div>

                    <div class="noesia-swa-image-tools__panel noesia-swa-image-tools__panel--compact">
                        <div class="noesia-swa-image-tools__panel-head">
                            <h4><?php esc_html_e( 'Atmosphere filters', 'noesia-smart-waiter' ); ?></h4>
                            <p><?php esc_html_e( 'Curated looks drawn into the final export.', 'noesia-smart-waiter' ); ?></p>
                        </div>
                        <div class="noesia-swa-image-tools__filter-grid" data-image-design-filter-grid>
                            <?php foreach ( $noesia_swa_image_tools_design_filters as $noesia_swa_image_tools_filter_key => $noesia_swa_image_tools_filter_label ) : ?>
                                <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft<?php echo 'original' === $noesia_swa_image_tools_filter_key ? ' is-active' : ''; ?>" data-image-design-filter="<?php echo esc_attr( $noesia_swa_image_tools_filter_key ); ?>"><?php echo esc_html( $noesia_swa_image_tools_filter_label ); ?></button>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <div class="noesia-swa-image-tools__panel noesia-swa-image-tools__panel--compact">
                        <div class="noesia-swa-image-tools__panel-head">
                            <h4><?php esc_html_e( 'Layers', 'noesia-smart-waiter' ); ?></h4>
                            <p><?php esc_html_e( 'Text, shapes, and image layers all appear here so you can hide, lock, duplicate, or delete them without leaving the editor.', 'noesia-smart-waiter' ); ?></p>
                        </div>
                        <div class="noesia-swa-image-tools__toolbar noesia-swa-image-tools__toolbar--grid">
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="add-text"><?php esc_html_e( 'Add text', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="add-rect"><?php esc_html_e( 'Add box', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="add-circle"><?php esc_html_e( 'Add round', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="add-arrow"><?php esc_html_e( 'Add arrow', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="add-line"><?php esc_html_e( 'Add line', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="duplicate-layer"><?php esc_html_e( 'Duplicate', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="copy-layer"><?php esc_html_e( 'Copy', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="cut-layer"><?php esc_html_e( 'Cut', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="paste-center"><?php esc_html_e( 'Paste center', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="paste-in-place"><?php esc_html_e( 'Paste in place', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="copy-style"><?php esc_html_e( 'Copy style', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="paste-style"><?php esc_html_e( 'Paste style', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="bring-forward"><?php esc_html_e( 'Bring forward', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="send-backward"><?php esc_html_e( 'Send backward', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="align-left"><?php esc_html_e( 'Align left', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="align-center-x"><?php esc_html_e( 'Center X', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="align-right"><?php esc_html_e( 'Align right', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="align-top"><?php esc_html_e( 'Align top', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="align-center-y"><?php esc_html_e( 'Center Y', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="align-bottom"><?php esc_html_e( 'Align bottom', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--danger" data-image-design-action="delete-layer"><?php esc_html_e( 'Delete layer', 'noesia-smart-waiter' ); ?></button>
                        </div>
                        <div class="noesia-swa-image-tools__layer-list" data-image-design-layer-list></div>
                    </div>

                    <div class="noesia-swa-image-tools__panel noesia-swa-image-tools__panel--compact" data-image-design-selected-panel>
                        <div class="noesia-swa-image-tools__panel-head">
                            <h4><?php esc_html_e( 'Selected layer', 'noesia-smart-waiter' ); ?></h4>
                            <p><?php esc_html_e( 'Edit the currently selected text or shape layer.', 'noesia-smart-waiter' ); ?></p>
                        </div>
<div class="noesia-swa-image-tools__field" data-layer-kind="text">
                            <label for="noesia-swa-image-design-text-content"><?php esc_html_e( 'Text content', 'noesia-smart-waiter' ); ?></label>
                            <textarea id="noesia-swa-image-design-text-content" rows="3" data-image-design-layer-field="text"></textarea>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="text">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-text-font"><?php esc_html_e( 'Font', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-design-text-font" data-image-design-layer-field="fontFamily">
                                    <option value="Arial, sans-serif">Arial</option>
                                    <option value="'Helvetica Neue', Arial, sans-serif">Helvetica Neue</option>
                                    <option value="Georgia, serif">Georgia</option>
                                    <option value="'Trebuchet MS', sans-serif">Trebuchet MS</option>
                                    <option value="'Courier New', monospace">Courier New</option>
                                    <option value="Impact, Charcoal, sans-serif">Impact</option>
                                    <option value="Verdana, Geneva, sans-serif">Verdana</option>
                                    <option value="Tahoma, Geneva, sans-serif">Tahoma</option>
                                    <option value="'Segoe UI', Tahoma, Geneva, sans-serif">Segoe UI</option>
                                    <option value="'Gill Sans', 'Gill Sans MT', Calibri, sans-serif">Gill Sans</option>
                                    <option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif">Palatino</option>
                                    <option value="'Times New Roman', Times, serif">Times New Roman</option>
                                    <option value="Garamond, Baskerville, serif">Garamond</option>
                                    <option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif">Lucida Sans</option>
                                    <option value="'Century Gothic', Futura, sans-serif">Century Gothic</option>
                                    <option value="'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">Franklin Gothic</option>
                                    <option value="'Avenir Next', 'Segoe UI', Arial, sans-serif">Avenir Next</option>
                                    <option value="Inter, 'Segoe UI', Arial, sans-serif">Inter</option>
                                </select>
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-text-weight"><?php esc_html_e( 'Weight', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-design-text-weight" data-image-design-layer-field="fontWeight">
                                    <option value="400">Regular</option>
                                    <option value="600">Semibold</option>
                                    <option value="700">Bold</option>
                                    <option value="800">Heavy</option>
                                </select>
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="text">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-text-size"><?php esc_html_e( 'Size', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-text-size" type="number" min="10" max="400" step="1" data-image-design-layer-field="fontSize" />
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-text-color"><?php esc_html_e( 'Color', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-text-color" type="color" data-image-design-layer-field="color" />
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="text">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-text-align"><?php esc_html_e( 'Align', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-design-text-align" data-image-design-layer-field="align">
                                    <option value="left">Left</option>
                                    <option value="center">Center</option>
                                    <option value="right">Right</option>
                                </select>
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-text-opacity"><?php esc_html_e( 'Opacity', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-text-opacity" type="range" min="0.05" max="1" step="0.05" data-image-design-layer-field="opacity" />
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="text">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-text-bg-color"><?php esc_html_e( 'Text background', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-text-bg-color" type="color" data-image-design-layer-field="backgroundColor" />
                            </div>
                            <div class="noesia-swa-image-tools__field noesia-swa-image-tools__field--end">
                                <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="clear-text-bg"><?php esc_html_e( 'No BG', 'noesia-smart-waiter' ); ?></button>
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="text">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-letter-spacing"><?php esc_html_e( 'Letter spacing', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-letter-spacing" type="number" min="-5" max="30" step="0.5" data-image-design-layer-field="letterSpacing" />
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-curve"><?php esc_html_e( 'Curve', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-curve" type="range" min="-320" max="320" step="1" data-image-design-layer-field="curve" />
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="text">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-shadow"><?php esc_html_e( 'Shadow', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-shadow" type="range" min="0" max="80" step="1" data-image-design-layer-field="shadowBlur" />
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-shadow-color"><?php esc_html_e( 'Shadow color', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-shadow-color" type="color" data-image-design-layer-field="shadowColor" />
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="text">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-stroke"><?php esc_html_e( 'Outline', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-stroke" type="range" min="0" max="20" step="1" data-image-design-layer-field="strokeWidth" />
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-stroke-color"><?php esc_html_e( 'Outline color', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-stroke-color" type="color" data-image-design-layer-field="strokeColor" />
                            </div>
                        </div>

                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="shape">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-shape-fill"><?php esc_html_e( 'Fill color', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-shape-fill" type="color" data-image-design-layer-field="fill" />
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-shape-opacity"><?php esc_html_e( 'Opacity', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-shape-opacity" type="range" min="0.05" max="1" step="0.05" data-image-design-layer-field="opacity" />
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="shape">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-shape-width"><?php esc_html_e( 'Width', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-shape-width" type="number" min="10" max="4000" step="1" data-image-design-layer-field="width" />
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-shape-height"><?php esc_html_e( 'Height', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-shape-height" type="number" min="10" max="4000" step="1" data-image-design-layer-field="height" />
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="shape">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-shape-stroke"><?php esc_html_e( 'Border width', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-shape-stroke" type="range" min="0" max="40" step="1" data-image-design-layer-field="strokeWidth" />
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-shape-stroke-color"><?php esc_html_e( 'Border color', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-shape-stroke-color" type="color" data-image-design-layer-field="strokeColor" />
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field" data-layer-kind="image">
                            <label for="noesia-swa-image-design-image-name"><?php esc_html_e( 'Layer name', 'noesia-smart-waiter' ); ?></label>
                            <input id="noesia-swa-image-design-image-name" type="text" data-image-design-layer-field="name" />
                        </div>
                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="image">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-image-width"><?php esc_html_e( 'Width', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-image-width" type="number" min="10" max="4000" step="1" data-image-design-layer-field="width" />
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-image-height"><?php esc_html_e( 'Height', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-image-height" type="number" min="10" max="4000" step="1" data-image-design-layer-field="height" />
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid" data-layer-kind="image">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-image-opacity"><?php esc_html_e( 'Opacity', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-image-opacity" type="range" min="0.05" max="1" step="0.05" data-image-design-layer-field="opacity" />
                            </div>
                        </div>
                        <p class="noesia-swa-image-tools__microcopy" data-image-design-no-selection><?php esc_html_e( 'Select a layer from the canvas or the list to edit it here.', 'noesia-smart-waiter' ); ?></p>
                    </div>

                    <div class="noesia-swa-image-tools__panel">
                        <div class="noesia-swa-image-tools__panel-head">
                            <h4><?php esc_html_e( 'Watermark & export', 'noesia-smart-waiter' ); ?></h4>
                            <p><?php esc_html_e( 'The final export draws the crop, filters, adjustments, shapes, text, and watermark into one output canvas.', 'noesia-smart-waiter' ); ?></p>
                        </div>
                        <div class="noesia-swa-image-tools__field">
                            <label for="noesia-swa-image-design-watermark"><?php esc_html_e( 'Text watermark', 'noesia-smart-waiter' ); ?></label>
                            <input id="noesia-swa-image-design-watermark" type="text" value="" placeholder="Noesia" data-image-design-watermark />
                        </div>
                        <div class="noesia-swa-image-tools__field-grid">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-watermark-size"><?php esc_html_e( 'Text size', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-watermark-size" type="number" min="12" max="240" step="1" value="34" data-image-design-watermark-size />
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-watermark-opacity"><?php esc_html_e( 'Text opacity', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-watermark-opacity" type="range" min="0.05" max="1" step="0.05" value="0.8" data-image-design-watermark-opacity />
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-watermark-color"><?php esc_html_e( 'Text color', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-watermark-color" type="color" value="#ffffff" data-image-design-watermark-color />
                            </div>
                            <div class="noesia-swa-image-tools__field noesia-swa-image-tools__field--end">
                                <button type="button" class="button noesia-swa-image-tools__button" data-image-design-action="clear-watermark"><?php esc_html_e( 'Delete watermark', 'noesia-smart-waiter' ); ?></button>
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field-grid">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-watermark-position"><?php esc_html_e( 'Position', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-design-watermark-position" data-image-design-watermark-position>
                                    <option value="bottom-right">Bottom right</option>
                                    <option value="bottom-left">Bottom left</option>
                                    <option value="top-right">Top right</option>
                                    <option value="top-left">Top left</option>
                                    <option value="center">Center</option>
                                </select>
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-watermark-image-scale"><?php esc_html_e( 'Image watermark scale', 'noesia-smart-waiter' ); ?></label>
                                <input id="noesia-swa-image-design-watermark-image-scale" type="range" min="0.1" max="1" step="0.05" value="0.28" data-image-design-watermark-image-scale />
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field">
                            <label for="noesia-swa-image-design-watermark-image"><?php esc_html_e( 'Image watermark file', 'noesia-smart-waiter' ); ?></label>
                            <input id="noesia-swa-image-design-watermark-image" type="file" accept="image/png,image/jpeg,image/webp" data-image-design-watermark-image />
                        </div>
                        <div class="noesia-swa-image-tools__field-grid">
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-format"><?php esc_html_e( 'Export format', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-design-format" data-image-design-format>
                                    <option value="image/png">PNG</option>
                                    <option value="image/jpeg">JPG</option>
                                    <option value="image/webp">WEBP</option>
                                </select>
                            </div>
                            <div class="noesia-swa-image-tools__field">
                                <label for="noesia-swa-image-design-scale"><?php esc_html_e( 'Export scale', 'noesia-smart-waiter' ); ?></label>
                                <select id="noesia-swa-image-design-scale" data-image-design-scale>
                                    <option value="1">1×</option>
                                    <option value="2">2×</option>
                                </select>
                            </div>
                        </div>
                        <div class="noesia-swa-image-tools__field">
                            <div class="noesia-swa-image-tools__field-head">
                                <label for="noesia-swa-image-design-quality"><?php esc_html_e( 'Export quality', 'noesia-smart-waiter' ); ?></label>
                                <span data-image-design-quality-readout>92%</span>
                            </div>
                            <input id="noesia-swa-image-design-quality" type="range" min="0.6" max="1" step="0.02" value="0.92" data-image-design-quality />
                        </div>
                        <ul class="noesia-swa-image-tools__notes">
                            <li><?php esc_html_e( 'PNG export hides quality influence because it is treated as a lossless output path.', 'noesia-smart-waiter' ); ?></li>
                            <li><?php esc_html_e( 'JPEG export fills transparent areas with white before drawing the final composition.', 'noesia-smart-waiter' ); ?></li>
                            <li><?php esc_html_e( 'Copy Image uses the browser clipboard API as a progressive enhancement and falls back with a clear status message when unavailable.', 'noesia-smart-waiter' ); ?></li>
                        </ul>
                    </div>
                
                </aside>

                <div class="noesia-swa-image-tools__design-main noesia-swa-image-tools__design-main--stacked">
                    <div class="noesia-swa-image-tools__panel noesia-swa-image-tools__panel--preview">
                        <div class="noesia-swa-image-tools__stage-quickbar">
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="browse"><?php esc_html_e( 'Browse', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="add-text"><?php esc_html_e( 'Add text', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="add-rect"><?php esc_html_e( 'Add box', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="add-circle"><?php esc_html_e( 'Add round', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="add-arrow"><?php esc_html_e( '↗ Arrow', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="add-line"><?php esc_html_e( '⎯ Line', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="rotate-selection"><?php esc_html_e( 'Rotate', 'noesia-smart-waiter' ); ?></button>
                            <span class="noesia-swa-image-tools__quick-swatches" aria-label="<?php esc_attr_e( 'Editor background presets', 'noesia-smart-waiter' ); ?>">
                                <button type="button" class="noesia-swa-image-tools__swatch" data-image-design-bg-preset="#0f172a" style="--swatch:#0f172a" aria-label="<?php esc_attr_e( 'Dark background', 'noesia-smart-waiter' ); ?>"></button>
                                <button type="button" class="noesia-swa-image-tools__swatch" data-image-design-bg-preset="#1f2937" style="--swatch:#1f2937" aria-label="<?php esc_attr_e( 'Slate background', 'noesia-smart-waiter' ); ?>"></button>
                                <button type="button" class="noesia-swa-image-tools__swatch" data-image-design-bg-preset="#f8fafc" style="--swatch:#f8fafc" aria-label="<?php esc_attr_e( 'Light background', 'noesia-smart-waiter' ); ?>"></button>
                            </span>
                            <input class="noesia-swa-image-tools__quick-color" type="color" value="#0f172a" data-image-design-bg-color aria-label="<?php esc_attr_e( 'Editor background color', 'noesia-smart-waiter' ); ?>" />
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="crop-mode"><?php esc_html_e( 'Mark crop', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="toggle-grid"><?php esc_html_e( 'Grid', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="copy-crop"><?php esc_html_e( 'Copy crop', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="paste-crop"><?php esc_html_e( 'Paste crop', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="copy-layer"><?php esc_html_e( 'Copy layer', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="paste-center"><?php esc_html_e( 'Paste center', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="copy-style"><?php esc_html_e( 'Copy style', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="paste-style"><?php esc_html_e( 'Paste style', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="copy-image"><?php esc_html_e( 'Copy image', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="crop-reset"><?php esc_html_e( 'Reset crop', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-brush="blur"><?php esc_html_e( 'Blur brush', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-brush="pixelate"><?php esc_html_e( 'Pixelate brush', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-brush="eraser"><?php esc_html_e( 'Eraser brush', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-brush="privacy"><?php esc_html_e( 'Privacy brush', 'noesia-smart-waiter' ); ?></button>
                            <select class="noesia-swa-image-tools__quick-select" data-image-design-privacy-mode aria-label="<?php esc_attr_e( 'Shape privacy mode', 'noesia-smart-waiter' ); ?>">
                                <option value="privacy"><?php esc_html_e( 'Black cover', 'noesia-smart-waiter' ); ?></option>
                                <option value="blur"><?php esc_html_e( 'Blur area', 'noesia-smart-waiter' ); ?></option>
                                <option value="pixelate"><?php esc_html_e( 'Pixelate area', 'noesia-smart-waiter' ); ?></option>
                            </select>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="add-privacy-rect"><?php esc_html_e( 'Privacy box', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="add-privacy-circle"><?php esc_html_e( 'Privacy round', 'noesia-smart-waiter' ); ?></button>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="brush-clear"><?php esc_html_e( 'Clear brush FX', 'noesia-smart-waiter' ); ?></button>
                            <input class="noesia-swa-image-tools__quick-range" type="range" min="12" max="260" step="2" value="96" data-image-design-brush-size aria-label="<?php esc_attr_e( 'Brush size', 'noesia-smart-waiter' ); ?>" />
                            <span class="noesia-swa-image-tools__quick-pill" data-image-design-brush-size-readout>96px</span>
                            <input class="noesia-swa-image-tools__quick-range" type="range" min="8" max="100" step="1" value="42" data-image-design-brush-strength aria-label="<?php esc_attr_e( 'Brush strength', 'noesia-smart-waiter' ); ?>" />
                            <span class="noesia-swa-image-tools__quick-pill" data-image-design-brush-strength-readout>42%</span>
                            <select class="noesia-swa-image-tools__quick-select" data-image-design-quick-font>

                                    <option value="Arial, sans-serif">Arial</option>
                                    <option value="'Helvetica Neue', Arial, sans-serif">Helvetica Neue</option>
                                    <option value="Georgia, serif">Georgia</option>
                                    <option value="'Trebuchet MS', sans-serif">Trebuchet MS</option>
                                    <option value="'Courier New', monospace">Courier New</option>
                                    <option value="Impact, Charcoal, sans-serif">Impact</option>
                                    <option value="Verdana, Geneva, sans-serif">Verdana</option>
                                    <option value="Tahoma, Geneva, sans-serif">Tahoma</option>
                                    <option value="'Segoe UI', Tahoma, Geneva, sans-serif">Segoe UI</option>
                                    <option value="'Gill Sans', 'Gill Sans MT', Calibri, sans-serif">Gill Sans</option>
                                    <option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif">Palatino</option>
                                    <option value="'Times New Roman', Times, serif">Times New Roman</option>
                                    <option value="Garamond, Baskerville, serif">Garamond</option>
                                    <option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif">Lucida Sans</option>
                                    <option value="'Century Gothic', Futura, sans-serif">Century Gothic</option>
                                    <option value="'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif">Franklin Gothic</option>
                                    <option value="'Avenir Next', 'Segoe UI', Arial, sans-serif">Avenir Next</option>
                                    <option value="Inter, 'Segoe UI', Arial, sans-serif">Inter</option>
</select>
                            <input class="noesia-swa-image-tools__quick-number" type="number" min="10" max="400" step="1" value="48" data-image-design-quick-size aria-label="<?php esc_attr_e( 'Quick text size', 'noesia-smart-waiter' ); ?>" />
                            <input class="noesia-swa-image-tools__quick-color" type="color" value="#ffffff" data-image-design-quick-color aria-label="<?php esc_attr_e( 'Quick text color', 'noesia-smart-waiter' ); ?>" />
                            <input class="noesia-swa-image-tools__quick-color" type="color" value="#10151e" data-image-design-quick-bg-color aria-label="<?php esc_attr_e( 'Quick text background color', 'noesia-smart-waiter' ); ?>" />
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft" data-image-design-action="clear-text-bg"><?php esc_html_e( 'No BG', 'noesia-smart-waiter' ); ?></button>
                        </div>
                        <div class="noesia-swa-image-tools__design-stage" data-image-design-stage>
                            <div class="noesia-swa-image-tools__design-grid-overlay" aria-hidden="true"></div>
                            <div class="noesia-swa-image-tools__design-empty" data-image-design-empty>
                                <span class="dashicons dashicons-format-image" aria-hidden="true"></span>
                                <strong><?php esc_html_e( 'Drop images to start editing', 'noesia-smart-waiter' ); ?></strong>
                            </div>
                            <canvas data-image-design-canvas></canvas>
                        </div>
                    </div>

                    <div class="noesia-swa-image-tools__panel noesia-swa-image-tools__panel--thumbs">
                        <div class="noesia-swa-image-tools__panel-head noesia-swa-image-tools__panel-head--with-action">
                            <div>
                                <h4><?php esc_html_e( 'Image strip', 'noesia-smart-waiter' ); ?></h4>
                                <p><?php esc_html_e( 'Select any loaded image below to continue editing it in the same workspace.', 'noesia-smart-waiter' ); ?></p>
                            </div>
                            <button type="button" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--soft noesia-swa-image-tools__thumb-add" data-image-design-action="new-thumbnail" aria-label="<?php esc_attr_e( 'Create empty thumbnail', 'noesia-smart-waiter' ); ?>">+</button>
                        </div>
                        <div class="noesia-swa-image-tools__thumb-strip" data-image-design-thumbs></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>

    <template data-image-tools-card-template>
        <article class="noesia-swa-image-tools__card">
            <div class="noesia-swa-image-tools__card-main">
                <div class="noesia-swa-image-tools__card-top">
                    <div class="noesia-swa-image-tools__filename"></div>
                    <button type="button" class="noesia-swa-image-tools__remove" data-card-action="remove" aria-label="<?php esc_attr_e( 'Remove image', 'noesia-smart-waiter' ); ?>">×</button>
                </div>

                <div class="noesia-swa-image-tools__preview-grid">
                    <div class="noesia-swa-image-tools__preview">
                        <span><?php esc_html_e( 'Original', 'noesia-smart-waiter' ); ?></span>
                        <img alt="" data-card-original />
                        <small data-card-original-meta></small>
                    </div>
                    <div class="noesia-swa-image-tools__preview">
                        <span><?php esc_html_e( 'Optimized', 'noesia-smart-waiter' ); ?></span>
                        <img alt="" data-card-output />
                        <small data-card-output-meta></small>
                    </div>
                </div>

                <div class="noesia-swa-image-tools__summary">
                    <div class="noesia-swa-image-tools__summary-row">
                        <span><?php esc_html_e( 'Original', 'noesia-smart-waiter' ); ?></span>
                        <strong data-card-original-line></strong>
                    </div>
                    <div class="noesia-swa-image-tools__summary-row">
                        <span><?php esc_html_e( 'Optimized', 'noesia-smart-waiter' ); ?></span>
                        <strong data-card-output-line></strong>
                    </div>
                </div>

                <div class="noesia-swa-image-tools__card-meta">
                    <span class="noesia-swa-image-tools__badge" data-card-status><?php esc_html_e( 'Queued', 'noesia-smart-waiter' ); ?></span>
                    <span class="noesia-swa-image-tools__saving" data-card-saving>0%</span>
                </div>
            </div>

            <div class="noesia-swa-image-tools__card-actions">
                <button type="button" class="button noesia-swa-image-tools__button" data-card-action="process"><?php esc_html_e( 'Process', 'noesia-smart-waiter' ); ?></button>
                <a href="#" class="button noesia-swa-image-tools__button noesia-swa-image-tools__button--primary" hidden data-card-download><?php esc_html_e( 'Download', 'noesia-smart-waiter' ); ?></a>
            </div>
        </article>
    </template>
</section>
