@extends('layouts.app')

@section('content')
<div class="container app-content">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title m-0">Add Page</h3>
                </div>

                <div class="card-body">
                    <form method="post" action="{{ route('admin.page.store') }}">
                        @csrf
                        <div class="form-group">
                            <label>Title</label>
                            <input class="form-control" type="text" name="title">
                        </div>
                        <div class="form-group">
                            <label>Slug</label>
                            <input class="form-control" type="text" name="slug">
                            <small id="emailHelp" class="form-text text-muted">(Optional).</small>
                        </div>
                        <div class="form-group">
                            <label class="font-weight-bold">Content</label>
                            <textarea name="content" id="content" cols="30" rows="10"></textarea>
                        </div>
                        <button class="btn btn-success" type="submit">Add Page</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('footer')
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.20.0/trumbowyg.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.20.0/ui/trumbowyg.min.css" />
<script>
    $('#content').trumbowyg({
        btns: [
            ['undo', 'redo'], // Only supported in Blink browsers
            ['formatting'],
            ['strong', 'em', 'del'],
            ['link'],
            ['insertImage'],
            ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
            ['unorderedList', 'orderedList'],
            ['horizontalRule'],
            ['removeformat'],
            ['viewHTML'],
        ],
        semantic: false,
        removeformatPasted: true
    });
</script>
<style>
    .trumbowyg-box, .trumbowyg-editor {margin: 0;}
</style>
@endsection