<style>
  .fields-container label {
    color: #337ab7;
  }
  .fieldslist-wrapper {
    height: 100%;
  }
  .fieldslist-wrapper label {
    padding-left: 28px;
    padding-right: 8px;
  }
  .fieldslist-fields-wrapper {
    height: calc(100% - 65px);
    overflow-y: scroll;
  }
  .fieldslist-checklink-all, .fieldslist-checklink-none {
    color: #337ab7;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 9px;
  }
  .fieldslist-checklink-all {
    right: 48px;
  }
  .fieldslist-checklink-none {
    right: 6px;
  }
  .fieldslist-checklink:hover {
    color: #286090;
    text-decoration: underline;
  }
  .fieldslist-allfields {
    height: calc(100% - 65px);
  }
  .fieldslist-wrapper .ui-draggable-dragging {
    width: 90%;
  }
  .field-remove {
    color: #777;
    font-size: 14px;
    float: right;
    margin: 0px;
    cursor: pointer;
  }
  .field-name {
    font-weight: 600;
  }
  .field-type {
    color: #777;
    float: right;
    font-style: italic;
  }
</style>
<script>
    var rows = $('.fieldslist-field-{{prefix}}')
    $('.fieldslist-filter').keyup(function() {
      var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$'
      var reg = RegExp(val, 'i')
      var index = 0
      rows.each(function(i, e) {
        if (!reg.test($(this).text().replace(/\s+/g, ' '))) {
          $(this).attr('class', 'hidden')
        }
        else {
          $(this).attr('class', null)
        }
      })
    })

    function getCheckedFields() {
    var checkedfields = []
    $('.fieldslist-wrapper input:checked')
      .each(function () {
        checkedfields.push($(this).data('field'))
      })
    return checkedfields.join(',')
  }
  function checkAll() {
    console.log("Here in checkAll")
    $('.fieldslist-wrapper input[type="checkbox"]')
      .each(function () {
        $(this).prop('checked', true)
      })
    return getCheckedFields()
  }
  function checkNone() {
    console.log("Here in checkNone")
    $('.fieldslist-wrapper input[type="checkbox"]')
      .each(function () {
        $(this).prop('checked', false)
      })
    return ""
  }
</script>

<div class="fields-container row">
  <div class="col-sm-12" style="padding: 0px 5px 0px 0px; height: 365px;">
    <div class="fieldslist-wrapper" style="height:100%">
      <h5>Fields:</h5>
      <button pd_script="self.options_callback('tableFields', '$val(checkAll)')" class="fieldslist-checklink-all btn btn-default btn-xs">All</button>
      <button pd_script="self.options_callback('tableFields', '$val(checkNone)')" class="fieldslist-checklink-none btn btn-default btn-xs">None</button>
      <input type="text" class="fieldslist-filter form-control input-sm" placeholder="Search/Filter Fields">
      <div class="fieldslist-fields-wrapper">
        {% for field in this.fieldNamesAndTypes %}
          {% if field[0] in this.fieldNames %}
            <div class="fieldslist-field-{{prefix}}">
              <label class="checkbox">
                <input type="checkbox" {{"checked" if field.0 in this.tableFields}} id="fieldslist{{prefix}}-{{this.fieldNames.index(field.0)+1}}" value="{{field.0}}" data-field="{{field.0}}" data-field-type="{{field.1}}" pd_script="self.options_callback('tableFields', '$val(getCheckedFields)')">
                <span class="field-name">{{field.0}}</span>
                <span class="field-type">{{field.1}}</span>
              </label>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>