{{-- 
	? To set: 
		*	required: 			
			array option:		

	? To implement in Blade: 
	*		@includeIf('layouts.components.ajax_loader')

--}}

@php
	$component_name = 'ajax_loader';
	$version 		= 1;
@endphp



@if ( $version === 1 )
	<div class="loader position-absolute translate-middle top-50 start-50">
		<img src="{{ asset('./img/svg/loader.svg') }}" alt="ajax loader" width="150>" height="150>">
	</div>
@endif

@if ( $version === 2 )
	{{-- @section('section-css')
		@parent
		@once
			<link rel="stylesheet" href="{{ asset("css/components/$component_name.css") }}">
		@endonce
	@stop --}}

	<div class="loader position-absolute translate-middle top-50 start-50">

		<div class="ajax-loader">
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
	  	</div>

	</div>


@endif

@if ( $version === 3 )
	@section('section-css')
		@parent
		@once
			<link rel="stylesheet" href="{{ asset("css/components/$component_name.css") }}">
		@endonce
	@stop

	<div class="loader position-absolute translate-middle top-50 start-50">

		<div class="ajax-loader-3">
	        GD
	        <span></span>
	    </div>

    </div>


@endif