{include file=Template::get("page/components/admin_panel-item-text.vue.html")}
{include file=Template::get("page/components/admin_panel-item-image.vue.html")}
{include file=Template::get("page/components/admin_panel-item-carousel.vue.html")}
{include file=Template::get("page/components/admin_panel-item-leaderboard.vue.html")}
{include file=Template::get("page/components/admin_panel-item-ideas.vue.html")}
{include file=Template::get("page/components/admin_panel-item-video.vue.html")}
{include file=Template::get("page/components/admin_panel-item-blog-carousel.vue.html")}


<script type="x-template" id="admin-panel-item">
  <section
    :class="[
      'cwd-admin-panel',
      'mdl-pages-cms__panel',
      panel.settings.hasError ? 'cwd-admin-panel--error' : '',
      panelCount === 2 && settings.size === 'wide' ? 'cwd-admin-panel--wide' : ''
    ]"
    :data-type="panel.settings.type"
    :id="'panel_' + panel.id"
    >
      <header class="cwd-admin-panel__header mdl-pages-cms__panel-header">
        <div class="cwd-admin-panel__handle">
          <span class="cwd-admin-panel__icon cwd-admin-panel__icon--vertical-ellipsis cwd-admin-panel__icon--vertical-ellipsis-double panel-icon--drag" aria-hidden="true"></span>
          <span :class="['mdl-icon -s', 'panel-icon--type', panelType.icon]" aria-hidden="true">
            <svg><use :href="'#' + panelType.icon"></use></svg>
          </span>
          {literal}
            {{panelType.name}}
          {/literal}
        </div>
        <div class="cwd-admin-dropdown__container cwd-admin-dropdown__container--small">
          <button @click="optionsOpen = !optionsOpen" class="cwd-admin-panel__header-button">
            <span v-if="optionsOpen" class="mdl-icon -s"><svg><use href="#cancel"></use></span>
            <span v-else class="mdl-icon -s"><svg><use href="#more"></use></span>
          </button>
          <nav v-show="optionsOpen" class="cwd-admin-dropdown mdl-dropdown__items">
            <ul :class="['text','image','video','line'].indexOf(settings.type) >= 0 && 'cwd-admin-form'" v-on-clickaway="closeOptions">
              <li v-if="panelCount === 2" class="mdl-form__item cwd-admin-dropdown__item">
                <label :for="'panel-type-options__width' + panel.id" class="mdl-form__label">
                  {'Panel size'|gettext}
                </label>
                <select
                  @change="handlePanelSizeChange"
                  v-model="settings.size"
                  :id="'panel-type-options__width' + panel.id"
                  class="mdl-form__input -select"
                >
                  <option value="auto">{'Auto'|gettext}</option>
                  <option value="wide">{'Wide'|gettext}</option>
                </select>
              </li>
              <template v-if="['text','image','video','line'].indexOf(settings.type) >= 0">
                <li class="cwd-admin-dropdown__item mdl-form__item"><strong>{'Padding'|gettext}</strong> ({'pixels'|gettext})</li>
                <li
                  v-for="pos in [{ key: 'top', name: '{'Top'|gettext}' }, { key: 'bottom', name: '{'Bottom'|gettext}' }, { key: 'left', name: '{'Left'|gettext}' }, { key: 'right', name: '{'Right'|gettext}' }]"
                  class="mdl-form__item cwd-admin-dropdown__item"
                >
                  <label :for="'panel-type-options__padding-' + pos.key + '-' + panel.id" class="mdl-form__label">
                    {literal}{{pos.name}}{/literal}
                  </label>
                  <input
                    v-model="settings[pos.key]"
                    type="number"
                    @blur="settings[pos.key] ? true : settings[pos.key] = 0"
                    @keyup="handleSettingsChange(false)"
                    @change="handleSettingsChange(false)"
                    class="mdl-form__input"
                    :id="'panel-type-options__padding-' + pos.key + '-' + panel.id"
                  >
                </li>
              </template>
              <li class="cwd-admin-dropdown__item mdl-form__item">
                <a @click="deletePanel(panel.id)" class="cwd-admin-dropdown__link cwd-admin-dropdown__link--danger">{'Delete panel'|gettext}</a>
              </li>
            </ul>
          </nav>
        </div>
      </header>
      <div class="cwd-admin-panel__content mdl-pages-cms__panel-content">
        <div class="cwd-admin-panel__content-container" :style="{ padding: panel.settings.top + 'px ' + panel.settings.right + 'px ' + panel.settings.bottom + 'px ' + panel.settings.left + 'px'}">
          <template v-if="settings.type === 'challenge-carousel'">
            <admin-panel-item-carousel :panel="panel" :handle-panel-settings-change="handlePanelSettingsChange"></admin-panel-item-carousel>
          </template>
          <template v-if="settings.type === 'image'">
            <admin-panel-item-image :panel="panel" :handle-panel-settings-change="handlePanelSettingsChange"></admin-panel-item-image>
          </template>
          <template v-if="settings.type === 'activity'">
              <p>{'Activity panels display recent user, idea and challenge activity from across your community.'|gettext}</p>
          </template>
          <template v-if="settings.type === 'leaderboard'">
            <admin-panel-item-leaderboard :panel="panel" :handle-panel-settings-change="handlePanelSettingsChange"></admin-panel-item-leaderboard>
          </template>
          <template v-if="settings.type === 'text'">
            <admin-panel-item-text :panel="panel" :handle-panel-settings-change="handlePanelSettingsChange" :status="status" :index="panelIndex"></admin-panel-item-text>
          </template>
          <template v-if="settings.type === 'ideas'">
            <admin-panel-item-ideas :panel="panel" :handle-panel-settings-change="handlePanelSettingsChange"></admin-panel-item-ideas>
          </template>
          <template v-if="settings.type === 'video'">
            <admin-panel-item-video :panel="panel" :handle-panel-settings-change="handlePanelSettingsChange"></admin-panel-item-video>
          </template>
          <template v-if="settings.type === 'blog-carousel'">
            <admin-panel-item-blog-carousel :panel="panel" :handle-panel-settings-change="handlePanelSettingsChange"></admin-panel-item-blog-carousel>
          </template>
          <template v-if="settings.type === 'line'">
            <div class="cwd-core-separator">
              <hr class="cwd-core-separator__hr cwd-admin-panel--line" />
            </div>
          </template>
        </div>
      </div>
    </section>
