define(function () {

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

  var component = {
    data() {
      return {};
    }
  };

  component.originalTemplate = "Descriptive";
  component.template = `
<wizdomWebpart data-v-8dd4d0e6 v-if="birthdays" :environmentInfo="environmentInfo" :chromeProperties="webpartProperties.chromeProperties" 
:title="'Birthdays' | translate" @titleChanged="webpartProperties.title = $event" :dynamicData="birthdays.length" :webpartPadding="true" chromeType="visual">
    <div data-v-8dd4d0e6 class="container">
        <div data-v-8dd4d0e6 v-if="birthdays.length>0">
            <div data-v-8dd4d0e6 class="birthday-heading">
                <div data-v-8dd4d0e6><uiIconBirthdayCake data-v-8dd4d0e6/></div>
                <span data-v-8dd4d0e6 v-if="webpartProperties.plusDays == 0">
                    {{ "Birthday(s) today!" | translate }}
                </span>
                <span data-v-8dd4d0e6 v-if="webpartProperties.plusDays > 0">
                    {{ "Upcoming birthday(s)" | translate }}
                </span>
            </div>

            <div data-v-8dd4d0e6 class="wizdomBirthdaySlider">
                <transition data-v-8dd4d0e6 :name="transName" v-for="(item, index) in birthdays" :key="index">
                    <div data-v-8dd4d0e6 class="birthdayPerson" @swipeleft="nextSlide()" @swiperight="prevSlide()"
                    v-show="isCurrentSlideIndex(index)">
                        <a data-v-8dd4d0e6 :href="item.publicUrl">
                            <span data-v-8dd4d0e6>{{item.name}}</span>
                            <span data-v-8dd4d0e6>{{item.date | moment("MMMM DD")}}</span>
                        </a>                        
                    </div>
                </transition>
                <div data-v-8dd4d0e6 class="birthday-controls">
                    <ul data-v-8dd4d0e6>
                        <li data-v-8dd4d0e6 class="icon-dot-dark-dims" v-for="(item, index) in birthdays" :key="index"
                            v-bind:class="{'icon-dot-dark': isCurrentSlideIndex(index), 'icon-dot-dark-transparent':!isCurrentSlideIndex(index)}"
                            v-on:click="setCurrentSlideIndex(index)">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</wizdomWebpart>
`;
  component.styles = `
.container[data-v-8dd4d0e6] {
  padding-bottom: 20px;
}
.container .icon-dot-dark[data-v-8dd4d0e6] {
    background-color: "[theme:neutralPrimary, default: #333333]";
}
.container .icon-dot-dark-transparent[data-v-8dd4d0e6] {
    background-color: "[theme:neutralQuaternary, default: #d0d0d0]";
}
.container .icon-birthday-flag-dims[data-v-8dd4d0e6] {
    width: 78px;
    height: 83px;
}
.container .icon-dot-dark-dims[data-v-8dd4d0e6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}
.container .birthday-heading[data-v-8dd4d0e6] {
    text-align: center;
    color: "[theme:neutralPrimary, default: #333333]";
}
.container .birthday-heading span[data-v-8dd4d0e6] {
      font-size: 17px;
      font-weight: 400;
}
.container .birthday-heading .ms-Icon--BirthdayCake[data-v-8dd4d0e6] {
      font-size: 42px;
      color: "[theme:neutralPrimary, default: #333333]";
}
.container .wizdomBirthdaySlider[data-v-8dd4d0e6] {
    position: relative;
    height: 100px;
    overflow: hidden;
}
.container .wizdomBirthdaySlider .birthdayPerson[data-v-8dd4d0e6] {
      text-align: center;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
}
.container .wizdomBirthdaySlider .birthdayPerson a[data-v-8dd4d0e6] {
        text-decoration: none;
        color: "[theme:neutralPrimary, default: #333333]";
}
.container .wizdomBirthdaySlider .birthdayPerson a span[data-v-8dd4d0e6] {
          display: block;
}
.container .birthday-controls ul[data-v-8dd4d0e6] {
    position: absolute;
    text-align: center;
    bottom: 0;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0 0 0 0;
    margin-bottom: 6px;
}
.container .birthday-controls ul li[data-v-8dd4d0e6] {
      margin: 2px;
      display: inline-block;
      cursor: pointer;
}
.slideLeft-enter[data-v-8dd4d0e6] {
  transform: translateX(100%);
}
.slideLeft-enter-to[data-v-8dd4d0e6] {
  transform: translateX(0);
}
.slideLeft-enter-active[data-v-8dd4d0e6] {
  position: absolute;
}
.slideLeft-leave[data-v-8dd4d0e6] {
  transform: translateX(0);
}
.slideLeft-leave-to[data-v-8dd4d0e6] {
  transform: translateX(-100%);
}
.slideLeft-enter-active[data-v-8dd4d0e6],
.slideLeft-leave-active[data-v-8dd4d0e6] {
  transition: all 500ms ease-in-out;
}
.slideRight-enter[data-v-8dd4d0e6] {
  transform: translateX(-100%);
}
.slideRight-enter-to[data-v-8dd4d0e6] {
  transform: translateX(0);
}
.slideRight-enter-active[data-v-8dd4d0e6] {
  position: absolute;
}
.slideRight-leave[data-v-8dd4d0e6] {
  transform: translateX(0);
}
.slideRight-leave-to[data-v-8dd4d0e6] {
  transform: translateX(200%);
}
.slideRight-enter-active[data-v-8dd4d0e6],
.slideRight-leave-active[data-v-8dd4d0e6] {
  transition: all 500ms ease-in-out;
}


`;

  return component;

});
