<?xml version='1.0' standalone='yes'?>
<!DOCTYPE var:component>
<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:uix="OGo:uix"
  xmlns:label="OGo:label"
  xmlns:rsrc="OGo:url"
  const:userDefaultsKeys="SOGoContactsCategories"
  const:jsFiles="jquery-ui.js"
  className="UIxPageFrame"
  title="name"
  var:popup="isPopup">
  <style type="text/css">
    <var:if condition="horizontalDragHandleStyle">
      DIV#dragHandle, DIV#rightPanel
      { left: <var:string value="horizontalDragHandleStyle" />; }
      DIV#contactFoldersList
      { width: <var:string value="horizontalDragHandleStyle" />; }
    </var:if><var:if condition="verticalDragHandleStyle">
      DIV#rightDragHandle, DIV#contactView
      { top: <var:string value="verticalDragHandleStyle" />; }
    </var:if><var:if condition="contactsListContentStyle">
      DIV#contactsListContent
      { height: <var:string value="contactsListContentStyle" />; }
    </var:if><var:if condition="isPopup">
    </var:if>
  </style>

  <div id="uploadDialog" style="display: none" class="dialog left">
    <div>
      <h3><var:string label:value="Import Cards"/></h3>
      <p><var:string label:value="Select a vCard or LDIF file."/></p>
      <form const:href="" name="uploadForm" id="uploadForm" method="post"
        enctype="multipart/form-data"
        onsubmit="return AIM.submit(this, {'onStart' : validateUploadForm, 
        'onComplete' : uploadCompleted})">
        <p><input type="file" name="contactsFile" id="contactsFile" /></p>
        <p><a href="#" class="button actionButton" id="uploadSubmit"
            onclick="if($('uploadForm').onsubmit()) $('uploadForm').submit()">
            <span><var:string label:value="Upload" /></span></a>
          <a href="#" class="button" const:id="uploadCancel">
            <span><var:string label:value="Cancel" /></span></a></p>
      </form>
    </div>
  </div>

  <div id="uploadResults" style="display: none" class="dialog left">
    <div>
      <h3><var:string label:value="Import Cards"/></h3>
      <p id="uploadResultsContent"><!-- empty --></p>
      <p><a href="#" class="button" const:id="uploadOK">
          <span><var:string label:value="Done" /></span></a></p>
    </div>
  </div>
  
  <div class="menu" id="contactFoldersMenu">
    <ul>
      <li><var:string label:value="Properties" /></li>
      <li><!-- separator --></li>
      <li><var:string label:value="New Card" /></li>
      <li><var:string label:value="New List" /></li>
      <li><!-- separator --></li>
      <li><var:string label:value="Delete" /></li>
      <li><!-- separator --></li>
      <li><var:string label:value="Export Address Book..."/></li>
      <li><var:string label:value="Import Cards" /></li>
      <li><!-- separator --></li>
      <li><var:string label:value="Sharing..." /></li>
    </ul>
  </div>

  <div class="menu" id="contactMenu">
    <ul>
      <li><var:string label:value="Properties" /></li>
      <li><var:string label:value="Categories" /></li>
      <li><!-- separator --></li>
      <li><var:string label:value="Write" /></li>
      <li><var:string label:value="Instant Message" /></li>
      <li><!-- separator --></li>
      <li><var:string label:value="Delete" /></li>
      <li><!-- separator --></li>
      <li><var:string label:value="Move To" /></li>
      <li><var:string label:value="Copy To" /></li>
      <li><var:string label:value="Export" /></li>
    </ul>
  </div>

  <div class="contactFoldersList" id="contactFoldersList">
    <div class="tabsContainer" id="smallToolbarContainer">
      <ul>
        <li target="abToolbar">
          <span><var:string label:value="Address Books" /></span>
        </li>
      </ul>
      <div class="tabs">
        <div id="abToolbar" class="tab">
          <a href="#" class="smallToolbarButton">
            <span><img rsrc:src="add-addressbook.png" 
                label:title="New Addressbook..."/>
            </span>
          </a>
          <a href="#" class="smallToolbarButton">
            <span>
              <img rsrc:src="add-user-addressbook.png" 
                label:title="Subscribe to an Addressbook..." />
            </span>
          </a>
          <a href="#" class="smallToolbarButton">
            <span>
              <img rsrc:src="remove-addressbook.png" 
                label:title="Remove the selected Addressbook"/>
            </span>
          </a>
        </div>
      </div>
    </div>

    <ul id="contactFolders">
      <var:foreach list="contactFolders" item="currentFolder"
        ><li var:id="currentContactFolderId"
          var:owner="currentContactFolderOwner"
          var:class="currentContactFolderClass"
          var:acl-editing="currentContactFolderAclEditing"
          var:list-editing="currentContactFolderListEditing"
          ><var:string value="currentContactFolderName"/></li
          ></var:foreach
        >
    </ul>

    <var:if condition="hasContactSelectionButtons">
      <div class="contactSelection">
        <var:component value="selectorComponent" />
      </div>
    </var:if>
  </div>

  <div class="dragHandle" id="dragHandle"><!-- space --></div>

  <div id="rightPanel">
    <var:component className="UIxContactsFilterPanel" qualifier="qualifier" />

    <div id="contactsListContent">
      <table id="contactsList" cellspacing="0">
	<thead>
	  <tr class="tableview">
	    <!-- localize -->
	    <td class="tbtv_headercell sortableTableHeader" id="nameHeader"
		><img id="messageSortImage" class="sortImage" rsrc:src="arrow-up.png"
		/><var:string label:value="Name"
	    /></td
	    ><td class="tbtv_headercell sortableTableHeader" id="mailHeader"
	    ><var:string label:value="Email"/></td
	    ><td class="tbtv_headercell sortableTableHeader" id="screenNameHeader"
	    ><var:string label:value="Screen Name" /></td
	    ><td class="tbtv_headercell sortableTableHeader" id="orgHeader"
	    ><var:string label:value="Organization" /></td
	    ><td class="tbtv_headercell sortableTableHeader" id="phoneHeader"
	    ><var:string label:value="Preferred Phone" /></td
	    ></tr>
	</thead>
	<tbody id="contactsListTbody">

      <var:foreach list="personalContactInfos" item="currentContact">
        <tr var:class="currentContactClasses"
          var:categories="currentContact.c_categories"
          var:id="currentContact.c_name"
          var:contactname="currentContact.c_cn">
          <td class="displayName"><var:string value="currentContact.c_cn" const:escapeHTML="YES" /></td>
          <td><var:string value="currentContact.c_mail"/></td>
          <td><var:string value="currentContact.c_screenname"/></td>
          <td><var:string value="currentContact.c_o"/></td>
          <td><var:string value="currentContact.c_telephonenumber"/></td>
        </tr>
      </var:foreach>

	</tbody>
      </table>
    </div>

    <div class="dragHandle" id="rightDragHandle"><!-- space --></div>

    <div id="contactView"><!-- space --></div>
  </div>

  <var:string value="errorAlertJavaScript" const:escapeHTML="NO" />
</var:component>
