<div>
    <style>
        .col{
            background-color: white;margin: 5px;color: rgb(37, 37, 90);
        }
    </style>
    <div class="row">
        <div class="col-md-8">
            <br><h1 style="color:#fff;text-align:left;font-size: 24px;text-shadow: 2px 2px 2px #888888;"><div style="background-color: white;width:50px;height:50px;border-radius: 50%;text-align:center;display:inline-block"><img src="/images/categoriacurso/{{ $categoria->logo }}" width="50px"></div> <b>{{ $categoria->titulo }}</b></h1>
        </div>
        <div class="col-md-4">
            <br><input type="search" class="form-control" wire:model='search' placeholder="Buscar" /></h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <br />
        </div>
        <div class="col-md-6" style="padding: 10px;">
            <div style="padding: 20px;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%);color:white;">
                <hr style="border-color: white;">
                <div class="row" align="center">
                    <div class="col" wire:click="agregar('A')">
                        A
                    </div>
                    <div class="col" wire:click="agregar('B')">
                        B
                    </div>
                    <div class="col" wire:click="agregar('C')">
                        C
                    </div>
                    <div class="col" wire:click="agregar('D')">
                        D
                    </div>
                    <div class="col" wire:click="agregar('E')">
                        E
                    </div>
                    <div class="col" wire:click="agregar('F')">
                        F
                    </div>
                    <div class="col" wire:click="agregar('G')">
                        G
                    </div>
                    <div class="col" wire:click="agregar('H')">
                        H
                    </div>
                    <div class="col" wire:click="agregar('I')">
                        I
                    </div>
                    <div class="col" wire:click="agregar('J')">
                        J
                    </div>
                </div>
                <div class="row" align="center">
                    <div class="col" wire:click="agregar('K')">
                        K
                    </div>
                    <div class="col" wire:click="agregar('L')">
                        L
                    </div>
                    <div class="col" wire:click="agregar('M')">
                        M
                    </div>
                    <div class="col" wire:click="agregar('N')">
                        N
                    </div>
                    <div class="col" wire:click="agregar('Ñ')">
                        Ñ
                    </div>
                    <div class="col" wire:click="agregar('O')">
                        O
                    </div>
                    <div class="col" wire:click="agregar('P')">
                        P
                    </div>
                    <div class="col" wire:click="agregar('Q')">
                        Q
                    </div>
                    <div class="col" wire:click="agregar('R')">
                        R
                    </div>
                    <div class="col" wire:click="agregar('S')">
                        S
                    </div>
                </div>
                <div class="row" align="center">
                    <div class="col" wire:click="agregar('T')">
                        T
                    </div>
                    <div class="col" wire:click="agregar('U')">
                        U
                    </div>
                    <div class="col" wire:click="agregar('V')">
                        V
                    </div>
                    <div class="col" wire:click="agregar('W')">
                        W
                    </div>
                    <div class="col" wire:click="agregar('X')">
                        X
                    </div>
                    <div class="col" wire:click="agregar('Y')">
                        Y
                    </div>
                    <div class="col" wire:click="agregar('Z')">
                        Z
                    </div>
                </div>
            </div>
            <p style="color: white;">Haz clic para ver las cápsulas disponibles</p>
        </div>
        <div class="col-md-6">
            <div class="row">
                @foreach ($cursos as $value)
                    <div class="col-md-12" style="padding: 10px;">
                        <a href="/e-learning/curso/{{ $value->id }}" style="text-decoration: none;"><div class="opciones">
                            <b>{{ $value->titulo }}</b>
                        </div></a>
                    </div>
                @endforeach
                <div class="col-md-12 text-center" style="padding: 20px;margin: 0 auto !important;">
                    {{ $cursos->links() }}
                </div>
            </div>
        </div>
    </div>
</div>