@extends('layouts.index')

@section('content')

<div class="content pt-3 container-fluid background_5">
    {{-- Breadcrumb Section --}}
    @php
        $pages = [] ; $page = [] ;
        $page['title'] = __('lang.home') ; $page['route'] = route('home') ; $page['color'] = 'text_3' ;
        $pages[] = $page ;
        $page['title'] = __('lang.articles') ; $page['route'] = 'javascript:void(0)' ; $page['color'] = 'text_1' ;
        $pages[] = $page ;
    @endphp
    @include('components.breadcrumb',$pages)


	<!--products -->
	<div class="container p-md-0 my-md-2 ">

        <div class="row">

            <div class="col-md-2">
                <form class="col-12" action="{{ route('articles') }}" method="get"  >
                    <h5>{{ __('lang.search') }}</h5>
                    <hr>
                    <div class="input-group input-group-sm my-3">
                        <input type="text" class="form-control" name="search" value="{{ old('search') }}" placeholder="{{ __('lang.search') }}" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" autocomplete="off">
                        <div class="input-group-prepend">
                            <button id="search-button" type="submit" class="btn btn-lipstick input-group-text" id="inputGroup-sizing-sm">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                    @csrf
                    <hr>
                </form>
                <h5>{{ __('lang.categories') }}</h5>
                <hr>
                <div class="col-12 p-2 mb-2 font-16 {{!isset($category_id) || $category_id == 0 ? 'background_1' : 'background_4' }} "  >
                    <a aria-label="" class="{{!isset($category_id) || $category_id == 0 ? 'text_2' : 'text_1' }} " href="{{route('articles')}}">{{__('lang.allCategories')}}</a>
                </div>
                @foreach($article_categories as $category)
                    <div class="col-12 p-2 mb-2 {{isset($category_id) && $category_id == $category->articles_categories_id ? 'background_1' : 'background_4' }}"  >
                        <h3 class="font-16">
                            <a aria-label="" class=" {{isset($category_id)&& $category_id == $category->articles_categories_id ? 'text_2' : 'text_1' }} " href="{{route('articles',['categories_slug'=>$category->articles_categories_id.'_'.make_slug($category->articles_categories_name)])}}">{{$category->articles_categories_name}}</a>
                        </h3>
                    </div>
                @endforeach

            </div>
            <div class="col-md-10">
                                
                <div class="row articles-list-items">
                    @foreach($articles as $article)
                        <div class="col-12 px-3  mt-4 col-md-6 articles-list-item  ">

                            <div class="row m-0 justify-content-center bg-white align-items-top h-100">

                                <div class="col-12 col-md-4 articles-list-img p-0 {{ $agent->isPhone() ? 'h-50' : '' }} ">