Added country filter for actors.

assets/components/actors/countries.vue

@@ -0,0 +1,88 @@
+<template>
+	<ul class="countries nolist">
+		<li
+			v-for="country in countries"
+			:key="country.alpha2"
+			:title="country.name"
+			:class="{ selected: selectedCountry === country.alpha2 }"
+			class="country"
+			@click="updateValue('country', country.alpha2, true)"
+		>
+			<img
+				:src="`/img/flags/${country.alpha2.toLowerCase()}.svg`"
+				class="flag"
+			>
+
+			<span class="country-name">{{ country.alias || country.name }}</span>
+
+			<Icon
+				v-if="selectedCountry === country.alpha2"
+				icon="cross2"
+				@click.native.stop="updateValue('country', null, true)"
+			/>
+		</li>
+	</ul>
+</template>
+
+<script>
+export default {
+	props: {
+		countries: {
+			type: Array,
+			default: () => [],
+		},
+		selectedCountry: {
+			type: String,
+			default: null,
+		},
+		updateValue: {
+			type: Function,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.countries:not(:last-child) {
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
+.country {
+	width: 15rem;
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+
+	.flag {
+		width: 1.25rem;
+		padding: .25rem .5rem;
+	}
+
+	.icon {
+		padding: .25rem .5rem;;
+		fill: var(--shadow);
+
+		&:hover {
+			fill: var(--shadow-strong);
+		}
+	}
+
+	&:hover {
+		background: var(--shadow-hint);
+		cursor: pointer;
+	}
+
+	&.selected {
+		font-weight: bold;
+	}
+}
+
+.country-name {
+	flex-grow: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: .25rem .5rem;
+}
+</style>