<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>
