<template>
	<div class="clipboard input-group mb-3 mx-auto">
		<div class="input-group-prepend">
			<button
				id="btncopy"
				class="btn btn-info px-4 py-1"
				type="button"
				@click="copyText">
				<outline-clipboard-copy-icon class="icon" />
			</button>
		</div>
		<input
			type="text"
			class="form-control text-truncate"
			:value="textContent"
			disabled />
	</div>
</template>

<script>
export default {
	props: {
		textContent: {
			type: String,
			required: true
		}
	},
	methods: {
		copyText() {
			navigator.clipboard.writeText(this.textContent)
			$("#btncopy").tooltip({
				title: this.$t("copie") + " !",
				trigger: "manual"
			})
			$("#btncopy").tooltip("show")
			setTimeout(() => {
				$("#btncopy").tooltip("hide")
			}, 1000)
		}
	}
}
</script>

<style lang="scss">
.clipboard {
	max-width: 500px;
}
</style>