{{! Template Builder Properties Panel }}
<div class="tb-properties-panel flex flex-col h-full overflow-y-auto" ...attributes>

    {{#if this.hasSelection}}
        {{! ============================================================ }}
        {{! ELEMENT PROPERTIES }}
        {{! ============================================================ }}

        {{! Header }}
        <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-900 z-10">
            <div class="flex items-center space-x-2">
                <FaIcon @icon={{this.elementType}} class="w-3.5 h-3.5 text-blue-500" />
                <span class="text-xs font-semibold text-gray-700 dark:text-gray-300 capitalize">{{this.elementType}} Properties</span>
            </div>
        </div>

        {{! POSITION SECTION }}
        <TemplateBuilder::PropertiesPanel::Section
            @title="Position"
            @icon="arrows-up-down-left-right"
            @isOpen={{this.isSectionOpen "position"}}
            @onToggle={{fn this.toggleSection "position"}}
        >
            <div class="grid grid-cols-2 gap-2">
                <TemplateBuilder::PropertiesPanel::Field @label="X">
                    <input type="number" class="tb-input" value={{this.element.x}} {{on "change" (fn this.updateNumericProp "x")}} />
                </TemplateBuilder::PropertiesPanel::Field>
                <TemplateBuilder::PropertiesPanel::Field @label="Y">
                    <input type="number" class="tb-input" value={{this.element.y}} {{on "change" (fn this.updateNumericProp "y")}} />
                </TemplateBuilder::PropertiesPanel::Field>
                <TemplateBuilder::PropertiesPanel::Field @label="Rotation">
                    <input type="number" class="tb-input" value={{this.element.rotation}} min="-360" max="360" {{on "change" (fn this.updateNumericProp "rotation")}} />
                </TemplateBuilder::PropertiesPanel::Field>
                <TemplateBuilder::PropertiesPanel::Field @label="Z-Index">
                    <input type="number" class="tb-input" value={{this.element.z_index}} min="1" {{on "change" (fn this.updateNumericProp "z_index")}} />
                </TemplateBuilder::PropertiesPanel::Field>
                <TemplateBuilder::PropertiesPanel::Field @label="Opacity" @span="2">
                    <input type="range" class="w-full" value={{this.element.opacity}} min="0" max="1" step="0.05" {{on "input" (fn this.updateNumericProp "opacity")}} />
                </TemplateBuilder::PropertiesPanel::Field>
            </div>
        </TemplateBuilder::PropertiesPanel::Section>

        {{! SIZE SECTION }}
        <TemplateBuilder::PropertiesPanel::Section
            @title="Size"
            @icon="ruler-combined"
            @isOpen={{this.isSectionOpen "size"}}
            @onToggle={{fn this.toggleSection "size"}}
        >
            <div class="grid grid-cols-2 gap-2">
                <TemplateBuilder::PropertiesPanel::Field @label="Width">
                    <input type="number" class="tb-input" value={{this.element.width}} min="1" {{on "change" (fn this.updateNumericProp "width")}} />
                </TemplateBuilder::PropertiesPanel::Field>
                <TemplateBuilder::PropertiesPanel::Field @label="Height">
                    <input type="number" class="tb-input" value={{this.element.height}} min="1" {{on "change" (fn this.updateNumericProp "height")}} />
                </TemplateBuilder::PropertiesPanel::Field>
            </div>
        </TemplateBuilder::PropertiesPanel::Section>

        {{! TEXT CONTENT SECTION (text elements only) }}
        {{#if this.hasTextContent}}
            <TemplateBuilder::PropertiesPanel::Section
                @title="Content"
                @icon="align-left"
                @isOpen={{this.isSectionOpen "content"}}
                @onToggle={{fn this.toggleSection "content"}}
            >
                <div class="space-y-2">
                    <div class="relative">
                        <textarea
                            class="tb-input w-full min-h-20 resize-y font-mono text-xs"
                            placeholder="Enter text or use {variable.name} syntax..."
                            {{on "input" (fn this.updateProp "content" value="target.value")}}
                        >{{this.element.content}}</textarea>
                    </div>
                    <button
                        type="button"
                        class="flex items-center space-x-1.5 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
                        {{on "click" (fn this.openVariablePicker "content")}}
                    >
                        <FaIcon @icon="code" class="w-3 h-3" />
                        <span>Insert variable or formula</span>
                    </button>
                </div>
            </TemplateBuilder::PropertiesPanel::Section>
        {{/if}}

        {{! IMAGE SECTION }}
        {{#if this.isImage}}
            <TemplateBuilder::PropertiesPanel::Section
                @title="Image"
                @icon="image"
                @isOpen={{this.isSectionOpen "image"}}
                @onToggle={{fn this.toggleSection "image"}}
            >
                <div class="space-y-2">

                    {{! Source — upload or variable token }}
                    <TemplateBuilder::PropertiesPanel::Field @label="Image Source">
                        {{#if this.imageIsVariable}}
                            {{! Variable token display }}
                            <div class="flex items-center space-x-1">
                                <div class="flex-1 flex items-center space-x-1.5 px-2 py-1 rounded border border-blue-300 dark:border-blue-600 bg-blue-50 dark:bg-blue-900/20 min-w-0">
                                    <FaIcon @icon="code" class="w-3 h-3 text-blue-500 shrink-0" />
                                    <span class="text-xs text-blue-700 dark:text-blue-300 truncate font-mono">{{this.element.src}}</span>
                                </div>
                                <button type="button" class="tb-icon-btn" title="Change variable" {{on "click" (fn this.openVariablePicker "src")}}>
                                    <FaIcon @icon="pen" class="w-3 h-3" />
                                </button>
                                <button type="button" class="tb-icon-btn" title="Clear" {{on "click" this.clearImageSrc}}>
                                    <FaIcon @icon="xmark" class="w-3 h-3" />
                                </button>
                            </div>
                        {{else if this.imageIsUploaded}}
                            {{! Uploaded file display }}
                            <div class="flex items-center space-x-1">
                                <div class="flex-1 flex items-center space-x-1.5 px-2 py-1 rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 min-w-0">
                                    {{#if this.isUploadingImage}}
                                        <span class="text-xs text-gray-500 dark:text-gray-400">Uploading...</span>
                                    {{else}}
                                        <FaIcon @icon="image" class="w-3 h-3 text-gray-400 shrink-0" />
                                        <span class="text-xs text-gray-700 dark:text-gray-300 truncate">{{this.uploadedImageFilename}}</span>
                                    {{/if}}
                                </div>
                                <FileUpload
                                    @name="tb-image-{{this.element.uuid}}"
                                    @accept="image/*"
                                    @onFileAdded={{this.onImageFileAdded}}
                                >
                                    <button type="button" class="tb-icon-btn" title="Replace image">
                                        <FaIcon @icon="arrow-up-from-bracket" class="w-3 h-3" />
                                    </button>
                                </FileUpload>
                                <button type="button" class="tb-icon-btn" title="Clear" {{on "click" this.clearImageSrc}}>
                                    <FaIcon @icon="xmark" class="w-3 h-3" />
                                </button>
                            </div>
                        {{else}}
                            {{! Empty state — upload or insert variable }}
                            <div class="space-y-1.5">
                                <FileUpload
                                    @name="tb-image-{{this.element.uuid}}"
                                    @accept="image/*"
                                    @onFileAdded={{this.onImageFileAdded}}
                                >
                                    <div class="flex items-center justify-center w-full px-3 py-3 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-500 cursor-pointer transition-colors group">
                                        {{#if this.isUploadingImage}}
                                            <span class="text-xs text-gray-500 dark:text-gray-400">Uploading...</span>
                                        {{else}}
                                            <div class="flex flex-col items-center space-y-1">
                                                <FaIcon @icon="arrow-up-from-bracket" class="w-4 h-4 text-gray-400 group-hover:text-blue-500 transition-colors" />
                                                <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-blue-500 transition-colors">Click to upload image</span>
                                            </div>
                                        {{/if}}
                                    </div>
                                </FileUpload>
                                <div class="flex items-center space-x-1.5">
                                    <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
                                    <span class="text-xs text-gray-400">or</span>
                                    <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
                                </div>
                                <button
                                    type="button"
                                    class="w-full flex items-center justify-center space-x-1.5 px-2 py-1.5 rounded border border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                                    {{on "click" (fn this.openVariablePicker "src")}}
                                >
                                    <FaIcon @icon="code" class="w-3 h-3" />
                                    <span>Use variable (e.g. {company.logo})</span>
                                </button>
                            </div>
                        {{/if}}
                    </TemplateBuilder::PropertiesPanel::Field>

                    <TemplateBuilder::PropertiesPanel::Field @label="Alt Text">
                        <input type="text" class="tb-input" value={{this.element.alt}} {{on "change" (fn this.updateProp "alt")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Object Fit">
                        <select class="tb-input" {{on "change" (fn this.updateProp "object_fit")}}>
                            {{#each this.objectFitOptions as |opt|}}
                                <option value={{opt.value}} selected={{eq this.element.object_fit opt.value}}>{{opt.label}}</option>
                            {{/each}}
                        </select>
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Border Radius">
                        <input type="number" class="tb-input" value={{this.element.border_radius}} min="0" {{on "change" (fn this.updateNumericProp "border_radius")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                </div>
            </TemplateBuilder::PropertiesPanel::Section>
        {{/if}}

        {{! TABLE SECTION }}
        {{#if this.isTable}}
            {{! Columns }}
            <TemplateBuilder::PropertiesPanel::Section
                @title="Columns"
                @icon="table-columns"
                @isOpen={{this.isSectionOpen "table-columns"}}
                @onToggle={{fn this.toggleSection "table-columns"}}
            >
                <div class="space-y-1.5">
                    {{#each this.tableColumns as |col index|}}
                        <div class="flex items-center space-x-1">
                            <input
                                type="text"
                                class="tb-input flex-1"
                                placeholder="Column label"
                                value={{col.label}}
                                {{on "change" (fn this.updateColumnLabel index)}}
                            />
                            <input
                                type="text"
                                class="tb-input flex-1"
                                placeholder="data.key"
                                value={{col.key}}
                                {{on "change" (fn this.updateColumnKey index)}}
                            />
                            <button
                                type="button"
                                class="tb-icon-btn text-red-400 hover:text-red-600"
                                title="Remove column"
                                {{on "click" (fn this.removeColumn index)}}
                            >
                                <FaIcon @icon="xmark" class="w-3 h-3" />
                            </button>
                        </div>
                    {{/each}}
                    {{#if (eq this.tableColumns.length 0)}}
                        <p class="text-xs text-gray-400 dark:text-gray-500 text-center py-2">No columns defined. Add one below.</p>
                    {{/if}}
                    <button
                        type="button"
                        class="w-full flex items-center justify-center space-x-1.5 px-2 py-1.5 rounded border border-dashed border-gray-300 dark:border-gray-600 text-xs text-gray-500 dark:text-gray-400 hover:border-blue-400 hover:text-blue-500 transition-colors"
                        {{on "click" this.addColumn}}
                    >
                        <FaIcon @icon="plus" class="w-3 h-3" />
                        <span>Add column</span>
                    </button>
                </div>
            </TemplateBuilder::PropertiesPanel::Section>

            {{! Data Source }}
            <TemplateBuilder::PropertiesPanel::Section
                @title="Data Source"
                @icon="database"
                @isOpen={{this.isSectionOpen "table-data"}}
                @onToggle={{fn this.toggleSection "table-data"}}
            >
                <div class="space-y-2">

                    {{! Two-mode toggle: Variable | Manual }}
                    <div class="flex rounded overflow-hidden border border-gray-200 dark:border-gray-700 text-xs">
                        <button
                            type="button"
                            class="flex-1 py-1 font-medium transition-colors
                                {{if (eq this.tableDataMode 'variable')
                                    'bg-blue-500 text-white'
                                    'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'}}"
                            {{on "click" (fn this.setTableDataMode "variable")}}
                        >Variable</button>
                        <button
                            type="button"
                            class="flex-1 py-1 font-medium border-l border-gray-200 dark:border-gray-700 transition-colors
                                {{if (eq this.tableDataMode 'manual')
                                    'bg-blue-500 text-white'
                                    'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'}}"
                            {{on "click" (fn this.setTableDataMode "manual")}}
                        >Manual</button>
                    </div>

                    {{! ── VARIABLE MODE ── }}
                    {{#if (eq this.tableDataMode "variable")}}
                        <TemplateBuilder::PropertiesPanel::Field @label="Data Variable">
                            <div class="flex space-x-1">
                                <input
                                    type="text"
                                    class="tb-input flex-1"
                                    placeholder="{order.items}"
                                    value={{this.element.data_source}}
                                    {{on "change" (fn this.updateProp "data_source")}}
                                />
                                <button type="button" class="tb-icon-btn" title="Insert variable"
                                    {{on "click" (fn this.openVariablePicker "data_source")}}>
                                    <FaIcon @icon="code" class="w-3 h-3" />
                                </button>
                            </div>
                        </TemplateBuilder::PropertiesPanel::Field>
                        <p class="text-xs text-gray-400 dark:text-gray-500">The variable must resolve to an array of objects. Each object's keys should match the column keys defined above.</p>

                    {{! ── MANUAL MODE ── }}
                    {{else}}
                        <div class="space-y-1.5">
                            {{#each this.tableRows as |row rowIndex|}}
                                <div class="rounded border border-gray-200 dark:border-gray-700 overflow-hidden">
                                    <div class="flex items-center justify-between px-2 py-1 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                                        <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Row {{add rowIndex 1}}</span>
                                        <button
                                            type="button"
                                            class="text-red-400 hover:text-red-600"
                                            title="Remove row"
                                            {{on "click" (fn this.removeRow rowIndex)}}
                                        >
                                            <FaIcon @icon="xmark" class="w-3 h-3" />
                                        </button>
                                    </div>
                                    <div class="p-1.5 space-y-1">
                                        {{#each this.tableColumns as |col|}}
                                            <div class="flex items-center space-x-1.5">
                                                <span class="text-xs text-gray-400 dark:text-gray-500 w-16 shrink-0 truncate">{{col.label}}</span>
                                                <input
                                                    type="text"
                                                    class="tb-input flex-1"
                                                    placeholder={{col.key}}
                                                    value={{get row col.key}}
                                                    {{on "change" (fn this.updateRowCell rowIndex col.key)}}
                                                />
                                            </div>
                                        {{/each}}
                                        {{#if (eq this.tableColumns.length 0)}}
                                            <p class="text-xs text-gray-400 text-center py-1">Define columns first.</p>
                                        {{/if}}
                                    </div>
                                </div>
                            {{/each}}
                            {{#if (eq this.tableRows.length 0)}}
                                <p class="text-xs text-gray-400 dark:text-gray-500 text-center py-2">No rows yet.</p>
                            {{/if}}
                            <button
                                type="button"
                                class="w-full flex items-center justify-center space-x-1.5 px-2 py-1.5 rounded border border-dashed border-gray-300 dark:border-gray-600 text-xs text-gray-500 dark:text-gray-400 hover:border-blue-400 hover:text-blue-500 transition-colors"
                                {{on "click" this.addRow}}
                            >
                                <FaIcon @icon="plus" class="w-3 h-3" />
                                <span>Add row</span>
                            </button>
                        </div>
                    {{/if}}

                </div>
            </TemplateBuilder::PropertiesPanel::Section>

            {{! Table Style }}
            <TemplateBuilder::PropertiesPanel::Section
                @title="Table Style"
                @icon="palette"
                @isOpen={{this.isSectionOpen "table-style"}}
                @onToggle={{fn this.toggleSection "table-style"}}
            >
                <div class="grid grid-cols-2 gap-2">
                    <TemplateBuilder::PropertiesPanel::Field @label="Header BG">
                        <input type="color" class="tb-color-input" value={{this.element.header_background}} {{on "input" (fn this.updateProp "header_background")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Header Text">
                        <input type="color" class="tb-color-input" value={{this.element.header_color}} {{on "input" (fn this.updateProp "header_color")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Border Color">
                        <input type="color" class="tb-color-input" value={{this.element.border_color}} {{on "input" (fn this.updateProp "border_color")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Cell Padding">
                        <input type="number" class="tb-input" value={{this.element.cell_padding}} min="0" {{on "change" (fn this.updateNumericProp "cell_padding")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Row Alt Color" @span="2">
                        <input type="color" class="tb-color-input" value={{this.element.row_alt_color}} {{on "input" (fn this.updateProp "row_alt_color")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                </div>
            </TemplateBuilder::PropertiesPanel::Section>
        {{/if}}

        {{! QR CODE / BARCODE SECTION }}
        {{#if (or this.isQrCode this.isBarcode)}}
            <TemplateBuilder::PropertiesPanel::Section
                @title={{if this.isQrCode "QR Code" "Barcode"}}
                @icon={{if this.isQrCode "qrcode" "barcode"}}
                @isOpen={{this.isSectionOpen "code"}}
                @onToggle={{fn this.toggleSection "code"}}
            >
                <div class="space-y-2">
                    <TemplateBuilder::PropertiesPanel::Field @label="Value">
                        <div class="flex space-x-1">
                            <input type="text" class="tb-input flex-1" placeholder="{order.tracking_number}" value={{this.element.value}} {{on "change" (fn this.updateProp "value")}} />
                            <button type="button" class="tb-icon-btn" title="Insert variable" {{on "click" (fn this.openVariablePicker "value")}}>
                                <FaIcon @icon="code" class="w-3 h-3" />
                            </button>
                        </div>
                    </TemplateBuilder::PropertiesPanel::Field>
                    {{#if this.isBarcode}}
                        <TemplateBuilder::PropertiesPanel::Field @label="Format">
                            <select class="tb-input" {{on "change" (fn this.updateProp "barcode_format")}}>
                                <option value="CODE128" selected={{eq this.element.barcode_format "CODE128"}}>CODE128</option>
                                <option value="CODE39"  selected={{eq this.element.barcode_format "CODE39"}}>CODE39</option>
                                <option value="EAN13"   selected={{eq this.element.barcode_format "EAN13"}}>EAN-13</option>
                                <option value="EAN8"    selected={{eq this.element.barcode_format "EAN8"}}>EAN-8</option>
                                <option value="UPC"     selected={{eq this.element.barcode_format "UPC"}}>UPC</option>
                            </select>
                        </TemplateBuilder::PropertiesPanel::Field>
                    {{/if}}
                </div>
            </TemplateBuilder::PropertiesPanel::Section>
        {{/if}}

        {{! LINE SECTION }}
        {{#if this.isLine}}
            <TemplateBuilder::PropertiesPanel::Section
                @title="Line"
                @icon="minus"
                @isOpen={{this.isSectionOpen "line"}}
                @onToggle={{fn this.toggleSection "line"}}
            >
                <div class="grid grid-cols-2 gap-2">
                    <TemplateBuilder::PropertiesPanel::Field @label="Color">
                        <input type="color" class="tb-color-input" value={{this.element.color}} {{on "input" (fn this.updateProp "color")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Width (px)">
                        <input type="number" class="tb-input" value={{this.element.line_width}} min="1" {{on "change" (fn this.updateNumericProp "line_width")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Style" @span="2">
                        <select class="tb-input" {{on "change" (fn this.updateProp "line_style")}}>
                            {{#each this.lineStyleOptions as |opt|}}
                                <option value={{opt.value}} selected={{eq this.element.line_style opt.value}}>{{opt.label}}</option>
                            {{/each}}
                        </select>
                    </TemplateBuilder::PropertiesPanel::Field>
                </div>
            </TemplateBuilder::PropertiesPanel::Section>
        {{/if}}

        {{! SHAPE SECTION }}
        {{#if this.isShape}}
            <TemplateBuilder::PropertiesPanel::Section
                @title="Shape"
                @icon="shapes"
                @isOpen={{this.isSectionOpen "shape"}}
                @onToggle={{fn this.toggleSection "shape"}}
            >
                <div class="grid grid-cols-2 gap-2">
                    <TemplateBuilder::PropertiesPanel::Field @label="Shape" @span="2">
                        <select class="tb-input" {{on "change" (fn this.updateProp "shape")}}>
                            {{#each this.shapeOptions as |opt|}}
                                <option value={{opt.value}} selected={{eq this.element.shape opt.value}}>{{opt.label}}</option>
                            {{/each}}
                        </select>
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Fill Color">
                        <input type="color" class="tb-color-input" value={{this.element.background_color}} {{on "input" (fn this.updateProp "background_color")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Border Radius">
                        <input type="number" class="tb-input" value={{this.element.border_radius}} min="0" {{on "change" (fn this.updateNumericProp "border_radius")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                </div>
            </TemplateBuilder::PropertiesPanel::Section>
        {{/if}}

        {{! TEXT STYLE SECTION (text elements only) }}
        {{#if this.isText}}
            <TemplateBuilder::PropertiesPanel::Section
                @title="Text"
                @icon="font"
                @isOpen={{this.isSectionOpen "text"}}
                @onToggle={{fn this.toggleSection "text"}}
            >
                <div class="space-y-2">
                    <TemplateBuilder::PropertiesPanel::Field @label="Font Family">
                        <select class="tb-input" {{on "change" (fn this.updateProp "font_family")}}>
                            {{#each this.fontFamilyOptions as |opt|}}
                                <option value={{opt.value}} selected={{eq this.element.font_family opt.value}}>{{opt.label}}</option>
                            {{/each}}
                        </select>
                    </TemplateBuilder::PropertiesPanel::Field>
                    <div class="grid grid-cols-2 gap-2">
                        <TemplateBuilder::PropertiesPanel::Field @label="Size (px)">
                            <input type="number" class="tb-input" value={{this.element.font_size}} min="6" max="200" {{on "change" (fn this.updateNumericProp "font_size")}} />
                        </TemplateBuilder::PropertiesPanel::Field>
                        <TemplateBuilder::PropertiesPanel::Field @label="Weight">
                            <select class="tb-input" {{on "change" (fn this.updateProp "font_weight")}}>
                                {{#each this.fontWeightOptions as |opt|}}
                                    <option value={{opt.value}} selected={{eq this.element.font_weight opt.value}}>{{opt.label}}</option>
                                {{/each}}
                            </select>
                        </TemplateBuilder::PropertiesPanel::Field>
                        <TemplateBuilder::PropertiesPanel::Field @label="Line Height">
                            <input type="number" class="tb-input" value={{this.element.line_height}} min="0.5" max="5" step="0.1" {{on "change" (fn this.updateNumericProp "line_height")}} />
                        </TemplateBuilder::PropertiesPanel::Field>
                        <TemplateBuilder::PropertiesPanel::Field @label="Letter Spacing">
                            <input type="number" class="tb-input" value={{this.element.letter_spacing}} step="0.5" {{on "change" (fn this.updateNumericProp "letter_spacing")}} />
                        </TemplateBuilder::PropertiesPanel::Field>
                    </div>
                    <TemplateBuilder::PropertiesPanel::Field @label="Color">
                        <input type="color" class="tb-color-input" value={{this.element.color}} {{on "input" (fn this.updateProp "color")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Alignment">
                        <div class="flex space-x-1">
                            {{#each this.textAlignOptions as |opt|}}
                                <button
                                    type="button"
                                    class="flex-1 py-1 rounded border text-xs {{if (eq this.element.text_align opt.value) 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 text-blue-600' 'border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800'}}"
                                    {{on "click" (fn this.updateProp "text_align" opt.value)}}
                                >
                                    <FaIcon @icon={{opt.icon}} class="w-3 h-3 mx-auto" />
                                </button>
                            {{/each}}
                        </div>
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Background">
                        <input type="color" class="tb-color-input" value={{this.element.background_color}} {{on "input" (fn this.updateProp "background_color")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Padding (px)">
                        <input type="number" class="tb-input" value={{this.element.padding}} min="0" {{on "change" (fn this.updateNumericProp "padding")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                </div>
            </TemplateBuilder::PropertiesPanel::Section>
        {{/if}}

        {{! BORDER SECTION (non-line elements) }}
        {{#if this.hasBorderOptions}}
            <TemplateBuilder::PropertiesPanel::Section
                @title="Border"
                @icon="border-all"
                @isOpen={{this.isSectionOpen "border"}}
                @onToggle={{fn this.toggleSection "border"}}
            >
                <div class="grid grid-cols-2 gap-2">
                    <TemplateBuilder::PropertiesPanel::Field @label="Width (px)">
                        <input type="number" class="tb-input" value={{this.element.border_width}} min="0" {{on "change" (fn this.updateNumericProp "border_width")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Color">
                        <input type="color" class="tb-color-input" value={{this.element.border_color}} {{on "input" (fn this.updateProp "border_color")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Style">
                        <select class="tb-input" {{on "change" (fn this.updateProp "border_style")}}>
                            {{#each this.lineStyleOptions as |opt|}}
                                <option value={{opt.value}} selected={{eq this.element.border_style opt.value}}>{{opt.label}}</option>
                            {{/each}}
                        </select>
                    </TemplateBuilder::PropertiesPanel::Field>
                    <TemplateBuilder::PropertiesPanel::Field @label="Radius (px)">
                        <input type="number" class="tb-input" value={{this.element.border_radius}} min="0" {{on "change" (fn this.updateNumericProp "border_radius")}} />
                    </TemplateBuilder::PropertiesPanel::Field>
                </div>
            </TemplateBuilder::PropertiesPanel::Section>
        {{/if}}

    {{else}}
        {{! ============================================================ }}
        {{! CANVAS / TEMPLATE SETTINGS (no element selected) }}
        {{! ============================================================ }}

        <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-900 z-10">
            <span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Canvas Settings</span>
        </div>

        <div class="p-3 space-y-3">
            <TemplateBuilder::PropertiesPanel::Field @label="Template Name">
                <input type="text" class="tb-input" value={{@template.name}} {{on "change" (fn this.updateTemplateProp "name")}} />
            </TemplateBuilder::PropertiesPanel::Field>
            <TemplateBuilder::PropertiesPanel::Field @label="Paper Size">
                <select class="tb-input" {{on "change" (fn this.updateTemplateProp "paper_size")}}>
                    {{#each this.paperSizeOptions as |opt|}}
                        <option value={{opt.value}} selected={{eq @template.paper_size opt.value}}>{{opt.label}}</option>
                    {{/each}}
                </select>
            </TemplateBuilder::PropertiesPanel::Field>
            <TemplateBuilder::PropertiesPanel::Field @label="Orientation">
                <select class="tb-input" {{on "change" (fn this.updateTemplateProp "orientation")}}>
                    {{#each this.orientationOptions as |opt|}}
                        <option value={{opt.value}} selected={{eq @template.orientation opt.value}}>{{opt.label}}</option>
                    {{/each}}
                </select>
            </TemplateBuilder::PropertiesPanel::Field>
            <TemplateBuilder::PropertiesPanel::Field @label="Background Color">
                <input type="color" class="tb-color-input" value={{@template.background_color}} {{on "input" (fn this.updateTemplateProp "background_color")}} />
            </TemplateBuilder::PropertiesPanel::Field>
            <TemplateBuilder::PropertiesPanel::Field @label="Description">
                <textarea class="tb-input w-full min-h-16 resize-none" {{on "input" (fn this.updateTemplateProp "description" value="target.value")}}>{{@template.description}}</textarea>
            </TemplateBuilder::PropertiesPanel::Field>
        </div>
    {{/if}}
</div>