define(function () {

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

  var component = {};

  component.originalTemplate = "PeopleDirectoryServiceMenu";
  component.template = `
<div data-v-76af93ea class="PeopleDirectory content">
  <uiSearchBox data-v-76af93ea class="PeopleDirectory__SearchBox" :placeholder="'Find Colleague' | translate" v-model="searchText"/>
  <uiSpinner data-v-76af93ea class="spinner" v-if="searching"/>
  <div data-v-76af93ea class="peopleInput input-group filter-group" v-if="filters.length > 0">
    <a data-v-76af93ea
      class="filter btn btn-default"
      v-for="filter in filters"
      :key="filter.filter"
      @click="removeFilter(filter)"
    >
      {{filter.label}}
      <span data-v-76af93ea class="iconFilterRemove">
        <uiIconRemoveFilter data-v-76af93ea/>
      </span>
    </a>
  </div>
  <div data-v-76af93ea class="advancedSearch">
    <span data-v-76af93ea
      class="wt-expandText"
      :title="'Advanced search' | translate"
      @click="showAdvancedSearch()"
    >
      <span data-v-76af93ea>
        <uiIconChevronRight data-v-76af93ea
          v-show="isCollapsed"
          class="ms-Icon ms-Icon--ChevronRight"
          :title="'Advanced search' | translate"
        ></uiIconChevronRight>
        <uiIconChevronRight data-v-76af93ea
          v-show="!isCollapsed"
          class="ms-Icon ms-Icon--ChevronUp"
          :title="'Advanced search' | translate"
        ></uiIconChevronRight>
        <span data-v-76af93ea class="hidden-xs">{{'Advanced search' | translate}}</span>
      </span>
    </span>
    <div data-v-76af93ea v-if="!isCollapsed">
      <div data-v-76af93ea class="peopleInput">
        <autoComplete data-v-76af93ea
          @onSelect="depSelected"
          :placeholder="'Filtering by department' | translate"
          :items="departments"
        />
      </div>
      <div data-v-76af93ea class="peopleInput">
        <autoComplete data-v-76af93ea
          @onSelect="locSelected"
          :placeholder="'Filtering by location' | translate"
          :items="locations"
        />
      </div>
      <div data-v-76af93ea class="peopleInput">
        <autoComplete data-v-76af93ea
          @onSelect="jobSelected"
          :placeholder="'Filtering by job title' | translate"
          :items="jobTitles"
        />
      </div>
    </div>
  </div>
  <div data-v-76af93ea class="beforeResultSpacer"/>
  <searchResults data-v-76af93ea
    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"
  />
</div>
`;
  component.styles = `
.content[data-v-76af93ea] .ms-SearchBox .ms-SearchBox-field {
  padding: 6px 3px 7px 10px;
  border: 1px solid "[theme:neutralLight, default:#d7d7d7]" !important;
}
.content[data-v-76af93ea] .ms-SearchBox .ms-SearchBox-label .ms-SearchBox-icon {
  color: "[theme:themePrimary, default:#333]";
}
.content[data-v-76af93ea] .ms-SearchBox .ms-CommandButton {
  display: none !important;
}
.searchresults .wizdom365SearchSection .wizdom-phonebook-textColumn div[data-v-76af93ea] {
  color: "[theme:bodyText, default:#333]";
}
.wt-expandText[data-v-76af93ea] {
  cursor: pointer;
}
.wt-linkText[data-v-76af93ea]:hover {
  cursor: pointer;
}
.peopleInput .input-group-addon[data-v-76af93ea] {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 5px;
  padding-right: 6px;
}
.peopleInput .input-group-addon .glyphicon[data-v-76af93ea] {
    font-size: 18px;
    margin-top: 6px;
}
.advancedSearch[data-v-76af93ea] {
  color: "[theme:bodyText, default:#333]";
  padding-top: 5px;
  padding-bottom: 0px;
}
.advancedSearch .peopleInput[data-v-76af93ea] {
    padding-top: 18px;
}
.filter[data-v-76af93ea] {
  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-76af93ea] {
  position: relative;
  top: 2px;
}
[data-v-76af93ea] .wizdom-phonebook-textColumn .ms-Icon--ChevronRight,[data-v-76af93ea] .wizdom-phonebook-textColumn .ms-Icon--ChevronUp,
.wt-expandText .ms-Icon--ChevronRight[data-v-76af93ea],
.wt-expandText .ms-Icon--ChevronUp[data-v-76af93ea] {
  font-size: 10px;
}
.spinner[data-v-76af93ea] {
  float: right;
  margin-right: 30px;
}
.beforeResultSpacer[data-v-76af93ea] {
  padding-top: 10px;
}


`;

  return component;

});
