<div
	:class="{
		'cbw-uploader': true,
		'cbw-uploader--active': isActive,
	}"
	@drop.prevent="onDrop"
	@dragover.prevent="isActive = true"
	@dragleave.prevent="isActive = false"
>
	<div class="cbw-uploader__inner">
		<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="path-1-inside-1" fill="white"><path d="M14 32V51C14 53.2091 15.7909 55 18 55H62C64.2091 55 66 53.2091 66 51V38C66 35.7909 64.2091 34 62 34H37.6569C36.596 34 35.5786 33.5786 34.8284 32.8284L31.1716 29.1716C30.4214 28.4214 29.404 28 28.3431 28H18C15.7909 28 14 29.7909 14 32Z"/></mask><path d="M14 32V51C14 53.2091 15.7909 55 18 55H62C64.2091 55 66 53.2091 66 51V38C66 35.7909 64.2091 34 62 34H37.6569C36.596 34 35.5786 33.5786 34.8284 32.8284L31.1716 29.1716C30.4214 28.4214 29.404 28 28.3431 28H18C15.7909 28 14 29.7909 14 32Z" fill="#EDF6FA"/><path d="M31.1716 29.1716L32.5858 27.7574V27.7574L31.1716 29.1716ZM34.8284 32.8284L33.4142 34.2426L33.4142 34.2426L34.8284 32.8284ZM16 51V32H12V51H16ZM18 30H28.3431V26H18V30ZM29.7574 30.5858L33.4142 34.2426L36.2426 31.4142L32.5858 27.7574L29.7574 30.5858ZM37.6569 36H62V32H37.6569V36ZM64 38V51H68V38H64ZM62 53H18V57H62V53ZM64 51C64 52.1046 63.1046 53 62 53V57C65.3137 57 68 54.3137 68 51H64ZM62 36C63.1046 36 64 36.8954 64 38H68C68 34.6863 65.3137 32 62 32V36ZM33.4142 34.2426C34.5394 35.3679 36.0656 36 37.6569 36V32C37.1264 32 36.6177 31.7893 36.2426 31.4142L33.4142 34.2426ZM28.3431 30C28.8736 30 29.3823 30.2107 29.7574 30.5858L32.5858 27.7574C31.4606 26.6321 29.9344 26 28.3431 26V30ZM16 32C16 30.8954 16.8954 30 18 30V26C14.6863 26 12 28.6863 12 32H16ZM12 51C12 54.3137 14.6863 57 18 57V53C16.8954 53 16 52.1046 16 51H12Z" fill="#80BDDC" mask="url(#path-1-inside-1)"/><path d="M24 40H56C57.6569 40 59 41.3431 59 43V50C59 51.6569 57.6569 53 56 53H24C22.3431 53 21 51.6569 21 50V43C21 41.3431 22.3431 40 24 40Z" fill="white" stroke="#80BDDC" stroke-width="2"/><mask id="path-4-inside-2" fill="white"><path d="M10.0168 51.3621C9.8038 49.0197 11.6482 47 14.0003 47H65.2401C67.5922 47 69.4366 49.0197 69.2236 51.3621L66.9509 76.3621C66.7636 78.4225 65.0361 80 62.9673 80H16.2731C14.2042 80 12.4768 78.4225 12.2895 76.3621L10.0168 51.3621Z"/></mask><path d="M10.0168 51.3621C9.8038 49.0197 11.6482 47 14.0003 47H65.2401C67.5922 47 69.4366 49.0197 69.2236 51.3621L66.9509 76.3621C66.7636 78.4225 65.0361 80 62.9673 80H16.2731C14.2042 80 12.4768 78.4225 12.2895 76.3621L10.0168 51.3621Z" fill="white"/><path d="M12.2895 76.3621L10.2977 76.5432L12.2895 76.3621ZM66.9509 76.3621L64.9591 76.1811L66.9509 76.3621ZM69.2236 51.3621L71.2154 51.5432V51.5432L69.2236 51.3621ZM10.0168 51.3621L8.02497 51.5432L10.0168 51.3621ZM14.0003 49H65.2401V45H14.0003V49ZM67.2318 51.1811L64.9591 76.1811L68.9427 76.5432L71.2154 51.5432L67.2318 51.1811ZM62.9673 78H16.2731V82H62.9673V78ZM14.2813 76.1811L12.0085 51.1811L8.02497 51.5432L10.2977 76.5432L14.2813 76.1811ZM16.2731 78C15.2386 78 14.3749 77.2112 14.2813 76.1811L10.2977 76.5432C10.5786 79.6337 13.1698 82 16.2731 82V78ZM64.9591 76.1811C64.8655 77.2112 64.0017 78 62.9673 78V82C66.0706 82 68.6617 79.6337 68.9427 76.5432L64.9591 76.1811ZM65.2401 49C66.4161 49 67.3383 50.0098 67.2318 51.1811L71.2154 51.5432C71.5349 48.0295 68.7683 45 65.2401 45V49ZM14.0003 45C10.4721 45 7.70554 48.0295 8.02497 51.5432L12.0085 51.1811C11.9021 50.0098 12.8243 49 14.0003 49V45Z" fill="#80BDDC" mask="url(#path-4-inside-2)"/><rect x="39" width="2" height="31" rx="1" fill="#80BDDC"/><path d="M34.295 25.7195C33.9017 25.3261 33.9017 24.6884 34.295 24.295C34.6884 23.9017 35.3261 23.9017 35.7195 24.295L40.705 29.2805C41.0983 29.6739 41.0983 30.3116 40.705 30.705C40.3116 31.0983 39.6739 31.0983 39.2805 30.705L34.295 25.7195Z" fill="#80BDDC"/><path d="M45.705 25.7195C46.0983 25.3261 46.0983 24.6884 45.705 24.295C45.3116 23.9017 44.6739 23.9017 44.2805 24.295L39.295 29.2805C38.9017 29.6739 38.9017 30.3116 39.295 30.705C39.6884 31.0983 40.3261 31.0983 40.7195 30.705L45.705 25.7195Z" fill="#80BDDC"/></svg>
		<div class="cbw-uploader__title"><?php
			_e( 'Select the skin to import', 'crocoblock-wizard' );
		?></div>
		<div class="cbw-uploader__desc"><?php
			_e( 'Drag & drop the skin file into the area', 'crocoblock-wizard' );
		?></div>
		<cx-vui-button
			button-style="accent"
		>
			<span slot="label"><?php echo _e( 'Select File', 'crocoblock-wizard' ); ?></span>
		</cx-vui-button>
		<input
			type="file"
			multiple="false"
			accept=".zip"
			@change="onInputChange"
		>
		<div
			class="cbw-uploader__error"
			v-if="error"
			v-html="error"
		></div>
	</div>
</div>