@extends('layouts.app')
@section('title', 'ISIPP - Convocatorias')

@section('css')
<style type="text/css">
    .modalimagen {
        background: url("{{asset('/archivo/otros/milena.png')}}") no-repeat center center;
        background-size: cover;
    }
</style>
@endsection
@section('content')
<section id="recent-blog-posts" class="recent-blog-posts section">
    <div class="container section-title" data-aos="fade-up">
        <h2 style="color: #ed3c0d;">Convocatorias</h2>
        <p></p>
    </div>
    <div class="container">
        <div class="row gy-5">
            <div v-for="con in convocatoria" class="col-xl-4 col-md-6">
                <div class="post-item position-relative h-100 border border-danger" data-aos="fade-up" data-aos-delay="100">
                    <div class="post-img position-relative overflow-hidden">
                        <img v-bind:src="'{{ asset('/archivo')}}'+'/'+con.imacon" class="img-fluid" alt="">
                        <span class="post-date"> @{{con.fecfin}}</span>
                    </div>
                    <div class="post-content d-flex flex-column">
                        <h3 class="post-title">@{{con.titulocon}}</h3>
                        <hr>
                        <div class="meta align-items-center">
                            <div class="text-center">
                                <a v-bind:href="'{{ asset('/convocatoria')}}'+'/'+con.codcon"  style="color: #ffffff;"  class="btn btn-info"><img src="{{ asset('/archivo/icono/informacion.png')}}"> Más información</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@include('inicios.informacion')
@endsection

@section('script')
@vite(['resources/js/header.js'])
@vite(['resources/js/footer.js'])
@vite(['resources/js/pagconvocatoria.js'])
@endsection