@extends('layouts.app')

@section('content')
<div class="d-flex bg-white">
    <div class="left-image-section board-left-section flex-column d-none d-xl-flex">
        <div class="page-header">
            <div class="menu-root d-none d-xl-block">{{ $page['title'] }}@if($page['subTitle']) <i class="fa-solid fa-chevron-right"></i> {{ $page['subTitle'] }}@endif</div>
            <div class="header-title d-none d-xl-block">@if($page['subTitle']){{ $page['subTitle'] }}@else{{ $page['title']}}@endif</div>
            <div class="header-mobile-logo d-block d-xl-none"><img src="/images/word-logo-white.png" class="img-fluid"></div>
        </div>
        <div class="board-links">
            <a href="{{ route('board.list', ['notice'], false) }}"@if($board->code == 'notice') class="active"@endif><div>공지사항</div></a>
            <a href="{{ route('board.list', ['gallery'], false) }}"@if($board->code == 'gallery') class="active"@endif><div>시공사진</div></a>
            <a href="{{ route('board.create', ['inquiry'], false) }}"@if($board->code == 'inquiry') class="active"@endif><div>문의하기</div></a>
        </div>
    </div>
    <div class="board-section news-list">
        @if($data)
            <section class="news-column">
                @foreach($data as $i => $row)
                    @if($i > 0 && $i % 2 == 0)
            </section>
            <section class="news-column">
                @endif
                <div class="news-item">
                    <a href="{{ route('board.view', [$board->code, $row->uid], false) }}">
                        <div class="img-containter-fit"><img src="@if($row->image){{ route('image.thumbnail.rate', ['w800', $row->image], false) }}@else{{ '/images/no-img.png' }}@endif" class="img-fluid" onerror="this.src='/images/no-img.png'"/></div>
                        <div class="font-16 news-title cut-text">{{ $row->subject }}</div>
                        <div class="font-14 news-date">{{ date('Y.m.d', strtotime($row->created_at)) }}</div>
                    </a>
                </div>
                @endforeach
            </section>
        @else
            <div class="none-data">게시글이 없습니다.</div>
        @endif
   </div>
</div>
@endsection

@push('style')
<link rel="stylesheet" type="text/css" href="/css/board.css?v={{ $now }}">
@endpush

@push('scripts')
<script type="text/javascript" src="/js/board.js?v={{ $now }}"></script>
<script type="text/javascript">
const scrollContainer = document.querySelector('.news-list');

var ww = window.innerWidth;
var scrollEventHandler = function(evt){
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
}

initEvent(ww);

$(window).resize(function () {
    ww = window.innerWidth;
    initEvent(ww);
});

function initEvent(ww){
    if(ww >= 1200){
        scrollContainer.addEventListener('wheel',scrollEventHandler);
    }else{
        scrollContainer.removeEventListener('wheel',scrollEventHandler);
    }
}
</script>
@endpush