@extends('layouts.'.env('THEME'))

@section('content')

<div class="container" id="main-container">

    <x-section_heading title="Articles" subtitle="Create and manage" rowclass="mt-5"/>


    <a href="{{ route('article.create') }}" class="btn btn-success mb-2 mr-2">Add</a>
    <a href="{{ route('article.home') }}" class="btn btn-primary mb-2">View webpage</a>
    <br>
    <div class="row">
        <div class="col-12">
            <table class="table table-bordered" id="article_list">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Featured</th>
                        <th>Live</th>
                        <th>Release at</th>
                        <td colspan="3">Action</td>
                    </tr>
                </thead>
                <tbody>
                    @foreach($articles as $article)
                    <tr>
                        <td>{{ substr($article->title, 0, 100) }}</td>
                        <td>{!! $live_text[$article->featured] !!}</td>
                        <td>{!! $live_text[$article->live] !!}</td>
                        <td>{{ date('Y-m-d', strtotime($article->release_at)) }}</td>
                        <td><a href="{{ route('article.edit',$article->id)}}" class="btn btn-primary">Edit</a></td>
                        <td><a href="/articles/{{urlencode($article->title)}}" class="btn btn-primary">View</a></td>
                        <td>
                            <form action="{{ route('article.destroy', $article->id)}}"
                                onsubmit="return confirm('Delete forever?');"
                                method="post">
                                {{ csrf_field() }}
                                @method('DELETE')
                                <button class="btn btn-danger" type="submit">
                                    Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection