@extends('layouts.app')
@section('content')
    <div class="content-heading">
        <div>
            Form Extended
            <small>New elements to extend the classic functions</small>
        </div>
    </div>
    <!-- START card-->
    <div class="card card-default">
        <div class="card-header">Form elements</div>
        <div class="card-body">
            <form class="form-horizontal" method="get" action="#">
                <fieldset>
                    <legend class="border-bottom mb-4">New Components</legend>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">
                            Slider
                            <br />
                            <small>Classic, range and vertical</small>
                        </label>
                        <div class="col-md-4">
                            <input
                                class="slider slider-vertical"
                                data-ui-slider=""
                                type="text"
                                value=""
                                data-slider-min="5"
                                data-slider-max="35"
                                data-slider-step="1"
                                data-slider-value="5"
                                data-slider-orientation="vertical"
                            />
                            <input
                                class="slider slider-vertical"
                                data-ui-slider=""
                                type="text"
                                value=""
                                data-slider-min="5"
                                data-slider-max="35"
                                data-slider-step="1"
                                data-slider-value="10"
                                data-slider-orientation="vertical"
                            />
                            <input
                                class="slider slider-vertical"
                                data-ui-slider=""
                                type="text"
                                value=""
                                data-slider-min="5"
                                data-slider-max="35"
                                data-slider-step="1"
                                data-slider-value="15"
                                data-slider-orientation="vertical"
                            />
                            <input
                                class="slider slider-vertical"
                                data-ui-slider=""
                                type="text"
                                value=""
                                data-slider-min="5"
                                data-slider-max="35"
                                data-slider-step="1"
                                data-slider-value="20"
                                data-slider-orientation="vertical"
                            />
                            <input
                                class="slider slider-vertical"
                                data-ui-slider=""
                                type="text"
                                value=""
                                data-slider-min="5"
                                data-slider-max="35"
                                data-slider-step="1"
                                data-slider-value="25"
                                data-slider-orientation="vertical"
                            />
                            <input
                                class="slider slider-vertical"
                                data-ui-slider=""
                                type="text"
                                value=""
                                data-slider-min="5"
                                data-slider-max="35"
                                data-slider-step="1"
                                data-slider-value="30"
                                data-slider-orientation="vertical"
                            />
                            <br />
                            <br />
                            <input
                                class="slider slider-horizontal"
                                data-ui-slider=""
                                type="text"
                                value=""
                                data-slider-min="5"
                                data-slider-max="20"
                                data-slider-step="1"
                                data-slider-value="10"
                                data-slider-orientation="horizontal"
                            />
                            <br />
                            <br />
                            <input class="slider" id="sl2" data-ui-slider="" type="text" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,750]" />
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Switch Small</label>
                        <div class="col-md-10">
                            <label class="switch switch-sm">
                                <input type="checkbox" checked="checked" />
                                <span></span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Switch</label>
                        <div class="col-md-10">
                            <label class="switch">
                                <input type="checkbox" checked="checked" />
                                <span></span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Switch Large</label>
                        <div class="col-md-10">
                            <label class="switch switch-lg">
                                <input type="checkbox" checked="checked" />
                                <span></span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Switch Radio</label>
                        <div class="col-md-10">
                            <label class="switch switch-lg">
                                <input type="radio" checked="checked" name="radioSwitch" />
                                <span></span>
                            </label>
                            <label class="switch switch-lg">
                                <input type="radio" name="radioSwitch" />
                                <span></span>
                            </label>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group row mb-2">
                        <label class="col-md-2 col-form-label">Color picker</label>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-12">
                                    <p>Automatically switches from hex to rgba format when transparency is selected:</p>
                                    <input class="form-control demo-colorpicker" type="text" value="#5367ce" />
                                </div>
                                <div class="col-12">
                                    <p class="mt-3">As a component:</p>
                                    <div class="input-group demo-colorpicker">
                                        <input class="form-control" type="text" value="#00AABB" />
                                        <div class="input-group-append input-group-addon">
                                            <div class="input-group-text"><em class="fas fa-broom"></em></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <p class="mt-3">Inline mode:</p>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="demo-colorpicker" id="demo_cont" data-container="#demo_cont" data-color="rgba(150,216,62,0.55)" data-inline="true"></div>
                                        </div>
                                        <div class="col-6">
                                            <div class="demo-colorpicker" data-container="true" data-color="rgb(50,216,62)" data-inline="true"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <p class="mt-3">Quick select Bootstrap colors:</p>
                                    <input class="form-control" id="demo_selectors" type="text" data-format="hex" value="success" />
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group row mb-2">
                        <label class="col-md-2 col-form-label">Chosen Groups</label>
                        <div class="col-md-10">
                            <select class="chosen-select form-control">
                                <optgroup label="NFC EAST">
                                    <option>Dallas Cowboys</option>
                                    <option>New York Giants</option>
                                    <option>Philadelphia Eagles</option>
                                    <option>Washington Redskins</option>
                                </optgroup>
                                <optgroup label="NFC NORTH">
                                    <option>Chicago Bears</option>
                                    <option>Detroit Lions</option>
                                    <option>Green Bay Packers</option>
                                    <option>Minnesota Vikings</option>
                                </optgroup>
                                <optgroup label="NFC SOUTH">
                                    <option>Atlanta Falcons</option>
                                    <option>Carolina Panthers</option>
                                    <option>New Orleans Saints</option>
                                    <option>Tampa Bay Buccaneers</option>
                                </optgroup>
                                <optgroup label="NFC WEST">
                                    <option>Arizona Cardinals</option>
                                    <option>St. Louis Rams</option>
                                    <option>San Francisco 49ers</option>
                                    <option>Seattle Seahawks</option>
                                </optgroup>
                                <optgroup label="AFC EAST">
                                    <option>Buffalo Bills</option>
                                    <option>Miami Dolphins</option>
                                    <option>New England Patriots</option>
                                    <option>New York Jets</option>
                                </optgroup>
                                <optgroup label="AFC NORTH">
                                    <option>Baltimore Ravens</option>
                                    <option>Cincinnati Bengals</option>
                                    <option>Cleveland Browns</option>
                                    <option>Pittsburgh Steelers</option>
                                </optgroup>
                                <optgroup label="AFC SOUTH">
                                    <option>Houston Texans</option>
                                    <option>Indianapolis Colts</option>
                                    <option>Jacksonville Jaguars</option>
                                    <option>Tennessee Titans</option>
                                </optgroup>
                                <optgroup label="AFC WEST">
                                    <option>Denver Broncos</option>
                                    <option>Kansas City Chiefs</option>
                                    <option>Oakland Raiders</option>
                                    <option>San Diego Chargers</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Chosen Multiple</label>
                        <div class="col-md-10">
                            <select class="chosen-select form-control" multiple="multiple">
                                <option>Dallas Cowboys</option>
                                <option>New York Giants</option>
                                <option>Philadelphia Eagles</option>
                                <option>Washington Redskins</option>
                                <option>Chicago Bears</option>
                                <option>Detroit Lions</option>
                                <option>Green Bay Packers</option>
                                <option>Minnesota Vikings</option>
                                <option>Atlanta Falcons</option>
                                <option>Carolina Panthers</option>
                                <option>New Orleans Saints</option>
                                <option>Tampa Bay Buccaneers</option>
                                <option>Arizona Cardinals</option>
                                <option>St. Louis Rams</option>
                                <option>San Francisco 49ers</option>
                                <option>Seattle Seahawks</option>
                                <option>Buffalo Bills</option>
                                <option>Miami Dolphins</option>
                                <option>New England Patriots</option>
                                <option>New York Jets</option>
                                <option>Baltimore Ravens</option>
                                <option>Cincinnati Bengals</option>
                                <option>Cleveland Browns</option>
                                <option>Pittsburgh Steelers</option>
                                <option>Houston Texans</option>
                                <option>Indianapolis Colts</option>
                                <option>Jacksonville Jaguars</option>
                                <option>Tennessee Titans</option>
                                <option>Denver Broncos</option>
                                <option>Kansas City Chiefs</option>
                                <option>Oakland Raiders</option>
                                <option>San Diego Chargers</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Masked input</label>
                        <div class="col-md-10">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <input class="form-control" type="text" data-masked="" data-inputmask="'mask': '999-99-999-9999-9'" placeholder="ISBN" />
                                    <span class="form-text">data-inputmask="'mask': '999-99-999-9999-9"'</span>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input class="form-control" type="text" data-masked="" data-inputmask="'mask': '99/99/9999'" placeholder="Date" />
                                    <span class="form-text">data-inputmask="'mask': '99/99/9999"'</span>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input class="form-control" type="text" data-masked="" data-inputmask="'mask': '(999) 999-9999'" placeholder="Phone number" />
                                    <span class="form-text">data-inputmask="'mask': '(999) 999-9999"'</span>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input class="form-control" type="text" data-masked="" data-inputmask="'mask': 'aaaa-9999-aa99-9999'" placeholder="Custom Key" />
                                    <span class="form-text">data-inputmask="'mask': 'aaaa-9999-aa99-9999"'</span>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input class="form-control" type="text" data-masked="" data-inputmask="'mask': '$ 999.999.999,99'" placeholder="Currency Dolar" />
                                    <span class="form-text">data-inputmask="'mask': '$ 999.999.999,99"'</span>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input class="form-control" type="text" data-masked="" data-inputmask="'mask': '€ 999.999.999,99'" placeholder="Currency Euro" />
                                    <span class="form-text">data-inputmask="'mask': '€ 999.999.999,99"'</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group row mb-2">
                        <label class="col-md-2 col-form-label mb-2">Select2</label>
                        <div class="col-md-10">
                            <!-- SELECT2-->
                            <select class="form-control" id="select2-1">
                                <option value="AL">Alabama</option>
                                <option value="AR">Arkansas</option>
                                <option value="IL">Illinois</option>
                                <option value="IA">Iowa</option>
                                <option value="KS">Kansas</option>
                                <option value="KY">Kentucky</option>
                                <option value="LA">Louisiana</option>
                                <option value="MN">Minnesota</option>
                                <option value="MS">Mississippi</option>
                                <option value="MO">Missouri</option>
                                <option value="OK">Oklahoma</option>
                                <option value="SD">South Dakota</option>
                                <option value="TX">Texas</option>
                                <option value="TN">Tennessee</option>
                                <option value="WI">Wisconsin</option>
                            </select>
                            <p class="my-2">Multiple</p>
                            <select class="form-control" id="select2-2">
                                <optgroup label="Alaskan/Hawaiian Time Zone">
                                    <option value="AK">Alaska</option>
                                    <option value="HI">Hawaii</option>
                                </optgroup>
                                <optgroup label="Pacific Time Zone">
                                    <option value="CA">California</option>
                                    <option value="NV">Nevada</option>
                                    <option value="OR">Oregon</option>
                                    <option value="WA">Washington</option>
                                </optgroup>
                                <optgroup label="Mountain Time Zone">
                                    <option value="AZ">Arizona</option>
                                    <option value="CO">Colorado</option>
                                    <option value="ID">Idaho</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="UT">Utah</option>
                                    <option value="WY">Wyoming</option>
                                </optgroup>
                                <optgroup label="Central Time Zone">
                                    <option value="AL">Alabama</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TX">Texas</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="WI">Wisconsin</option>
                                </optgroup>
                                <optgroup label="Eastern Time Zone">
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="IN">Indiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="OH">Ohio</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WV">West Virginia</option>
                                </optgroup>
                            </select>
                            <p class="my-2">Multiple Pills</p>
                            <select class="form-control" id="select2-3" multiple="multiple">
                                <optgroup label="Alaskan/Hawaiian Time Zone">
                                    <option value="AK" selected="selected">Alaska</option>
                                    <option value="HI">Hawaii</option>
                                </optgroup>
                                <optgroup label="Pacific Time Zone">
                                    <option value="CA">California</option>
                                    <option value="NV">Nevada</option>
                                    <option value="OR">Oregon</option>
                                    <option value="WA">Washington</option>
                                </optgroup>
                                <optgroup label="Mountain Time Zone">
                                    <option value="AZ">Arizona</option>
                                    <option value="CO">Colorado</option>
                                    <option value="ID">Idaho</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="UT">Utah</option>
                                    <option value="WY">Wyoming</option>
                                </optgroup>
                                <optgroup label="Central Time Zone">
                                    <option value="AL">Alabama</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TX">Texas</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="WI">Wisconsin</option>
                                </optgroup>
                                <optgroup label="Eastern Time Zone">
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="IN">Indiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="OH">Ohio</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WV">West Virginia</option>
                                </optgroup>
                            </select>
                            <p class="my-2">Placeholders</p>
                            <select class="form-control" id="select2-4">
                                <optgroup label="Alaskan/Hawaiian Time Zone">
                                    <option value="AK">Alaska</option>
                                    <option value="HI">Hawaii</option>
                                </optgroup>
                                <optgroup label="Pacific Time Zone">
                                    <option value="CA">California</option>
                                    <option value="NV">Nevada</option>
                                    <option value="OR">Oregon</option>
                                    <option value="WA">Washington</option>
                                </optgroup>
                                <optgroup label="Mountain Time Zone">
                                    <option value="AZ">Arizona</option>
                                    <option value="CO">Colorado</option>
                                    <option value="ID">Idaho</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="UT">Utah</option>
                                    <option value="WY">Wyoming</option>
                                </optgroup>
                            </select>
                            <!-- END SELECT2-->
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group row mb-2">
                        <label class="col-md-2 col-form-label mb-2">DateTimePicker</label>
                        <div class="col-xl-6 col-10">
                            <div class="input-group date" id="datetimepicker1">
                                <input class="form-control" type="text" />
                                <span class="input-group-append input-group-addon"><span class="input-group-text fas fa-calendar-alt"></span></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mb-2">
                        <label class="col-md-2 col-form-label mb-2">Format: 'mm-dd-yyyy'</label>
                        <div class="col-xl-6 col-10">
                            <div class="input-group date" id="datetimepicker2">
                                <input class="form-control" type="text" />
                                <span class="input-group-append input-group-addon"><span class="input-group-text far fa-clock"></span></span>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">
                            Tags input
                            <span class="text-sm text-muted">Type and press Enter</span>
                        </label>
                        <div class="col-md-10"><input class="form-control" type="text" data-role="tagsinput" value="Amsterdam,Washington,Sydney,Beijing,Cairo" /></div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">File input</label>
                        <div class="col-md-10">
                            <input
                                class="form-control filestyle"
                                type="file"
                                data-classbutton="btn btn-secondary"
                                data-classinput="form-control inline"
                                data-icon="&lt;span class='fa fa-upload mr-2'&gt;&lt;/span&gt;"
                            />
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Block Note Editor</label>
                        <div class="col-md-10">
                            <div class="card">
                                <div class="card-body"><textarea class="form-control note-editor" rows="10"></textarea></div>
                            </div>
                            <p>With margin</p>
                            <div class="card">
                                <div class="card-body"><textarea class="form-control note-editor note-editor-margin" rows="10"></textarea></div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Simple wysiwyg</label>
                        <div class="col-md-10">
                            <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>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group row">
                        <div class="col-md-4">
                            <button class="btn btn-secondary" type="submit">Cancel</button>
                            <button class="btn btn-primary" type="submit">Save changes</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
    <!-- END card-->
@endsection
@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/forms.js') }}"></script>
    <script src="{{ mix('/js/color-picker.js') }}"></script>
    <script src="{{ mix('/js/select2.js') }}"></script>
@endsection