@extends('academy.layout')

@section('gnb', view('gnb', ['service'=>'academy']))

@section('subgnb', view('academy.gnb'))

@section('academy-css')
    <!-- promotion -->
    {!! resource('css/common/board.css') !!}
@endsection

@section("progress")
    @include('progress')
@endsection

@section("academy-content")
    <div id="wrap" class="boardPage free-study-room">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>IELTS 무료 자료실</h1>
            </div>

            <!-- 게시판 리스트 -->
            <div class="lectureArea">
                <div class="lecturePlayerArea">
                    <div class="titleWrap">
                        <div class="title customLine">아이엘츠 학원 핫이슈</div>
                        <p class="sub ellipsis_2 mo_tab-text">3주 만에 IELTS 7.5 달성! 실제 합격생 후기로 초단기 달성 가보자고~ 최대 2줄, 초과시 말줄임 됩니다. 3주 만에 IELTS 7.5 달성! 실제 합격생 후기</p>
                    </div>
                    <div class="videoWrap">
                        <div class="playWrap">
                            <iframe src="" title="시험대비 무료특강 동영상" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                        <div class="thumbnailWrap">
                            <p class="video-subject pc-text">[N개월 알짜패스]인강만으로 한 달 만에 overall 6.5</p>
                            <div class="scroll-x-active">
                                <!-- 활성화 버튼 active class 추가 -->
                                <button type="button" class="click thumb active" data-youtube="djKYUszYHDg"><figure style="background-image:url('https://img.youtube.com/vi/djKYUszYHDg/mqdefault.jpg')"></figure></button>
                                <button type="button" class="click thumb" data-youtube="oG9CrJ244Mc"><figure style="background-image:url('https://img.youtube.com/vi/oG9CrJ244Mc/mqdefault.jpg')"></button>
                                <button type="button" class="click thumb" data-youtube="bzTaEZaFMlA"><figure style="background-image:url('https://img.youtube.com/vi/bzTaEZaFMlA/mqdefault.jpg')"></button>
                            </div>
                            <a href="" class="moreBtn">초단기 고득점 달성! 학원상품 둘러보기 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke="var(--p-color2)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
                        </div>
                    </div>
                </div>

                <div class="lecture-list flex">
                    <!-- filter -->
                    <div class="list-filterWrap">
                        <div class="scroll-x-active">
                            <!-- 활성화 메뉴 active class 추가 -->
                            <a href="" class="click">전체</a>
                            <a href="" class="click">기출문제</a>
                            <a href="" class="click">알쓸용법</a>
                            <a href="" class="click">Voca</a>
                            <a href="" class="click">Listening</a>
                            <a href="" class="click">Reading</a>
                            <a href="" class="click">Writing</a>
                            <a href="" class="click active">Speaking</a>
                            <a href="" class="click">Test Review</a>
                        </div>
                    </div>

                    <!-- 리스트 순서 -->
                    <div class="list-order-dropDown">
                        <div class="dropDownMenu type2">
                            <div class="selectBox">
                                <button type="button" class="label" data-selected="최신순">최신순</button>
                                <div class="optionListWrap">
                                    <div class="scrollWidth">
                                        <ul class="optionList scrollWrap">
                                            <!-- 활성화 메뉴 active class 추가 -->
                                            <li class="optionItem"><a href="" data-account="최신순">최신순</a></li>
                                            <li class="optionItem active"><a href="" data-account="인기순">인기순</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 리스트 -->
                    <ul class="list flex">
                        <li>
                            <a href="view" class="go-viewPage">
                                <!--
                                    r : #FF7300, l : #FF00E5, s : #009F2D, w : #0059FF
                                -->
                                <p class="text ellipsis_2">'너 참 예쁘다'를 영어로 하면? <span class="s">beautiful만 떠오른다면</span> 지금 당장 보세요!</p>
                                <div class="teacher">
                                    <figure style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_teacher.png');"></figure>
                                    <p>다니엘 선생님</p>
                                </div>
                                <div class="category">Writing</div>
                            </a>
                            <div class="bottom flex align-c sb">
                                <p class="date">24.12.03</p>
                                <div class="reaction flex align-c">
                                    <div class="count">조회 <span>5</span></div>
                                    <!--
                                        like 갯수대로 .num에 숫자가 들어감
                                    -->
                                    <button type="button" class="like" data-number="">좋아요 <span class="num" >0</span></button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="view" class="go-viewPage">
                                <!--
                                    r : #FF7300, l : #FF00E5, s : #009F2D, w : #0059FF
                                -->
                                <p class="text ellipsis_2"><span class="r">economic</span>과 <span class="w">financial</span>은 동의어인가요?</p>
                                <div class="teacher">
                                    <figure style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_teacher.png');"></figure>
                                    <p>다니엘 선생님</p>
                                </div>
                                <div class="category">Writing</div>
                            </a>
                            <div class="bottom flex align-c sb">
                                <p class="date">24.12.03</p>
                                <div class="reaction flex align-c">
                                    <div class="count">조회 <span>5</span></div>
                                    <!--
                                        like 갯수대로 .num에 숫자가 들어감
                                    -->
                                    <button type="button" class="like" data-number="">좋아요 <span class="num" >13</span></button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="view" class="go-viewPage">
                                <!--
                                    r : #FF7300, l : #FF00E5, s : #009F2D, w : #0059FF
                                -->
                                <p class="text ellipsis_2"><span class="l">대한민국의 국민</span>이 되는 요건은 법률로 정한다. 재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을 해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다.</p>
                                <div class="teacher">
                                    <figure style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_teacher.png');"></figure>
                                    <p>다니엘 선생님</p>
                                </div>
                                <div class="category">Writing</div>
                            </a>
                            <div class="bottom flex align-c sb">
                                <p class="date">24.12.03</p>
                                <div class="reaction flex align-c">
                                    <div class="count">조회 <span>5</span></div>
                                    <!--
                                        like 갯수대로 .num에 숫자가 들어감
                                    -->
                                    <button type="button" class="like" data-number="">좋아요 <span class="num" >13</span></button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="view" class="go-viewPage">
                                <!--
                                    r : #FF7300, l : #FF00E5, s : #009F2D, w : #0059FF
                                -->
                                <p class="text ellipsis_2"><span class="r">economic</span>과 <span class="w">financial</span>은 동의어인가요?</p>
                                <div class="teacher">
                                    <figure style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_teacher.png');"></figure>
                                    <p>다니엘 선생님</p>
                                </div>
                                <div class="category">Writing</div>
                            </a>
                            <div class="bottom flex align-c sb">
                                <p class="date">24.12.03</p>
                                <div class="reaction flex align-c">
                                    <div class="count">조회 <span>5</span></div>
                                    <!--
                                        like 갯수대로 .num에 숫자가 들어감
                                    -->
                                    <button type="button" class="like" data-number="">좋아요 <span class="num" >13</span></button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('academy-script')
    <script>
        $(function(){
            // 좋아요 개수에 따라 data-number 값 변경
            $('.list .reaction .like').each(function(index,item){
                let _thisLikeNum = $(item).find('.num').text();
                $(item).attr('data-number', _thisLikeNum);
            });
        });
    </script>
@endsection