@extends('master.principal')
@section('header')
<title> {{ $noticia->titulo }} | {{ config('vw.name') }} </title>
<style>

h2.projectSubtitle{
  font-size: 1.5rem;
}

.newsArticle {
  padding: 110px 0px 136px 0px;
  justify-content: center;
  background-color: #dfe4e8;
}
.newsArticle .title-newsArticle {
  padding: 0px 0 25px 0;
}
.newsArticle .title-newsArticle .projectTitle {
  font-size: 35px;
  font-weight: bold;
  color: #000000;
}
@media (max-width: 768px) {
  .newsArticle .title-newsArticle .projectTitle {
    font-size: 1.4em;
  }
}
.newsArticle .subtitle-newsArticle {
  padding: 0px 0 0 0;
  margin-top: 2ex;
  margin-bottom: 2ex;
  font-size: 22px;
}
.newsArticle .subtitle-newsArticle .projectTitle {
  font-weight: 400;
  font-size: 22px;
}
.newsArticle .text-newsArticle {
  text-align: left;
  padding: 0px 0px;
  margin-bottom: 2ex;
  font-weight: 400;
  font-size: 16px;
}
@media (max-width: 768px) {
  .newsArticle .text-newsArticle {
    font-size: 1.05em;
  }
}
.newsArticle .img-newsArticle {
  padding: 67px 0px !important;
}
.newsArticle .img-newsArticle img {
  width: 90%;
  margin: 0 5%;
}
.newsArticle .align-newsArticle-text {
  padding: 0px 290px;
}

@media only screen and (max-width: 576px) {
  .newsArticle {
    padding: 67px 20px 59px 20px !important;
  }
  .newsArticle .align-newsArticle-text {
    padding: 0px !important;
  }

  .img-newsArticle {
    padding: 35px 0px 50px 0px !important;
  }

  .title-newsArticle {
    padding: 0px 0 25px 0 !important;
  }

  .text-newsArticle {
    padding: 0px 0 0px 0 !important;
  }

  .subtitle-newsArticle {
    padding: 0px 0 !important;
  }
}
@media (max-width: 1100px) {
  .newsArticle {
    padding: 67px 39px 59px 20px;
  }
  .newsArticle .align-newsArticle-text {
    padding: 0px !important;
  }
  .newsArticle .img-newsArticle {
    padding: 35px 0px 50px 0px !important;
  }
}

</style>
@endsection
@section('content')

<div id="headerBreadcrumb" class="header__breadcrumb absolute" style="top: 98px;">
    <a href="{{ route('inicio') }}">inicio</a> / <a href="{{ route('novedades') }}">Novedades</a> / <a href="#">{{ $noticia->titulo }}</a>
</div>

<div class="newsArticle">
    <div class="align-newsArticle-text">
        
        <div class="title-newsArticle">
            <span>
                <h1 class="projectTitle">{{ $noticia->titulo }}</h1>
                <hr>

                <p itemprop="dateline">
                <time datetime="{{ $noticia->fecha }}" itemprop="datePublished">{{ date("d/m/Y", strtotime($noticia->fecha)) }}</time>
                </p>
            </span>
        </div>
        
        <div class="text-newsArticle">
            <span>
                <h2 class="projectSubtitle">{{ $noticia->subtitulo }}</h2>
            </span>
            <br>
            <span>
              <p class="content-section">{!! $noticia->texto !!}</p>
             </span>
        </div>

          @if(isset($noticia) && $noticia->imagen2 != null)
            <img loading="lazy" src="{{ asset('storage/noticias/' . $noticia->id . '/' . $noticia->imagen2) }}" class="img-fluid w-100 mt-3"
                alt="{{ $noticia->titulo }}">

          @else

           <img loading="lazy" src="{{ asset('storage/noticias/' . $noticia->id . '/' . $noticia->imagen) }}" class="img-fluid rounded mx-auto d-block pt-4"
                alt="{{ $noticia->titulo }}">

          @endif

    </div>
</div>

@endsection