@extends('layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/blog.css') }}" />

@endsection

@section('content')

    <main class="page-main">
        <div class="uk-grid" data-uk-grid>
            <div class="uk-width-2-3@l blog blog-section">
                <div class="widjet --filters">
                    <div class="widjet__body">
                        <div class="uk-grid uk-child-width-1-2@s uk-flex-middle uk-grid-small" data-uk-grid>
                            <h3 class="uk-text-lead" style="text-align: left">NUESTROS EXAMENES</h3>
                        </div>
                    </div>
                </div>

                <div class="uk-width-1-3@l filters-section">
                    <div class="widjet --my-list">
                        <div class="widjet__head">
                            <h3 class="uk-text-lead">categorias</h3>
                        </div>
                        <div class="widjet__body">
                            <ul class="my-game-list">
                                @foreach ($categorias_ex as $categoria)
                                    <a href="{{ url('/categoriaexamen/' . $categoria->titulo_rewrite) }}">
                                        <li class="my-game-item">

                                            <!-- Letra inicial de la categoría -->
                                            <div class="my-game-item__letter" style="background: #da291c;">
                                                {{ strtoupper(substr($categoria->titulo, 0, 1)) }}
                                            </div>
                                            <!-- Título de la categoría -->
                                            <div class="my-game-item__title">{{ $categoria->titulo }}</div>
                                        </li>
                                    </a>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="uk-grid uk-grid-small uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-1@s">
                    @foreach ($categorias_ex as $categoria)
                        <a href="{{ url('/categoriaexamen/' . $categoria->titulo_rewrite) }}" class="fl-gp-link-wrapper">
                            <div class="fl-gp-box">
                                <div class="fl-cover-image">
                                    <img alt="{{ $categoria->titulo }}"
                                        src="{{ env('URL_ARCHIVOS') . '/images/categoria_examenes/' . $categoria->imagen }}">
                                </div>
                                <div class="fl-gp-footer">
                                    <div class="fl-gp-cells" style="height: 120px;">
                                        <div class="fl-gp-cell-left">
                                            <strong>{{ $categoria->titulo }}</strong>
                                        </div>
                                    </div>
                                    <div class="fl-gp-action">
                                        <div class="fl-gp-button">
                                            <i class="gg-icon gg-log-in"></i> Ver más
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </main>

@endsection