<template>
<div v-bind:id="contentId" class="{{{layoutSelector}}}">

      {{#each elements}}

        {{#is elementType "text"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value">\{{ {{{prop}}}.value }}</div>
        {{/is}}

        {{#is elementType "number"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value">\{{ {{{prop}}}.value }}</div>
        {{/is}}

        {{#is elementType "location"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value">Lat: \{{ {{{prop}}}.latitude }}, Long: \{{ {{{prop}}}.longitude }}</div>
        {{/is}}

        {{#is elementType "toggle"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value">\{{ {{{prop}}}.value ? "Toggle on": "Toggle off" }}</div>
        {{/is}}

        {{#is elementType "datetime"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value">\{{ new Date({{{prop}}}.value).toLocaleDateString() }} \{{ new Date({{{prop}}}.value).toLocaleTimeString() }}</div>
        {{/is}}

        {{#is elementType "formattedtext"}}
        <div data-wch-inline-edit="elements.{{{prop}}}.value" v-html='{{{prop}}}.value'></div>
        {{/is}}

        {{#is elementType "link"}}
        <br/>
        <a data-wch-inline-edit="elements.{{{prop}}}.value" :href='{{{prop}}}.linkURL'>\{{ {{{prop}}}.linkText }}</a>
        <br/>
        {{/is}}

        {{#is elementType "image"}}
        <img data-wch-inline-edit="elements.{{{prop}}}.value" :src='getImageUrl({{{prop}}})' :title='{{{prop}}}.title' :alt='{{{prop}}}.altText' :style='{height:"100px"}'/>
        {{/is}}

        {{#is elementType "video"}}
        <video data-wch-inline-edit="elements.{{{prop}}}.value" :src='getVideoUrl({{{prop}}})' :type='{{{prop}}}.asset.mediaType' controls :style='{height:"100px"}'></video>
        {{/is}}

        {{#is elementType "file"}}
        <a data-wch-inline-edit="elements.{{{prop}}}.value" :href='getFileUrl({{{prop}}})'> \{{ {{{prop}}}.asset.fileName }}</a>
        {{/is}}

        {{#is elementType "reference"}}
        <br/>
        <wch-content data-wch-inline-edit="elements.{{{prop}}}.value" :id='{{{prop}}}.value.id'/>
        <br/>
        {{/is}}

        {{#is elementType "optionselection"}}
        <select>
            <option data-wch-inline-edit="elements.{{{prop}}}.value" :value='{{{prop}}}.selection'>\{{ {{{prop}}}.value ? {{{prop}}}.value.selection : "no options available" }}</option>
        </select>
        {{/is}}

        {{#is elementType "category"}}
        <ul data-wch-inline-edit="elements.{{{prop}}}.value">
          \{{ {{{prop}}}.categories }}
          \{{ {{{prop}}}.categoryIds }}
        </ul>
        {{/is}}

      {{/each}}

</div>
</template>


<script>
  import {loadContent, getImageUrl, getVideoUrl, getFileUrl} from 'wch-flux-sdk';
	export default {
    methods: {
      getImageUrl,
      getVideoUrl,
      getFileUrl,
    },
		data: () => ({}),
		created () {
			loadContent(this.contentId);
		},
		computed: {
      {{#each elements}}

        {{{prop}}} () {
          if (this.$root.$data.content[this.contentId]) {
            return this.$root.$data.content[this.contentId].elements.{{{prop}}};
          }
          return null;
        },

      {{/each}}
		},
		props: ['contentId']
	}
</script>

<style lang="scss" src="styles/layouts/{{{fileName}}}.scss" scoped></style>
