webogram-i2p/app/partials/contacts_modal.html

<div class="contacts_modal_wrap" my-modal-position>

  <a class="modal-close-button" ng-click="$dismiss()"><i></i></a>

  <div class="modal-body">

    <div class="contacts_modal_header">
      <div class="contacts_modal_edit_wrap" ng-if="!action || action == 'edit'" ng-switch="action">
        <a ng-switch-when="edit" class="contacts_modal_edit_link" ng-click="toggleEdit(false)">
          Cancel
        </a>
        <a ng-switch-default class="contacts_modal_edit_link" ng-click="toggleEdit(true)">
          Edit
        </a>
      </div>
      <h4 class="contacts_modal_title" ng-switch="action">
        <div ng-switch-when="new_group" ng-switch="selectedCount > 0">
          <span ng-switch-when="true">
            <ng-pluralize count="selectedCount" when="{'one': '1 participant', 'other': '{} participants'}">
            </ng-pluralize>
          </span>
          <span ng-switch-default>New Group</span>
        </div>
        <span ng-switch-default>Contacts</span>
      </h4>
    </div>


    <div class="contacts_modal_search">
      <input class="form-control contacts_modal_search_field no_outline" my-focused type="search" placeholder="Search" ng-model="search.query"/>
      <a class="contacts_modal_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
    </div>


    <div my-contacts-list class="contacts_modal_col">

      <div class="contacts_wrap nano" my-infinite-scroller>
        <div class="contacts_scrollable_wrap nano-content" ng-switch="contactsEmpty">

          <div ng-switch-when="true" class="contacts_modal_contacts_empty" my-vertical-position="0.2" padding="true">
            Your contacts list is empty. You can <a href="" ng-click="importContact()">add new contact</a> by phone number.
          </div>

          <ul ng-switch-default class="contacts_modal_members_list nav nav-pills nav-stacked">

            <li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | orderBy:'user.sortName' | limitTo: slice.limit track by contact.userID" ng-class="{active: selectedContacts[contact.userID], disabled: disabledContacts[contact.userID]}">
              <a class="contacts_modal_contact" ng-click="contactSelect(contact.userID)">

                <i ng-if="multiSelect" class="icon icon-contact-tick"></i>

                <div class="contacts_modal_contact_photo pull-left" my-user-photolink="contact.userID" status="true" img-class="contacts_modal_contact_photo"></div>
                <div class="contacts_modal_contact_name" ng-bind-html="contact.user.rFullName"></div>
                <div class="contacts_modal_contact_status" my-user-status="::contact.userID"></div>

              </a>
            </li>

          </ul>

        </div>
      </div>

    </div>

  </div>

  <div class="modal-footer contacts_modal_panel" ng-switch="action">
    <div ng-switch-when="new_group" class="pull-right">
      <button class="btn btn-link" ng-click="$dismiss()">Cancel</button>
      <button class="btn btn-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit">
        Next
      </button>
    </div>

    <button ng-switch-when="select" class="btn btn-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit">
      Next
    </button>
    <button ng-switch-when="edit" class="btn btn-danger"  ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="deleteSelected()">
      Delete <strong ng-bind="selectedCount"></strong>
    </button>
    <button ng-switch-default class="btn btn-link" ng-click="importContact()">
      New contact
    </button>
  </div>

</div>