@extends('frontend.layouts.template-journal')
@section('content')
<div class="row box-banner2" style="">
    <div class="col-12 p-0">
        <img src="{{ asset( $home->banner->link ) }}" alt="">
    </div>
</div>

<div class="row mt-5">
    <div class="col-sm-12 col-xl-1"></div>
    <div class="col-sm-12 col-xl-10 res-p-15">
        <div class="row">
            <div class="col-sm-12 col-xl-3">
                <div class="topic-content-detail f-bold" style="color: #22559E;">
                    INFORMATION
                </div>
                <div>
                    <a href="{{ url('journal/archives') }}" class="click-info-list active">Archives</a>
                    <a href="{{ url('journal/about/about_the_journal') }}" class="click-info-list">About</a>
                    <a href="{{ url('journal/about/author_guidelines') }}" class="click-info-list">Author guidelines</a>
                    <a href="{{ url('journal/about/editorial_team') }}" class="click-info-list">Editorial Team</a>
                    <a href="{{ url('journal/about/privacy_statement') }}" class="click-info-list">Privacy Statement</a>
                    <a href="{{ url('journal/about/ethics_statement') }}" class="click-info-list">Ethics Statement</a>
                </div>
                <style>
                    a.click-info-list {
                        display: block;
                        border-left: 2px solid #E4E4E4;
                        padding: 0px 5px 0 15px;
                        color: #000;
                        font-size: 20px;
                    }

                    a.click-info-list:hover,
                    a.click-info-list.active {
                        font-weight: bold;
                        border-left: 2px solid #EE3424;
                        text-decoration: none;
                    }

                    ul.menu-article {
                        display: block;
                        width: 100%;
                        margin-top: 5px;
                        padding: 5px 0;
/*                        background: #000;*/
                    }

                    ul.menu-article li {
                        display: block;
/*                        text-align: center;*/
                        padding: 0;
                        border-bottom: 1px solid #fff;
    					background: #000;
    					padding: 5px 10px;
                    }

                    ul.menu-article li a {
                        display: inline-block;
                        color: #fff;
                        line-height: 1;
                    }

                    ul.menu-article li a:hover,
                    ul.menu-article li a.active {
                        text-decoration: none;
                        border-bottom: 1px solid #fff;
                    }

                </style>
            </div>
            <div class="col-sm-12 col-xl-9 mb-5">
                <div class="pb-3 mt-3">
                    <a href="" class="stem-click-blu " style="padding: 5px 35px;font-size:17px;">CURRENT ISSUE</a>
                </div>
                <div style="position: relative;">
                    <img src="{{ asset( $category->banner->link ) }}" alt="">
                    <div class="box-res-article-text-banner" style="position: absolute;top: 50%;left: 45px;transform: translate(0%, -50%);">
                        <div class="topic-content-detail f-bold c-white res-article-text-banner" style="">
                            {!! nl2br($category->description) !!}
                        </div>
                    </div>
                </div>
                <div class="">
                    <ul class="nav nav-tabs menu-article">
                        @if ( count($category->archives) > 0 )
                            @foreach ($category->archives as $idx => $article)
                                <li><a href="{{ url('journal/archives/'. $article->id .'/'. encodelink($article->subject) ) }}" class="{{ $idx == 0 ? 'a' : ''}}"><span class="span-article">{{ $article->subject }}</span> <!-- {{ $idx+1 }} --></a></li>

                            @endforeach
                        @endif
                        {{-- <li><a href="#home" class="active"><span class="span-article">ARTICLE</span> 01</a></li>
                        <li><a href="#menu1"><span class="span-article">ARTICLE</span> 02</a></li>
                        <li><a href="#menu2"><span class="span-article">ARTICLE</span> 03</a></li>
                        <li><a href="#menu3"><span class="span-article">ARTICLE</span> 04</a></li>
                        <li style="border-right: unset;"><a href="#menu4"><span class="span-article">ARTICLE</span> 05</a></li> --}}
                    </ul>

                    <div class="mt-4 mb-5">
                        <div id="home" class="tab-pane fade in active show">
                            <div class="topic-content-detail f-bold c-black" style="">
                                {!! $home->subject !!}
                            </div>
                            <div class="c-black">
                                {!! $home->detail !!}
                            </div>
                        </div>

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