@extends('frontend.layouts.master')
@section('content')
    <div class="bg-image"
         style="background-image: url('{{ asset('/img/bg-img.jpg') }}');background-size: cover;background-repeat: no-repeat;">
        <div class="bg-primary-default">
            <div class="container p-lg-0">
                <div class="row">
                    <div class="col-lg-11">
                        <div class="d-flex align-items-center mb-7 py-20">
                            <!--begin::Avatar-->
                            <div class="bg-primary me-5 p-5">
                                <div class="symbol symbol-100px ">
                                    <span class="symbol-label bg-light-primary">
                                        <!--begin::Svg Icon | path: icons/duotone/Communication/Group-chat.svg-->
                                        <span class="svg-icon svg-icon-2x svg-icon-primary">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"
                                                 viewBox="0 0 24 24" version="1.1">
                                                <path
                                                        d="M16,15.6315789 L16,12 C16,10.3431458 14.6568542,9 13,9 L6.16183229,9 L6.16183229,5.52631579 C6.16183229,4.13107011 7.29290239,3 8.68814808,3 L20.4776218,3 C21.8728674,3 23.0039375,4.13107011 23.0039375,5.52631579 L23.0039375,13.1052632 L23.0206157,17.786793 C23.0215995,18.0629336 22.7985408,18.2875874 22.5224001,18.2885711 C22.3891754,18.2890457 22.2612702,18.2363324 22.1670655,18.1421277 L19.6565168,15.6315789 L16,15.6315789 Z"
                                                        fill="#000000"></path>
                                                <path
                                                        d="M1.98505595,18 L1.98505595,13 C1.98505595,11.8954305 2.88048645,11 3.98505595,11 L11.9850559,11 C13.0896254,11 13.9850559,11.8954305 13.9850559,13 L13.9850559,18 C13.9850559,19.1045695 13.0896254,20 11.9850559,20 L4.10078614,20 L2.85693427,21.1905292 C2.65744295,21.3814685 2.34093638,21.3745358 2.14999706,21.1750444 C2.06092565,21.0819836 2.01120804,20.958136 2.01120804,20.8293182 L2.01120804,18.32426 C1.99400175,18.2187196 1.98505595,18.1104045 1.98505595,18 Z M6.5,14 C6.22385763,14 6,14.2238576 6,14.5 C6,14.7761424 6.22385763,15 6.5,15 L11.5,15 C11.7761424,15 12,14.7761424 12,14.5 C12,14.2238576 11.7761424,14 11.5,14 L6.5,14 Z M9.5,16 C9.22385763,16 9,16.2238576 9,16.5 C9,16.7761424 9.22385763,17 9.5,17 L11.5,17 C11.7761424,17 12,16.7761424 12,16.5 C12,16.2238576 11.7761424,16 11.5,16 L9.5,16 Z"
                                                        fill="#000000" opacity="0.3"></path>
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </span>
                                </div>
                            </div>
                            <!--end::Avatar-->
                            <!--begin::Text-->
                            <div class="flex-grow-1">
                                <a href="#" class="text-white fw-bolder text-hover-primary fs-1">
                                    {{$course->heading}}
                                </a>
                                @if(isset($course->duration->name))
                                <p class="text-white mb-1 fs-3">
                                    Duration: <b>{{$course->duration->name}}</b>
                                </p>
                                @endif
                                <p class="py-2 bg-light-primary btn-sm btn">
                                    {{$course->sub_heading}}
                                </p>
                            </div>
                            <!--end::Text-->
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    <div class="details_pags pt-10">
        <div class="container p-lg-0">
            <div class="row g-1">
                <div class="col-xl-3">
                    <!--begin::Aside-->
                    <div class="mb-8 mb-lg-0 me-lg-9">
                        <div class="pt-4">
                            <form class="mb-0" action="" method="POST">
                                <div class="input-group">
                                    <input type="email" class="form-control" id="dm-subscribe-email"
                                           name="dm-subscribe-email" placeholder="Search Courses">
                                    <div class="input-group-append">
                                        <button type="button"
                                                class="btn btn-admission-nepal-subcribe d-lg-none">
                                            Search</button>
                                        <button type="button"
                                                class="btn btn-admission-nepal-subcribe d-none d-lg-block"> <i
                                                    class="fa fa-search text-white"></i></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="pt-4">
                            <!--begin::Form-->
                            <form action="#">
                                <!--begin::Card-->
                                <div class="card border_style">
                                    <div class="card-header bg-light-primary">
                                        <h3 class="card-title">Send Enquiry
                                        </h3>
                                    </div>
                                    <!--begin::Body-->
                                    <div class="card-body px-5">
                                        <!--begin::Input group-->
                                        <div class="mb-5">
                                            <input type="text" class="form-control form-control" placeholder="Your Name"
                                                   name="name" />
                                        </div>
                                        <div class="mb-5">
                                            <input type="text" class="form-control form-control"
                                                   placeholder="Your Email" name="name" />
                                        </div>
                                        <div class="mb-5">
                                            <input type="text" class="form-control form-control"
                                                   placeholder="Contat Number" name="name" />
                                        </div>
                                        <div class="mb-5">
                                            <button class="btn btn-primary w-100" type="submit">Send Enquiry</button>
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Body-->
                                </div>
                                <!--end::Card-->
                            </form>
                            <!--end::Form-->
                        </div>
                        <div class="pt-4">
                            <!--begin::Form-->
                            <form action="#">
                                <!--begin::Card-->
                                <div class="card">
                                    <!--begin::Body-->
                                    <div class="card-body px-5 border_style">
                                        <!--begin::Input group-->
                                        <div class="mb-5">
                                            <label class="fs-6 form-label fw-bolder text-dark">Courses Duration</label>
                                            <!--begin::Radio group-->
                                            <div class="nav-group nav-group-fluid">
                                                <!--begin::Option-->
                                                <label>
                                                    <input type="radio" class="btn-check" name="type" value="has"
                                                           checked="checked" />
                                                    <span
                                                            class="btn btn-sm btn-color-muted btn-active btn-active-primary fw-bolder px-4">1-5</span>
                                                </label>
                                                <!--end::Option-->
                                                <!--begin::Option-->
                                                <label>
                                                    <input type="radio" class="btn-check" name="type" value="users" />
                                                    <span
                                                            class="btn btn-sm btn-color-muted btn-active btn-active-primary fw-bolder px-4">5-10</span>
                                                </label>
                                                <!--end::Option-->
                                                <!--begin::Option-->
                                                <label>
                                                    <input type="radio" class="btn-check" name="type" value="orders" />
                                                    <span
                                                            class="btn btn-sm btn-color-muted btn-active btn-active-primary fw-bolder px-4">10++</span>
                                                </label>
                                                <!--end::Option-->
                                            </div>
                                            <!--end::Radio group-->
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Input group-->
                                        <div class="mb-5">
                                            <label class="fs-6 form-label fw-bolder text-dark">Courses Fees</label>
                                            <!--begin::Dialer-->
                                            <div class="position-relative" data-kt-dialer="true"
                                                 data-kt-dialer-min="1000" data-kt-dialer-max="50000"
                                                 data-kt-dialer-step="1000" data-kt-dialer-prefix="RS"
                                                 data-kt-dialer-decimals="2">
                                                <!--begin::Decrease control-->
                                                <button type="button"
                                                        class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 start-0"
                                                        data-kt-dialer-control="decrease">
                                                    <!--begin::Svg Icon | path: icons/duotone/Code/Minus.svg-->
                                                    <span class="svg-icon svg-icon-1">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24px"
                                                             height="24px" viewBox="0 0 24 24" version="1.1">
                                                            <circle fill="#000000" opacity="0.3" cx="12" cy="12"
                                                                    r="10" />
                                                            <rect fill="#000000" x="6" y="11" width="12" height="2"
                                                                  rx="1" />
                                                        </svg>
                                                    </span>
                                                    <!--end::Svg Icon-->
                                                </button>
                                                <!--end::Decrease control-->
                                                <!--begin::Input control-->
                                                <input type="text"
                                                       class="form-control form-control-solid border-0 ps-12"
                                                       data-kt-dialer-control="input" placeholder="Amount"
                                                       name="manageBudget" readonly="readonly" value="RS50" />
                                                <!--end::Input control-->
                                                <!--begin::Increase control-->
                                                <button type="button"
                                                        class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 end-0"
                                                        data-kt-dialer-control="increase">
                                                    <!--begin::Svg Icon | path: icons/duotone/Code/Plus.svg-->
                                                    <span class="svg-icon svg-icon-1">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24px"
                                                             height="24px" viewBox="0 0 24 24" version="1.1">
                                                            <circle fill="#000000" opacity="0.3" cx="12" cy="12"
                                                                    r="10" />
                                                            <path
                                                                    d="M11,11 L11,7 C11,6.44771525 11.4477153,6 12,6 C12.5522847,6 13,6.44771525 13,7 L13,11 L17,11 C17.5522847,11 18,11.4477153 18,12 C18,12.5522847 17.5522847,13 17,13 L13,13 L13,17 C13,17.5522847 12.5522847,18 12,18 C11.4477153,18 11,17.5522847 11,17 L11,13 L7,13 C6.44771525,13 6,12.5522847 6,12 C6,11.4477153 6.44771525,11 7,11 L11,11 Z"
                                                                    fill="#000000" />
                                                        </svg>
                                                    </span>
                                                    <!--end::Svg Icon-->
                                                </button>
                                                <!--end::Increase control-->
                                            </div>
                                            <!--end::Dialer-->
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Input group-->
                                        <div class="mb-10">
                                            <label class="fs-6 form-label fw-bolder text-dark mb-5">Categories</label>
                                            <!--begin::Checkbox-->
                                            <div class="form-check form-check-custom form-check-solid mb-5">
                                                <input class="form-check-input" type="checkbox"
                                                       id="kt_search_category_1" />
                                                <label class="form-check-label flex-grow-1 fw-bold text-gray-700 fs-6"
                                                       for="kt_search_category_1">Japanese</label>
                                                <span class="text-gray-400 fw-bolder">3</span>
                                            </div>
                                            <!--end::Checkbox-->
                                            
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Action-->
                                        <div class="d-flex align-items-center justify-content-end">
                                            <a href="{{ url('courses') }}"
                                               class="btn btn-active-light-primary btn-color-gray-400 me-3">Discard</a>
                                            <a href="{{ url('courses') }}" class="btn btn-primary">Search</a>
                                        </div>
                                        <!--end::Action-->
                                    </div>
                                    <!--end::Body-->
                                </div>
                                <!--end::Card-->
                            </form>
                            <!--end::Form-->
                        </div>
                        <div class="py-4">
                            <!--begin::Card-->
                            <div class="card border_style">
                                <div class="card-header bg-light-primary">
                                    <h3 class="card-title">Related Courses

                                    </h3>
                                </div>
                                <!--begin::Body-->
                                <div class="card-body px-5">
                                    <!--begin::Item-->
                                    <div class="d-flex align-items-center mb-7">
                                        <!--begin::Symbol-->
                                        <div class="symbol symbol-50px me-5">
                                                    <span class="symbol-label bg-light-success">
                                                        <!--begin::Svg Icon | path: icons/duotone/Home/Library.svg-->
                                                        <span class="svg-icon svg-icon-2x svg-icon-success">
                                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                    <rect x="0" y="0" width="24" height="24" />
                                                                    <path d="M5,3 L6,3 C6.55228475,3 7,3.44771525 7,4 L7,20 C7,20.5522847 6.55228475,21 6,21 L5,21 C4.44771525,21 4,20.5522847 4,20 L4,4 C4,3.44771525 4.44771525,3 5,3 Z M10,3 L11,3 C11.5522847,3 12,3.44771525 12,4 L12,20 C12,20.5522847 11.5522847,21 11,21 L10,21 C9.44771525,21 9,20.5522847 9,20 L9,4 C9,3.44771525 9.44771525,3 10,3 Z" fill="#000000" />
                                                                    <rect fill="#000000" opacity="0.3" transform="translate(17.825568, 11.945519) rotate(-19.000000) translate(-17.825568, -11.945519)" x="16.3255682" y="2.94551858" width="3" height="18" rx="1" />
                                                                </g>
                                                            </svg>
                                                        </span>
                                                        <!--end::Svg Icon-->
                                                    </span>
                                        </div>
                                        <!--end::Symbol-->
                                        <!--begin::Text-->
                                        <div class="d-flex flex-column">
                                            <a href="#" class="text-dark text-hover-primary fs-6 fw-bolder">Basic Japanese Language Class</a>
                                            <span class="text-muted fw-bold">Six Months</span>
                                        </div>
                                        <!--end::Text-->
                                    </div>
                                    <!--end::Item-->
                                    <!--begin::Item-->
                                    <div class="d-flex align-items-center mb-7">
                                        <!--begin::Symbol-->
                                        <div class="symbol symbol-50px me-5">
                                                    <span class="symbol-label bg-light-warning">
                                                        <!--begin::Svg Icon | path: icons/duotone/Communication/Write.svg-->
                                                        <span class="svg-icon svg-icon-2x svg-icon-warning">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                                <path d="M12.2674799,18.2323597 L12.0084872,5.45852451 C12.0004303,5.06114792 12.1504154,4.6768183 12.4255037,4.38993949 L15.0030167,1.70195304 L17.5910752,4.40093695 C17.8599071,4.6812911 18.0095067,5.05499603 18.0083938,5.44341307 L17.9718262,18.2062508 C17.9694575,19.0329966 17.2985816,19.701953 16.4718324,19.701953 L13.7671717,19.701953 C12.9505952,19.701953 12.2840328,19.0487684 12.2674799,18.2323597 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.701953, 10.701953) rotate(-135.000000) translate(-14.701953, -10.701953)" />
                                                                <path d="M12.9,2 C13.4522847,2 13.9,2.44771525 13.9,3 C13.9,3.55228475 13.4522847,4 12.9,4 L6,4 C4.8954305,4 4,4.8954305 4,6 L4,18 C4,19.1045695 4.8954305,20 6,20 L18,20 C19.1045695,20 20,19.1045695 20,18 L20,13 C20,12.4477153 20.4477153,12 21,12 C21.5522847,12 22,12.4477153 22,13 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,6 C2,3.790861 3.790861,2 6,2 L12.9,2 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                                            </svg>
                                                        </span>
                                                        <!--end::Svg Icon-->
                                                    </span>
                                        </div>
                                        <!--end::Symbol-->
                                        <!--begin::Text-->
                                        <div class="d-flex flex-column">
                                            <a href="#" class="text-dark text-hover-primary fs-6 fw-bolder">Intermediate Japanese Language Class</a>
                                            <span class="text-muted fw-bold">Six Months</span>
                                        </div>
                                        <!--end::Text-->
                                    </div>
                                    <!--end::Item-->
                                    <!--begin::Item-->
                                    <div class="d-flex align-items-center mb-7">
                                        <!--begin::Symbol-->
                                        <div class="symbol symbol-50px me-5">
                                                    <span class="symbol-label bg-light-primary">
                                                        <!--begin::Svg Icon | path: icons/duotone/Communication/Group-chat.svg-->
                                                        <span class="svg-icon svg-icon-2x svg-icon-primary">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                                <path d="M16,15.6315789 L16,12 C16,10.3431458 14.6568542,9 13,9 L6.16183229,9 L6.16183229,5.52631579 C6.16183229,4.13107011 7.29290239,3 8.68814808,3 L20.4776218,3 C21.8728674,3 23.0039375,4.13107011 23.0039375,5.52631579 L23.0039375,13.1052632 L23.0206157,17.786793 C23.0215995,18.0629336 22.7985408,18.2875874 22.5224001,18.2885711 C22.3891754,18.2890457 22.2612702,18.2363324 22.1670655,18.1421277 L19.6565168,15.6315789 L16,15.6315789 Z" fill="#000000" />
                                                                <path d="M1.98505595,18 L1.98505595,13 C1.98505595,11.8954305 2.88048645,11 3.98505595,11 L11.9850559,11 C13.0896254,11 13.9850559,11.8954305 13.9850559,13 L13.9850559,18 C13.9850559,19.1045695 13.0896254,20 11.9850559,20 L4.10078614,20 L2.85693427,21.1905292 C2.65744295,21.3814685 2.34093638,21.3745358 2.14999706,21.1750444 C2.06092565,21.0819836 2.01120804,20.958136 2.01120804,20.8293182 L2.01120804,18.32426 C1.99400175,18.2187196 1.98505595,18.1104045 1.98505595,18 Z M6.5,14 C6.22385763,14 6,14.2238576 6,14.5 C6,14.7761424 6.22385763,15 6.5,15 L11.5,15 C11.7761424,15 12,14.7761424 12,14.5 C12,14.2238576 11.7761424,14 11.5,14 L6.5,14 Z M9.5,16 C9.22385763,16 9,16.2238576 9,16.5 C9,16.7761424 9.22385763,17 9.5,17 L11.5,17 C11.7761424,17 12,16.7761424 12,16.5 C12,16.2238576 11.7761424,16 11.5,16 L9.5,16 Z" fill="#000000" opacity="0.3" />
                                                            </svg>
                                                        </span>
                                                        <!--end::Svg Icon-->
                                                    </span>
                                        </div>
                                        <!--end::Symbol-->
                                        <!--begin::Text-->
                                        <div class="d-flex flex-column">
                                            <a href="#" class="text-dark text-hover-primary fs-6 fw-bolder">Private Japanese Language Class</a>
                                            <span class="text-muted fw-bold">Six Months</span>
                                        </div>
                                        <!--end::Text-->
                                    </div>
                                    <!--end::Item-->
                                </div>
                                <!--end::Body-->
                            </div>
                            <!--end::Card-->
                        </div>

                    </div>
                    <!--end::Aside-->
                </div>
                <div class="col-xl-9">
                    <!--begin::Extended content-->
                    <div class="mb-13">
                        <!--begin::Content-->
                        <div class="mb-15">
                            <!--begin::Title-->
                            <h4 class="fs-2x text-gray-800 w-bolder mb-6">{{$course->heading}}
                            </h4>
                            <!--end::Title-->
                            <div>
                                {!! $course->details !!}
                            </div>
                        </div>
                        <!--end::Content-->
                        @if(count($topics)>0)
                            <!--begin::Item-->
                            <div class="mb-15">
                                <!--begin::Title-->
                                <h3 class="text-gray-800 w-bolder mb-4">Topics</h3>
                                <!--end::Title-->
                                <!--begin::Accordion-->
                                @foreach($topics as $key=>$topic)
                                <!--begin::Section-->
                                <div class="m-0">
                                    <!--begin::Heading-->
                                    <div class="d-flex align-items-center collapsible py-3 toggle mb-0"
                                         data-bs-toggle="collapse" data-bs-target="#kt_job_{{$course->id}}_{{$topic->id}}">
                                        <!--begin::Icon-->
                                        <div class="btn btn-sm btn-icon mw-20px btn-active-color-primary @if($key==0) @else collapsed @endif me-5">
                                            <!--begin::Svg Icon | path: icons/duotone/Interface/Minus-Square.svg-->
                                            <span class="svg-icon toggle-on svg-icon-primary svg-icon-1">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                     viewBox="0 0 24 24" fill="none">
                                                    <path opacity="0.25"
                                                          d="M6.54184 2.36899C4.34504 2.65912 2.65912 4.34504 2.36899 6.54184C2.16953 8.05208 2 9.94127 2 12C2 14.0587 2.16953 15.9479 2.36899 17.4582C2.65912 19.655 4.34504 21.3409 6.54184 21.631C8.05208 21.8305 9.94127 22 12 22C14.0587 22 15.9479 21.8305 17.4582 21.631C19.655 21.3409 21.3409 19.655 21.631 17.4582C21.8305 15.9479 22 14.0587 22 12C22 9.94127 21.8305 8.05208 21.631 6.54184C21.3409 4.34504 19.655 2.65912 17.4582 2.36899C15.9479 2.16953 14.0587 2 12 2C9.94127 2 8.05208 2.16953 6.54184 2.36899Z"
                                                          fill="#12131A" />
                                                    <path
                                                            d="M8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H8Z"
                                                            fill="#12131A" />
                                                </svg>
                                            </span>
                                            <!--end::Svg Icon-->
                                            <!--begin::Svg Icon | path: icons/duotone/Interface/Plus-Square.svg-->
                                            <span class="svg-icon toggle-off svg-icon-1">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                     viewBox="0 0 24 24" fill="none">
                                                    <path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd"
                                                          d="M6.54184 2.36899C4.34504 2.65912 2.65912 4.34504 2.36899 6.54184C2.16953 8.05208 2 9.94127 2 12C2 14.0587 2.16953 15.9479 2.36899 17.4582C2.65912 19.655 4.34504 21.3409 6.54184 21.631C8.05208 21.8305 9.94127 22 12 22C14.0587 22 15.9479 21.8305 17.4582 21.631C19.655 21.3409 21.3409 19.655 21.631 17.4582C21.8305 15.9479 22 14.0587 22 12C22 9.94127 21.8305 8.05208 21.631 6.54184C21.3409 4.34504 19.655 2.65912 17.4582 2.36899C15.9479 2.16953 14.0587 2 12 2C9.94127 2 8.05208 2.16953 6.54184 2.36899Z"
                                                          fill="#12131A" />
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                          d="M12 17C12.5523 17 13 16.5523 13 16V13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H13V8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V11H8C7.44772 11 7 11.4477 7 12C7 12.5523 7.44771 13 8 13H11V16C11 16.5523 11.4477 17 12 17Z"
                                                          fill="#12131A" />
                                                </svg>
                                            </span>
                                            <!--end::Svg Icon-->
                                        </div>
                                        <!--end::Icon-->
                                        <!--begin::Title-->
                                        <h4 class="text-gray-800 text-hover-primary fw-bolder cursor-pointer mb-0">{{$topic->heading}}</h4>
                                        <!--end::Title-->
                                    </div>
                                    <!--end::Heading-->
                                    <!--begin::Body-->
                                    <div id="kt_job_{{$course->id}}_{{$topic->id}}" class="collapse @if($key==0) show @endif fs-6 ms-1">
                                        <!--begin::Text-->
                                        <div class="mb-4 text-gray-600 fw-bold fs-6 ps-10">
                                            {!! $topic->details !!}
                                        </div>
                                        <!--end::Text-->
                                    </div>
                                    <!--end::Content-->
                                    <!--begin::Separator-->
                                    <div class="separator separator-dashed"></div>
                                    <!--end::Separator-->
                                </div>
                                <!--end::Section-->
                                @endforeach
                            </div>
                            <!--end::Item-->
                        @endif
                    </div>
                    <!--end::Extended content-->
                </div>
            </div>
        </div>
    </div>

@endsection