define(function () {

  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //
  //

  var component = {};

  component.originalTemplate = "PeopleDirectory";
  component.template = `
<wizdomWebpart data-v-8d744a64
  :environmentInfo="environmentInfo"
  :chromeProperties="webpartProperties.chromeProperties"
  :title="'People Directory'" 
  :webpartPadding="true" 
  chromeType="title" 
  @webpart-resize="webpartResize">
  <div data-v-8d744a64 class="PeopleDirectory content">
    <uiSearchBox data-v-8d744a64 class="PeopleDirectory__SearchBox" :placeholder="'Find Colleague' | translate" v-model="searchText" />
    <uiSpinner data-v-8d744a64 class="spinner" v-if="searching"/>

    <div data-v-8d744a64 class="peopleInput input-group filter-group" v-if="filters.length > 0">
      <a data-v-8d744a64
        class="filter btn btn-default"
        v-for="filter in filters"
        :key="filter.filter"
        @click="removeFilter(filter)"
      >
        {{filter.label}}
        <span data-v-8d744a64 class="iconFilterRemove">
          <uiIconRemoveFilter data-v-8d744a64/>
        </span>
      </a>
    </div>

    <div data-v-8d744a64 class="advancedSearch">
      <span data-v-8d744a64
        class="wt-expandText"
        :title="'Advanced search' | translate"
        @click="showAdvancedSearch()"
      >
        <span data-v-8d744a64>
          <uiIconChevronRight data-v-8d744a64
            v-show="isCollapsed"
            class="ms-Icon ms-Icon--ChevronRight"
            :title="'Advanced search' | translate"
          ></uiIconChevronRight>
          <uiIconChevronUp data-v-8d744a64
            v-show="!isCollapsed"
            class="ms-Icon ms-Icon--ChevronUp"
            :title="'Advanced search' | translate"
          ></uiIconChevronUp>
          <span data-v-8d744a64 class="hidden-xs">{{'Advanced search' | translate}}</span>
        </span>
      </span>

      <div data-v-8d744a64 v-if="!isCollapsed">
        <div data-v-8d744a64 class="peopleInput">
          <autoComplete data-v-8d744a64
            @onSelect="depSelected"
            :placeholder="'Filtering by department' | translate"
            :items="departments"
          />
        </div>
        <div data-v-8d744a64 class="peopleInput">
          <autoComplete data-v-8d744a64
            @onSelect="locSelected"
            :placeholder="'Filtering by location' | translate"
            :items="locations"
          />
        </div>
        <div data-v-8d744a64 class="peopleInput">
          <autoComplete data-v-8d744a64
            @onSelect="jobSelected"
            :placeholder="'Filtering by job title' | translate"
            :items="jobTitles"
          />
        </div>
      </div>
    </div>
    <div data-v-8d744a64 class="beforeResultSpacer"/>
    <searchResults data-v-8d744a64
      v-if="result.users && result.users.length > 0"
      @onPageChanged="onPageChanged"
      @onSetSearchText="onSetSearchText"
      :items="result.users"
      :itemsPerPage="webpartProperties.numberOfUsersPerPage"
      :searchTerm="searchText"
      :siteUrl="siteUrl"
      :totalNrOfItems="result.totalUsers"
      :currentPage="currentPage"
      :webpartSize="webpartSize"
    />
  </div>
</wizdomWebpart>
`;
  component.styles = `
.content[data-v-8d744a64] .ms-SearchBox .ms-SearchBox-field {
  padding: 6px 3px 7px 10px;
  border: 1px solid "[theme:neutralLight, default:#d7d7d7]" !important;
}
.content[data-v-8d744a64] .ms-SearchBox .ms-SearchBox-label .ms-SearchBox-icon {
  color: "[theme:themePrimary, default:#333]";
}
.content[data-v-8d744a64] .ms-SearchBox .ms-CommandButton {
  display: none !important;
}
.searchresults .wizdom365SearchSection .wizdom-phonebook-textColumn div[data-v-8d744a64] {
  color: "[theme:bodyText, default:#333]";
}
.wt-expandText[data-v-8d744a64] {
  cursor: pointer;
}
.wt-linkText[data-v-8d744a64]:hover {
  cursor: pointer;
}
.peopleInput .input-group-addon[data-v-8d744a64] {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 5px;
  padding-right: 6px;
}
.peopleInput .input-group-addon .glyphicon[data-v-8d744a64] {
    font-size: 18px;
    margin-top: 6px;
}
.advancedSearch[data-v-8d744a64] {
  color: "[theme:bodyText, default:#333]";
  padding-top: 5px;
  padding-bottom: 0px;
}
.advancedSearch .peopleInput[data-v-8d744a64] {
    padding-top: 18px;
}
.filter[data-v-8d744a64] {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-right: 10px;
  background-color: "[theme:neutralLighter, default:#f4f4f4]";
  color: "[theme:bodyText, default:#333]";
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
}
.iconFilterRemove[data-v-8d744a64] {
  position: relative;
  top: 2px;
}
[data-v-8d744a64] .wizdom-phonebook-textColumn .ms-Icon--ChevronRight,[data-v-8d744a64] .wizdom-phonebook-textColumn .ms-Icon--ChevronUp,
.wt-expandText .ms-Icon--ChevronRight[data-v-8d744a64],
.wt-expandText .ms-Icon--ChevronUp[data-v-8d744a64] {
  font-size: 10px;
}
.spinner[data-v-8d744a64] {
  float: right;
  margin-right: 30px;
}
.beforeResultSpacer[data-v-8d744a64] {
  padding-top: 10px;
}
.titleSpacer[data-v-8d744a64] {
  padding-top: 20px;
}
.webpartTitle[data-v-8d744a64] {
  display: block;
  font-size: 24px;
  margin: 0;
  padding: 2px;
  border: none;
  font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system,
 BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
  width: 100%;
  font-weight: 100;
}
textarea.webpartTitle[data-v-8d744a64] {
  white-space: pre;
  overflow: hidden;
  height: 36px;
  resize: none;
  outline: none;
}


`;

  return component;

});
