@props([
'title',
'size'
])

@php
$_sizeClass = isset($size)? 'modal-' . $size : '';
@endphp

<div tabindex="-1" role="dialog" aria-hidden="true" {{ $attributes->merge([
    'class' => 'modal fade'
]) }}>
    <div class="{{ "modal-dialog modal-dialog-centered " . $_sizeClass}}" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">
                    <i class="fas fa-circle text-grey mr-2"></i>
                    {{ $title }}
                </h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {{ $slot }}
            </div>
            @isset($footer)
            <div class="modal-footer">
                <div class="row align-items-end">
                    {{ $footer }}
                </div>
            </div>
            @endisset
        </div>
    </div>
</div>