import { _ as __nuxt_component_49 } from './MainLoader-BFnVrwHB.mjs';
import { u as useI18n, g as useRoute, h as useRouter, b as useNuxtApp, i as useLocalePath, d as useLazyAsyncData, f as useRuntimeConfig, j as _sfc_main$3$1, _ as _sfc_main$g } from './server.mjs';
import { _ as _sfc_main$4 } from './MetaTags-C8KDkLj_.mjs';
import { defineAsyncComponent, withAsyncContext, watch, mergeProps, unref, withCtx, createVNode, openBlock, createBlock, Fragment, renderList, useSSRContext, resolveComponent } from 'vue';
import { ssrRenderAttrs, ssrRenderComponent, ssrInterpolate, ssrRenderList, ssrRenderAttr } from 'vue/server-renderer';
import { Carousel, Slide } from 'vue3-carousel/dist/carousel';
import { _ as _sfc_main$5 } from './BlogCard-z4kvdhKV.mjs';
import '../_/nitro.mjs';
import 'node:http';
import 'node:https';
import 'node:fs';
import 'node:url';
import 'ipx';
import 'node:path';
import 'unhead';
import '@unhead/shared';
import 'vue-router';
import 'vue-social-sharing';
import 'axios';
import '@headlessui/vue';
import 'yup';
import './components-BFogvFSQ.mjs';

