<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
      xmlns:xforms="http://www.w3.org/2002/xforms"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema"
      xmlns:my="http://commerce.example.com/payment"
      xmlns:ev="http://www.w3.org/2001/xml-events" xml:lang="en">
  <head>
<style type="text/css">
xforms|input.editField {
 font-weight:bold; font-size:20px; width:500px
}
xforms|label.sectionLabel {
  font-weight:bold; color:white; background-color:blue
}
xforms|submit {
  font-family: Arial; font-size: 20px; font-style: bold; color: red
}
</style>
    <title>Editing Hierarchical Bookmarks In X-Smiles </title>
    <xforms:model id="bookmarks">
      <xforms:instance src="bookmarks.xml"/>
      <xforms:submission id="s01" method="post" action="http://examples.com/"/>
    </xforms:model>
  </head>
  <body>
    <xforms:repeat nodeset="section" id="repeatSections">
      <xforms:input ref="@name" class="editField">
        <xforms:label class="sectionLabel">Section</xforms:label>
      </xforms:input>
<!-- BOOKMARK REPEAT START -->
      <xforms:repeat nodeset="bookmark" id="repeatBookmarks">
        <xforms:input ref="@name">
          <xforms:label>Bookmark name</xforms:label>
        </xforms:input>
        <xforms:input ref="@href">
          <xforms:label>URL</xforms:label>
        </xforms:input>
      </xforms:repeat>
    </xforms:repeat>
    <p>
<!-- INSERT BOOKMARK BUTTON -->
      <xforms:trigger id="insertbutton">
        <xforms:label>Insert bookmark</xforms:label>
        <xforms:insert nodeset="section[index('repeatSections')]/bookmark"
          at="index('repeatBookmarks')" position="after" ev:event="xforms-activate"/>
      </xforms:trigger>
<!-- DELETE BOOKMARK BUTTON -->
      <xforms:trigger id="delete">
        <xforms:label>Delete bookmark</xforms:label>
        <xforms:delete nodeset="section[index('repeatSections')]/bookmark"
          at="index('repeatBookmarks')" ev:event="xforms-activate"/>
      </xforms:trigger>
    </p>
    <p>
<!-- INSERT SECTION BUTTON -->
      <xforms:trigger id="insertsectionbutton">
        <xforms:label>Insert section</xforms:label>
        <xforms:insert nodeset="section" at="index('repeatSections')"
          position="after" ev:event="xforms-activate"/>
      </xforms:trigger>
<!-- DELETE SECTION BUTTON -->
      <xforms:trigger id="deletesectionbutton">
        <xforms:label>Delete section</xforms:label>
        <xforms:delete nodeset="section" at="index('repeatSections')"
         ev:event="xforms-activate"/>
      </xforms:trigger>
    </p>
<!-- SUBMIT BUTTON -->
    <xforms:submit submission="s01">
      <xforms:label>Save</xforms:label>
      <xforms:hint>Click to submit</xforms:hint>
    </xforms:submit>
  </body>
</html>
