@props([
'modelId' => "",
'route' => "",
'title' => "",
'modelObject' => "",
'buttonName' => "Ajouter fichier",
'buttonColor' => "primary",
'withButton' => true
])


<div class="offcanvas-end-example">
    @if ($withButton)
    <button class="btn btn-outline-{{ $buttonColor }}" type="button" data-bs-toggle="offcanvas"
        data-bs-target="#filleUploadOffcanvas" aria-controls="filleUploadOffcanvas">
        {{ $buttonName }}
    </button>

    {{-- use this for icons in the same page

    <a data-bs-toggle="offcanvas" data-bs-target="#filleUploadOffcanvas" aria-controls="filleUploadOffcanvas">
        <i class="ficon" data-feather="printer"></i>
    </a>
    --}}
    @endif
    <div class="offcanvas offcanvas-end" tabindex="-1" id="filleUploadOffcanvas"
        aria-labelledby="filleUploadOffcanvasLabel">
        <div class="offcanvas-header">
            <h5 id="filleUploadOffcanvasLabel" class="offcanvas-title">
                {{ $title }}
            </h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body my-5 mx-0 flex-grow-0">
            <x-form.wrapper action="{{$route}}" method="POST" enctype="multipart/form-data">
                <div class="row">
                    <input type="text" hidden value="{{ $modelId }}" name="modelId">

                    <x-form.select col="12" required name="type" label="Type de fichier:"
                        :options="App\Models\Option::keyFind('FILE_TYPE')" _key="value" value="value" />

                    <x-form.input col="12" required type="file" label="Fichier" name="file" />

                    <x-form.input col="12" required type="text" label="Description" name="description" />

                    @csrf
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </x-form.wrapper>

            <br>
            <br>
            <b>List des fichier</b>
            @foreach ($modelObject->getMedia('*') as $file )

            <ul>
                <li>
                    <a target="_blank" href="{{$file->original_url}}">
                        {{$file->collection_name}} / {{$file->getCustomProperty('description')}}
                    </a>
                </li>
            </ul>

            @endforeach
        </div>
    </div>
</div>