@extends('layout.mainlayout')

@section('content-wrapper')
    <!-- Main Content Header -->
    <div class="main-content-header">
        <h1>Cards</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/" role="button">Dashboard</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <span class="active">Cards</span>
            </li>
        </ol>
    </div>
    <!-- End Main Content Header -->

    <!-- Basic Cards -->
    <h6 class="mb-3">Basic Cards</h6>
    <div class="row">
        <div class="col-xl-4 col-lg-4 col-sm-6">
            <div class="card mb-30">
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/1.jpg') }}" alt="Card Image">
                <div class="card-body">
                    <div class="card-title h5">Card Heading</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <button type="button" class="btn btn-primary">Go somewhere</button>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-4 col-sm-6">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="card-title h5">Card Heading</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <button type="button" class="btn btn-primary">Button</button>
                </div>
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/2.jpg') }}" alt="Card Image">
            </div>
        </div>
        <div class="col-xl-4 col-lg-4 col-sm-12">
            <div class="card mb-30">
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/3.jpg') }}" alt="Card Image">
                <div class="card-body">
                    <div class="card-title h5">Card Heading</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <button type="button" class="btn btn-primary">Go somewhere</button>
                </div>
            </div>
        </div>
    </div>
    <!-- End Basic Cards -->

    <h6 class="mb-3">Cards Content Types</h6>
    <div class="row">
        <div class="col-xl-4 col-lg-4 col-sm-6">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="m-0 card-title h5">Card Heading</div>
                </div>
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/4.jpg') }}" alt="Card Image">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card Link</a>
                    <a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-sm-6">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="m-0 card-title h5">Card Heading</div>
                </div>
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/5.jpg') }}" alt="Card Image">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card Link</a>
                    <a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-sm-12">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="m-0 card-title h5">Card Heading</div>
                </div>
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/6.jpg') }}" alt="Card Image">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card Link</a>
                    <a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>
    </div>

    <h6 class="mb-3">Cards Without Image</h6>
    <div class="row">
        <div class="col-xl-4 col-lg-4 col-sm-6">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="card-title h5">Card Title</div>
                    <div class="mb-2 text-muted fs-12 card-subtitle h6">Card Subtitle</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card Link</a>
                    <a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-sm-6">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="card-title h5">Card Title</div>
                    <div class="mb-2 text-muted fs-12 card-subtitle h6">Card Subtitle</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card Link</a>
                    <a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-sm-12">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="card-title h5">Card Title</div>
                    <div class="mb-2 text-muted fs-12 card-subtitle h6">Card Subtitle</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card Link</a>
                    <a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>
    </div>

    <h6 class="mb-3">Cards with Image Caption</h6>
    <div class="row">
        <div class="col-xl-4 col-lg-4 col-sm-12">
            <div class="card mb-30">
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/7.jpg') }}" alt="Card Image">
                <div class="card-body">
                    <div class="card-title h5">Card Heading</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 5 mins ago</small>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-sm-12">
            <div class="card mb-30">
                <div class="card-body">
                    <div class="card-title h5">Card Heading</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 2 mins ago</small>
                    </p>
                </div>
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/8.jpg') }}" alt="Card Image">
            </div>
        </div>
        <div class="col-xl-4 col-lg-4 col-sm-12">
            <div class="card mb-30">
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/9.jpg') }}" alt="Card Image">
                <div class="card-body">
                    <div class="card-title h5">Card Heading</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <p class="card-text">
                        <small class="text-muted">Last updated 10 mins ago</small>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <h6 class="mb-3">Cards Text alignment</h6>
    <div class="row">
        <div class="col-xl-4 col-lg-4 col-sm-6">
            <div class="card text-left mb-30">
                <div class="card-body">
                    <div class="card-title h5">Card Title</div>
                    <div class="mb-2 text-muted fs-12 card-subtitle h6">Card Subtitle</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="card-link">Card Link</a><a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-sm-6">
            <div class="card text-center mb-30">
                <div class="card-body">
                    <div class="card-title h5">Card Title</div>
                    <div class="mb-2 text-muted fs-12 card-subtitle h6">Card Subtitle</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card Link</a>
                    <a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-sm-12">
            <div class="card text-right mb-30">
                <div class="card-body">
                    <div class="card-title h5">Card Title</div>
                    <div class="mb-2 text-muted fs-12 card-subtitle h6">Card Subtitle</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card Link</a>
                    <a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>
    </div>

    <h6 class="mb-3">Cards Kitchen Sink</h6>
    <div class="row">
        <div class="col-xl-4 col-lg-4 col-sm-6">
            <div class="card mb-30">
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/10.jpg') }}" alt="Card Image">
                <div class="card-body">
                    <div class="card-title h5">Card Title</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
                <div class="list-group-flush list-group">
                    <div class="list-group-item">Cras justo odio</div>
                    <div class="list-group-item">Dapibus ac facilisis in</div>
                    <div class="list-group-item">Vestibulum at eros</div>
                </div>
                <div class="card-body">
                    <a href="#" class="card-link">Card Link</a>
                    <a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-sm-6">
            <div class="card text-center mb-30">
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/11.jpg') }}" alt="Card Image">
                <div class="card-body">
                    <div class="card-title h5">Card Title</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
                <div class="list-group-flush list-group">
                    <div class="list-group-item">Cras justo odio</div>
                    <div class="list-group-item">Dapibus ac facilisis in</div>
                    <div class="list-group-item">Vestibulum at eros</div>
                </div>
                <div class="card-body">
                    <a href="#" class="card-link">Card Link</a>
                    <a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-sm-12">
            <div class="card text-right mb-30">
                <img class="card-img radius-0" src="{{ asset('assets/images/cards/12.jpg') }}" alt="Card Image">
                <div class="card-body">
                    <div class="card-title h5">Card Title</div>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
                <div class="list-group-flush list-group">
                    <div class="list-group-item">Cras justo odio</div>
                    <div class="list-group-item">Dapibus ac facilisis in</div>
                    <div class="list-group-item">Vestibulum at eros</div>
                </div>
                <div class="card-body">
                    <a href="#" class="card-link">Card Link</a>
                    <a href="#" class="card-link">Another Link</a>
                </div>
            </div>
        </div>
    </div>

    <h6 class="mb-3">Cards Header and Footer</h6>
    <div class="row">
        <div class="col-lg-6">
            <div class="card text-center mb-30">
                <div class="header card-header">Featured</div>
                <div class="card-body">
                    <div class="card-title h5">Special title treatment</div>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <button type="button" class="btn btn-primary">Go somewhere</button>
                </div>
                <div class="text-muted card-footer">2 days ago</div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card text-center mb-30">
                <div class="header card-header">Featured</div>
                <div class="card-body">
                    <div class="card-title h5">Special title treatment</div>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <button type="button" class="btn btn-primary">Go somewhere</button>
                </div>
                <div class="text-muted card-footer">2 days ago</div>
            </div>
        </div>
    </div>

    <h6 class="mb-3">Image Overlays</h6>
    <div class="row">
        <div class="col-lg-6">
            <div class="card bg-dark text-white mb-30">
                <img class="card-img" src="{{ asset('assets/images/cards/overlay-thumb-bg.jpg') }}" alt="Card image">
                <div class="card-img-overlay">
                    <div class="card-title h5">Card title</div>
                    <p class="white-color card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="white-color card-text">Last updated 3 mins ago</p>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card bg-dark text-white mb-30">
                <img class="card-img" src="{{ asset('assets/images/cards/overlay-thumb-bg.jpg') }}" alt="Card image">
                <div class="card-img-overlay">
                    <div class="card-title h5">Card title</div>
                    <p class="white-color card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="white-color card-text">Last updated 5 mins ago</p>
                </div>
            </div>
        </div>
    </div>
@endsection