<script setup>
import { computed } from "vue";
const modelValue = defineModel();
const breadcrumbs = computed(() => {
  if (!modelValue.value) {
    return [];
  }
  const path = modelValue.value;
  const protocolMatch = path.match(/^([a-zA-Z0-9]+):\/\/(.*)$/);
  if (!protocolMatch) {
    return [];
  }
  const protocol = protocolMatch[1];
  const pathParts = protocolMatch[2].split("/").filter((part) => part.length > 0);
  let breadcrumbs2 = [{
    label: protocol,
    location: `${protocol}://`
  }];
  let currentPath = `${protocol}://`;
  for (let part of pathParts) {
    currentPath += part;
    breadcrumbs2.push({
      label: part,
      location: currentPath
    });
    currentPath += "/";
  }
  return breadcrumbs2;
});
</script>

<template>
    <q-breadcrumbs>
        <q-breadcrumbs-el v-for="(b, index) in breadcrumbs" :label="b.label" :key="index"
            @click="$emit('update:modelValue', b.location)" href="javascript:void(0)"></q-breadcrumbs-el>
    </q-breadcrumbs>
</template>
