@extends('layouts.app')
@section('js')
    <script src="{{ asset('js/top30.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">
                {{ __('Top 30') }}
            </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>Day</th>
                                <th>Creation</th>
                                <th>Age</th>
                                <th>Link</th>
                                <th>Actions</th>
                            </thead>
                            <tbody>
                            @php
                                $i = 1;
                            @endphp
                            @foreach ($posts as $post)
                                <tr>
                                    <td>{{$i}}</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>
                                        
                                    </td>
                                </tr>
                                @php
                                    $i++;
                                @endphp
                            @endforeach
                            </tbody>
                        </table>
                        <!-- <img id='posts_clicks_loader' src='/img/loader.gif' class="loader" /> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection