%# BEGIN BPS TAGGED BLOCK {{{
%#
%# COPYRIGHT:
%#
%# This software is Copyright (c) 1996-2024 Best Practical Solutions, LLC
%#                                          <sales@bestpractical.com>
%#
%# (Except where explicitly superseded by other copyright notices)
%#
%#
%# LICENSE:
%#
%# This work is made available to you under the terms of Version 2 of
%# the GNU General Public License. A copy of that license should have
%# been provided with this software, but in any event can be snarfed
%# from www.gnu.org.
%#
%# This work is distributed in the hope that it will be useful, but
%# WITHOUT ANY WARRANTY; without even the implied warranty of
%# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
%# General Public License for more details.
%#
%# You should have received a copy of the GNU General Public License
%# along with this program; if not, write to the Free Software
%# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
%# 02110-1301 or visit their web page on the internet at
%# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html.
%#
%#
%# CONTRIBUTION SUBMISSION POLICY:
%#
%# (The following paragraph is not intended to limit the rights granted
%# to you to modify and distribute this software under the terms of
%# the GNU General Public License and is only of importance to you if
%# you choose to contribute your changes and enhancements to the
%# community by submitting them to Best Practical Solutions, LLC.)
%#
%# By intentionally submitting any modifications, corrections or
%# derivatives to this work, or any other work intended for use with
%# Request Tracker, to Best Practical Solutions, LLC, you confirm that
%# you are the copyright holder for those contributions and you grant
%# Best Practical Solutions,  LLC a nonexclusive, worldwide, irrevocable,
%# royalty-free, perpetual, license to use, copy, create derivative
%# works based on those contributions, and sublicense and distribute
%# those contributions and any derivatives thereof.
%#
%# END BPS TAGGED BLOCK }}}
<div class="selectionbox-js">
  <div class="form-row">
    <div class="col-6">
      <div class="source">
        <div class="filters">
          <div class="form-row">
            <div class="col-auto">
              <input type="search" class="field form-control" name="search" placeholder="<&|/l&>Search…</&>" autocomplete="off">
            </div>
%           if ( @filters ) {
            <div class="col-auto">
              <select class="form-control selectpicker" name="filter">
                  <option value=""><&|/l&>All Types</&></option>
%             for (@filters) {
%               my ($value, $label) = @$_;
                  <option value="<% $value %>"><% $label %></option>
% }
              </select>
            </div>
%           }
          </div>
        </div>

        <div class="contents">
%       for my $section (@sections) {
%         my $label = $section->{label};
%         my $items = $section->{items};

          <div class="section">
            <h3><% $label | n %></h3>
            <ul>
%             for my $item (sort {$a->{'label'} cmp $b->{'label'}} @$items) {
                <& /Elements/ShowSelectSearch, %$item &>
%             }
            </ul>
          </div>
%       }
        </div>
      </div>
    </div>
%   if ($dashboard_setup) {
    <script type="text/javascript">
      jQuery(window).on('load', function() {
          var validateWidth = function (cols) {
              if(!jQuery.isNumeric(cols)) { return 0; }
              if(cols < 0) { cols = 0; }
              if(cols > 12) { cols = 12; }
              return cols;
          }

          jQuery("#slider-body-width").slider({
              range: 'min',
              min: 0,
              max: 12,
              value: <% $body_width %>,
              slide: function(event, ui) {
                  jQuery("#body-width").val(ui.value);
                  jQuery("#sidebar-width").val(12 - ui.value);
                  jQuery("#slider-sidebar-width").slider("value", 12 - ui.value);
              }
          });
          jQuery("#body-width").val(jQuery("#slider-body-width").slider("value"));
          jQuery("#body-width").change(function() {
              var cols = validateWidth( jQuery(this).val() );
              jQuery(this).val(cols);
              jQuery("#slider-body-width").slider("value", cols);
              jQuery("#sidebar-width").val(12 - cols);
              jQuery("#slider-sidebar-width").slider("value", 12 - cols);
          });

          jQuery("#slider-sidebar-width").slider({
              range: 'min',
              min: 0,
              max: 12,
              value: <% $sidebar_width %>,
              slide: function(event, ui) {
                  jQuery("#sidebar-width").val(ui.value);
                  jQuery("#body-width").val(12 - ui.value);
                  jQuery("#slider-body-width").slider("value", 12 - ui.value);
              }
          });
          jQuery("#sidebar-width").val(jQuery("#slider-sidebar-width").slider("value"));
          jQuery("#sidebar-width").change(function() {
              var cols = validateWidth(jQuery(this).val());
              jQuery(this).val(cols);
              jQuery("#slider-body-width").slider("value", 12 - cols);
              jQuery("#body-width").val(12 - cols);
              jQuery("#slider-sidebar-width").slider("value", cols);
        });
      });
    </script>
%   }
    <div class="col-6">
      <div class="destinations">
%     for my $pane (sort keys %pane_name) {
        <div class="destination" data-pane="<% $pane %>">
          <div class="contents">
            <div class="section">
             <h3><% $pane_name{$pane} %></h3>
             <ul>
%            for my $item (@{ $selected{$pane} }) {
               <& /Elements/ShowSelectSearch, %$item &>
%            }
             </ul>
            </div>
          </div>
%         if ( $dashboard_setup ) {
          <div class="form-row width-slider-wrapper">
            <div class="form-group mx-auto">
              <div id="slider-<% $pane %>-width" class="width-slider"></div>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text"><% loc("[_1] Width:", ucfirst $pane) %></span>
                </div>
                <input type="number" min="0" max="12" step="1" class="form-control" name="<% $pane %>_width" id="<% $pane %>-width" />
                <div class="input-group-prepend">
                  <span class="input-group-text"><% loc('/ 12 Columns') %></span>
                </div>
              </div>
            </div>
          </div>
%         }
        </div>
%   }
      </div>
    </div>
  </div>
</div>

<%INIT>
use utf8;

# Defaults needed here so the editor controls can setup properly for dashboards
# without column widths that are explicitly set.
my ( $body_width, $sidebar_width );
if ( $dashboard_setup ) {
    $body_width    = $ARGS{ body_width } // 8;
    $sidebar_width = $ARGS{ sidebar_width } // 4;
} else {
    # This is some other use of this widget; not for setting up a dashboard
    $body_width    = 12;
    $sidebar_width = 0;
}

$m->callback(
    CallbackName => 'Default',
    sections     => \@sections,
    selected     => \%selected,
    filters      => \@filters,
);
</%INIT>
<%ARGS>
%pane_name
@filters
@sections
%selected
$dashboard_setup => 0
</%ARGS>
