@extends('layouts.pagina')
@section('css')
<link rel="stylesheet" href="{{ asset('css/comunicados.css') }}">

@endsection
@section('head')
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@endsection
@section('contenido')
<div class="container-xl" >
    <div class="reglon">
        <h3 class="titulo mt-4">Comunicados</h3>  
    </div>
    <div class="row">
        <div class=" col-xs-12 col-sm-12 col-lg-8"  style="text-align: let;">
            <h2 class="titulo">{{$comunicado->titulo}}</h2>    
            <h3>Fecha: {{$comunicado->created_at}}</h3>
            <div class="imagen-principal">                
                <img src="{{url($comunicado->ruta)}}" alt="">
            </div>
            <div class="texto mt-4">
                {!!$comunicado->created_at!!}   
            </div>      
        </div>
        <div class=" col-xs-12 col-sm-12 col-lg-4"  style="text-align: let;">
            
            <div class="card">
                <div class="card-header">
                <h3 class="card-title">Más comunicados</h3>
                </div>
                <div class="list-group list-group-flush list-group-hoverable">
                    @foreach($comunicados as $items)
                        <div class="list-group-item"  style="padding: 16px 0px;">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <a href="{{url('/comunicado/'.$items->id)}}">
                                    <span class="avatar" style="background-image: url({{'/'.$items->ruta}})"></span>
                                    </a>
                                </div>
                                <div class="col text-truncate">
                                    <a href="{{url('/comunicado/'.$items->id)}}" class="text-reset d-block">{{$items->titulo}}
                                        <div class="d-block text-muted text-truncate mt-n1">
                                            Fecha: {{$items->created_at}}                                            
                                        </div>
                                    </a>                                    
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>    
        </div>
    </div>
</div>
@endsection