<div class="card card-primary {{$collapsed}}">
    <div class="card-header">
        <h3 class="card-title">Crear PopUp</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" wire:click="botoncollapsed()">
                <i class="fas {{$collapsedicon}}"></i>
            </button>
        </div>
    </div>
    <div class="card-body">
        <form>
            <div class="row">
                <div class="col-md-12 text-center">
                    {{-- Spinner mientras se carga el archivo --}}
                    <div wire:loading wire:target="enlace" class="mb-2">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                    </div><br>

                    {{-- Previsualización una vez cargado --}}
                    @if($tipo == 'imagen' && $enlace)
                        <img src="{{ $enlace->temporaryUrl() }}" height="250px"><br>
                    @elseif($tipo == 'video' && $enlace)
                        <video src="{{ $enlace->temporaryUrl() }}" controls height="250px"></video><br>
                    @endif

                    <br>
                    <input wire:model="enlace" type="file" class="form-control" />
                    @error('enlace') <span class="error">{{ $message }}</span> @enderror
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="">Titulo</label>
                        <input wire:model="nombre" type="text" class="form-control" placeholder="Titulo" />
                        @error('nombre') <span class="error">{{ $message }}</span> @enderror<br>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">Seleccione tipo de archivo</label>
                        <select class="form-control" id="exampleFormControlSelect1" wire:model="tipo">
                            <option value="">Seleccione una opción</option>
                            <option value="imagen">Imagen</option>
                            <option value="video">Video</option>
                        </select>
                    </div>
                    @error('tipo') <span class="error">{{ $message }}</span> @enderror<br>
                </div>
                <div class="col-md-12">
                    <button wire:click.prevent="store()" class="btn btn-primary">
                        Guardar
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>