<vbox>
    <style>
        @advanceTab {
            /*width: 50em;*/
            min-height: 30em;
        }

        @generalTab > * + *,
        @generalTab > vbox > * + *,
        @clipartBrowserTab > * + *,
        @externalEditorTab > * + * ,
        @advanceTab > * + * {
            margin-top: 0.6em;
        }
        body @settingTabPane hbox.Entry {
            align-content: center;
            align-items: center;
            text-align: center;
        }
        body @settingTabPane hbox.Entry {
            padding-left: 0.5em;
        }
        body @settingTabPane hbox.Entry.Disabled {
            opacity: 0.4;
        }
        body @settingTabPane hbox.Entry label {
            padding-left: 0.3em;
            padding-right: 0.3em;
        }
        @externalEditorTab hbox.Entry label {
            width: 13em;
            text-align: left;
        }
        @settingTableContainer {
            width: 50em;
            overflow: auto;
            overflow-x: hidden;
            height: 30em;
        }

        .Info {
            padding: 2em;
            opacity: 0.6;
        }
        .Info > i {
            font-size: 2em;
            margin-right: 1em;
            @iconify();
        }

        @advanceTab table {
            border: 1px solid #DDD;
            border-top: none;
            margin-top: 2em !important;
        }
        @advanceTab table thead {
            position: fixed;
            margin-top: -2em;
            margin-left: -1px;
            border: 1px solid #DDD;
            border-bottom: none;
        }
        @advanceTab table thead th {
            height: 2em !important;
        }
    </style>
    <hbox flex="1">
        <ui:TabPane anon-id="settingTabPane">
            <vbox anon-id="generalTab" flex="1" tab-title="General">
                <vbox>
                    <strong>Canvas</strong>
                    <hbox>
                        <hbox class="Entry">
                            <input type="checkbox" anon-id="checkboxEnableGrid" label="Show grid" preference="pencil-gridEnabled" configName="grid.enabled"/>
                            <label for="checkboxEnableGrid">Show grid</label>
                        </hbox>
                        <hbox class="Entry Disabled">
                            <label>Grid size:</label>
                            <input anon-id="textboxGridSize" size="1" type="number" min="1" max="256" preference="pencil-gridSize" configName="edit.gridSize" default-value="5"/>
                        </hbox>
                        <hbox anon-id="gridStyleContainer" class="Entry Disabled">
                           <label>Grid style:</label>
                           <ui:ComboManager anon-id="comboGridStyle" title="Grid style" />
                        </hbox>
                    </hbox>
                    <hbox class="Entry">
                        <input type="checkbox" anon-id="snapToGrid" label="Show grid" preference="pencil-snapToGrid" configName="edit.snap.grid"/>
                        <label for="snapToGrid">Snap objects to grid.</label>
                    </hbox>
                    <hbox class="Entry">
                        <input type="checkbox" anon-id="enableSnapping" label="Show grid" preference="pencil-objectSnappingEnabled" configName="object.snapping.enabled"/>
                        <label for="enableSnapping">Snap objects to objects.</label>
                    </hbox>
                    <hbox class="Entry" style="padding-left:2em;">
                        <input type="checkbox" anon-id="enableSnappingBackground" label="Show grid" preference="pencil-objectSnappingBackground" configName="object.snapping.background"/>
                        <label for="enableSnappingBackground">Snap objects to objects in background page.</label>
                    </hbox>
                    <!-- <hbox class="Entry">
                        <input type="checkbox" anon-id="embedImages" label="Show grid" preference="pencil-embedImages" configName="document.EmbedImages"/>
                        <label for="embedImages">Embed images when drag &amp; drog.</label>
                    </hbox> -->

                </vbox>
                <vbox>
                    <strong>Edit</strong>
                    <hbox class="Entry">
                        <input type="checkbox" anon-id="quickEditting" label="Show grid" preference="pencil-quickEditting" configName="quick.editting"/>
                        <label for="quickEditting">Start editing after dropping shapes into canvas.</label>
                    </hbox>
                    <hbox class="Entry">
                        <input type="checkbox" anon-id="cutAndPasteAtTheSamePlace" label="Show grid" preference="pencil-cutAndPasteAtTheSamePlace" configName="edit.cutAndPasteAtTheSamePlace"/>
                        <label for="cutAndPasteAtTheSamePlace">Cut and Paste at the same place.</label>
                    </hbox >
                    <hbox align="center">
                        <hbox class="Entry">
                            <input type="checkbox" anon-id="undoEnabled" preference="pencil-gridEnabled" configName="view.undo.enabled"/>
                            <label for="undoEnabled">Enable Undo/Redo</label>
                        </hbox>
                        <hbox class="Entry">
                            <label>Undo level:</label>
                            <input anon-id="textboxUndoLevel" size="1" type="number" min="1" max="256" preference="pencil-viewUndoLevel" configName="view.undoLevel" default-value="0"/>
                        </hbox>
                    </hbox>
                </vbox>
                <vbox>
                    <strong>User Interface</strong>
                    <hbox class="Entry">
                        <label>Text scale:</label>
                        <input anon-id="textScaleInput" size="1" type="number" min="1" max="256" preference="pencil-uiTextSize" configName="view.uiTextScale" default-value="100"/>
                        <label>%</label>
                    </hbox>
                    <hbox class="Entry">
                        <input type="checkbox" anon-id="useCompactLayout" label="Use compact layout to save space" preference="pencil-useCompactLayout" configName="view.useCompactLayout"/>
                        <label for="useCompactLayout">Use Compact Layout</label>
                    </hbox>
                </vbox>
            </vbox>
            <!-- <vbox anon-id="clipartBrowserTab" flex="1" tab-title="Clipart Browser">
                <strong>Clipart Browser</strong>
                <hbox align="center">
                    <hbox class="Entry">
                        <input type="checkbox" anon-id="checkboxScaleImage" label="Show grid" preference="pencil-clipartBrowserScale" configName="clipartbrowser.scale"/>
                        <label for="checkboxScaleImage">Scale images to smaller size before inserting.</label>
                    </hbox>
                    <hbox class="Entry">
                        <label>Width</label>
                        <input anon-id="textboxClipartBrowserScaleWidth" size="1" type="number" min="1" max="256" preference="pencil-clipartBrowserScaleWidth" configName="clipartbrowser.scale.width"/>
                    </hbox>
                    <hbox class="Entry">
                        <label>Heigth</label>
                        <input anon-id="textboxClipartBrowserScaleHeight" size="1" type="number" min="1" max="256" preference="pencil-clipartBrowserScaleHeight" configName="clipartbrowser.scale.height"/>
                    </hbox>
                </hbox>
            </vbox> -->
            <vbox anon-id="externalEditorTab" flex="1" tab-title="External Editors">
                <strong>External Editors</strong>
                <hbox align="center" id="svgBox" class="Entry">
                    <label>SVG editor command:</label>
                    <input type="text" anon-id="svgEditorUrl" style="width: 20em;" value="/usr/bin/inkscape" preference="pencil-svgEditorUrl"  configName="external.editor.vector.path"/>
                </hbox>
                <hbox align="center" id="bitmapBox" class="Entry">
                    <label>Bitmap editor command:</label>
                    <input type="text"  anon-id="bitmapEditorUrl" style="width: 20em;" value="/usr/bin/gimp" preference="pencil-bitmapEditorUrl" configName="external.editor.bitmap.path" />
                </hbox>
                <hbox class="Info">
                    <i>info</i>
                    <div flex="1">
                        You can specify extra command line arguments in these settings after the executable paths. Use the <strong>%f</strong> macro as a placeholder for the image file path, otherwise it will be
                        added automatically at the end of the command.
                    </div>
                </hbox>
            </vbox>
            <vbox anon-id="advanceTab" flex="1" tab-title="Advanced">
                <hbox class="Entry">
                    <label>Preference Name:</label>
                    <input type="text" anon-id="preferenceNameInput" flex="1"/>
                </hbox>
                <vbox anon-id="settingTableContainer">
                    <ui:DataTable anon-id="preferenceTable" flex="1" />
                </vbox>
            </vbox>
        </ui:TabPane>
    </hbox>
</vbox>
