@extends('layouts.app')
@section('landingTitle', 'KlinikSapi.Go | Detail Informasi')
@section('content')
<section class="bg-white dark:bg-gray-900 pt-20">
  <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
    <h1 class="mt-5 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-4xl lg:text-5xl dark:text-white">{{ $informasi->judul }}</h1>
  </div>
</section>

<section class="flex flex-wrap gap-10 px-44 pb-20">
    <div class="w-full bg-white rounded-lg dark:bg-gray-800 dark:border-gray-700 mb-5" style="box-shadow: 0 0 10px rgba(13, 122, 255, 0.3);">
        <a href="#">
            <img class="rounded-t-lg" src="{{ asset('assets/images/informasi/'.$informasi->gambar) }}" alt="{{ $informasi->judul }}" />
        </a>
        <div class="p-5">
            <a href="#">
                <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ $informasi->judul }}</h5>
            </a>
            <h5 class="mb-2 font-bold tracking-tight text-blue-600 dark:text-white">Penulis: {{ $informasi->penulis }}; &nbsp; Kategori Informasi Penyakit: {{ $informasi->penyakit->penyakit }}; &nbsp; Dibuat: {{ $informasi->created_at }}</h5>
            <p class="mb-3 font-normal text-gray-700 dark:text-gray-400 ">{!! $informasi->artikel !!}</p>
        </div>
    </div>
</section>
@endsection