import { defineComponent, onMounted, mergeProps, unref, useSSRContext } from "vue";
import { ssrRenderAttrs, ssrRenderClass, ssrRenderList, ssrRenderStyle, ssrInterpolate, ssrRenderComponent } from "vue/server-renderer";
import { Link } from "@inertiajs/vue3";
import Swiper from "swiper/bundle";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "BlogCategoryList1",
  __ssrInlineRender: true,
  props: {
    status: {},
    component_id: {},
    data: {}
  },
  setup(__props) {
    const props = __props;
    const swiperCategoriesSlider = () => {
      new Swiper(".swiper-blog-categories-" + props.component_id, {
        slidesPerView: 8,
        spaceBetween: 20,
        autoplay: {
          delay: 1e4
        },
        loop: props.data.category_list.categories != null ? props.data.category_list.categories.length >= 9 ? true : false : false,
        breakpoints: {
          120: {
            slidesPerView: 2,
            spaceBetween: 8
          },
          320: {
            slidesPerView: 3,
            spaceBetween: 8
          },
          375: {
            slidesPerView: 4,
            spaceBetween: 8
          },
          540: {
            slidesPerView: 5,
            spaceBetween: 20
          },
          768: {
            slidesPerView: 6,
            spaceBetween: 20
          },
          992: {
            slidesPerView: 7,
            spaceBetween: 20
          },
          1100: {
            slidesPerView: 9,
            spaceBetween: 20
          }
        },
        navigation: {
          nextEl: ".swiper-blog-categories-" + props.component_id + " .swiper-button-next",
          prevEl: ".swiper-blog-categories-" + props.component_id + " .swiper-button-prev"
        }
      });
    };
    onMounted(() => {
      swiperCategoriesSlider();
    });
    return (_ctx, _push, _parent, _attrs) => {
      var _a, _b, _c;
      _push(`<div${ssrRenderAttrs(mergeProps({
        class: { container: true, readonly: _ctx.status == "dev" },
        style: "margin-top:" + ((_a = _ctx.data.style) == null ? void 0 : _a.margin.top) + "px; margin-bottom:" + (((_b = _ctx.data.style) == null ? void 0 : _b.margin.bottom) != null ? (_c = _ctx.data.style) == null ? void 0 : _c.margin.bottom : 20) + "px;"
      }, _attrs))}><div class="blog-categories"><div class="eight-grid"><div class="${ssrRenderClass("swiper swiper-blog-categories-" + props.component_id)}"><div class="swiper-wrapper">`);
      if (_ctx.data.category_list.categories != void 0 && _ctx.data.category_list.categories.length > 0) {
        _push(`<!--[-->`);
        ssrRenderList(_ctx.data.category_list.categories, (category) => {
          _push(`<div class="swiper-slide"><div class="eight-grid--item shadow-1"><div class="grid-thumbnail"><div class="grid-thumbnail--level-one"><div class="grid-thumbnail--level-two"><div class="image" style="${ssrRenderStyle(`background-image: url('${category.get_last_article_image.url}')`)}"></div></div></div></div><div class="eight-grid--item-overly"></div><h2 class="eight-grid--item-title">${ssrInterpolate(category.title)}</h2>`);
          _push(ssrRenderComponent(unref(Link), {
            class: "eight-grid--item-link",
            href: _ctx.route("blog.articles.index", { cat: category.slug })
          }, null, _parent));
          _push(`</div></div>`);
        });
        _push(`<!--]-->`);
      } else {
        _push(`<!--[-->`);
        ssrRenderList(new Array(10), (d) => {
          _push(`<div class="${ssrRenderClass({ "swiper-slide": true, readonly: _ctx.status == "dev" })}"><div class="eight-grid--item shadow-1"><div class="grid-thumbnail"><div class="grid-thumbnail--level-one"><div class="grid-thumbnail--level-two"><div class="image" style="${ssrRenderStyle(`background-image: url('${_ctx.$page.props.appUrl + "/img/temp/pre-load-article.png"}')`)}"></div></div></div></div><a class="eight-grid--item-link" href="javascript:void(0)"></a></div></div>`);
        });
        _push(`<!--]-->`);
      }
      _push(`</div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div></div></div>`);
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("resources/js/Components/Blog/UI/Lists/Categories/BlogCategoryList1.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
export {
  _sfc_main as default
};
