<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="emit('country', country.alpha2)"
		>
			<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"
				class="filter-remove"
				@click.native.stop="emit('country', null)"
			/>
		</li>
	</ul>
</template>

<script setup>
defineProps({
	countries: {
		type: Array,
		default: () => [],
	},
	selectedCountry: {
		type: String,
		default: null,
	},
});

const emit = defineEmits(['country']);
</script>

<style scoped>
.countries:not(:last-child) {
	border-bottom: solid 1px var(--glass-weak-30);
}

.country {
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;

	.flag {
		width: 1.5rem;
		padding: .25rem .25rem .25rem .5rem;
	}

	&:hover {
		background: var(--glass-weak-30);
		cursor: pointer;
	}

	&.selected {
		font-weight: bold;
	}
}

.country-name {
	flex-grow: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: .25rem .5rem;
}

.filter-remove {
	display: flex;
	align-items: center;
	padding: .5rem;
	fill: var(--glass);

	&:hover {
		fill: var(--error);
	}
}
</style>