Sindbad~EG File Manager

<div>
    <style>
        .cargador1{
            background: linear-gradient(90deg, rgba(255,30,0,0.3701855742296919) 0%, rgba(156,70,59,0.7315301120448179) 0%, rgba(51,74,128,0.8183648459383753) 100%);
            padding: 10px;
            border-radius:30px;
        }
        .cargador2{
            background: linear-gradient(90deg, rgba(255,132,0,0.3701855742296919) 0%, rgba(255,199,56,0.3701855742296919) 35%, rgba(249,255,0,0.3701855742296919) 100%);
            border-radius:30px;
            padding: 10px;
            color: white;
        }
    </style>
    <div class="row">
        <div class="col-12">
                <br><a href="/perfil"><h1 style="color:#fff;font-size: 34px;"><img src="imagenes/astronauta1.png" width="75px"> <b> MI PERFIL</b></h1></a><br><br><br>
        </div>
    </div>
    <div class="row">
        <div class="col-2 cargador1">
            <div align="center" style="color:white">
                @if(Auth::user()->profile_photo_path)
                    <img src="/perfil/{{Auth::user()->profile_photo_path}}" width="75px">  
                @else
                    <img src="/imagenes/astronauta1.png" width="75px">
                @endif
                <br><br><b>{{Auth::user()->name}}</b>
                <hr><p style="cursor: pointer;" wire:click="editar()">Editar</p><hr>
            </div>
        </div>
        <div class="col-10 cargador2">
            <div>
                <div class="row">
                    <div class="col-md-8">
                        @if($editar == 1)
                            <div class="form-group">
                                <label for="profesion">Profesión</label>
                                <input type="text" class="form-control" id="profesion" wire:model="profesion" placeholder="Profesión">
                                @error('profesion') <span class="error">{{ $message }}</span> @enderror
                            </div>
                            <div class="form-group">
                                <label for="cargo">Cargo Actual</label>
                                <input type="text" class="form-control" wire:model="cargo" id="cargo" placeholder="Cargo Actual">
                                @error('cargo') <span class="error">{{ $message }}</span> @enderror
                            </div>
                            <div class="form-group">
                                <label for="formacion">Formación académica</label>
                                <input type="text" class="form-control" wire:model="formacion" id="formacion" placeholder="Formación académica">
                                @error('formacion') <span class="error">{{ $message }}</span> @enderror
                            </div>
                            <div class="form-group">
                                <label for="hobbies">Cuáles son tus hobbies?</label>
                                <input type="text" class="form-control" wire:model="hobbies" id="hobbies" placeholder="Cuáles son tus hobbies?">
                                @error('hobbies') <span class="error">{{ $message }}</span> @enderror
                            </div>
                            <div class="form-group">
                                <label for="metas">Contanos tus metas personales de aca a 3 años</label>
                                <input type="text" class="form-control" wire:model="metas" id="metas" placeholder="Contanos tus metas personales de aca a 3 años">
                                @error('metas') <span class="error">{{ $message }}</span> @enderror
                            </div>
                            <button type="button" class="btn btn-primary" wire:click="update()">Actualizar</button>
                        @else
                            <b><img src="/imagenes/importancia.png" width="25px"> {{$usuario->profesion}}</b><br><br>
                            <b><img src="/imagenes/importancia.png" width="25px"> {{$usuario->cargo}}</b><br><br>
                            <b><img src="/imagenes/importancia.png" width="25px"> {{$usuario->formacion}}</b><br><br>
                            <b><img src="/imagenes/importancia.png" width="25px"> {{$usuario->hobbies}}</b><br><br>
                            <b><img src="/imagenes/importancia.png" width="25px"> {{$usuario->metas}}</b><br><br>
                        @endif
                    </div>
                    <div class="col-md-4">
                        <h4><b><center>RECONOCIMIENTOS</center></b></h4>
                        <style>
                            .contenedor{
                                position: relative;
                                display: inline-block;
                                text-align: center;
                            }
                            .centrado{
                                position: absolute;
                                top: 44%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                            }
                        </style>
                        <div id="demo" class="carousel slide" data-ride="carousel">
                            <!-- Indicators -->
                            <ul class="carousel-indicators">
                                <?php
                                    $cont=0;
                                    $active='class="active"'
                                ?>
                                @foreach($certificado as $cert)
                                    <li data-target="#demo" data-slide-to="{{$cont}}" {{$active}}></li>
                                    <?php
                                        $cont+=1;
                                        $active='';
                                    ?>
                                @endforeach
                            </ul>
                            
                            <!-- The slideshow -->
                            <div class="carousel-inner">
                                <?php $active='active'; ?>
                                @foreach($certificado as $cert)
                                    <div class="carousel-item {{$active}}">
                                        <div class="d-flex align-items-center justify-content-center flex-column">
                                            <a href="/curso/{{$cert['curso_id']}}"><div class="contenedor" >
                                                <img src="/images/certificados/{{$cert['certificado']}}" width="50%" />
                                                <div class="centrado">
                                                    <h3 style="color:black;font-size:8px;">
                                                        {{Auth::user()->name}}
                                                    </h3>
                                                </div>
                                            </div>
                                            <h6 style="text-decoration:none;color:white;text-align:center;">
                                                {{$cert['curso']}}
                                            </h6></a>
                                        </div>
                                    </div>
                                    <?php $active=''; ?>
                                @endforeach
                            </div>
                            
                            <!-- Left and right controls -->
                            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                                <span class="carousel-control-prev-icon"></span>
                            </a>
                            <a class="carousel-control-next" href="#demo" data-slide="next">
                                <span class="carousel-control-next-icon"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>