<?xml version="1.0" encoding="ISO-8859-1"?>

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms" 
    xmlns:ev="http://www.w3.org/2001/xml-events"
    >
  <head>
    <title>SVG embedded inline in XHTML</title>
      <style type="text/css">
          mycircle {
    xblbinding: url('#circlebinding');
}
          mytext {
    xblbinding: url('#textbinding');
}
          </style>
  </head>
  <body>
	      <xf:model id="mainmodel">
          <xf:instance id="mainins" xmlns="">
              <data xmlns="">
              <items>
                  <item name="test"/>
                  <item name="test"/>
              </items>
              </data>
          </xf:instance>
          </xf:model>

    <h1>Binding SVG graphics using simplified XBL</h1>
      <bindings xmlns="http://www.mozilla.org/xbl">
          <binding id="circlebinding">
              <template>
                      <svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" >
                          <circle cx="75" cy="50" r="35" style="color:red;"/>
                          <circle cx="75" cy="50" r="25" style="color:blue;"/>
                          <circle cx="75" cy="50" r="10" style="color:white;"/>
                        </svg>
                  </template>
          </binding>
          <binding id="textbinding">
              <template>
					<span xmlns="http://www.w3.org/1999/xhtml" style="font-size:10pt;background-color:blue;color:white;">
                        This text comes from XBL template.
                        </span>
                  </template>
          </binding>
      </bindings>
      
      <div class="test">
                <xf:repeat nodeset="//item" id="rpt">
                    <div>
                        <mycircle xmlns=""/>
                    </div>
                    <div>
                        <mytext xmlns=""/>
                    </div>
                    <div>
                  <xf:input ref="@name">
                      <xf:label>Name</xf:label>
                      </xf:input>
                         </div>
                </xf:repeat>
          </div>
      <div class="test">
          <xf:trigger>
              <xf:label>Add Row</xf:label>
              <xf:action ev:event="DOMActivate">
                  <xf:insert nodeset="//item" at="1"/>
              </xf:action>
          </xf:trigger>
          <xf:trigger>
              <xf:label>Remove Row</xf:label>
              <xf:action ev:event="DOMActivate">
                  <xf:delete nodeset="//item" at="index('rpt')"/>
              </xf:action>
          </xf:trigger>
      </div>
      
  </body>
</html>
	