@extends('layouts.app')

@section('styles')

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<style type="text/css">
  p{
    color: #344050 !important;
    font-size: 1.44rem;
  }
  p > i{
      color: black
  }
</style>

@endsection

@section('content')

  <div class="container-fluid">

      <div class="row" style="margin-top: 7rem!important;">
          <div class="col-md-5 offset-md-3">
            <h2 class="text-left text-center">{{ ucwords($article->title)  }}</h2>
            <p class="text-muted text-center">Published: {{ human_date($article->created_at) }}</p>
          </div>

        <div class="col-md-10 offset-md-1">
          <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
              
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="{{ asset('assets/uploads/media/feature-images/'.$article->feature_img) }}" alt="{{ $article->feature_img }}" width="100%" height="400px">
                  <div class="carousel-caption d-none d-md-block">
                    <!-- <h5 class="text-muted">{{ ucwords($article->title)  }}</h5>
                    <p>Published: {{ human_date($article->created_at) }}</p> -->
                  </div>
                </div>
              </div>
              
            </div>
        </div>

      </div>

      <div class="row mt-5">
        
        <div class="col-md-9 offset-md-1">
            {!! $article->body !!}
        </div>

      </div>  

  </div>
@endsection