{include file=Template::get("page/components/panel-item-text.vue.html")}
{include file=Template::get("page/components/panel-item-image.vue.html")}
{include file=Template::get("page/components/panel-item-carousel.vue.html")}
{include file=Template::get("page/components/panel-item-video.vue.html")}
{include file=Template::get("page/components/panel-item-blog-carousel.vue.html")}
{include file=Template::get("page/components/tabbed-panel.vue.html")}
{include file=Template::get("page/components/panel-item-button__config.vue.html")}
{include file=Template::get("page/components/panel-item-mobile-challenge-blog.vue.html")}

<script type="x-template" id="panel-item">
  <section
    :class="[
      'cwd-core-panel',
      'cwd-core-panel--' + panel.settings.type,
      panelCount === 2 && panel.settings.size === 'wide' ? 'cwd-core-panel--wide' : ''
    ]"
    :style="['text','image','video','line'].indexOf(panel.settings.type) >= 0 ? padding : null"
    v-if="
      panel.settings.type === 'text' ||
      panel.settings.type === 'image' ||
      panel.settings.type === 'challenge-carousel' ||
      panel.settings.type === 'blog-carousel' ||
      panel.settings.type === 'video' ||
      panel.settings.type === 'blog'
    "
  >
    <div :class="['cwd-core-panel__content', 'cwd-core-panel__content--' + panel.settings.type]">
      <template v-if="panel.settings.type === 'challenge-carousel' && mode !== 'mobile'">
        <panel-item-carousel :panel="panel" :mode="mode" :data="data && data.carouselData" :preview="preview"></panel-item-carousel>
      </template>
      <template v-else-if="panel.settings.type === 'image'">
        <panel-item-image :panel="panel" :translation="translation"></panel-item-image>
      </template>
      <template v-else-if="panel.settings.type === 'text'">
        <panel-item-text :panel="panel" :translation="translation"></panel-item-text>
      </template>
      <template v-else-if="panel.settings.type === 'video'">
        <panel-item-video :panel="panel"></panel-item-video>
      </template>
      <template v-else-if="panel.settings.type === 'blog-carousel' && mode !== 'mobile'">
        <panel-item-blog-carousel :panel="panel" :data="data && data.carouselData" :panelSize="panelCount" :hasWideSibling="hasWideSibling"></panel-item-blog-carousel>
      </template>
      <template v-else-if="mode === 'mobile' && (panel.settings.type === 'challenge-carousel' || panel.settings.type === 'blog-carousel')">
        <panel-item-mobile-challenge-blog :panel="panel" :data="data && data.carouselData"></panel-item-mobile-challenge-blog>
      </template>
    </div>
  </section>
  <div v-else-if="panel.settings.type === 'line'" :class="['cwd-core-separator', panel.settings.size === 'wide' ? 'cwd-core-separator--wide' : '']" :style="padding">
    <hr class="cwd-core-separator__hr" />
  </div>
  <tabbed-panel
    v-else
    :panel="panel"
    :preview="preview"
    :data="data"
    :class="['cwd-core-panel', panelCount === 2 && panel.settings.size === 'wide' ? 'cwd-core-panel--wide' : '']"
  ></tabbed-panel>
</script>

<script>
  Vue.component('panel-item', {
    template: '#panel-item',
    data: function() {
      var settings = this.panel.settings;
      return {
        padding: {
          padding: settings.top + 'px ' + settings.right + 'px ' + settings.bottom + 'px ' + settings.left + 'px'
        },
      }
    },
    props: {
      panel: Object,
      translation: String,
      data: Object,
      preview: Boolean,
      hasWideSibling: Boolean,
      mode: String,
      rowLength: Number,
      panelCount: Number,
    },
  });
</script>