import { defineComponent as v, computed as b, resolveComponent as a, unref as e, openBlock as n, createElementBlock as l, normalizeStyle as c, createElementVNode as s, createVNode as r, toDisplayString as f, createCommentVNode as k } from "vue";
import { useUser as x, useColor as g, useBackground as y } from "./composables-5f691338.js";
const C = { class: "flex items-center" }, h = { class: "text-2xl mx-2 font-bold" }, w = /* @__PURE__ */ s("div", { class: "flex-1" }, null, -1), z = {
  key: 0,
  class: "i-la-lock"
}, B = {
  key: 1,
  class: "i-la-unlock"
}, N = /* @__PURE__ */ s("div", { class: "i-ion-exit-outline" }, null, -1), V = [
  N
], P = /* @__PURE__ */ v({
  __name: "UserPanel",
  emits: ["browse"],
  setup(E, { emit: S }) {
    const { user: t, leave: u } = x();
    g("deep");
    const d = b(() => y({ pub: t.pub, size: 600, light: 0.5, draw: "circles" }));
    return (U, o) => {
      var i;
      const m = a("user-avatar"), p = a("mate-button");
      return e(t).is ? (n(), l("div", {
        key: 0,
        class: "p-4 flex items-center w-full",
        style: c({ ...e(d) })
      }, [
        s("div", C, [
          r(m, { size: 120 }),
          s("div", h, f((i = e(t)) == null ? void 0 : i.name), 1)
        ]),
        r(p, {
          pub: e(t).pub
        }, null, 8, ["pub"]),
        w,
        s("div", {
          class: "p-1 m-1 rounded-full transition-all duration-300 ease-in-out",
          style: c({ backgroundColor: e(t).blink ? "white" : "black" })
        }, null, 4),
        s("button", {
          class: "p-2 text-2xl",
          onClick: o[0] || (o[0] = (_) => e(t).db.get("safe").get("saved").put(!e(t).safe.saved))
        }, [
          e(t).safe.saved ? (n(), l("div", z)) : (n(), l("div", B))
        ]),
        s("button", {
          class: "text-2xl ml-1 p-2",
          onClick: o[1] || (o[1] = (_) => e(u)())
        }, V)
      ], 4)) : k("", !0);
    };
  }
});
export {
  P as default
};
//# sourceMappingURL=UserPanel-46e9a5cf.js.map
