@extends('views.layouts.master')
@section('content')
    <!--inner Title Start -->
    <div class="sms_title_main_wrapper">

        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="sms_inner_title_heading full_width">
                        <h2>item gallery</h2>

                        <ul>
                            <li><a href="#">Home</a> &nbsp;&nbsp;&nbsp;/</li>
                            <li>item gallery</li>
                        </ul>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- inner Title End -->
    <!-- about us wrapper start -->
    <div class="full_width sub_wrapper goods_list">

        <!-- container 시작 -->
        <div class="container">

        	<!-- row 시작 -->
            <div class="row">

                <!-- 왼쪽 시작 -->
                <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-xs-12 left_wrap">

                    <div>
                        <ul>
                            <li class="sidebar_widget full_width">
                                <strong class="accordion"><span>카테고리</span></strong>
                                <ul class="panel">
                                    <li><a href="#" class="nav-link sel">카테고리1</a></li>
                                    <li><a href="#" class="nav-link">카테고리2</a></li>
                                    <li><a href="#" class="nav-link">카테고리3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                </div>

                <script>
                    var acc = document.getElementsByClassName("accordion");
                    var i;

                    for (i = 0; i < acc.length; i++) {
                        acc[i].addEventListener("click", function () {
                            this.classList.toggle("active");
                            var panel = this.nextElementSibling;
                            if (panel.style.maxHeight) {
                                panel.style.maxHeight = null;
                            } else {
                                panel.style.maxHeight = panel.scrollHeight + "px";
                            }
                        });
                    }
                </script>
                 <!--// 왼쪽 끝 -->


                <!-- 오른쪽 시작 -->
                <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-xs-12 right_wrap">
                    <h2>카테고리1</h2>

                    <div class="search_box">
                        <div>
                            <input type="text"><button type="button" class="btn"><i class='fa fa-search'></i></button>
                        </div>
                    </div>

                    <div class="item_gallery">
                        <div>
                            <div class="pro_img"><img src="{{ asset('/themes/eyerecord/pro/resources/images/pic.jpg') }}"></div>
                            <dl>
                                <dt>상품명이 나옵니다.</dt>
                                <dd class="product_info">
                                    상품에 대한 간략한 설명이 나옵니다. 상품설명이 나옵니다.
                                </dd>
                                <dd class="pro_price">0,000,000원</dd>
                            </dl>
                        </div>

                        <div>
                            <div class="pro_img"><img src="{{ asset('/themes/eyerecord/pro/resources/images/pic.jpg') }}"></div>
                            <dl>
                                <dt>상품명이 나옵니다.</dt>
                                <dd class="product_info">
                                    상품에 대한 간략한 설명이 나옵니다. 상품설명이 나옵니다.
                                </dd>
                                <dd class="pro_price">0,000,000원</dd>
                            </dl>
                        </div>

                        <div>
                            <div class="pro_img"><img src="{{ asset('/themes/eyerecord/pro/resources/images/pic.jpg') }}"></div>
                            <dl>
                                <dt>상품명이 나옵니다.</dt>
                                <dd class="product_info">
                                    상품에 대한 간략한 설명이 나옵니다. 상품설명이 나옵니다.
                                </dd>
                                <dd class="pro_price">0,000,000원</dd>
                            </dl>
                        </div>

                        <div>
                            <div class="pro_img"><img src="{{ asset('/themes/eyerecord/pro/resources/images/pic.jpg') }}"></div>
                            <dl>
                                <dt>상품명이 나옵니다.</dt>
                                <dd class="product_info">
                                    상품에 대한 간략한 설명이 나옵니다. 상품설명이 나옵니다.
                                </dd>
                                <dd class="pro_price">0,000,000원</dd>
                            </dl>
                        </div>

                        <div>
                            <div class="pro_img"><img src="{{ asset('/themes/eyerecord/pro/resources/images/pic.jpg') }}"></div>
                            <dl>
                                <dt>상품명이 나옵니다.</dt>
                                <dd class="product_info">
                                    상품에 대한 간략한 설명이 나옵니다. 상품설명이 나옵니다.
                                </dd>
                                <dd class="pro_price">0,000,000원</dd>
                            </dl>
                        </div>

                        <div>
                            <div class="pro_img"><img src="{{ asset('/themes/eyerecord/pro/resources/images/pic.jpg') }}"></div>
                            <dl>
                                <dt>상품명이 나옵니다.</dt>
                                <dd class="product_info">
                                    상품에 대한 간략한 설명이 나옵니다. 상품설명이 나옵니다.
                                </dd>
                                <dd class="pro_price">0,000,000원</dd>
                            </dl>
                        </div>

                        <div>
                            <div class="pro_img"><img src="{{ asset('/themes/eyerecord/pro/resources/images/pic.jpg') }}"></div>
                            <dl>
                                <dt>상품명이 나옵니다.</dt>
                                <dd class="product_info">
                                    상품에 대한 간략한 설명이 나옵니다. 상품설명이 나옵니다.
                                </dd>
                                <dd class="pro_price">0,000,000원</dd>
                            </dl>
                        </div>

                    </div>

                    <!-- 페이지네이션 시작 : 활성화시 a 태그에 "active" class 추가 -->
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                    <div class="blog_pagination_section full_width">
                        <ul>
                            <li>
                                <a href="#" class="prev"> <i class="flaticon-left-arrow"></i>
                                </a>
                            </li>
                            <li><a href="#">1</a>
                            </li>
                            <li class="third_pagger"><a href="#">2</a>
                            </li>
                            <li class="d-block d-sm-block d-md-block d-lg-block"><a href="#">3</a>
                            </li>
                            <li class="d-none d-sm-block d-md-block d-lg-block"><a href="#">...</a>
                            </li>
                            <li class="d-none d-sm-block d-md-block d-lg-block"><a href="#">6</a>
                            </li>
                            <li>
                                <a href="#" class="next"> <i class="flaticon-right-arrow"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                    <!--// 페이지네이션 끝 -->

                </div>
                <!--// 오른쪽 끝 -->

            </div>
            <!--// row 끝-->

        </div>
        <!--// container 끝 -->


    </div>

@endsection