wip: Add more fields for certificate information

- Most of the code is generated by Junie but was reviewed and updated by me.
- Also install iso-3166-1 library to provide country lists

frontend/src/components/CountryListItem.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Define props with proper TypeScript typing
+import { computed } from "vue";
+
+interface Country {
+  country: string;
+  alpha2: string;
+  alpha3: string;
+  numeric: string;
+}
+
+interface Divider {
+  divider: boolean;
+  header: string;
+}
+
+// Define a type that can be either a Country or a Divider
+type CountryListItemType = Country | Divider;
+
+// Define props with proper TypeScript typing
+const props = defineProps<{
+  item: { raw: CountryListItemType };
+  props?: Record<string, unknown>;
+}>();
+
+// Helper functions to check the type of the item
+const isDivider = computed(() => {
+  return 'divider' in props.item.raw && props.item.raw.divider;
+});
+
+const headerText = computed(() => {
+  return 'header' in props.item.raw ? props.item.raw.header : "";
+});
+
+const countryItem = computed(() => {
+  return !isDivider.value && !headerText.value && 'country' in props.item.raw ? props.item.raw: undefined;
+})
+
+</script>
+
+<template>
+  <v-divider v-if="isDivider" class="my-2" />
+  <v-list-subheader v-if="headerText">{{ headerText }}</v-list-subheader>
+  <v-list-item v-if="countryItem" v-bind="props" :title="countryItem.country" :value="countryItem.alpha2" />
+</template>