@extends('layouts.app')
@section('js')
    <script src="{{ asset('js/posts.js') }}"></script>
@endsection
@section('content')
    <div class='row'>
        <div class='col-8 offset-col-2'>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Popular Posts') }}
            </h2>
        </div>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div id="" class="p-6 bg-white border-b border-gray-200">
                        <table class='table table-hover popular-posts-table'>
                            <thead>
                                <th>Views</th>
                                <th>Date</th>
                                <th>Age</th>
                                <th>Link</th>
                                <th>Actions</th>
                            </thead>
                            <tbody>
                            @foreach ($posts as $post)
                                <tr>
                                    <td>{{ number_format($post->views) }}</td>
                                    <td>{{ $post->date }}</td>
                                    <td>{{ $post->age }}</td>
                                    <td>
                                        <a href='{{ $post->url }}' target='_blank'>{{ strlen($post->post_title) > 0 ? $post->post_title : 'No title' }}</a>
                                    </td>
                                    <td>
                                        <!--<button data-id={{$post->ID}} type="button" class="btn-share rounded-none">Share</button>-->
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <!-- <img id='posts_clicks_loader' src='/img/loader.gif' class="loader" /> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection