sogo/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox

<?xml version='1.0' standalone='yes'?>
<container xmlns = "http://www.w3.org/1999/xhtml" xmlns:var = "http://www.skyrix.com/od/binding" xmlns:const = "http://www.skyrix.com/od/constant" xmlns:label = "OGo:label">

  <md-content md-scroll-y = "true">
    <div class = "editor md-padding" style="padding-bottom: 72px">
      <hgroup class = "header">
        <h1 data-ng-bind-html = "card.$fullname()"><!-- fullname --></h1>
        <h6>{{card.$description()}}
          <span class = "label radius" data-ng-repeat = "category in card.categories">{{category.value}}</span>
        </h6>
      </hgroup>

      <form name = "cardForm" data-ng-show = "card.$isCard()" data-ng-submit = "save(cardForm)">

      <md-input-container>
          <var:entity const:name = "nbsp" />
        <label>
          <var:string label:value = "Display" />
        </label>
        <input type = "text" ng-maxlength = "30" data-ng-model = "card.fn" />
      </md-input-container>
      <md-input-container>
        <div class = "action">
          <var:entity const:name = "nbsp" />
        </div>
        <label class = "">
          <var:string label:value = "Firstname" />
        </label>
        <input type = "text" data-ng-model = "card.givenname" />
      </md-input-container>
      <md-input-container>
        <div class = "action">
          <var:entity const:name = "nbsp" />
        </div>
        <label class = "right inline">
          <var:string label:value = "Lastname" />
        </label>
        <input type = "text" data-ng-model = "card.sn" />
      </md-input-container>
      <md-input-container>
        <div class = "action">
          <var:entity const:name = "nbsp" />
        </div>
        <label class = "right inline">
          <var:string label:value = "Nickname" />
        </label>
        <input type = "text" data-ng-model = "card.nickname" />
      </md-input-container>
      <md-input-container>
        <div class = "action">
          <var:entity const:name = "nbsp" />
        </div>
        <label class = "right inline">
          <var:string label:value = "Organization" />
        </label>
        <input type = "text" data-ng-model = "card.org" />
      </md-input-container>
      <md-input-container>
        <div class = "action">
          <var:entity const:name = "nbsp" />
        </div>
        <label class = "right inline">
          <var:string label:value = "Title" />
        </label>
        <input type = "text" data-ng-model = "card.title" />
      </md-input-container>

      <!-- org units -->

      <fieldset class = "section">
        <div class = "attr" data-ng-repeat = "unit in card.orgUnits">
          <div class = "action">
            <span class = "button alert icon" data-ng-click = "card.$delete('orgUnits', $index)">
              <i class = "icon-minus"><!-- remove --></i>
            </span>
          </div>
        <md-input-container>
          <div class = "key">
            <label class = "right inline">
              <var:string label:value = "Organization Unit" />
            </label>
          </div>
          <div class = "value">
            <input type = "text" label:placeholder = "unit" data-ng-model = "unit.value" data-sg-focus-on = "orgUnit_{{$index}}" />
          </div>
        </md-input-container>
      </div>
      <div class = "attr">
        <div class = "value single">
          <span class = "button secondary outline tiny" data-ng-click = "addOrgUnit()">
            <i class = "icon-plus"><!-- new --></i>
            <var:string label:value = "Add Organizational Unit" />
          </span>
        </div>
      </div>
    </fieldset>
    <!-- birthday -->
    <div class = "attr">
      <div class = "action">
        <var:entity const:name = "nbsp" />
      </div>
      <div class = "key">
        <label class = "right inline">
          <var:string label:value = "Birthday" />
        </label>
      </div>
      <div class = "value">
        <input type = "text" data-ng-model = "card.birthday" />
      </div>
    </div>
    <!-- categories -->
    <div class = "section">
      <div class = "attr" data-ng-repeat = "category in card.categories">
        <div class = "action">
          <span class = "button alert icon" data-ng-click = "card.$delete('categories', $index)">
            <i class = "icon-minus"><!-- remove --></i>
          </span>
        </div>
        <div class = "key">
          <label class = "right inline">
            <var:string label:value = "Category" />
          </label>
        </div>
        <div class = "value">
          <input type = "text" label:placeholder = "category" data-ng-model = "category.value" data-sg-focus-on = "category_{{$index}}" data-typeahead = "cat for cat in card.allCategories | filter:$viewValue" />
        </div>
      </div>
      <div class = "attr">
        <div class = "value single">
          <span class = "button secondary outline tiny" data-ng-click = "addCategory()">
            <i class = "icon-plus"><!-- new --></i>
            <var:string label:value = "New Category" />
          </span>
        </div>
      </div>
    </div>
    <!-- emails -->
    <div class = "section">
      <div class = "attr" data-ng-repeat = "email in card.emails">
        <div class = "action">
          <span class = "button alert icon" data-ng-click = "card.$delete('emails', $index)">
            <i class = "icon-minus"><!-- remove --></i>
          </span>
        </div>
        <div class = "key">
          <select class = "text-right" data-ng-model = "email.type" data-ng-options = "type for type in allEmailTypes">
            <!-- email types -->
          </select>
        </div>
        <div class = "value">
          <input type = "email" label:placeholder = "email address" data-ng-model = "email.value" data-sg-focus-on = "email_{{$index}}" />
        </div>
      </div>
      <div class = "attr">
        <div class = "value single">
          <span class = "button secondary outline tiny" data-ng-click = "addEmail()">
            <i class = "icon-plus"><!-- new --></i>
            <var:string label:value = "New Email Address" />
          </span>
        </div>
      </div>
    </div>
    <!-- phones -->
    <div class = "section">
      <div class = "attr" data-ng-repeat = "phone in card.phones">
        <div class = "action">
          <span class = "button alert icon" data-ng-click = "card.$delete('phones', $index)">
            <i class = "icon-minus"><!-- remove --></i>
          </span>
        </div>
        <div class = "key">
          <select class = "text-right" data-ng-model = "phone.type" data-ng-options = "type for type in allTelTypes">
            <!-- phone types -->
          </select>
        </div>
        <div class = "value">
          <input type = "text" label:placeholder = "phone number" data-ng-model = "phone.value" data-sg-focus-on = "phone_{{$index}}" />
        </div>
      </div>
      <div class = "attr">
        <div class = "value single">
          <span class = "button secondary outline tiny" data-ng-click = "addPhone()">
            <i class = "icon-plus"><!-- new --></i>
            <var:string label:value = "New Phone Number" />
          </span>
        </div>
      </div>
    </div>
    <!-- urls -->
    <div class = "section">
      <div class = "attr" data-ng-repeat = "url in card.urls">
        <div class = "action">
          <span class = "button alert icon" data-ng-click = "card.$delete('urls', $index)">
            <i class = "icon-minus"><!-- remove --></i>
          </span>
        </div>
        <div class = "key">
          <select class = "text-right" data-ng-model = "url.type" data-ng-options = "type for type in allUrlTypes">
            <!-- url types -->
          </select>
        </div>
        <div class = "value">
          <input type = "url" label:placeholder = "URL" data-ng-model = "url.value" data-sg-focus-on = "url_{{$index}}" />
        </div>
      </div>
      <div class = "attr">
        <div class = "value single">
          <span class = "button secondary outline tiny" data-ng-click = "addUrl()">
            <i class = "icon-plus"><!-- new --></i>
            <var:string label:value = "New URL" />
          </span>
        </div>
      </div>
    </div>
    <!-- addresses -->
    <div class = "section">
      <div class = "attr" data-ng-repeat = "address in card.addresses">
        <div class = "action">
          <span class = "button alert icon" data-ng-click = "card.$delete('addresses', $index)">
            <i class = "icon-minus"><!-- remove --></i>
          </span>
        </div>
        <div class = "key">
          <select class = "text-right" data-ng-model = "address.type" data-ng-options = "type for type in allAddressTypes">
            <!-- address types -->
          </select>
        </div>
        <div class = "value compact">
          <input type = "text" label:placeholder = "street" data-ng-model = "address.street" data-sg-focus-on = "address_{{$index}}" />
          <input type = "text" data-ng-model = "address.street2" />
          <input type = "text" label:placeholder = "Postoffice" data-ng-model = "address.postoffice" />
          <input type = "text" label:placeholder = "City" data-ng-model = "address.locality" />
          <input type = "text" label:placeholder = "Region" data-ng-model = "address.region" />
          <input type = "text" label:placeholder = "Country" data-ng-model = "address.country" />
          <input type = "text" label:placeholder = "Postal Code" data-ng-model = "address.postalcode" />
        </div>
      </div>
      <div class = "attr">
        <div class = "value single">
          <span class = "button secondary outline tiny" data-ng-click = "addAddress()">
            <i class = "icon-plus"><!-- new --></i>
            <var:string label:value = "New Address" />
          </span>
        </div>
      </div>
    </div>
    <!-- note -->
    <div class = "attr">
      <div class = "action">
        <var:entity const:name = "nbsp" />
      </div>
      <div class = "key">
        <label class = "right inline">
          <var:string label:value = "Note" />
        </label>
      </div>
      <div class = "value">
        <textarea data-ng-model = "card.note"><!-- note --></textarea>
      </div>
    </div>
    <fieldset class = "sg-buttongroup">
      <span class = "button tiny radius secondary" data-ng-click = "cancel()">
        <i class = "icon-arrow-left"><!-- cancel --></i>
        <var:string label:value = "Cancel" />
      </span>
      <span class = "button tiny radius secondary" data-ng-click = "reset()">
        <i class = "icon-undo"><!-- reset --></i>
        <var:string label:value = "Reset" />
      </span>
      <md-button class = "button tiny radius" type = "submit">
        <i class = "icon-checkmark"><!-- save --></i>
        <var:string label:value = "Save" />
      </md-button>
    </fieldset>
  </form>
      <form name = "listForm" data-ng-show = "card.$isList()" data-ng-submit = "save(listForm)">
    <div class = "buttonsToolbar">
      <span class = "button tiny radius secondary" data-ng-click = "cancel()">
        <i class = "icon-arrow-left"><!-- cancel --></i>
        <var:string label:value = "Cancel" />
      </span>
      <span class = "button tiny radius secondary" data-ng-click = "reset()">
        <i class = "icon-undo"><!-- reset --></i>
        <var:string label:value = "Reset" />
      </span>
      <button class = "button tiny radius" type = "submit">
        <i class = "icon-checkmark"><!-- save --></i>
        <var:string label:value = "Save" />
      </button>
    </div>
    <div class = "section">
      <div class = "attr">
        <div class = "action">
          <var:entity const:name = "nbsp" />
        </div>
        <div class = "key">
          <label class = "right inline">
            <var:string label:value = "Display" />
          </label>
        </div>
        <div class = "value">
          <input type = "text" data-ng-model = "card.fn" />
        </div>
      </div>
      <div class = "attr">
        <div class = "action">
          <var:entity const:name = "nbsp" />
        </div>
        <div class = "key">
          <label class = "right inline">
            <var:string label:value = "Nickname" />
          </label>
        </div>
        <div class = "value">
          <input type = "text" data-ng-model = "card.nickname" />
        </div>
      </div>
    </div>
    <!-- list members -->
    <div class = "section">
      <div class = "attr" data-ng-repeat = "ref in card.refs">
        <div class = "action">
          <span class = "button alert icon" data-ng-click = "card.$delete('refs', $index)">
            <i class = "icon-minus"><!-- remove --></i>
          </span>
        </div>
        <div class = "key">
          <label class = "right inline">
            <var:string label:value = "Member" />
          </label>
        </div>
        <div class = "value">
          <input type = "text" label:placeholder = "email address" data-ng-model = "ref.email" data-sg-focus-on = "ref_{{$index}}" data-typeahead = "card.$preferredEmail($viewValue) as card.$shortFormat($viewValue) for card in addressbook.$filter($viewValue, {dry: true, excludeLists: true})" data-typeahead-on-select = "card.$updateMember($index, $model, $item)" />
        </div>
      </div>
      <div class = "attr">
        <div class = "value single">
          <span class = "button outline secondary tiny" data-ng-click = "addMember()">
            <i class = "icon-plus"><!-- new --></i>
            <var:string label:value = "Add Member" />
          </span>
        </div>
      </div>
    </div>
  </form>
    </div>
  </md-content>

    </container>