@extends('frontend.layouts.main')
@section('title') {{ $authors->fullname }} @endsection
@section('content')
<div class="bg-header-hashtag bg-gray-100 shadow-md"
    style="background-image: url({{asset('img/banner/bg_news.jpg')}});">
    <div class="container flex items-center px-4 py-1 md:py-5 mx-auto overflow-y-auto whitespace-nowrap">
        <div class="md:max-h-64 h-58 align-middle w-full relative">
            <div class="px-3 py-1 md:py-3 align-middle shadow-lg flex justify-center items-center">
                <div class="py-2 justify-center items-center text-center mt-2">
                    
                    <div class="relative mx-auto bg-gray-200 w-20 h-20 rounded-full">
                        <img class="mx-auto h-auto w-full rounded-full" src="{{ asset(@$authors->avatar) }}" title="{{ $authors->fullname }}" />
                    </div>
                    <div class="uppercase font-bold text-white text-base md:text-xl my-1 mb-0">
                        {{ $authors->fullname }}
                        <div class="text-sm capitalize font-normal text-center leading-tight text-yellow-400">
                            {{ $authors->username }}
                        </div>
                    </div>
                    <div class="flex gap-2 justify-center items-center text-gray-300 font-normal">
                        <span class="font-bold">{{ $authors->beritas->count() }}</span> artikel |
                        <span class="font-bold">{{ $authors->beritas->sum('read') }}</span> Pembaca
                    </div>
                    
                    
                    
                </div>
                
            </div>
        </div>
    </div>
</div>
<!-- Whats New Start -->
<section class="whats-news-area pt-20 mt-2 pb-20">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                @include('berita::frontend.author.list')
            </div>
            <div class="col-lg-4 md:border-l md:border-gray-300">
                
                <div class="px-2 pt-4 pb-8">
                    <ul class="space-y-2">
                        <li>
                            <a  href="{{ route('backend.dashboard') }}" class="bg-gray-600 bg-opacity-30 text-red-500 flex items-center justify-between py-1.5 px-4 rounded cursor-pointer">
                                <span class="flex items-center space-x-2">
                                    <i class="fas fa-home" aria-hidden="true"></i>
                                    <span>Dashboard</span>
                                </span>
                                <span class="bg-sky-500 text-gray-100 font-bold px-2 py-0.5 text-xs rounded-lg">3</span>
                            </a>
                        </li>
                        @auth
                        @if(auth()->user()->id == $authors->id)
                        
                        <li>
                            <a href="{{ route('frontend.users.profileEdit', [encode_id($authors->id), $authors->slug]) }}" title="@lang('Edit Profile')" class="hover:bg-gray-500 hover:bg-opacity-10 hover:text-red-500 font-semibold flex items-center text-gray-700 py-1.5 px-4 border-b rounded space-x-2 cursor-pointer">
                                <i class="far fa-edit" aria-hidden="true"></i>
                                <span>@lang('Edit Profile')</span>
                            </a>
                        </li>
                        
                        @endif
                        @endauth
                        
                        <li>
                            <a href="{{ route('frontend.users.changePassword', [encode_id($authors->id), $authors->slug]) }}"  title="@lang('changePassword')" class="hover:bg-gray-500 hover:bg-opacity-10 hover:text-red-500 font-semibold flex items-center text-gray-700 py-1.5 px-4 border-b rounded space-x-2 cursor-pointer">
                                <i class="fa fa-lock" aria-hidden="true"></i>
                                <span>@lang('change Password')</span>
                            </a>
                        </li>
                        <li>
                            <a  href="{{ route('backend.berita.create') }}"  title=" Tambah Berita" class="hover:bg-gray-500 hover:bg-opacity-10 hover:text-red-500 font-semibold flex items-center border-b text-gray-700 py-1.5 px-4 rounded space-x-2 cursor-pointer">
                                <i class="far fa-calendar" aria-hidden="true"></i>
                                <span> Tambah Berita</span>
                            </a>
                        </li>
                        <li>
                            <a  href="{{ route('backend.berita.index') }}"  title=" Tambah Berita" class="hover:bg-gray-500 hover:bg-opacity-10 hover:text-red-500 font-semibold flex items-center border-b text-gray-700 py-1.5 px-4 rounded space-x-2 cursor-pointer">
                                <i class="fa fa-list" aria-hidden="true"></i>
                                <span> List Berita</span>
                            </a>
                        </li>
                    </ul>
                    
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Whats New End -->
@endsection
@push ('after-styles')
@endpush
@push ('after-scripts')
@endpush