<template>
	<div class="loading-container">
		<svg version="1.1" id="L6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
   			<rect fill="none" :stroke="$store.getters.getIsNightMode > 0 ? '#FFF':'#16ab39'" stroke-width="4" x="25" y="25" width="50" height="50" rx="5">
				<animateTransform
					attributeName="transform"
					dur="0.5s"
					from="0 50 50"
					to="180 50 50"
					type="rotate"
					id="strokeBox"
					attributeType="XML"
					begin="rectBox.end"/>
			</rect>
			<rect x="25" y="25" :fill="$store.getters.getIsNightMode > 0 ? '#FFF':'#16ab39'" width="50" height="50">
			  <animate
				attributeName="height"
				dur="1.3s"
				attributeType="XML"
				from="50" 
				to="0"
				id="rectBox" 
				fill="freeze"
				begin="0s;strokeBox.end"/>
			</rect>
		</svg>
		<div class="loading-message" v-if="message">{{ message }}</div>
	</div>
</template>

<script>

	export default {
		name: 'LoadingIcon',
		props:[ 'message' ],
	}
</script>
<style type="text/css" scoped>
	.loading-container {
		text-align: center;
		width: 100%;
		min-height: 100px;
		margin: 20px 0;
		padding: 40px;
		border-radius: 7px;
		background-color: var(--small_element_bg_color);
	}
	.loading-container svg {
		width: 60px;
		height: 60px;
	}
	.loading-message {
		font-size: 1.5em;
	}
</style>