@extends('layouts.plantilla')
@section('novedades','active')
@section('content')

<style type="text/css">
    @media screen and (min-width: 992px){
    }
    .card{
         border: 1px solid #E1E1E1 !important;
         border-radius: 0px !important;
        /*border: none !important;*/
    }
    .nombre{
        text-decoration: none !important;
    }
    /*figure{
        background-color: #F7F7F7 !important;
    }*/
    .foto{
        /* background-size: contain;
        background-position: center; */
        /* height: 30vh; */
        /* height: 216px; */
        /* height: 306px; */
        /*height: 261px;*/
        height: 100%;
        width: 100%;
        object-fit: cover;
        /* background-repeat: no-repeat; */
    }
    .card .foto {
        opacity: 1;
        display: block;
        /* width: 100%; */
        transition: .5s ease;
        backface-visibility: hidden;
    }

    .card:hover .foto {
        opacity: 0.5;
    }
    
    .novedad .fecha{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        line-height: 19px;
        color: #898989;
    }
    
    .header{
        /* background-color: #F5F5F5; */
        background: rgba(147, 149, 152, 0.2);
    }
    .breadcrumb li a{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 13px;
        line-height: 16px;
        color: #000000;
        text-decoration: none !important;
    }
    .breadcrumb li.active a{
        font-weight: 400 !important;
    }

    .titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 42px;
        line-height: 51px;
        color: #131313;
    }
    
    .categoria {
        border: none !important;
        border-radius: 0px !important;
        border-bottom: 1px solid #939598 !important;
    }

    .categoria .nombre{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 21px;
        line-height: 25px;
        color: #131313;
    }
    
    .novedad__titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        line-height: 140%;
        color: #333333;
    }
    
    .novedad__descripcion{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        line-height: 19px;
        color: #333333;
    }
    
    .novedad__categoria{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 19px;
        text-transform: uppercase;
        color: #F38130;
    }
    
    @media screen and (max-width: 768px){
        .container-fluid ul{
            padding-left: 0 !important;
        }
        .foto{
            height: 100% !important;
            width: 100% !important;
        }
    }
</style>

<div class="header">
    <div class="container" class="mb-5">
        <nav class="breadcrumb-menu pb-3" style="--bs-breadcrumb-divider: '|';" aria-label="breadcrumb" style="color: #2B2E39;">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="<?= route('home') ?>">Inicio</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="<?= route('novedades') ?>">Novedades</a></li>
            </ol>
        </nav>
        <h1 class="titulo pb-4">Novedades</h1>
    </div>
</div>

<div class="container my-5">
    <div class="row">
        <?php foreach($novedades as $novedad){ ?>
            <div class="col-md-4 col-sm-12 my-3">
                <div class="card novedad">
                    <a href="<?= route('showNovedad', ['id' => $novedad->id]) ?>">
                        <img src="{{asset(Storage::url($novedad->foto))}}" class="foto">
                        <!-- <div class="foto" style="background-image: url('{{asset(Storage::url($novedad->foto))}}')"></div> -->
                    </a>
                    <div class="card-body">
                        <p class="novedad__categoria mb-2"><?= $novedad->Categoria->nombre ?></p>
                        <a href="<?= route('showNovedad', ['id' => $novedad->id]) ?>" class="nombre">
                            <h5 class="card-title novedad__titulo mb-2"><?= $novedad->titulo ?></h5>
                        </a>
                        
                        <p class="card-text novedad__descripcion"><?= $novedad->descripcion_corta ?></p>
                        
                        <div class="d-flex justify-content-between mt-5">
                            <h4 class="fecha"><?= $novedad->fechaParsed ?></h4>
                            <a href="<?= route('showNovedad', ['id' => $novedad->id ]) ?>">
                                <img src="{{ asset('images/flecha.png') }}">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>
</div>

@endsection
