@include('Website::web-builder.widget._back_title',compact('title'))
<section class="custom-content">
    <div class="config-box">
      <div class="config-heading">
        Settings
      </div>
      <div class="config-body">
        <form action="">
            <div class="form-group">
                <label for="heading">Section Label</label>
                <input type="text" name="widget[widget_label]"  class="form-control" placeholder="{{ $title }}"  value="{{  optional($settings)['widget_label'] ?? $title }}" />
            </div>
          <div class="form-group">
            <label id="heading-label" for="heading">Heading</label>
            <input type="text" class="form-control" id="heading">
          </div>
        </form>
      </div>
    </div>
    <div class="config-box">
      <div class="config-heading">
          Content
      </div>
      <div class="config-body lists">
          <div class="section-item">
              <img
                src="./assets/images/sidebar-icons/add-title-taline.svg"
                alt=""
              />
              <p>talk about your brand</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="./assets/images/sidebar-icons/drag-icon.svg"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="section-item">
              <img
                src="./assets/images/sidebar-icons/add-title-taline.svg"
                alt=""
              />
              <p>Image</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="./assets/images/sidebar-icons/drag-icon.svg"
                    alt=""
                  />
                </div>
              </div>
            </div>

            <div class="section-item add-column">
              <img
                src="./assets/images/sidebar-icons/plus-icon.svg"
                alt=""
              />
              <p>Add Column</p>

            </div>
            <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')
  </div>
  <div class="section-footer">
    <div class="sidebar-dropdown dropdown">
      <button
        class="btn btn-sidebar dropdown-toggle"
        type="button"
        id="dropdownMenu2"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        Theme Actions
        <span
          ><img
            src="./assets/images/sidebar-icons/drop-arrow.svg"
            alt=""
        /></span>
      </button>
      <div
        class="dropdown-menu"
        aria-labelledby="dropdownMenu2"
      >
        <button class="dropdown-item" type="button">
          Action
        </button>
        <button class="dropdown-item" type="button">
          Another action
        </button>
        <button class="dropdown-item" type="button">
          Something else here
        </button>
      </div>
    </div>
    <div class="foot-navigation">
      <div class="foot-prev">
        <a href="#"
          ><img
            src="./assets/images/sidebar-icons/sidebar-back.svg"
            alt=""
          />
        </a>
      </div>
      <div class="foot-next">
        <a href="#" >
          <img
            src="./assets/images/sidebar-icons/sidebar-forward.svg"
            alt=""
          />
        </a>
      </div>
    </div>
  </div>
  </section>