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" class="md-padding">
    <div class="editor md-padding" style="padding-bottom: 72px">
      <hgroup class="header">
        <h1 class="sg-md-display-2--light" data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
        <h6 class="sg-md-display-2-subheader">{{card.$description()}}
          <span 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 class="pseudo-input-label">
          <var:string label:value="Display"/>
        </label>
          <input type="text" ng-maxlength="30" data-ng-model="card.fn"/>
      </md-input-container>
<!-- todo: look for better reset/normalization. Semanticaly this should be a fieldset, but content doesn't flex properly du to browser styles-->
    <div id="contact-identification" class="sg-fieldset" layout="row" layout-sm="column">
      <md-input-container flex="40">
        <label class="pseudo-input-label">
          <var:string label:value="Firstname"/>
        </label>
        <input type="text" data-ng-model="card.givenname"/>
      </md-input-container>
      <md-input-container flex="40">
        <label class="pseudo-input-label">
          <var:string label:value="Lastname"/>
        </label>
        <input type="text" data-ng-model="card.sn"/>
      </md-input-container>
      <md-input-container flex="20">
        <label class="pseudo-input-label">
          <var:string label:value="Nickname"/>
        </label>
        <input type="text" data-ng-model="card.nickname"/>
      </md-input-container>
    </div>

    <div class="sg-fieldset" layout="row" layout-sm="column">
      <md-input-container>
        <label class="pseudo-input-label">
          <var:string label:value="Organization"/>
        </label>
        <input type="text" data-ng-model="card.org"/>
      </md-input-container>
      <md-input-container>
        <label class="pseudo-input-label">
          <var:string label:value="Title"/>
        </label>
        <input type="text" data-ng-model="card.title"/>
      </md-input-container>
    </div>


    <!-- org units -->

      <div class="attr" data-ng-repeat="unit in card.orgUnits">

        <div layout="row" layout-align="center end">
          <md-input-container>
            <label class="pseudo-input-label">
              <var:string label:value="Organization Unit"/>
            </label>
            <input type="text" data-ng-model="unit.value"
                   data-sg-focus-on="orgUnit_{{$index}}"/>
          </md-input-container>
            <md-button class="icon" data-ng-click="card.$delete('orgUnits', $index)">
              <i class="md-icon-remove-circle"><!-- remove --></i>
            </md-button>
        </div>
      </div>
    <div class="md-layout-margin" layout="row" layout-align="start center">
      <md-button class="icon" data-ng-click="addOrgUnit()">
        <i class="md-icon-add-circle"><!-- plus icon button--></i>
      </md-button>
      <label class="button-label">
        <var:string label:value="Add Organizational Unit"/>
      </label>
    </div>

    <!-- birthday -->
    <md-input-container>
          <label class="pseudo-input-label--no-margin">
            <var:string label:value="Birthday"/>
          </label>
            <input type="date" data-ng-model="card.birthday"/>
    </md-input-container>

    <!-- categories -->
        <!-- if there's some categories, here they are (this is sort of a template) -->
        <div class="attr" data-ng-repeat="category in card.categories">

          <div layout="row" layout-align="center end">
            <md-input-container>
              <label class="pseudo-input-label">
                <var:string label:value="Category"/>
              </label>
              <input type="text" data-ng-model="category.value"
                     data-sg-focus-on="category_{{$index}}"/>
              <!--data-typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
            </md-input-container>
            <md-button class="icon" data-ng-click="card.$delete('categories', $index)">
              <i class="md-icon-remove-circle"><!-- remove --></i>
            </md-button>
          </div>
        </div>
        <!-- New category button-group -->
        <div class="md-layout-margin" layout="row" layout-align="start center">
            <md-button class="icon" data-ng-click="addCategory()">
              <i class="md-icon-add-circle"><!-- new --></i>
            </md-button>
            <label class="button-label">
              <var:string label:value="New Category"/>
            </label>
        </div>

    <!-- emails -->

    <div class="section">
      <div class="attr" data-ng-repeat="email in card.emails">

        <div class="md-layout-margin" layout="row" layout-align="space-between end">
          <md-select ng-model="email.type">
            <md-option ng-repeat="type in allEmailTypes" ng-value="type">{{ type }}</md-option>
          </md-select>
          <md-input-container>
            <label class="pseudo-input-label"><var:string label:value="New Email Address"/></label>
            <input type="email" data-ng-model="email.value"
                   data-sg-focus-on="email_{{$index}}"/>
          </md-input-container>
          <md-button class="icon" data-ng-click="card.$delete('emails', $index)">
            <i class="md-icon-remove-circle"><!-- remove --></i>
          </md-button>
        </div>


      </div>
      <div class="attr">
        <div class="value single">
          <span class="button secondary outline tiny" data-ng-click="addEmail()">
            <i class="md-icon-add"><!-- new --></i>
            <var:string label:value="New Email Address"/>
          </span>
        </div>
      </div>
    </div>

    <!-- phones -->
    <div class="pseudo-input">
      <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="md-icon-remove-circle-outline"><!-- 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">
            <p class="pseudo-input-inputLike--underline">
              <input type="text" label:placeholder="phone number" data-ng-model="phone.value"
                     data-sg-focus-on="phone_{{$index}}"/>
            </p>
          </div>
        </div>
        <div class="attr">
          <div class="value single">
            <span class="button secondary outline tiny" data-ng-click="addPhone()">
              <i class="md-icon-add"><!-- new --></i>
              <var:string label:value="New Phone Number"/>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- urls -->
    <div class="pseudo-input">
      <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="md-icon-remove-circle-outline"><!-- 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">
            <p class="pseudo-input-inputLike--underline">
              <input type="url" label:placeholder="URL" data-ng-model="url.value" data-sg-focus-on="url_{{$index}}"/>
            </p>
          </div>
        </div>
        <div class="attr">
          <div class="value single">
            <span class="button secondary outline tiny" data-ng-click="addUrl()">
              <i class="md-icon-add"><!-- new --></i>
              <var:string label:value="New URL"/>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- addresses -->
    <div class="pseudo-input">
      <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="md-icon-remove-circle-outline"><!-- 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">
            <p class="pseudo-input-inputLike--underline">
              <input type="text" label:placeholder="street" data-ng-model="address.street"
                     data-sg-focus-on="address_{{$index}}"/>
            </p>

            <p class="pseudo-input-inputLike--underline">
              <input type="text" data-ng-model="address.street2"/>
            </p>

            <p class="pseudo-input-inputLike--underline">
              <input type="text" label:placeholder="Postoffice" data-ng-model="address.postoffice"/>
            </p>

            <p class="pseudo-input-inputLike--underline">
              <input type="text" label:placeholder="City" data-ng-model="address.locality"/>
            </p>

            <p class="pseudo-input-inputLike--underline">
              <input type="text" label:placeholder="Region" data-ng-model="address.region"/>
            </p>

            <p class="pseudo-input-inputLike--underline">
              <input type="text" label:placeholder="Country" data-ng-model="address.country"/>
            </p>

            <p class="pseudo-input-inputLike--underline">
              <input type="text" label:placeholder="Postal Code" data-ng-model="address.postalcode"/>
            </p>

          </div>
        </div>
        <div class="attr">
          <div class="value single">
            <span class="button secondary outline tiny" data-ng-click="addAddress()">
              <i class="md-icon-add"><!-- new --></i>
              <var:string label:value="New Address"/>
            </span>
          </div>
        </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="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="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="md-icon-remove-circle-outline"><!-- 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="md-icon-add"><!-- new --></i>
            <var:string label:value="Add Member"/>
          </span>
        </div>
      </div>
    </div>
  </form>
</div>
    </md-content>

</container>