@props(['entity' => null, 'titleIconDeleteRoute' => ''])

<section class="card mb-4">
    <h5 class="card-header">{{ admin_trans('sections.title_icon') }}</h5>
    <div class="card-body">
        <div class="mb-3">
            <x-admin.forms.label :name="admin_trans('sections.title_icon')" />

            <div class="titleIcon text-center">
                @if (!empty($entity->title_icon))
                    <img src="{{ asset('storage/' . $entity->title_icon) }}" width="100%" alt="Title Icon" data-default-image="{{ asset('storage/admin/images/no_image.jpg') }}">
                @else
                    <img src="{{ asset('storage/admin/images/no_image.jpg') }}" width="100%" alt="No image">
                @endif
            </div>

            <div class="filePreview {{ old('title_icon') ? '' : 'hidden' }}">
                <label for="title_icon">{{ admin_trans('image_preview') }}</label><br>
                <input type="hidden" class="title_icon" name="title_icon" value="{{ old('title_icon', !empty($entity) ? $entity->title_icon : null) }}">
                <img src="{{ old('title_icon') ? asset('storage/' . old('title_icon')) : '' }}" alt="Title Icon" height="128">
                <div class="spinner-border text-primary d-none mt-3" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>

            <div class="parentTitleIconUploadBtn text-center mt-4">
                <button
                    type="button"
                    data-filemanagerroute="{{ route('elfinder.popup', 'title_icon') }}"
                    data-inputid="title_icon"
                    data-mimes="image"
                    class="titleIconUploadBtn btn btn-icon btn-primary popup_selector"
                >
                    <span class="tf-icons bx bx-image-add"></span>
                </button>

                @if (!empty($entity->title_icon))
                    <button
                        type="button"
                        class="titleIconDeleteBtn btn btn-icon btn-danger"
                        data-deletetitleiconroute="{{ route($titleIconDeleteRoute, $entity) }}"
                    >
                        <span class="tf-icons bx bx-trash"></span>
                    </button>
                @endif
            </div>
            <x-admin.forms.error name="title_icon" />
        </div>
    </div>
</section>