<?xml version='1.0' standalone='yes'?>
  <var:component
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:var="http://www.skyrix.com/od/binding"
    xmlns:const="http://www.skyrix.com/od/constant"
    xmlns:rsrc="OGo:url"
    xmlns:label="OGo:label"
    xmlns:uix="OGo:uix"
    className="UIxPageFrame"
    title="name"
    const:popup="YES"
    const:jsFiles="UIxMailEditor.js,SOGoAutoCompletion.js"
    >
    <script type="text/javascript">
      var activeAddressBook = '<var:string value="clientObject.container.nameInContainer"/>';
    </script>
    <div class="popupMenu" id="contactsMenu">
      <ul></ul>
    </div>
    <form var:href="saveURL" name="editform" id="mainForm">
      <div id="listEditor">
        <span class="caption"><var:string label:value="List details" /></span>
        <table class="frame"><tr><td width="35%"><var:string label:value="List name:"/></td>
            <td><input type="text" const:id="listName" const:name="listName"
                var:value="listName" class="textField" /></td></tr>
          <tr><td><var:string label:value="List nickname:"/></td>
            <td><input type="text" const:id="nickname" const:name="nickname"
                var:value="nickname" class="textField" /></td></tr>
          <tr><td><var:string label:value="List description:"/></td>
            <td><input type="text" const:id="description" const:name="description"
                var:value="description" class="textField" /></td></tr>
        </table>
        <span class="caption"><var:string label:value="Members" /></span>
        <table class="frame"><tr><td>
        <div id="referenceListWrapper">
          <table id="referenceList" cellspacing="0">
            <thead>
              <tr class="tableview">
                <td const:class="tbtv_headercell" const:id="nameTableHeader">
                  <var:string label:value="Contacts" />
                </td>
              </tr>
            </thead>
            <tbody>
              <var:foreach list="references" item="reference">
                <tr const:class="referenceListRow">
		  <td const:class="referenceListCell">
		    <input var:uid="reference.id"
			   var:value="reference.name"
			   const:style="display: none"/>
                    <span><var:string var:value="reference.name"/></span>
                </td></tr>
              </var:foreach>
            </tbody>
          </table>
        </div>
        </td></tr>
        <tr><td>
            <div class="bottomToolbar">
            <a const:id="referenceAdd" class="bottomButton" href="#">
              <span><img rsrc:src="add-icon.png" label:title="Add" />
            </span></a>
            <a const:id="referenceDelete" class="bottomButton" href="#">
              <span><img rsrc:src="remove-icon.png" label:title="Delete" />
            </span></a>
          </div>
        </td></tr>
        </table>
      </div>
      <input type="hidden" name="referencesValue" id="referencesValue"
        var:value="referencesValue" />
      <div id="buttons">
        <var:if condition="canCreateOrModify"
          ><a class="button actionButton" name="submit" 
            id="submitButton" href="#" >
            <span><var:string label:value="Save"/></span>
        </a></var:if>
        <a const:id="cancelButton" class="button" name="cancel" href="#">
            <span><var:string label:value="Cancel"/></span>
        </a>
      </div>
    </form>
  </var:component>
