@php use Carbon\Carbon; @endphp
@php use App\Libraries\Text; @endphp




<div>
    <div class="title_box d-flex justify-content-between align-items-center flex-wrap inview
        {{-- 如果是第一次渲染才會使用動畫 --}}
        @if(!isset(request()->components)) fadeIn_up @endif
    ">
        <h2 id="title_length" class="text-center m-0 lh-1">相簿專區<br><span>Column</span></h2>
        <div class="fashion-column border_line d-none d-md-block"></div>
        {{ $posts->onEachSide(1)->links(data: ['scrollTo' => false]) }}
    </div>
    <ul class="list_box m-0 p-0 d-block d-md-flex">
        @foreach($posts as $post)
            <li class="inview
            {{-- 如果是第一次渲染才會使用動畫 --}}
            @if(!isset(request()->components)) fadeIn_up @endif
        ">
                <a href="{{ route("foreground.eventRecap.show", $post->id) }}"
                   class="text-decoration-none text-brown01">
                    <div class="img">
                        <img src="{{ \App\Libraries\Image::publicOnPublic($post->cover_id, 660) }}"
                             alt="{{ $post->title }}" loading="lazy">
                    </div>
                    <div class="bg-white p-md-5 p-4">
                        <dl class="d-flex justify-content-start align-items-center flex-wrap text-gray01">
                            <dt class="fw-normal">
                                #{{ $post->postCategories->first()->title }}
                            </dt>
                            <dd class="m-0 ms-3 ps-3 border-start border-1 border-gray01">
                                <time datetime="{{ Carbon::parse($post->published_at)->format("Y/m/d") }}">
                                    {{ Carbon::parse($post->published_at)->format("Y/m/d") }}
                                </time>
                            </dd>
                        </dl>
                        <p class="font_style fs-1">{{ $post->title }}</p>
                        <p class="sub_text fs-3 m-0">{{ Text::summary($post->content) }}</p>
                    </div>
                </a>
            </li>
        @endforeach
    </ul>

    <script>
        document.addEventListener('livewire:initialized', () => {
            /**
             * 監聽後端調用的事件，重新渲染線條
             */
            @this.
            on('renderLine', (event) => {
                setTimeout(function () {
                    var titleWidth = $('#title_length').width();
                    var paginationWidth = $('#pagination_length').width();
                    var allWidth = titleWidth + paginationWidth;
                    $('.fashion-column.border_line').css('width', 'calc((100% - ' + allWidth + 'px - 40px))');
                }, 0)
            });
        });
    </script>
</div>