@extends('layouts.app')
@section('title')
    Media Object
@endsection
@section('content')
    <x-page-title title="Components" subtitle="Media Object" />

    <div class="row">
        <div class="col-12">
            <h6 class="mb-0 text-uppercase">Basic Media Object</h6>
            <hr>
            <div class="card radius-10 rounded-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border bg-grd-primary"
                            width="90" height="90" alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0">Media heading</h5>
                            <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
                                condimentum nunc ac nisi vulputate fringilla</p>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="card radius-10 rounded-4">
                <div class="card-body">
                    <div class="d-flex flex-row-reverse align-items-center">
                        <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border bg-grd-warning"
                            width="90" height="90" alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0">Media heading</h5>
                            <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
                                condimentum nunc ac nisi vulputate fringilla</p>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="card radius-10 rounded-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border bg-grd-danger"
                            width="90" height="90" alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0">Media heading</h5>
                            <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
                                condimentum nunc ac nisi vulputate fringilla</p>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="card radius-10 rounded-4">
                <div class="card-body">
                    <div class="d-flex flex-row-reverse align-items-center">
                        <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border bg-grd-success"
                            width="90" height="90" alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0">Media heading</h5>
                            <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
                                condimentum nunc ac nisi vulputate fringilla</p>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="card radius-10 rounded-4 bg-grd-primary">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border bg-white"
                            width="90" height="90" alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0">Media heading</h5>
                            <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
                                condimentum nunc ac nisi vulputate fringilla</p>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="card radius-10 rounded-4 bg-grd-info">
                <div class="card-body">
                    <div class="d-flex flex-row-reverse align-items-center">
                        <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border bg-white"
                            width="90" height="90" alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0">Media heading</h5>
                            <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
                                condimentum nunc ac nisi vulputate fringilla</p>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="card radius-10 rounded-4 bg-grd-warning">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border bg-white"
                            width="90" height="90" alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0 text-dark">Media heading</h5>
                            <p class="mb-0 text-dark">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                                scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
                                turpis. Fusce condimentum nunc ac nisi vulputate fringilla</p>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="card radius-10 rounded-4 bg-grd-danger">
                <div class="card-body">
                    <div class="d-flex flex-row-reverse align-items-center">
                        <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border bg-white"
                            width="90" height="90" alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0">Media heading</h5>
                            <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
                                condimentum nunc ac nisi vulputate fringilla</p>
                        </div>
                    </div>
                </div>
            </div>
            <h6 class="mb-0 text-uppercase">Nesting Media Object</h6>
            <hr>
            <div class="card radius-10 rounded-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border bg-success"
                            width="90" height="90" alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0">Media heading</h5>
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
                            purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                            vulputate fringilla
                            <div class="d-flex align-items-center mt-3">
                                <a class="mr-3" href="#">
                                    <img src="https://placehold.co/110x110/png" class=" rounded-circle p-1 border bg-info"
                                        width="90" height="90" alt="...">
                                </a>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="mt-0">Media heading</h5>
                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
                                    sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
                                    condimentum nunc ac nisi vulputate fringilla
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h6 class="mb-0 text-uppercase">Alignment</h6>
            <hr>
            <div class="card radius-10 rounded-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <img src="https://placehold.co/110x110/png"
                            class="align-self-start rounded-circle p-1 border bg-danger" width="90" height="90"
                            alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0">Top-aligned media</h5>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
                                Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
                                ac nisi vulputate fringilla</p>
                            <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
                                penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center">
                        <img src="https://placehold.co/110x110/png"
                            class="align-self-center rounded-circle p-1 border bg-primary" width="90" height="90"
                            alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0">Center-aligned media</h5>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
                                Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
                                ac nisi vulputate fringilla</p>
                            <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum
                                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center">
                        <img src="https://placehold.co/110x110/png"
                            class="align-self-end rounded-circle p-1 border bg-white" width="90" height="90"
                            alt="...">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0">Bottom-aligned media</h5>
                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
                                Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
                                ac nisi vulputate fringilla</p>
                            <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum
                                sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mt-0 mb-1">Order Change media</h5>
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
                            purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                            vulputate fringilla
                        </div>
                        <img src="https://placehold.co/110x110/png" class="ml-3 rounded-circle p-1 border" width="90"
                            height="90" alt="...">
                    </div>
                </div>
            </div>
            <h6 class="mb-0 text-uppercase">Media list</h6>
            <hr>
            <div class="card radius-10 rounded-4">
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="d-flex align-items-center border-bottom pb-2">
                            <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border" width="90"
                                height="90" alt="...">
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mt-0 mb-1">List-based media object</h5>
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
                                Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
                                ac nisi vulputate fringilla
                            </div>
                        </li>
                        <li class="d-flex align-items-center my-4 border-bottom pb-2">
                            <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border" width="90"
                                height="90" alt="...">
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mt-0 mb-1">List-based media object</h5>
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
                                Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
                                ac nisi vulputate fringilla
                            </div>
                        </li>
                        <li class="d-flex align-items-center">
                            <img src="https://placehold.co/110x110/png" class="rounded-circle p-1 border" width="90"
                                height="90" alt="...">
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mt-0 mb-1">List-based media object</h5>
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
                                Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
                                ac nisi vulputate fringilla
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <!--bootstrap js-->
    <script src="{{ URL::asset('build/js/bootstrap.bundle.min.js') }}"></script>

    <!--plugins-->
    <script src="{{ URL::asset('build/js/jquery.min.js') }}"></script>
    <!--plugins-->
    <script src="{{ URL::asset('build/plugins/perfect-scrollbar/js/perfect-scrollbar.js') }}"></script>
    <script src="{{ URL::asset('build/plugins/metismenu/metisMenu.min.js') }}"></script>
    <script src="{{ URL::asset('build/plugins/simplebar/js/simplebar.min.js') }}"></script>
    <script src="{{ URL::asset('build/js/main.js') }}"></script>
@endpush