@extends('front.layouts.app')
@section('title', 'Baza znanja')

@section('content')



        <!-- start page title -->
        <section class="p-0 pt-2 ipad-top-space-margin page-title-big-typography bg-gradient-blue-transparent-second ">
            <div class="container">
                <div class="row align-items-center justify-content-center h-350px">
                    <div class="col-auto text-center page-title-double-large">
                        <h1 class="alt-font text-dark-gray fw-700 ls-minus-1px mb-0">Baza znanja</h1>
                    </div>

                </div>
            </div>
        </section>

        @foreach($departments as $department)
        <section class="{{ $loop->even ? '' : 'bg-very-light-gray' }}">
            <div class="container">
                <div class="row mb-6" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                    <div class="col-xl-10">
                        <h2 class="text-dark-gray mb-0 lh-44 ls-minus-1px alt-font">{{ $department->title }}</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 100, "easing": "easeOutQuad" }'>
                        @foreach($department->knowledgeArticles as $article)
                            <div class="row border-top border-color-dark-gray position-relative g-0 sm-pb-0px">
                                <div class="col-12 col-md-1 text-md-center align-self-center d-none d-md-inline">
                                    <span class="text-dark-gray fs-14 fw-600">
                                        {{ $loop->iteration }}
                                    </span>
                                </div>
                                <div class="col-lg-8 col-md-7 last-paragraph-no-margin ps-30px pe-30px pt-25px pb-25px sm-pt-15px sm-pb-5px border-start border-color-dark-gray sm-border-start-0 sm-px-0">
                                    <a href="{{ route('knowledge.show', $article->slug) }}">{{ $article->title }}</a>
                                </div>
                                <div class="col-lg-2 col-md-3 align-self-center text-md-end d-none d-md-inline">
                                    <!-- <span>{{ $article->created_at->format('d.m.Y') }}</span> -->
                                </div>
                                <div class="col-auto col-md-1 align-self-center text-end text-md-center sm-position-absolute right-5px d-none d-md-inline">
                                    <a href="{{ route('knowledge.show', $article->slug) }}"><i class="bi bi-arrow-right-short text-dark-gray icon-medium"></i></a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
        @endforeach
        <!-- end page title -->


@endsection

@push('scripts')

@endpush