panel.plugin("squareclouds/blocks-factory", {
  blocks: {
    // AUDIO
    audio: {
      computed: {
        source() {
          return this.content.source[0] || {};
        },
      },
      template: `
        <div>
          <div v-if="source.url">
          
            <h1>
              <k-writer
                  ref="title"
                  :inline="true"
                  marks="false"
                  :placeholder="'Keine Beschriftung'"
                  :value="content.title"
                  @input="update({ title: $event })"
                />
            </h1>
            <h2>
              <k-writer
                  ref="subtitle"
                  :inline="true"
                  marks="false"
                  :placeholder="'Keine Subheadline'"
                  :value="content.subtitle"
                  @input="update({ subtitle: $event })"
                />
            </h2>
            <audio controls>
              <source :src="source.url" type="audio/mpeg">
            </audio>
          </div>
          <div v-else>No audio selected</div>
        </div>
      `,
    },
    // TOAST
    toast: {
      computed: {
        textField() {
          return this.field("text");
        },
      },
      template: `
            <div :class="'k-innerblock-type-toast toast-' + content.toasttype">
              <k-writer
                class="label"
                ref="textbox"
                :marks="textField.marks"
                :value="content.text"
                :placeholder="textField.placeholder || 'Enter text...'"
                @input="update({ text: $event })"
              />
              <k-icon
                v-if="content.type !== 'neutral'"
                class="k-block-type-toast-icon"
                :type="content.toasttype"
              />
            </div>
          `,
    },

    // NEXT EVENT
    nextevent: {
      computed: {
        pagename() {
          return this.content.relatedpage[0] || {};
        },
      },
      template: `
            <div class="k-innerblock-type-nextevent">
              <div v-if="pagename.text">
                <h4>Selected Next Event: </h4>
                <h3 v-html="pagename.text"></h3>
              </div>
              <div v-else>No next event page selected yet</div>
            </div>
          `,
    },

    // ACCORDION ELEMENT
    accordion_element: {
      computed: {
        summaryField() {
          return this.field("summary");
        },
        detailsField() {
          return this.field("details");
        },
      },
      template: `
          <div @dblclick="open">
            <details>
              <summary>
                <k-writer
                  ref="summary"
                  :inline="true"
                  marks="false"
                  :placeholder="summaryField.placeholder || 'Add a summary…'"
                  :value="content.summary"
                  @input="update({ summary: $event })"
                />
              </summary>
              <k-writer
                  ref="details"
                  :inline="detailsField.inline || false"
                  :marks="detailsField.marks"
                  :value="content.details"
                  :placeholder="detailsField.placeholder || 'Add some details'"
                  @input="update({ details: $event })"
                />
            </details>
          </div>
        `,
    },

    // ACCORDION
    accordion: {
      computed: {
        accHeadingField() {
          return this.field("heading");
        },
      },

      template: `
      <div @dblclick="open">
        <div :data-level="content.level" class="k-block-type-heading-input padded">
          <k-writer
            ref="heading"
            :inline="accHeadingField.inline || false"
            :marks="accHeadingField.marks"
            :value="content.heading"
            :placeholder="accHeadingField.placeholder || 'Add some headline'"
            @input="update({ heading: $event })"
          />
        </div>
        
        <div v-if="content.elements.length">
          <details
            class="k-block-type-accset-item"
            v-for="(item, index) in content.elements"
            :key="index"
          >
            <summary v-html="item.content.summary"></summary>
              <div v-html="item.content.details"></div>
            </div>
          </details>
        </div>
        <div v-else>No items yet</div>
      </div>
    `,
    },

    // CARD
    card: {
      computed: {
        headingField() {
          return this.field("heading");
        },
        textField() {
          return this.field("text");
        },
        heading() {
          return this.content.heading || "Heading...";
        },
        image() {
          return this.content.image[0] || {};
        },
        text() {
          return this.content.text || "Text...";
        },
      },
      template: `
        <div @dblclick="open">
          <k-aspect-ratio
            class="k-block-type-card-image"
            cover="true"
            ratio="1/1"
          >
            <img
              v-if="image.url"
              :src="image.url"
              alt=""
            >
          </k-aspect-ratio>
          <h2 class="k-block-type-card-heading">
          <k-writer
            ref="input"
            :inline="headingField.inline"
            :marks="headingField.marks"
            :placeholder="headingField.placeholder"
            :value="content.heading"
            @input="update({ heading: $event })"
          />
          </h2>
          <k-writer
            ref="input"
            :inline="textField.inline"
            :marks="textField.marks"
            :nodes="textField.nodes"
            :placeholder="textField.placeholder"
            :value="content.text"
            class="k-block-type-card-text"
            @input="update({ text: $event })"
          />
        </div>
      `,
    },

    // BUTTON
    button: {
      computed: {
        page() {
          return this.content.linkedmodal[0] || "No page selected";
        },
      },
      template: `
          <div @dblclick="open">
            <input
              type="button"
              placeholder="Button text …"
              :value="content.btn_label"
              @input="update({ btn_label: $event.target.value })"
            />
          </div>
          `,
    },

    // VIDEOVLITE
    videovlite: {
      computed: {
        captionMarks() {
          return this.field("caption", { marks: true }).marks;
        },
        isExternal() {
          if (this.content.location === "web") {
            return false;
          }
          if (this.content.location === "kirby") {
            return false;
          }
          return true;
        },
        videosrc() {
          if (this.content.location === "web") {
            return this.content.src;
          } else if (
            this.content.location === "kirby" &&
            this.content.video[0]?.url
          ) {
            return this.content.video[0].url;
          } else if (this.content.location == "vimeo") {
            var vim = "https://vimeo.com/" + this.content.vimeoid;
            return vim;
          } else if (this.content.location == "youtube") {
            var yt = "https://youtu.be/" + this.content.youtubeid;
            return yt;
          }
          return false;
        },
        video() {
          return this.$helper.embed.video(this.videosrc, true);
        },
        empty() {
          return "Please select a video";
        },
      },
      template: `
      <div v-if="isExternal">
        <b v-html="videosrc"></b>
        <k-block-figure
        :caption="content.caption"
        :caption-marks="captionMarks"
        :empty-text="$t('field.blocks.video.placeholder') + ' …'"
        :is-empty="!video"
        empty-icon="video"
        @open="open"
        @update="update"
        >
          <k-aspect-ratio ratio="16/9">
          <iframe
          v-if="video"
          :src="video"
          referrerpolicy="strict-origin-when-cross-origin"
          />
          </k-aspect-ratio>
        </k-block-figure>
      </div>
      <div v-else>
      <b v-html="videosrc"></b>
        <k-block-figure
          :empty-text="empty + ' …'"
          :is-empty="!videosrc"
          @open="open"
          @update="update"
        >
          <k-aspect-ratio ratio="16/9">
            <video controls>
              <source
                v-if="videosrc"
                :src="videosrc" type="video/mp4">
              Your browser does not support the video tag.
            </video> 
          </k-aspect-ratio>
        </k-block-figure>
      </div>
      
          `,
    },
  },
});
