Vue.component("icon", {
  template: `
    <div class="single-icon">
      <span
        v-bind:class="this.class"
        v-on:click="copyToClipboard(utf8)"
        class="actual-icon"
        ref="icon">
        <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span>
        </span>
      <span
      class="copy-icon-popup"
      v-bind:class="{ 'success': isCopied}"
      ref="element">Copied!</span>
      <p
        class="icon-name"
        v-on:click="copyToClipboard(span)"
        ref="span">{{ this.name }}</p>
    </div>
    `,
  props: ["name"],
  data() {
    return {
      utf8: "",
      isCopied: false,
    };
  },
  computed: {
    class: function () {
      return "brz9-icon-" + this.name;
    },
    span: function () {
      return (
        '<span class="brz9-icon-' +
        this.name +
        '"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span></span>'
      );
    },
  },
  methods: {
    copyToClipboard(text) {
      const textarea = document.createElement("textarea");
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      this.copyDone();
    },
    copyDone() {
      this.isCopied = true;
      this.$refs.element.addEventListener("animationend", () => {
        this.isCopied = false;
      });
    },
  },
  mounted() {
    query = "." + this.class;
    let span = document.querySelector(query);
    let style = window.getComputedStyle(span, ":before");
    let content = style.getPropertyValue("content");
    //console.log(content)
    this.utf8 = content.replace('"', "").replace('"', "");
  },
});

Vue.component("copyfontimportlink", {
  template: `
    <div class="font-import-link-container" v-on:click="copyToClipboard(importLink)" ref="link">
      <slot></slot>
      <span
        class="copy-icon-popup"
        v-bind:class="{ 'success': isCopied}"
        ref="element">Copied!</span>
    </div>
    `,
  data() {
    return {
      importLink:
        '<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css">',
      isCopied: false,
    };
  },
  computed: {
    displayText: function () {
      html_text =
        "&lt;link rel=&quot;stylesheet&quot; href=&quot;https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css&quot;&gt;";
      return html_text;
    },
  },
  methods: {
    copyToClipboard(text) {
      const textarea = document.createElement("textarea");
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      this.copyDone();
    },
    copyDone() {
      this.isCopied = true;
      this.$refs.element.addEventListener("animationend", () => {
        this.isCopied = false;
      });
    },
  },
});

