import { _ as __nuxt_component_0 } from "./SelectField-Cu-FGEiZ.js";
import { defineComponent, ref, mergeProps, unref, isRef, useSSRContext } from "vue";
import { ssrRenderAttrs, ssrRenderList, ssrRenderClass, ssrInterpolate, ssrRenderStyle, ssrRenderComponent } from "vue/server-renderer";
import "../server.mjs";
import "D:/laragon backup/www/Fikri/Report System/FE/node_modules/ofetch/dist/node.mjs";
import "#internal/nuxt/paths";
import "D:/laragon backup/www/Fikri/Report System/FE/node_modules/hookable/dist/index.mjs";
import "D:/laragon backup/www/Fikri/Report System/FE/node_modules/unctx/dist/index.mjs";
import "D:/laragon backup/www/Fikri/Report System/FE/node_modules/h3/dist/index.mjs";
import "vue-router";
import "D:/laragon backup/www/Fikri/Report System/FE/node_modules/defu/dist/defu.mjs";
import "D:/laragon backup/www/Fikri/Report System/FE/node_modules/ufo/dist/index.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "settings",
  __ssrInlineRender: true,
  setup(__props) {
    const sections = [
      { id: "profile", label: "Profile" },
      { id: "security", label: "Security" },
      { id: "preferences", label: "Preferences" }
    ];
    const activeSection = ref("profile");
    const selectedTheme = ref("light");
    const selectedLanguage = ref("en");
    const themeOptions = [
      { label: "Light mode", value: "light" },
      { label: "Dark mode", value: "dark" }
    ];
    const languageOptions = [
      { label: "English", value: "en" },
      { label: "Bahasa Indonesia", value: "id" }
    ];
    return (_ctx, _push, _parent, _attrs) => {
      const _component_UiSelectField = __nuxt_component_0;
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "mx-auto max-w-7xl space-y-6" }, _attrs))}><header class="flex flex-wrap items-center justify-between gap-3"><div><h1 class="text-2xl font-semibold tracking-tight">Settings</h1><p class="text-sm text-text-secondary">Manage profile, security, notifications, and workspace preferences.</p></div><button class="btn-primary">Save All Changes</button></header><section class="grid gap-4 lg:grid-cols-[240px_1fr]"><aside class="card p-3"><nav class="space-y-1"><!--[-->`);
      ssrRenderList(sections, (section) => {
        _push(`<button class="${ssrRenderClass([unref(activeSection) === section.id ? "bg-brand-50 text-brand-700" : "text-text-secondary hover:bg-brand-50/70 hover:text-text-primary", "w-full rounded-xl px-3 py-2 text-left text-sm transition"])}">${ssrInterpolate(section.label)}</button>`);
      });
      _push(`<!--]--></nav></aside><div class="space-y-4"><article class="card space-y-5 p-5 sm:p-6 transition-all" style="${ssrRenderStyle(unref(activeSection) === "profile" ? null : { display: "none" })}"><div class="flex items-center justify-between"><h2 class="text-lg font-semibold">Profile Settings</h2><span class="chip">Public Info</span></div><div class="grid gap-4 sm:grid-cols-2"><div><label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Full Name</label><input class="input" placeholder="Fikri Ahmad"></div><div><label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Work Email</label><input class="input" placeholder="fikri@company.com"></div><div class="sm:col-span-2"><label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Job Title</label><input class="input" placeholder="Senior Backend Engineer"></div></div></article><article class="card space-y-5 p-5 sm:p-6 transition-all" style="${ssrRenderStyle(unref(activeSection) === "security" ? null : { display: "none" })}"><div class="flex items-center justify-between"><h2 class="text-lg font-semibold">Password &amp; Security</h2><span class="chip">Protected</span></div><div class="grid gap-4 sm:grid-cols-2"><div><label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Current Password</label><input class="input" type="password" placeholder="••••••••"></div><div><label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">New Password</label><input class="input" type="password" placeholder="••••••••"></div></div><div class="card-muted p-4"><p class="text-sm font-medium">Active Device Sessions</p><div class="mt-3 space-y-2 text-sm"><div class="flex items-center justify-between rounded-lg border border-surface-border bg-white/70 px-3 py-2 dark:bg-slate-900/50"><span>Windows · Chrome · Jakarta</span><span class="chip">Current</span></div><div class="flex items-center justify-between rounded-lg border border-surface-border bg-white/70 px-3 py-2 dark:bg-slate-900/50"><span>Android · Mobile App</span><button class="text-xs text-brand-700">Revoke</button></div></div></div></article><article class="card space-y-5 p-5 sm:p-6 transition-all" style="${ssrRenderStyle(unref(activeSection) === "preferences" ? null : { display: "none" })}"><h2 class="text-lg font-semibold">Preferences</h2><div class="grid gap-4 sm:grid-cols-2"><div><label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Theme</label>`);
      _push(ssrRenderComponent(_component_UiSelectField, {
        modelValue: unref(selectedTheme),
        "onUpdate:modelValue": ($event) => isRef(selectedTheme) ? selectedTheme.value = $event : null,
        options: themeOptions,
        placeholder: "Choose theme"
      }, null, _parent));
      _push(`</div><div><label class="mb-2 block text-xs uppercase tracking-wide text-text-secondary">Language</label>`);
      _push(ssrRenderComponent(_component_UiSelectField, {
        modelValue: unref(selectedLanguage),
        "onUpdate:modelValue": ($event) => isRef(selectedLanguage) ? selectedLanguage.value = $event : null,
        options: languageOptions,
        placeholder: "Choose language"
      }, null, _parent));
      _push(`</div></div><div class="space-y-3"><label class="card-muted flex items-center justify-between p-3 text-sm"> Report reminder notifications <span class="relative inline-flex h-6 w-11 items-center rounded-full bg-brand-500"><span class="absolute right-1 h-4 w-4 rounded-full bg-white transition"></span></span></label><label class="card-muted flex items-center justify-between p-3 text-sm"> Mention and comment alerts <span class="relative inline-flex h-6 w-11 items-center rounded-full bg-brand-500"><span class="absolute right-1 h-4 w-4 rounded-full bg-white transition"></span></span></label><label class="card-muted flex items-center justify-between p-3 text-sm"> Weekly summary email <span class="relative inline-flex h-6 w-11 items-center rounded-full bg-slate-300 dark:bg-slate-700"><span class="absolute left-1 h-4 w-4 rounded-full bg-white transition"></span></span></label></div></article></div></section></div>`);
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/settings.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
export {
  _sfc_main as default
};
//# sourceMappingURL=settings-BhHnbCUJ.js.map
