@include('Website::web-builder.widget._back_title',compact('title'))
<style>
    .config-body.listing {
        padding: 0;
    }

    .card {
        border: none;
        width: 100%;
    }

    .card-header {
        padding: 0;
        border: none !important;
        width: 100%;
    }

    .card-header .btn.btn-link {
        border: none !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        color: #000 !important;
    }

    .card-body {
        padding: 0;
    }

    .card-body form {
        padding: 15px;
    }

    .config-body.listing .section-item {
        padding-left: 15px;
        padding-right: 15px;
    }
</style>
<section class="gallery">
    <div class="config-box">
        <div class="config-heading">
            Settings
        </div>
        <div class="config-body">
            <form action="">
                <div class="form-group">
                    <div class="config-dropdown">
                        <label id="heading-label" for="heading">Section Height</label>
                        <select class="form-control custom-select">
                            <option>Medium</option>
                            <option>Large</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="config-box">
        <div class="config-heading">
            Content
        </div>
        <div class="config-body listing">
            <div id="accordion" class="testimonials-listing">
                <div class="card" id="card-key">
                    <div class="card-header" id="heading-key">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-key" aria-expanded="true" aria-controls="collapse-key">
                                <div class="section-item">
                                    <img src="{{ asset('/assets/images/sidebar-icons/add-title-taline.svg') }}" alt="" />
                                    <p>Add title or tagline</p>
                                    <div class="right-icons">
                                        <div class="view-icon">
                                            <i class="fa fa-caret-right" style="color: #8F8F8F"></i>
                                        </div>
                                        <div class="drag-icon">
                                            <img src="{{ asset('/assets/images/sidebar-icons/drag-icon.svg') }}" alt="" />
                                        </div>
                                    </div>
                                </div>
                            </button>
                        </h5>
                    </div>
                    <div id="collapse-key" class="collapse" aria-labelledby="heading-key" data-parent="#accordion">
                        <div class="card-body">
                            <form action="">
                                <div class="form-group">
                                    <label id="heading-label" for="heading">Image</label>
                                    <div class="image-upload-box">
                                        <button class="btn-primary">
                                            Select Image
                                        </button>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="config-dropdown">
                                        <label id="heading-label" for="heading">Text alignment</label>
                                        <select class="form-control custom-select">
                                            <option>left</option>
                                            <option>center</option>
                                            <option>right</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="config-dropdown">
                                        <label id="full-width" for="heading">Link</label>
                                        <input type="text" class="form-control" placeholder="link">
                                    </div>
                                </div>
                            </form>
                            @include('Website::web-builder.widget._remove_section')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-item add-column">
        <img src="./assets/images/sidebar-icons/plus-icon.svg" alt="" />
        <p>Add Column</p>

    </div>

    <div class="config-body">
        <form action="">
            <div class="form-group">
                <div class="form-check">
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox" value="" id="defaultCheck1" />
                        <label class="custom-control-label" for="defaultCheck1">
                            2 Column
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="config-dropdown">
                    <label id="heading-label" for="heading">Column Number</label>
                    <select class="form-control custom-select">
                        <option>First Column</option>
                        <option>Second Column</option>
                    </select>
                </div>
            </div>

            <div class="form-group columns-width">
                <label id="heading-label" for="heading">Column Width</label>
                <div id="slider">
                    <input class="bar" type="range" id="rangeinput" value="50" onchange="rangevalue.value=value" />
                    <span class="highlight"></span>
                    <output id="rangevalue">50</output>
                </div>
                <span class="font-weight-bold text-primary ml-2 mt-1 valueSpan"></span>
            </div>
        </form>

    </div>
    @include('Website::web-builder.widget._remove_section')
</section>