</script>

<script>
  Vue.component('admin-panel-item', {
    template: '#admin-panel-item',
    data: function () {
      return {
        optionsOpen: false,
        panelType: {},
        settings: {
          size: 'auto',
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
        }
      }
    },
    updated: function () {
      this.settings.size = this.panel.settings.size;
    },
    mounted: function() {
      var settings = ['size','top','right','bottom','left','type'];
      for(var i = 0; i < settings.length; i++) {
        if (this.panel.settings[settings[i]]) {
          this.settings[settings[i]] = this.panel.settings[settings[i]];
        }
      }
      var that = this;
      if (this.panel.settings) {
        this.panelType = this.panelTypes.filter(function(type){ return type.id === that.panel.settings.type; })[0];
      }
    },
    methods: {
      handleSettingsChange: function(closeDropdown) {
        if (closeDropdown) {
          this.optionsOpen = false;
        }
        this.handlePanelSettingsChange(this.panel.id, this.settings);
      },
      handlePanelSizeChange: function() {
        this.onResizeRowPanels(this.rowIndex, this.panel.id, this.settings.size);
        this.handleSettingsChange(true);
      },
      closeOptions: function(e) {
        if (
          this.optionsOpen &&
          (
            (!e.target instanceof SVGElement) ||
            (typeof e.target.className === 'string' && (e.target.className.indexOf('cwd-admin-panel__header-button') < 0 && e.target.className.indexOf('mdl-icon') < 0))
          )
        ) {
          this.optionsOpen = false;
        }
      }
    },
    directives: {
      onClickaway: VueClickaway.directive,
    },
    props: {
      deletePanel: Function,
      handlePanelSettingsChange: Function,
      panel: Object,
      name: String,
      type: String,
      panelTypes: Array,
      panelCount: Number,
      rowIndex: Number,
      panelIndex: Number,
      onResizeRowPanels: Function,
      status: Object,
    },
  });
</script>