const _sfc_main$3 = {
  __name: "BlogIntro",
  __ssrInlineRender: true,
  props: {
    item: {
      required: true
    }
  },
  setup(__props) {
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "lg:ms-[80px]" }, _attrs))}><p class="text-[#2A398C] font-semibold">${ssrInterpolate(__props.item.type)}</p><h1 class="mb-2 font-bold text-2xl">${ssrInterpolate(__props.item.title)}</h1><p class="text-[#9590C8] mb-5">${ssrInterpolate(__props.item.views)} ${ssrInterpolate(_ctx.$t("TITLES.views"))} | ${ssrInterpolate(__props.item.last_viewed_at)} | ${ssrInterpolate(_ctx.$t("TITLES.publishedOn"))}: ${ssrInterpolate(__props.item.published_at)} - ${ssrInterpolate(_ctx.$t("TITLES.lastUpdated"))}: ${ssrInterpolate(__props.item.updated_at)}</p></div>`);
    };
  }
};
const _sfc_setup$3 = _sfc_main$3.setup;
_sfc_main$3.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/blog/BlogIntro.vue");
  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
};
const _sfc_main$2 = {
  __name: "BlogContentSection",
  __ssrInlineRender: true,
  props: {
    item: {
      required: true
    }
  },
  setup(__props) {
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "border border-gray-300 rounded-lg p-4 h-fit" }, _attrs))}><h4 class="font-bold text-[24px] mb-4">${ssrInterpolate(_ctx.$t("TITLES.content"))}</h4><ul class="list-none text-[#8F98C5] space-y-3"><!--[-->`);
      ssrRenderList(__props.item.blog_contents, (content) => {
        _push(`<li><button type="button" class="font-medium text-base text-[#8F98C5] hover:text-[#2A398C] hover:text-opacity-100 hover:text-base transition-all duration-100 relative text-start group">${ssrInterpolate(content.title)} <span class="absolute left-0 bottom-0 w-0 h-1 bg-gradient-to-r from-[#2A398C] via-[#35428D] to-white transition-all duration-[2000ms] group-hover:w-full"></span></button></li>`);
      });
      _push(`<!--]--></ul></div>`);
    };
  }
};
const _sfc_setup$2 = _sfc_main$2.setup;
_sfc_main$2.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/blog/BlogContentSection.vue");
  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
};
const BlogContentSection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: _sfc_main$2
}, Symbol.toStringTag, { value: "Module" }));
const __nuxt_component_0_lazy = defineAsyncComponent(() => import('./BlogSocialMedia-Cj3AFZC1.mjs').then((c) => c.default || c));
const __nuxt_component_2_lazy = defineAsyncComponent(() => Promise.resolve().then(function() {
  return BlogContentSection;
}).then((c) => c.default || c));
const _sfc_main$1 = {
  __name: "BlogDetails",
  __ssrInlineRender: true,
  props: {
    item: {
      required: true
    }
  },
  setup(__props) {
    return (_ctx, _push, _parent, _attrs) => {
      var _a, _b;
      const _component_DelayHydration = resolveComponent("DelayHydration");
      const _component_lazy_blog_social_media = __nuxt_component_0_lazy;
      const _component_nuxt_img = _sfc_main$g;
      const _component_blog_content_section = _sfc_main$2;
      const _component_lazy_blog_content_section = __nuxt_component_2_lazy;
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "grid grid-cols-3 gap-4" }, _attrs))}><div class="col-span-3 lg:col-span-2"><div class="flex lg:flex-row flex-col gap-4">`);
      _push(ssrRenderComponent(_component_DelayHydration, null, {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(ssrRenderComponent(_component_lazy_blog_social_media, {
              class: "lg:w-[60px]",
              "route-link": "articles",
              item: __props.item
            }, null, _parent2, _scopeId));
          } else {
            return [
              createVNode(_component_lazy_blog_social_media, {
                class: "lg:w-[60px]",
                "route-link": "articles",
                item: __props.item
              }, null, 8, ["item"])
            ];
          }
        }),
        _: 1
      }, _parent));
      _push(`<div class="flex-1">`);
      _push(ssrRenderComponent(_component_nuxt_img, {
        format: "webp",
        src: __props.item.image,
        alt: __props.item.alt_image,
        class: "rounded-lg w-auto h-full max-h-[600px] object-cover",
        width: "600",
        height: "600",
        loading: "lazy",
        srcset: `${__props.item.image} 480w, ${__props.item.image} 1080w`
      }, null, _parent));
      _push(ssrRenderComponent(_component_blog_content_section, {
        class: "lg:hidden",
        item: __props.item
      }, null, _parent));
      _push(`</div></div><div class="lg:ms-[80px] mt-11"><div class="mb-2 mt-6 font-bold text-2xl md:text-3xl">${(_a = __props.item.title) != null ? _a : ""}</div><div class="mb-4">${(_b = __props.item.description) != null ? _b : ""}</div><!--[-->`);
      ssrRenderList(__props.item.blog_contents, (content) => {
        var _a2, _b2;
        _push(`<div${ssrRenderAttr("id", content.id)} class="mb-4 details_section">`);
        _push(ssrRenderComponent(_component_nuxt_img, {
          format: "webp",
          src: content.image,
          srcset: `${content.image} 480w, ${content.image} 1080w`,
          alt: content.alt_image,
          class: "rounded-lg w-fit h-auto",
          width: "200",
          height: "200",
          loading: "lazy"
        }, null, _parent));
        _push(`<div class="mb-4 mt-6 font-bold text-2xl md:text-3xl">${(_a2 = content.title) != null ? _a2 : ""}</div><div class="list_style_unset">${(_b2 = content.description) != null ? _b2 : ""}</div></div>`);
      });
      _push(`<!--]-->`);
      if (__props.item.tags.length) {
        _push(`<div><h3 class="text-2xl mb-2 font-medium">${ssrInterpolate(_ctx.$t("TITLES.tag"))}</h3><div class="flex gap-2 items-center flex-wrap"><!--[-->`);
        ssrRenderList(__props.item.tags, (tag) => {
          _push(`<span class="text-sm bg-primary rounded-lg text-white p-2">${ssrInterpolate(tag.title)}</span>`);
        });
        _push(`<!--]--></div></div>`);
      } else {
        _push(`<!---->`);
      }
      _push(`</div></div>`);
      _push(ssrRenderComponent(_component_DelayHydration, null, {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(ssrRenderComponent(_component_lazy_blog_content_section, {
              class: "col-span-3 lg:col-span-1 hidden lg:block",
              item: __props.item
            }, null, _parent2, _scopeId));
          } else {
            return [
              createVNode(_component_lazy_blog_content_section, {
                class: "col-span-3 lg:col-span-1 hidden lg:block",
                item: __props.item
              }, null, 8, ["item"])
            ];
          }
        }),
        _: 1
      }, _parent));
      _push(`</div>`);
    };
  }
};
const _sfc_setup$1 = _sfc_main$1.setup;
_sfc_main$1.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/blog/BlogDetails.vue");
  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const _sfc_main = {
  __name: "[slug]",
  __ssrInlineRender: true,
  async setup(__props) {
    let __temp, __restore;
    const config = useRuntimeConfig();
    const { locale, t } = useI18n();
    const route = useRoute();
    const router = useRouter();
    const axios = useNuxtApp().$axios;
    const localePath = useLocalePath();
    const { data: pageData, error, pending } = ([__temp, __restore] = withAsyncContext(() => useLazyAsyncData(
      `service`,
      () => axios.get(`blog/${route.params.slug}`, {
        baseURL: config.public.baseURL,
        headers: {
          "Accept-Language": locale.value
        }
      }).then((res) => res.data.data)
    )), __temp = await __temp, __restore(), __temp);
    watch(
      () => pageData.value,
      (newVal, old) => {
        if (old && old.id == newVal.id) {
          if (route.params.slug != newVal.slug) {
            router.push(localePath(`/articles/${pageData.value.slug}`));
          }
        }
      },
      {
        immediate: true,
        deep: true
      }
    );
    const breakpoints = {
      576: {
        itemsToShow: 2
      },
      992: {
        itemsToShow: 3
      }
    };
    return (_ctx, _push, _parent, _attrs) => {
      const _component_MainLoader = __nuxt_component_49;
      const _component_NotFound = _sfc_main$3$1;
      const _component_meta_tags = _sfc_main$4;
      const _component_blog_intro = _sfc_main$3;
      const _component_blog_details = _sfc_main$1;
      const _component_carousel = Carousel;
      const _component_slide = Slide;
      const _component_blog_card = _sfc_main$5;
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "py-11" }, _attrs))}>`);
      if (unref(pending)) {
        _push(ssrRenderComponent(_component_MainLoader, null, null, _parent));
      } else {
        _push(`<!---->`);
      }
      if (unref(error)) {
        _push(ssrRenderComponent(_component_NotFound, null, null, _parent));
      } else {
        _push(`<!---->`);
      }
      if (unref(pageData)) {
        _push(`<div class="container">`);
        _push(ssrRenderComponent(_component_meta_tags, {
          metas: unref(pageData).metas
        }, null, _parent));
        _push(ssrRenderComponent(_component_blog_intro, { item: unref(pageData) }, null, _parent));
        _push(ssrRenderComponent(_component_blog_details, { item: unref(pageData) }, null, _parent));
        _push(`<div class="container"><h2 class="text-[32px] font-bold mb-3">${ssrInterpolate(_ctx.$t("TITLES.relatedPosts"))}</h2>`);
        _push(ssrRenderComponent(_component_carousel, {
          breakpoints,
          autoplay: 5e3,
          "items-to-show": 1,
          transition: 1200,
          "pause-autoplay-on-hover": true,
          dir: unref(locale) == "ar" ? "rtl" : "ltr"
        }, {
          default: withCtx((_, _push2, _parent2, _scopeId) => {
            if (_push2) {
              _push2(`<!--[-->`);
              ssrRenderList(unref(pageData).related_blogs, (item) => {
                _push2(ssrRenderComponent(_component_slide, {
                  key: item.id
                }, {
                  default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                    if (_push3) {
                      _push3(ssrRenderComponent(_component_blog_card, {
                        class: "mx-1",
                        item
                      }, null, _parent3, _scopeId2));
                    } else {
                      return [
                        createVNode(_component_blog_card, {
                          class: "mx-1",
                          item
                        }, null, 8, ["item"])
                      ];
                    }
                  }),
                  _: 2
                }, _parent2, _scopeId));
              });
              _push2(`<!--]-->`);
            } else {
              return [
                (openBlock(true), createBlock(Fragment, null, renderList(unref(pageData).related_blogs, (item) => {
                  return openBlock(), createBlock(_component_slide, {
                    key: item.id
                  }, {
                    default: withCtx(() => [
                      createVNode(_component_blog_card, {
                        class: "mx-1",
                        item
                      }, null, 8, ["item"])
                    ]),
                    _: 2
                  }, 1024);
                }), 128))
              ];
            }
          }),
          _: 1
        }, _parent));
        _push(`</div></div>`);
      } else {
        _push(`<!---->`);
      }
      _push(`</div>`);
    };
  }
};
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/articles/[slug].vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};

export { _sfc_main as default };
//# sourceMappingURL=_slug_-DAd2_8MJ.mjs.map
