@extends('layouts.master')

@section('title')
Blog Detail
@endsection

@section('extra-css')
<style>
    .blog_img{
        width: 30%;
        height: 30%;
        border-radius: 3%; important;
    }
</style>
@endsection

@section('index')
<div class="content">
    <div class="col-md-12">
        <div class="card card-user">
            <div class="card-header">
                <h5 class="card-title">Blog Detail</h5>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <div class="form-line">
                        <label class="form-label">Title</label>
                        <input type="text" class="form-control" value="{{ $blog->title }}" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-line">
                        <label class="form-label">SubTitle</label>
                        <input type="text" class="form-control" value="{{ $blog->sub_title }}" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-line">
                        <label class="form-label">Description</label>
                        <span>{!! $blog->description !!}</span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-line">
                        <label class="form-label">Image</label><br>
                        <img class="img-fluid blog_img" src="{{url('storage/blog_images').'/'.$blog->image}}">
                    </div>
                </div>
                
                <a href="{!! route('blogs.index') !!}" class="btn btn-primary pull-right">Back</a>	
            </form>
        </div>
    </div>
</div>
</div>
</div>
@endsection

@section('extra-script')

@endsection