@extends('layouts.master')
@section('css')
    <link rel="stylesheet" href="{{asset('stylesheets/news.css')}}">
@stop
@section('content')
<div id="page">
    <div id="main" class="news">
        <section>
            <div class="container container_bg">
                <ul class="nav nav-pills justify-content-center" id="myTab" role="tablist">
                    @foreach($news as $key => $item)
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ ($key == 0)?"active":"" }}" id="news{{ $item->id }}-tab" data-toggle="tab" href="#news{{ $item->id }}" role="tab"
                            aria-controls="news{{ $item->id }}" aria-selected="true">{{ $item->title }}</a>
                    </li>
                    @endforeach
                </ul>
                <div class="tab-content" id="myTabContent">
                    @foreach ($news as $key => $item)
                    <div class="tab-pane fade show {{ ($key == 0)?"active":"" }}" id="news{{ $item->id }}" role="tabpanel" aria-labelledby="news{{ $item->id }}-tab">
                        <ul class="news-list">
                            @if ($item->News)
                            @foreach ($item->News as $news_item)
                            <li class="list filtr-item" data-category="notice">
                                <span class="date">{{ $news_item->date }}</span>
                                <a href="{{ route('news_detail',[$news_item->id]) }}" class="news-title">
                                    <span class="ellipsis" style="word-wrap: break-word;
                                    word-break: break-all;">{{ $news_item->title }}</span>
                                    <span class="more">More</span>
                                </a>
                            </li>
                            @endforeach
                            @endif
                        </ul>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>
    </div>
</div>
@stop
@section('script')
    <script src="{{ asset('js/filter.js') }}"></script>
@stop