<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <link rel="stylesheet" href="{{ config('builder.vendor_asset_path') }}/bootstrap.css">
        <link rel="stylesheet" href="{{ config('builder.backend_asset_path') }}/modules/css/settings.css">
    </head>
    <body>
        <div id="settings-wrapper">
            <div class="container">

                <div class="form-row w-100">
                    <div class="form-group col-6 col-md-4">
                        <label for="type">Type:</label>
                        <select id="type" class="form-control">
                            <option value="slider">Slider</option>
                            <option value="carousel">Carousel</option>
                        </select>
                    </div>

                    <div class="form-group col-6 col-md-4">
                        <label for="style">Style:</label>
                        <select id="style" class="form-control">
                            <option value="style-1">Style 1</option>
                            <option value="style-2">Style 2</option>
                            <option value="style-3">Style 3</option>
                            <option value="style-4">Style 4</option>
                            <option value="style-5">Style 5</option>
                        </select>
                    </div>

                    <div class="form-group col-6 col-md-2">
                        <label for="items">Per View:</label>
                        <select id="items" class="form-control">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>

                    <div class="form-group col-6 col-md-2">
                        <label for="margin">Margin:</label>
                        <input id="margin" type="text" class="form-control" value="0"/>
                    </div>
                </div>

                <div class="form-row w-100">
                    <div class="form-group col-6 col-md-4">
                        <label for="number-characters">Number of Characters:</label>
                        <input id="number-characters" type="text" class="form-control" value="100"/>
                    </div>
                    <div class="form-group col-6 col-md-4">
                        <label for="number-reviews">Number of Reviews:</label>
                        <input id="number-reviews" type="text" class="form-control" value="5"/>
                    </div>
                    <div class="form-group col-6 col-md-4">
                        <label for="speed">Speed(ms):</label>
                        <input id="speed" type="text" class="form-control" value="1000"/>
                    </div>
                </div>

                <div class="form-row w-100">
                    <div class="form-group col-md-12">
                        <div class="form-check form-check-inline">
                            <input id="show-title" class="form-check-input" type="checkbox" checked="checked">
                            <label for="show-title" class="form-check-label">Show Title</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input id="loop" class="form-check-input" type="checkbox" checked="checked">
                            <label for="loop" class="form-check-label">Loop</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input id="nav" class="form-check-input" type="checkbox" checked="checked">
                            <label for="nav" class="form-check-label">Arrows</label>
                        </div>
                    </div>
                </div>

                <div class="form-row w-100">
                    <div class="form-group col-md-12">
                        <div class="form-check form-check-inline">
                            <input id="dots" class="form-check-input" type="checkbox" checked="checked">
                            <label for="dots" class="form-check-label">Dots</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input id="autoplay" class="form-check-input" type="checkbox" checked="checked">
                            <label for="autoplay" class="form-check-label">Autoplay</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input id="pause" class="form-check-input" type="checkbox" checked="checked">
                            <label for="pause" class="form-check-label">Pause On Hover</label>
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <script src="{{ config('builder.backend_asset_path') }}/modules/js/review.js"></script>
    </body>
</html>
