@extends('layouts.main')
@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/shards/slick.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/shards/slick-theme.css') }}">
@endsection

@section('js')
    <script src="{{ asset('vendor/shards/slick.js') }}"></script>
    <script>
        $(".posts").slick({

            // normal options...
            dots: true,
            infinite: true,
            slidesToShow: 3,
            arrows: true,
            autoplay: true,
            autoplaySpeed: 3000,
            // the magic
            responsive: [{

                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    infinite: true
                }

            }, {

                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    dots: true
                }

            }, {

                breakpoint: 300,
                settings: "unslick" // destroys slick

            }]
        });

        jQuery(document).ready(function($) {
            $('#deleteform').on('submit', function(e) {
                if (!confirm('Are you sure you want to delete this post?')) {
                    e.preventDefault();
                }
            });

        });

    </script>
@endsection

@section('content')


    <!-- Page Header -->
    <div class="page-header row no-gutters py-4">
        <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
            <span class="text-uppercase page-subtitle">Stealth Blog Posts</span>
            <h3 class="page-title">Published Blog Posts</h3>
        </div>
    </div>
    <!-- End Page Header -->
    <div class="row posts">
        @foreach ($posts as $post)

            <div class="card card-small card-post card-post--1 col-11" style="padding:0">

                <div class="card-post__image" style="background-image: url('images/news/{{ $post->image }}')">
                    <a href="#"
                        class="card-post__category badge badge-pill badge-dark">{{ $post->categories->category }}</a>
                    <div class="card-post__author d-flex">
                        <a href="#" class="card-post__author-avatar card-post__author-avatar--small"
                            style="background-image: url('images/cms/user.png');"></a>
                        <span
                            style="padding:10px;    position: fixed;left: 30px;top: 6px;width: 500%;">{{ $post->user->name }}</span>
                    </div>
                </div>

                <div class="card-body">
                    <h5 class="card-title">
                        <a class="text-fiord-blue" href="/posts/{{ $post->id }}">{{ $post->title }}</a>
                    </h5>
                    <p class="card-text mb-3" style="height: 4.6em;overflow: hidden;">{{ $post->content }}</p>

                    <hr>
                    <span class="text-muted">{{ $post->created_at }}</span>
                    {{ Form::open(['action' => ['App\Http\Controllers\PostController@destroy', $post->id], 'method' => 'POST', 'id' => 'deleteform']) }}
                    <div class="btn-group float-right" style="">
                        <button type="button" class="mb-2 btn btn-sm btn-primary mr-1"
                            onclick="window.location='{{ url('posts/' . $post->id . '/edit') }}'">Edit</button>
                        {{ Form::submit('Delete', ['class' => 'mb-2 btn btn-sm btn-danger mr-1']) }}

                    </div>
                    {{ Form::hidden('_method', 'DELETE') }} {{ Form::close() }}
                </div>
            </div>

        @endforeach
    </div>

@endsection