define(function () {

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

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

  component.originalTemplate = "list";
  component.template = `
<wizdomWebpart data-v-c3e447ea v-if="todaysMenu && currentCanteen" :environmentInfo="environmentInfo" :title="todaysMenu.date | date('MMMM')"
  :chromeProperties="webpartProperties.chromeProperties" :image="todaysMenu.imageUrl" :dynamicData="todaysMenu.date | date('D')"
  chromeType="visual" :webpartPadding="true">
    <div data-v-c3e447ea class="ms-Grid flex-Container revert-Padding">
      <div data-v-c3e447ea class="ms-Grid-row">
        <div data-v-c3e447ea class="ms-Grid-col ms-sm12 edit-container">
          <div data-v-c3e447ea class="datetime">
            <datepicker data-v-c3e447ea v-model="selectedDate" @input="dateSelected"></datepicker>
          </div>
        </div>
      </div>
      <div data-v-c3e447ea class="ms-Grid-row">
        <!-- ********** editMode icon start ********** -->
        <div data-v-c3e447ea class="ms-Grid-col ms-sm12 ms-md8 edit-container">
          <div data-v-c3e447ea v-if="currentCanteen.isEditor && !editMode" class="edit-icon">
            <span data-v-c3e447ea @click="toggleEditMode" class="clickable">
              <i data-v-c3e447ea class="ms-Icon ms-Icon--Edit aling-icon"></i>
              <a data-v-c3e447ea>{{'Edit' | translate}}</a>
            </span>
          </div>
          <div data-v-c3e447ea v-if="currentCanteen.isEditor && editMode" class="edit-icon">
            <span data-v-c3e447ea @click="toggleEditMode" class="clickable">
              <i data-v-c3e447ea class="ms-Icon ms-Icon--SaveAs aling-icon"></i>
              <a data-v-c3e447ea>{{'Save' | translate}}</a>
            </span>
          </div>
        </div>
        <!-- ********** editMode icon end ********** -->
        <div data-v-c3e447ea v-if="editMode" class="ms-Grid-col ms-sm12 ms-md4 image-uploader">
          <image-uploader data-v-c3e447ea class="image-uploader-icon" @imageUploaded="imageUploaded" />
        </div>
      </div>
      <div data-v-c3e447ea class="ms-Grid-row">
        <div data-v-c3e447ea class="ms-Grid-col ms-md12 menu-container">
          <div data-v-c3e447ea v-if="!editMode">
            <div data-v-c3e447ea class="content">
              <div data-v-c3e447ea v-if="todaysMenu.description" v-richtext-View v-html="todaysMenu.description">
              </div>
              <div data-v-c3e447ea v-else>
                <!-- {{'No menu' | translate}} -->
                {{'Currently no menu available' | translate}}
              </div>
            </div>
            <div data-v-c3e447ea class="content" v-richtext-View v-html="todaysMenu.nutrition">
            </div>
          </div>
        </div>
        <!-- EditMode ↓ -->
        <div data-v-c3e447ea v-if="editMode" class="content-editmode">
          <div data-v-c3e447ea class="ms-Grid-row">
            <div data-v-c3e447ea class="ms-Grid-col ms-md12">
              <div data-v-c3e447ea class="content" @click="focusEditorOn('description')" ref="description">
                <div data-v-c3e447ea v-if="!isEdit('description')" @click="setEdit('description', true)" class="clickable editable">
                  <i data-v-c3e447ea class="ms-Icon ms-Icon--Edit edit-menu aling-icon"></i>
                  <div data-v-c3e447ea v-if="todaysMenu.description" v-richtext-View v-html="todaysMenu.description" class="editmode-content-spacing"></div>                    
                  <div data-v-c3e447ea v-else class="editmode-content-spacing">
                    {{'Insert menu' | translate}}
                  </div>
                </div>
                <div data-v-c3e447ea v-if="isEdit('description')">
                  <richText data-v-c3e447ea v-model="editObject['description'].value" toolbarConfiguration='TodaysMenu'></richText>
                  <div data-v-c3e447ea class="clearfix">
                    <uiButton data-v-c3e447ea @click="discardChanges('description')" class="pull-right">{{'Cancel' | translate}}</uiButton>
                    <uiButton data-v-c3e447ea type="primary" @click="saveChanges('description')" class="pull-right">{{'Save' | translate}}</uiButton>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div data-v-c3e447ea class="ms-Grid-row">
            <div data-v-c3e447ea class="ms-Grid-col ms-md12">
              <div data-v-c3e447ea class="editmode-header">
                {{'Nutrition' | translate}}
              </div>
            </div>
          </div>
          <div data-v-c3e447ea class="ms-Grid-row">
            <div data-v-c3e447ea class="ms-Grid-col ms-md12">
              <div data-v-c3e447ea class="content" @click="focusEditorOn('nutrition')" ref="nutrition">
                <div data-v-c3e447ea v-if="!isEdit('nutrition')" @click="setEdit('nutrition', true)" class="clickable editable">
                  <i data-v-c3e447ea class="ms-Icon ms-Icon--Edit edit-menu aling-icon"></i>
                  <div data-v-c3e447ea v-if="todaysMenu.nutrition" v-richtext-View v-html="todaysMenu.nutrition" class="editmode-content-spacing"></div>
                  <div data-v-c3e447ea v-else class="editmode-content-spacing">{{'Insert nutrition' | translate}}</div>
                </div>
                <div data-v-c3e447ea v-if="isEdit('nutrition')">
                  <richText data-v-c3e447ea v-model="editObject['nutrition'].value" toolbarConfiguration='TodaysMenu'></richText>
                  <div data-v-c3e447ea class="clearfix">
                    <uiButton data-v-c3e447ea @click="discardChanges('nutrition')" class="pull-right">{{'Cancel' | translate}}</uiButton>
                    <uiButton data-v-c3e447ea type="primary" @click="saveChanges('nutrition')" class="pull-right">{{'Save' | translate}}</uiButton>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- EditMode end -->
      </div>
      <div data-v-c3e447ea class="ms-Grid-row location-picker">
        <div data-v-c3e447ea class="ms-Grid-col dropdown-container" v-if="canteens.length">
          <uiDropdown data-v-c3e447ea class="dropdown" v-model="dropdownCanteen" @input="selectChanged">
            <uiDropdownItem data-v-c3e447ea v-for="canteen in canteens" :key="canteen.id" :value="canteen.id">{{canteen.title}}</uiDropdownItem>
          </uiDropdown>
        </div>
      </div>
    </div>
</wizdomWebpart>
`;
  component.styles = `
.aling-icon[data-v-c3e447ea] {
  vertical-align: sub;
}
.edit-icon[data-v-c3e447ea] {
  color: "[theme:bodyText, default:#333333]";
}
.edit-container[data-v-c3e447ea] {
  padding: 8px 0;
}
.commandbar .ms-Grid-col[data-v-c3e447ea] {
  padding: 0;
}
.datetime[data-v-c3e447ea] {
  float: right;
}
.image-uploader[data-v-c3e447ea] {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0;
}
.content-editmode[data-v-c3e447ea] {
  padding: 0;
}
.editmode-header[data-v-c3e447ea] {
  font-weight: 700;
  margin-bottom: 8px;
  color: "[theme:bodyText, default:#333333]";
}
.editmode-content-spacing[data-v-c3e447ea] {
  margin-right: 20px;
}
.menu-container[data-v-c3e447ea] {
  display: flex;
  padding: 0;
}
.content[data-v-c3e447ea] {
  position: relative;
  margin: 8px 0;
  color: "[theme:bodyText, default:#333333]";
}
.menu-info[data-v-c3e447ea] {
  height: 100%;
  padding-right: 10px;
  margin-bottom: 10px;
  overflow: visible;
}
.clickable[data-v-c3e447ea] {
  cursor: pointer;
  user-select: none;
}
.clickable.underline[data-v-c3e447ea]:hover,
  .clickable .underline[data-v-c3e447ea]:hover {
    text-decoration: underline;
}
.clickable.editable[data-v-c3e447ea]:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
.clearfix[data-v-c3e447ea]::after {
  display: block;
  content: "";
  clear: both;
}
.edit-menu[data-v-c3e447ea] {
  position: absolute;
  top: 2px;
  right: 0px;
}
.dropdown-container[data-v-c3e447ea] {
  padding: 0;
}


`;

  return component;

});
