<?xml version="1.0"?>
<!DOCTYPE wizard [
  <!ENTITY % templateLocale SYSTEM
             "chrome://verbosio/locale/templateWizard.dtd">
  %templateLocale;
  <!ENTITY % commonDTD SYSTEM "chrome://verbosio/content/verbosio.dtd">
  %commonDTD;
  <!ENTITY % textcontextDTD SYSTEM "chrome://global/locale/textcontext.dtd" >
  %textcontextDTD;
  <!ENTITY % domTreeViewContext SYSTEM
             "chrome://verbosio/content/tools/domTreeViewContext.dtd">
  %domTreeViewContext;

  <!ENTITY inputTypes.menulist '
    <menulist rowid="valueType"
              value="xul:textbox"
             >
      <menupopup>
        <!-- XXX ajvincent Localize! -->
        <menuitem label="&attr.valueType.textbox;"
                  value="xul:textbox"
                 />
        <!-- has a pattern mask for it, size attrs -->
        <menuitem label="&attr.valueType.checkbox;"
                  value="xul:checkbox"
                 />
        <!-- The next two have an editable list -->
        <!--
        <menuitem label="&attr.valueType.radiogroup;"
                  value="xul:radiogroup"
                 />
        <menuitem label="&attr.valueType.menulist;"
                  value="xul:menulist"
                 />
        -->
      </menupopup>
    </menulist>
  '>
]>
<?xml-stylesheet href="chrome://xulwidgets/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://verbosio/skin/templateFrame.css"?>
<?xml-stylesheet href="chrome://verbosio/content/template.css"?>
<wizard id="wizard-template-creator"
        title="&window.title;"
        xmlns="&XUL_NS;"
        xmlns:xul="&XUL_NS;"
        xmlns:html="&XHTML_NS;"
        xmlns:edit="&EDIT_NS;"
        width="800px"
        height="600px"
       >
  <wizardpage id="build-ui" label="&buildUI.label;">
    <vbox>
      <hbox>
        <tree id="nodeSelector"
              context="_child"
              onselect="selectDeckPanel();"
             >
          <menupopup>
&domTreeViewMaker.contextmenu;
          </menupopup>
          <treecols>
            <treecol label="&nodeSelector.inspector.nodeName;"
                     flex="3"
                     primary="true"
                     ordinal="0"
                     localid="nodeName"
                     propertyname="nodeName"
                    />
            <splitter/>
            <treecol label="&nodeSelector.inspector.nodeType;"
                     localid="nodeType"
                     propertyname="nodeType"
                    />
            <splitter/>
          </treecols>
          <treechildren edit:deepserialize="false"/>
        </tree>

        <splitter/>

        <vbox id="templateFrame"/>
      </hbox>

      <splitter/>

      <hbox id="workspace">
        <deck selectedIndex="0">
          <box/>
          <vbox>
            <radiogroup id="inlineGroup"/>
<!-- XXX ajvincent Commented out - see templateWizard.js under UpdateWrapperUI()
     for details.
            <hbox>
              <description>Wrap element in XUL box?</description>
              <menulist value="xul:hbox"
                        panelid="xul-wrapper"
                        oncommand="updateUIWrapperByEvent(event);"
                       >
                <menupopup>
                  <menuitem label="&ui-wrapper.horizontal;"
                            value="xul:hbox"
                           />
                  <menuitem label="&ui-wrapper.vertical;"
                            value="xul:vbox"
                           />
                  <menuitem label="&ui-wrapper.none;"
                            value=""
                           />
                </menupopup>
              </menulist>
            </hbox>
-->
            <grid>
              <columns>
                <column/><!-- inline attribute / text column -->
                <column/><!-- UI label -->
                <column/><!-- attribute name -->
                <column/><!-- attribute value type -->
                <!--
                <column/>
                Is the attribute required? -->
                <column/><!-- What type of entity, if any, on the attribute? -->
                <column/><!-- Add / remove row buttons -->
              </columns>

              <rows>
                <row class="header">
                  <label>&attr.inline;</label>
                  <label>&attr.label;</label>
                  <label>&attr.name;</label>
                  <label>&attr.valueType;</label>
<!-- XXX ajvincent Validation not supported for 0.1a1.
                  <label>&attr.required;</label>
-->
                  <label>&attr.entityType;</label>
                  <box/>
                </row>

                <row type="attr-row">
                  <radio group="inlineGroup"/>
                  <textbox size="10"
                           rowid="ui-label"
                          />
                  <!-- attribute name: placeholder for namespace menulistset -->
                  <hbox>
                    <description>(null)</description>
                    <textbox xulwidgets="true"
                             contents="code"
                             size="15"
                             rowid="attrName"
                            />
                  </hbox>

                  <!-- attribute value type:  placeholder for menudeck -->
                  <vbox>
                    &inputTypes.menulist;
                  </vbox>
<!--
                  <checkbox rowid="required"/>
-->

                  <!-- attribute entity type -->
                  <vbox>
                  <menulist rowid="entityType">
                    <menupopup>
                      <menuitem label="&attr.entityType.none;"/>
                      <menuitem label="&attr.entityType.chrome.locale;"/>
                      <menuitem label="&attr.entityType.chrome.content;"/>
                    </menupopup>
                  </menulist>
                  </vbox>

                  <!-- Remove button -->
                  <button label="&grid.remove;"
                          class="header"
                          onclick="removeAttrRow(event);"
                         />
                </row>

                <row class="header">
                  <box/>
                  <box/>
                  <box/>
<!--
                  <box/>
-->
                  <box/>
                  <box/>
                  <button label="&grid.add;"
                          oncommand="addAttrRow(event);"
                         />
                </row>

                <!-- Text contents row -->
                <row class="header">
                  <!-- inline radio button --><box/>
                  <label>&text.contents.label;</label>
                  <label>&text.contents.disabled.label;</label>
                  <label>&attr.valueType;</label>
                  <!--<label>&attr.required;</label>-->
                  <label>&attr.entityType;</label>
                  <!-- can't remove / add text row -->
                </row>

                <row type="text-row">
                  <radio group="inlineGroup"
                        />
                  <textbox size="15"
                           rowid="ui-label"
                          />
                  <hbox>
                    <checkbox rowid="disabled"
                              oncommand="toggleTextDisabled(event);"
                             />
                  </hbox>

                  <!-- text value type:  placeholder for menudeck -->
                  &inputTypes.menulist;

<!--
                  <checkbox rowid="required"/>
-->

                  <!-- text entity type -->
                  <menulist rowid="entityType">
                    <menupopup>
                      <menuitem label="&attr.entityType.none;"/>
                      <menuitem label="&attr.entityType.chrome.locale;"/>
                      <menuitem label="&attr.entityType.chrome.content;"/>
                    </menupopup>
                  </menulist>

                  <!-- can't remove / add text row -->
                </row>

                <row type="null-inline-row">
                  <radio group="inlineGroup"
                         label="None"
                         selected="true"
                        />
                </row>
              </rows>
            </grid>
          </vbox>
        </deck>
      </hbox>
    </vbox>
    <description>
      A description of this wizard panel.
    </description>
  </wizardpage>
  &namespaces.script;
  <script type="&JS_TYPE;"
          src="chrome://verbosio/content/tools/domTreeViewMaker.js"
         />
  <script type="&JS_TYPE;"
          src="chrome://verbosio/content/templateWizard.js"
         />
</wizard>
