@extends('upgrade.layouts.home')
@section('content')
<!-- start banner -->
<section class='banner'>
    <div class="uk-cover-container uk-height-medium overlay-gradeint">
        <img src="{{ asset('assets/img/pic01.png') }}" alt="" uk-cover>
        <div class="uk-position-right uk-flex uk-flex-middle heading">
            <div>
                <h1 class='mark'>{{ $PageTitle }} </h1>
                <p><a class="uk-text-muted" href="{{url('')}}">الرئيسية</a> - {{ $PageTitle }}</p>
            </div>
        </div>
    </div>
</section>
<!-- end banner -->
<!-- start about -->
<section class="uk-section">
    <div class="full-container">
        <div class="row uk-margin-medium-bottom">
            <div class="right"><h2 class='mark'>اختر نوع التغطية</h2></div>
            <div class="left">
                <select class="uk-select filter">
                    <option value="">اختر نوع التغطية</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="uk-grid uk-grid-medium uk-child-width-1-2@m uk-child-width-1-1 topic-row">
                @forelse ($Topics as $Topic)
                    <div class='item uk-margin-medium-bottom' link="{{ route('FrontendTopic', ["section" => $Topic->webmasterSection->name, "id" => $Topic->id]) }}">
                        <div class="uk-cover-container cover uk-height-large">
                            <img src="{{ asset('uploads/topics/'.$Topic->photo_file) }} " alt="" uk-cover>
                            <div class="view-status">
                                <i class='fas fa-heart'></i>
                                <span>{{ $Topic->visits }}</span>
                            </div>
                        </div>
                        <div class="uk-margin">
                            <header>
                                <h3 class=''>{{ $Topic->title }}</h3>
                            </header>
                        </div>
                    </div>

                @empty

                @endforelse

            </div>
        </div>
    </div>
</section>
<!-- end about -->
<!-- start -->
@endsection