@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">{{ $name_categoria_blog ?? 'Blog' }}</h3>

                            <div class="uk-text-right">{{ $cantidadBlogs }} publicaciones</div>
                        </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 ($blogs as $blog)
                        <a href="{{ url('/detalleblog/' . $blog->titulo_rewrite) }}" class="fl-gp-link-wrapper">
                            <div class="fl-gp-box">
                                <div class="fl-cover-image">
                                    <img alt="{{ $blog->titulo }}"
                                        src="{{ env('URL_ARCHIVOS') . '/images/publicaciones/' . $blog->imagen }}">
                                </div>
                                <div class="fl-gp-footer">
                                    <div class="fl-gp-info">
                                        <i class="icon-globe"></i><span><i>{{ $blog->fecha_formateada }}</i></span>
                                    </div>
                                    <div class="fl-gp-cells">
                                        <div class="fl-gp-cell-left">
                                            {{ $blog->titulo }}
                                        </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>

                <!-- Paginación -->
                <div class="uk-margin uk-flex uk-flex-center" uk-margin>
                    {{ $blogs->links('vendor.pagination.uikit') }}
                </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">Temas a Seguir</h3>
                    </div>
                    <div class="widjet__body">
                        <ul class="my-game-list">
                            @foreach ($categoriasblog as $categoria)
                                <a href="{{ url('/blog/' . $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>
                        <a href="{{ url('/blog') }}"><button class="creat-list-btn" href="#!"><i
                                    class="ico_add-square"></i><span>Ver
                                    Todo</span></button></a>
                    </div>
                </div>
            </div>

        </div>
    </main>

@endsection