@extends('layouts.front.app')

@section('content')

<section>
  <div class="container">    
    <nav>
      <ol class="breadcrumb bg-white shadow-1 my-3">
        <li>
          <a href="{{ route('home') }}" class="font-weight-bold fosco-text"> 
            <i class="fa fa-home"></i> Home
            <i class="fas fa-angle-double-right mx-2 fosco-text"></i>
          </a>  
        </li>
        <li class="breadcrumb-item ">
          <a href="{{ route('blog') }}" class="font-weight-bolder text-dark">
            <i class="far fa-file-alt mr-1"></i> Blog
            <i class="fas fa-angle-double-right mx-1"></i>
          </a>
        </li>
        <li class="font-weight-bolder text-dark"> {{ $blog->nome }}</li>
      </ol>
    </nav>
  </div>
</section>

<section> 
  
  <div class="container">
    
    <div class="bg-white rounded blog shadow-1 mt-4 p-3">

      <h2 class="font-weight-bolder text-center">{{ $blog->nome }}</h2>
      
      <div class="d-block">
        {!! $blog->conteudo !!}
      </div>
     
    </div>
    
  </div>    
  
</section>

@endsection

@section("js")
<script>
  (function(){
    const image = document.querySelectorAll(".blog img")
    if(image){
     image.forEach(element => {
      element.classList.add("img-fluid")
      /*const src = element.src
      let url = src.replace("http://localhost:3000/", "https://eletriza.com.br/")       
      element.src = url*/
      element.setAttribute("style", "height:600px; max-width:100%");
     })
    }
  })();
</script>
@endsection