<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:xforms="http://www.w3.org/2002/xforms" 
      xmlns:ev="http://www.w3.org/2001/xml-events">
  <head>
    <title>Question about how a control should render several alerts</title>
    <xforms:model id="default-model">
      <xforms:instance id="default-instance">
        <data xmlns="" valid='false'>Value<valid>false</valid></data>
      </xforms:instance>
      <xforms:bind nodeset='.' constraint="valid='true'"/>
    </xforms:model>
  </head>
  <body>
    <h1>Question about how a control should render several alerts</h1>
    <p>A control can have more than one alert, but how should it be rendered.</p>
    
    <div><xforms:input ref="." id="c1">
           <xforms:label>Value with one alerts:</xforms:label>
           <xforms:alert>This is alert 1</xforms:alert>
         </xforms:input>
    </div>
    
    <div><xforms:input ref="." id="c2">
           <xforms:label>Value with two alerts:</xforms:label>
           <xforms:alert>This is alert 1</xforms:alert>
           <xforms:alert>This is alert 2</xforms:alert>
         </xforms:input>
    </div>

    <div><xforms:input ref="." id="c3">
           <xforms:label>Value with three alerts:</xforms:label>
           <xforms:alert>This is alert 1</xforms:alert>
           <xforms:alert>This is alert 2</xforms:alert>
           <xforms:alert>This is alert 3</xforms:alert>
         </xforms:input>
    </div>
    
    <div><xforms:select1 ref="valid" id="c4">
           <xforms:label>Toggle valid:</xforms:label>
           <xforms:item>
             <xforms:label>Invalid</xforms:label>
             <xforms:value>false</xforms:value>
           </xforms:item>
           <xforms:item>
             <xforms:label>Valid</xforms:label>
             <xforms:value>true</xforms:value>
           </xforms:item>
         </xforms:select1>
    </div>
  </body>
</html>