let vm = new Vue({
  data() {
    return {
      os: [
        "gnu",
        "debian",
        "yunohost",
        "void",
        "archlinux",
        "gentoo",
        "redhat",
        "fedora",
        "manjaro",
        "linuxmint",
        "freebsd",
        "apple",
        "windows",
      ],
      streaming: [
        "bandcamp",
        "qobuz",
        "spotify",
        "applemusic",
        "deezer",
        "soundcloud",
        "tidal",
      ],
      payment: [
        "cart",
        "price-tag",
        "price-tags",
        "barcode",
        "qrcode",
        "ticket",
        "credit-card",
        "visa",
        "mastercard",
        "applepay",
        "paypal",
        "stripe",
        "bitcoin",
        "dash",
        "monero",
        "ethereum",
        "ltc",
        "woocommerce",
        "liberapay",
        "patreon",
        "ulule",
        "tipeee",
        "flattr",
      ],
      navigation: [
        "arrow-down",
        "arrow-down-left",
        "arrow-down-right",
        "arrow-left",
        "arrow-right",
        "arrow-up",
        "arrow-up-left",
        "arrow-up-right",
        "chevron-circle-down",
        "chevron-circle-left",
        "chevron-circle-right",
        "chevron-circle-up",
        "chevron-down",
        "chevron-left",
        "chevron-right",
        "chevron-up",
        "circle-down",
        "circle-left",
        "circle-right",
        "circle-up",
        "zoom-in",
        "zoom-out",
        "undo",
        "redo",
        "undo-arrow",
        "redo-arrow",
        "forward-arrow",
        "reply-arrow",
        "envelope",
        "envelope-open",
        "bubble",
        "bubbles",
        "bubbles2",
        "shrink",
        "shrink2",
        "enlarge",
        "enlarge2",
        "share",
        "share-out",
        "search",
        "plus",
        "minus",
        "cross",
        "checkmark",
        "checkmark-outline",
        "link",
        "embed",
        "embed-slash",
      ],
      form: [
        "radio-checked",
        "radio-checked-alt",
        "radio-unchecked",
        "checkbox-checked",
        "checkbox-unchecked",
      ],
      network: [
        "tree",
        "cloud",
        "cloud-check",
        "cloud-download",
        "cloud-upload",
        "upload",
        "download",
        "switch",
        "sphere",
        "earth",
        "power",
        "power-cord",
        "wifi",
      ],
      alert: [
        "warning",
        "info",
        "question",
        "cancel-circle",
        "blocked",
        "notification",
        "floppy-disk",
        "trophy",
        "newspaper",
        "pacman",
        "music",
        "leaf",
        "gift",
        "flag",
        "bug",
        "bell",
        "bin",
        "bin-alt",
        "book",
        "books",
        "bookmark",
        "bookmarks",
        "attachment",
        "address-book",
        "accessibility",
      ],
      time: ["calendar", "clock", "clock2", "alarm"],
      login: [
        "user",
        "users",
        "enter",
        "exit",
        "equalizer",
        "equalizer2",
        "cog",
      ],
      afknav: [
        "compass",
        "compass2",
        "location",
        "location2",
        "map",
        "map2",
        "home",
        "office",
        "lab",
        "binoculars",
      ],
      fediverse: [
        "mastodon",
        "diaspora",
        "peertube",
        "pixelfed",
        "rss",
        "rss-square",
      ],
      socials: [
        "instagram",
        "threads",
        "twitter",
        "x",
        "wordpress",
        "nextcloud",
        "dropbox",
        "vk",
        "tripadvisor",
        "facebook",
        "tiktok",
        "twitch",
        "kick",
        "vimeo",
        "youtube",
        "reddit",
        "blogger",
        "medium",
        "linkedin",
        "stackoverflow",
        "quora",
        "pinterest",
        "tumblr",
        "unsplash",
        "pexels",
        "behance",
        "deviantart",
        "dribbble",
        "notion",
        "pocket",
        "feedly",
        "steam",
      ],
      privacy: ["gpg", "tor", "signal", "ublockorigin", "riot"],
      spyware: [
        "telegram",
        "discord",
        "whatsapp",
        "skype",
        "slack",
        "messenger",
      ],
      edit: [
        "bold",
        "italic",
        "underline",
        "strikethrough",
        "ligature",
        "sigma",
        "omega",
        "text-height",
        "text-width",
        "font-size",
        "paragraph-center",
        "paragraph-justify",
        "paragraph-left",
        "paragraph-right",
        "stats-bars",
        "stats-dots",
        "pie-chart",
        "scissors",
        "crop",
        "quill",
        "pen",
        "pencil",
        "pencil2",
        "quotes-left",
        "quotes-right",
        "copy",
        "paste",
        "paint-format",
        "eyedropper",
        "droplet",
        "list-numbered",
        "list-check",
        "list-bullet",
        "filter",
        "sort-alpha-asc",
        "sort-alpha-desc",
        "sort-numberic-desc",
        "sort-numeric-asc",
        "table",
        "table2",
      ],
      ratings: [
        "star-empty",
        "star-full",
        "star-half",
        "heart",
        "heart-broken",
      ],
      keyboard: ["tab", "shift", "ctrl", "opt", "command"],
      media: [
        "play",
        "pause",
        "stop",
        "previous",
        "next",
        "backward",
        "forward",
        "first",
        "last",
        "play-circle",
        "pause-circle",
        "stop-circle",
        "previous-circle",
        "next-circle",
        "backward-circle",
        "forward-circle",
        "volume-decrease",
        "volume-increase",
        "volume-mute",
        "volume-mute2",
        "volume-low",
        "volume-medium",
        "volume-high",
        "loop",
        "loop2",
        "shuffle",
        "infinite",
        "play-yt",
        "eject",
        "airplayaudio",
        "airplayvideo",
      ],
      files: [
        "folder",
        "folder-open",
        "folder-download",
        "folder-upload",
        "folder-plus",
        "folder-minus",
        "image",
        "images",
        "file-empty",
        "file-music",
        "file-picture",
        "file-play",
        "file-text2",
        "file-video",
        "file-zip",
        "files-empty",
        "box-add",
        "box-remove",
        "film",
      ],
      politics: [
        "lfi",
        "pcf",
        "ps",
        "eelv",
        "lr",
        "rn",
        "cgt",
        "faumar",
        "ancom_flag",
        "ancap_flag",
        "anarchy",
      ],
      devices: [
        "display",
        "tablet",
        "mobile",
        "tv",
        "video-camera",
        "camera",
        "headphones",
        "mic",
        "printer",
        "keyboard",
        "phone",
        "phone-hang-up",
        "raspberrypi",
        "arduino",
        "terminal",
      ],
      screen: [
        "sun",
        "brightness-contrast",
        "contrast",
        "eye",
        "eye-blocked",
        "eye-minus",
        "eye-plus",
      ],
      programing: [
        "c",
        "go",
        "python",
        "zig",
        "ruby",
        "rust",
        "php",
        "vue-dot-js",
        "react",
        "angular",
        "svelte",
        "npm",
        "html5",
        "css3",
        "javascript",
        "typescript",
        "bun",
        "bun_col",
        "postgresql",
        "meilisearch",
        "elasticsearch",
        "minio",
        "weaviate",
        "pinecone",
        "n8n",
        "docker",
        "git",
        "gitea",
        "github",
        "gitlab",
        "osm",
        "leaflet",
        "openai",
        "qwen",
        "deepseek",
        "mistral",
        "meta",
        "grok",
        "ollama",
        "mcp",
        "jupyter",
        "fastapi",
        "blender",
        "adobe",
        "inkscape",
        "affinitydesigner",
        "affinityphoto",
        "affinitypublisher",
      ],
      spinners: ["spinner", "spinner2", "spinner3"],
      license: [
        "cc",
        "cc-zero",
        "cc-sa",
        "cc-nd",
        "cc-nc",
        "cc-remix",
        "cc-by",
        "cc-share",
        "amicale",
        "gpl",
        "lgpl",
        "agpl",
        "wtfpl",
        "ofl",
        "mit",
        "bsd",
      ],
    };
  },
}).$mount("#root");