<?xml-stylesheet type="text/xsl" href="/xsltforms/xsltforms.xsl"?>
<?css-conversion no?>
<!-- This example is modified from 
     http://xmltoday.org/content/creating-tabs-xsltforms-and-css
     - moved CSS into tabs.css file and added css-conversion=no
     - used namespace declarations instead of namespace prefixes
     - changed div with class to group with class
     - removed ref="." from toggle; it isn't allowed.
     - ref="." on trigger doesn't do anything in this example,
     -  but it would if bind relevant were used on some of the 
     -  tabset instance nodes, so I left it.
  -->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://www.w3.org/1999/xhtml"
      xmlns:xf="http://www.w3.org/2002/xforms"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <head>
    <title>Tabs</title>
    <link rel="stylesheet" type="text/css" href="tabs.css" />
    <model id="data-model" xmlns="http://www.w3.org/2002/xforms">
      <instance id="tabset-instance">
	<tabset value="create" xmlns="">
	  <item value="create">Create</item>
	  <item value="configure">Configure</item>
	  <item value="validate">Validate</item>
	  <item value="review">Review</item>
	</tabset>
      </instance>
    </model>
  </head>
  <body>
    <group xmlns="http://www.w3.org/2002/xforms">
      <group class="tabframe">
	<group class="tabs">
	  <repeat nodeset="instance('tabset-instance')/item" id="tab-item-repeat">
	    <trigger ref="." appearance="minimal">
	      <label>
		<output ref="."/>
	      </label>
	      <action ev:event="DOMActivate">
		<setvalue ref="instance('tabset-instance')/@value"
			     value="instance('tabset-instance')/item[index('tab-item-repeat')]"/>
		<toggle>
		  <case value="@value"/>
		</toggle>
	      </action>
	    </trigger>
	  </repeat>
	</group>
	<group class="tabpane">
	  <switch>
	    <case id="create" selected="true">
	      <div xmlns="http://www.w3.org/1999/xhtml">
		<h1>Create New Entry</h1>
		<p>This is the pane where entries are created.</p>
	      </div>
	    </case>
	    <case id="configure">
	      <div xmlns="http://www.w3.org/1999/xhtml">
		<h1>Configure Entry</h1>
		<p>This is where the entry is configured.</p>
	      </div>
	    </case>
	    <case id="validate">
	      <div xmlns="http://www.w3.org/1999/xhtml">
		<h1>Validate Entry</h1>
		<p>This provides a validation test.</p>
	      </div>
	    </case>
	    <case id="review">
	      <div xmlns="http://www.w3.org/1999/xhtml">
		<h1>Review Entry</h1>
		<p>This provides a visual overview of the entry.</p>
	      </div>
	    </case>
	  </switch>
	</group>
      </group>
    </group>
  </body>
</html>
