<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Buttons</title>
        <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="row mb-4">
                    <div class="col">

                        <div class="form-group">
                            <label for="style">Style:</label>
                            <select id="style" class="form-control">
                                <optgroup label="Solid">
                                    <option value="btn-primary">Primary</option>
                                    <option value="btn-secondary">Secondary</option>
                                    <option value="btn-tertiary">Tertiary</option>
                                    <option value="btn-quaternary">Quaternary</option>
                                    <option value="btn-color-5">Color 5</option>
                                    <option value="btn-color-6">Color 6</option>
                                    <option value="btn-color-7">Color 7</option>
                                    <option value="btn-color-8">Color 8</option>
                                    <option value="btn-success">Success</option>
                                    <option value="btn-danger">Danger</option>
                                    <option value="btn-warning">Warning</option>
                                    <option value="btn-info">Info</option>
                                    <option value="btn-light">Light</option>
                                    <option value="btn-dark">Dark</option>
                                    <option value="btn-link">Link</option>
                                </optgroup>
                                <optgroup label="Outline">
                                    <option value="btn-outline-primary">Outline Primary</option>
                                    <option value="btn-outline-secondary">Outline Secondary</option>
                                    <option value="btn-outline-tertiary">Outline Tertiary</option>
                                    <option value="btn-outline-quaternary">Outline Quaternary</option>
                                    <option value="btn-outline-color-5">Outline Color 5</option>
                                    <option value="btn-outline-color-6">Outline Color 6</option>
                                    <option value="btn-outline-color-7">Outline Color 7</option>
                                    <option value="btn-outline-color-8">Outline Color 8</option>
                                    <option value="btn-outline-success">Outline Success</option>
                                    <option value="btn-outline-danger">Outline Danger</option>
                                    <option value="btn-outline-warning">Outline Warning</option>
                                    <option value="btn-outline-info">Outline Info</option>
                                    <option value="btn-outline-light">Outline Light</option>
                                    <option value="btn-outline-dark">Outline Dark</option>
                                </optgroup>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="size">Size:</label>
                            <select id="size" class="form-control">
                                <option value="btn-sm">Small</option>
                                <option value="btn-md">Regular</option>
                                <option value="btn-lg">Large</option>
                                <option value="btn-xl">Extra Large</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="layout">Layout:</label>
                            <select id="layout" class="form-control">
                                <option value="btn-inline">Inline</option>
                                <option value="btn-block">Block</option>
                            </select>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <script src="{{ config('builder.vendor_asset_path') }}/jquery.js"></script>
        <script src="{{ config('builder.backend_asset_path') }}/plugins/buttons/js/button.js" type="text/javascript"
        ></script>
    </body>
</html>
