@extends('layout.main')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    {{--    <link href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />--}}
    <link href="{{asset('assets/plugins/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
    <style>
        .platform-list img {
            margin:6px;
        }
    </style>
@stop

@section('layout_sidebar')
    @include('templates.library_filter', ['createTemplate' => true])
@stop

@section('content')
    <div class="d-flex flex-column flex-row-fluid wrapper" id="kt_wrapper">
        <!--begin::Content-->
        <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
            <!--begin::Subheader-->
            <div class="subheader py-2 py-lg-4 subheader-transparent" id="kt_subheader">
                <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
                    <!--begin::Details-->
                    <div class="d-flex align-items-center flex-wrap mr-2">
                        <!--begin::Title-->
                        <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Library</h5>
                        <!--end::Title-->
                        <!--begin::Separator-->
                        <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-5 bg-gray-200"></div>
                        <!--end::Separator-->


                    </div>
                    <!--end::Details-->
                    <!--begin::Toolbar-->
                    <div class="d-flex align-items-center">

                    </div>
                    <!--end::Toolbar-->
                </div>
            </div>
            <!--end::Subheader-->
            <!--begin::Entry-->
            <div class="d-flex flex-column-fluid">
                <!--begin::Container-->
                <div class="container">
                    <!--begin::Card-->
                    <div class="card card-custom gutter-b">
                        <div class="card-body">
                            <!--begin: Datatable-->
                            <table id="manage-template-table" class="display table-striped" style="width:100%">
                                <thead class="thead-dark">
                                <tr>
                                    <th class="bg-dark text-white">ID</th>
                                    <th class="bg-dark text-white">Image</th>
                                    <th class="bg-dark text-white">Content</th>
                                    <th class="bg-dark text-white">Updated At</th>
                                    <th class="bg-dark text-white">Created At</th>
                                </tr>
                                </thead>
                                <tbody>
                                    {{--load data here--}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--end::Card-->
                </div>
                <!--end::Container-->
            </div>
            <!--end::Entry-->
        </div>

        <!--begin::Footer-->
        @include('layout.footer')
    </div>
@stop


@section('page_modals')
    {{--Page modals--}}
    @include('templates.create_template_modal')
    @include('templates.edit_template_modal')
    @include('templates.create_category_modal')
@stop
@section('page_scripts')
    <!--CUSTOM SCRIPTS-->
    {{--    <script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>--}}
    <script src="{{asset('assets/plugins/custom/datatables/datatables.bundle.js')}}"></script>
    <script src="{{asset('app/library/main.js')}}"></script>
    <script src="{{asset('app/manage_post.js')}}"></script>
@stop