@extends('layouts.app')
@section('content')
    <div class="content-heading">New Article</div>
    <div class="alert alert-info">
        <em class="fa fa-exclamation-circle fa-lg fa-fw"></em>
        <span>
            There is an autosaved version of this article that is more recent than the version below.
            <a class="text-white" href="#">Restore</a>
        </span>
    </div>
    <div class="row">
        <!-- Article Content-->
        <div class="col-xl-9">
            <div class="card card-default">
                <div class="card-body">
                    <form action="#">
                        <input class="mb-3 form-control form-control-lg" type="text" name="article-title" placeholder="Article title..." />
                        <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
                            <div class="btn-group dropdown">
                                <a class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" title="Font"><em class="fa fa-font"></em></a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="javacript:void" data-edit="fontName Arial" style="font-family:'Arial'">Arial</a>
                                    <a class="dropdown-item" href="javacript:void" data-edit="fontName Sans" style="font-family:'Sans'">Sans</a>
                                    <a class="dropdown-item" href="javacript:void" data-edit="fontName Serif" style="font-family:'Serif'">Serif</a>
                                </div>
                            </div>
                            <div class="btn-group dropdown">
                                <a class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" title="Font Size">
                                    <em class="fa fa-text-height"></em>
                                    &nbsp;
                                </a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="javacript:void" data-edit="fontSize 5" style="font-size:24px">Huge</a>
                                    <a class="dropdown-item" href="javacript:void" data-edit="fontSize 3" style="font-size:18px">Normal</a>
                                    <a class="dropdown-item" href="javacript:void" data-edit="fontSize 1" style="font-size:14px">Small</a>
                                </div>
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-secondary" data-edit="bold" data-toggle="tooltip" title="Bold (Ctrl/Cmd+B)"><em class="fa fa-bold"></em></a>
                                <a class="btn btn-secondary" data-edit="italic" data-toggle="tooltip" title="Italic (Ctrl/Cmd+I)"><em class="fa fa-italic"></em></a>
                                <a class="btn btn-secondary" data-edit="strikethrough" data-toggle="tooltip" title="Strikethrough"><em class="fa fa-strikethrough"></em></a>
                                <a class="btn btn-secondary" data-edit="underline" data-toggle="tooltip" title="Underline (Ctrl/Cmd+U)"><em class="fa fa-underline"></em></a>
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-secondary" data-edit="insertunorderedlist" data-toggle="tooltip" title="Bullet list"><em class="fa fa-list-ul"></em></a>
                                <a class="btn btn-secondary" data-edit="insertorderedlist" data-toggle="tooltip" title="Number list"><em class="fa fa-list-ol"></em></a>
                                <a class="btn btn-secondary" data-edit="outdent" data-toggle="tooltip" title="Reduce indent (Shift+Tab)"><em class="fas fa-outdent"></em></a>
                                <a class="btn btn-secondary" data-edit="indent" data-toggle="tooltip" title="Indent (Tab)"><em class="fa fa-indent"></em></a>
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-secondary" data-edit="justifyleft" data-toggle="tooltip" title="Align Left (Ctrl/Cmd+L)"><em class="fa fa-align-left"></em></a>
                                <a class="btn btn-secondary" data-edit="justifycenter" data-toggle="tooltip" title="Center (Ctrl/Cmd+E)"><em class="fa fa-align-center"></em></a>
                                <a class="btn btn-secondary" data-edit="justifyright" data-toggle="tooltip" title="Align Right (Ctrl/Cmd+R)"><em class="fa fa-align-right"></em></a>
                                <a class="btn btn-secondary" data-edit="justifyfull" data-toggle="tooltip" title="Justify (Ctrl/Cmd+J)"><em class="fa fa-align-justify"></em></a>
                            </div>
                            <div class="btn-group dropdown">
                                <a class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><em class="fa fa-link"></em></a>
                                <div class="dropdown-menu">
                                    <div class="input-group">
                                        <input class="form-control form-control-sm" id="LinkInput" placeholder="URL" type="text" data-edit="createLink" />
                                        <div class="input-group-btn"><button class="btn btn-sm btn-secondary" type="button">Add</button></div>
                                    </div>
                                </div>
                                <a class="btn btn-secondary" data-edit="unlink" data-toggle="tooltip" title="Remove Hyperlink"><em class="fa fa-cut"></em></a>
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-secondary" id="pictureBtn" data-toggle="tooltip" title="Insert picture (or just drag &amp; drop)"><em class="far fa-image"></em></a>
                                <input type="file" data-edit="insertImage" style="position:absolute; opacity:0; width:41px; height:34px" />
                            </div>
                            <div class="btn-group ml-auto">
                                <a class="btn btn-secondary" data-edit="undo" data-toggle="tooltip" title="Undo (Ctrl/Cmd+Z)"><em class="fa fa-undo"></em></a>
                                <a class="btn btn-secondary" data-edit="redo" data-toggle="tooltip" title="Redo (Ctrl/Cmd+Y)"><em class="fas fa-redo"></em></a>
                            </div>
                        </div>
                        <div class="form-control wysiwyg mt-3" style="overflow:scroll; height:250px;max-height:250px">Type something ...</div>
                        <br />
                        <p>Notes</p>
                        <textarea class="mb-3 form-control" cols="6"></textarea>
                        <div class="clearfix">
                            <div class="float-left">
                                <button class="btn btn-secondary" type="button">
                                    <em class="fa fa-edit fa-fw"></em>
                                    Draft
                                </button>
                                <button class="btn btn-primary" type="button">
                                    <em class="fa fa-check fa-fw"></em>
                                    Save
                                </button>
                            </div>
                            <div class="float-right">
                                <button class="btn btn-danger" type="button">
                                    <em class="fas fa-trash-alt fa-fw"></em>
                                    Remove
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <p class="lead">List of Comments</p>
            <div class="card">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th><strong>Comment ID</strong></th>
                                <th><strong>Date</strong></th>
                                <th><strong>Username</strong></th>
                                <th><strong>Comment excerpt</strong></th>
                                <th class="text-center"><strong>Current status</strong></th>
                                <th class="text-right" style="width:130px"><strong>Actions</strong></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>123</td>
                                <td>10/05/2015</td>
                                <td><a href="">Jack Jordan</a></td>
                                <td>Sed quis eros libero, a euismod nisl....</td>
                                <td class="text-center"><span class="badge badge-success">Approved</span></td>
                                <td class="text-right">
                                    <button class="btn btn-sm btn-secondary" type="button"><em class="fas fa-pencil-alt"></em></button>
                                    <button class="btn btn-sm btn-danger" type="button"><em class="fas fa-trash-alt"></em></button>
                                    <button class="btn btn-sm btn-success" type="button"><em class="fa fa-check"></em></button>
                                </td>
                            </tr>
                            <tr>
                                <td>456</td>
                                <td>10/07/2015</td>
                                <td><a href="">Hailey Mckinney</a></td>
                                <td>Nulla facilisi.</td>
                                <td class="text-center"><span class="badge badge-success">Approved</span></td>
                                <td class="text-right">
                                    <button class="btn btn-sm btn-secondary" type="button"><em class="fas fa-pencil-alt"></em></button>
                                    <button class="btn btn-sm btn-danger" type="button"><em class="fas fa-trash-alt"></em></button>
                                    <button class="btn btn-sm btn-success" type="button"><em class="fa fa-check"></em></button>
                                </td>
                            </tr>
                            <tr>
                                <td>789</td>
                                <td>11/05/2015</td>
                                <td><a href="">Peyton Reyes</a></td>
                                <td>Quisque enim nisi, semper non pulvinar et, aliquam id lorem...</td>
                                <td class="text-center"><span class="badge badge-warning">Pending</span></td>
                                <td class="text-right">
                                    <button class="btn btn-sm btn-secondary" type="button"><em class="fas fa-pencil-alt"></em></button>
                                    <button class="btn btn-sm btn-danger" type="button"><em class="fas fa-trash-alt"></em></button>
                                    <button class="btn btn-sm btn-success" type="button"><em class="fa fa-check"></em></button>
                                </td>
                            </tr>
                            <tr>
                                <td>999</td>
                                <td>10/06/2015</td>
                                <td><a href="">Darryl Harper</a></td>
                                <td>Nulla facilisi.</td>
                                <td class="text-center"><span class="badge badge-danger">Rejected</span></td>
                                <td class="text-right">
                                    <button class="btn btn-sm btn-secondary" type="button"><em class="fas fa-pencil-alt"></em></button>
                                    <button class="btn btn-sm btn-danger" type="button" disabled=""><em class="fas fa-trash-alt"></em></button>
                                    <button class="btn btn-sm btn-success" type="button"><em class="fa fa-check"></em></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- Article sidebar-->
        <div class="col-xl-3">
            <div class="card card-default">
                <div class="card-body">
                    <p class="lead">Article Data</p>
                    <p class="my-2">Categories</p>
                    <select class="chosen-select form-control" multiple="multiple">
                        <option>coding</option>
                        <option>less</option>
                        <option>sass</option>
                        <option>angularjs</option>
                        <option>node</option>
                        <option>expressJS</option>
                    </select>
                    <p class="my-2">Tags</p>
                    <select class="chosen-select form-control" multiple="multiple">
                        <option>JAVASCRIPT</option>
                        <option>WEB</option>
                        <option>BOOTSTRAP</option>
                        <option>SERVER</option>
                        <option>HTML5</option>
                        <option>CSS</option>
                    </select>
                    <p class="my-2">Reviewers</p>
                    <select class="chosen-select form-control" multiple="multiple">
                        <option>adam@email.com</option>
                        <option>amalie@email.com</option>
                        <option>wladimir@email.com</option>
                        <option>samantha@email.com</option>
                        <option>estefanía@email.com</option>
                        <option>natasha@email.com</option>
                        <option>nicole@email.com</option>
                        <option>adrian@email.com</option>
                    </select>
                    <p class="lead mt-3">SEO Metadata</p>
                    <div class="form-group">
                        <p>Title</p>
                        <input class="form-control" type="text" placeholder="Brief description.." />
                    </div>
                    <div class="form-group">
                        <p>Description</p>
                        <textarea class="form-control" rows="5" placeholder="Max 255 characters..."></textarea>
                    </div>
                    <div class="form-group">
                        <p>Keywords</p>
                        <textarea class="form-control" rows="5" placeholder="Max 1000 characters..."></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/forms.js') }}"></script>
@endsection
