{{!--<div class="site-example--content slds-scrollable--x slds-tabs__content slds-show" role="tabpanel">
    <div class="slds-p-horizontal--medium">--}}
        <h4 class="site-text-heading--medium">Markup</h4>
{{#aljs-pre-container type="html"}}
<div class="slds-form-element">
    <div class="slds-picklist--draggable slds-grid" data-aljs="multi-select">
        <div class="slds-form-element">
            <span class="slds-form-element__label" aria-label="select-1">First Category</span>
            <div class="slds-picklist slds-picklist--multi" data-aljs-multi-select="unselected">
                <ul class="slds-picklist__options slds-picklist__options--multi shown"></ul>
            </div>
        </div>
        <div class="slds-grid slds-grid--vertical">
            <button class="slds-button slds-button--icon-container" data-aljs-multi-select="unselect">
                <svg aria-hidden="true" class="slds-button__icon">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left"></use>
                </svg>
                <span class="slds-assistive-text">Pick list</span>
            </button>
            <button class="slds-button slds-button--icon-container" data-aljs-multi-select="select">
                <svg aria-hidden="true" class="slds-button__icon">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right"></use>
                </svg>
                <span class="slds-assistive-text">Pick list</span>
            </button>
        </div>
        <div class="slds-form-element">
            <span class="slds-form-element__label" aria-label="select-2">Second Category</span>
            <div class="slds-picklist slds-picklist--multi" data-aljs-multi-select="selected">
                <ul class="slds-picklist__options slds-picklist__options--multi shown"></ul>
            </div>
        </div>
        <div class="slds-grid slds-grid--vertical">
            <button class="slds-button slds-button--icon-container" data-aljs-multi-select="move-up">
                <svg aria-hidden="true" class="slds-button__icon">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#up"></use>
                </svg>
                <span class="slds-assistive-text">Pick list</span>
            </button>
            <button class="slds-button slds-button--icon-container" data-aljs-multi-select="move-down">
                <svg aria-hidden="true" class="slds-button__icon">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                </svg>
                <span class="slds-assistive-text">Pick list</span>
            </button>
        </div>
    </div>
</div>
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table gives you a quick overview of ALJS-specific markup applied to the SLDS component.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">ALJS Markup</th>
                        <th scope="col">Outcome</th>
                        <th scope="col">Required</th>
                        <th scope="col">Applied to</th>
                        <th scope="col">Comments</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>data-aljs="multi-select"</code></th>
                        <td data-label="Outcome">Provides a unique identifier for the plugin</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-picklist--draggable</code></td>
                        <td data-label="Comments"></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>data-aljs-multi-select="unselected"</code></th>
                        <td data-label="Outcome">Establishes the element as the unselected list</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-picklist--multi</code></td>
                        <td data-label="Comments"></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>data-aljs-multi-select="selected"</code></th>
                        <td data-label="Outcome">Establishes the element as the selected list</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-picklist--multi</code></td>
                        <td data-label="Comments"></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>data-aljs-multi-select="unselect"</code></th>
                        <td data-label="Outcome">Binds the element to move entries to the unselected list on click</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-button</code></td>
                        <td data-label="Comments"></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>data-aljs-multi-select="select"</code></th>
                        <td data-label="Outcome">Binds the element to move entries to the selected list on click</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-button</code></td>
                        <td data-label="Comments"></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>data-aljs-multi-select="move-up"</code></th>
                        <td data-label="Outcome">Binds the element to move entries up in the unselected list on click</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-button</code></td>
                        <td data-label="Comments"></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>data-aljs-multi-select="move-down"</code></th>
                        <td data-label="Outcome">Binds the element to move entries down in the unselected list on click</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-button</code></td>
                        <td data-label="Comments"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Initialize</h4>
{{#aljs-pre-container type="js"}}
var unselectedItems = [
    {
        id: 'option-1',
        label: 'Option 1'
    },
    {
        id: 'option-2',
        label: 'Option 2'
    }
];

var selectedItems = [
    {
        id: 'option-3',
        label: 'Option 3'
    },
    {
        id: 'option-4',
        label: 'Option 4'
    }
];

$(document).ready(function() {
    $('[data-aljs="multi-select"]').multiSelect({
        unselectedItems: unselectedItems,
        selectedItems: selectedItems
    });
});
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table details the options available for the jQuery function.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Option</th>
                        <th scope="col">Behavior</th>
                        <th scope="col">Values</th>
                        <th scope="col">Default value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>unselectedItems</code></th>
                        <td data-label="Behavior">Populates the list of unselected items on page load</td>
                        <td data-label="Accepted values">An array of objects with <code>id</code> (unique) and <code>label</code> properties</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>[]</code></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>selectedItems</code></th>
                        <td data-label="Behavior">Populates the list of selected items on page load</td>
                        <td data-label="Accepted values">An array of objects with <code>id</code> (unique) and <code>label</code> properties</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>[]</code></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>onUnselectItem</code></th>
                        <td data-label="Behavior">Calls a function when an item is unselected</td>
                        <td data-label="Values">Any callback function</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>function(obj) {}</code></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>onSelectItem</code></th>
                        <td data-label="Behavior">Calls a function when an item is selected</td>
                        <td data-label="Values">Any callback function</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>function(obj) {}</code></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Methods</h4>
{{#aljs-pre-container type="js"}}
var idsToSelect = [
    {
        id: 'option-1',
        label: 'Option 1'
    },
    {
        id: 'option-3',
        label: 'Option 3'
    }
];

var idsToUnselect = [
    {
        id: 'option-4',
        label: 'Option 4'
    },
    {
        id: 'option-2',
        label: 'Option 2'
    }
];

$('[data-aljs="multi-select"]').multiSelect('setSelectedItems', idsToSelect);
$('[data-aljs="multi-select"]').multiSelect('setUnselectedItems', idsToUnselect);
$('[data-aljs="multi-select"]').multiSelect('getSelectedItems');
$('[data-aljs="multi-select"]').multiSelect('getUnselectedItems');
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table details the methods available for the jQuery function.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Method</th>
                        <th scope="col">jQuery object</th>
                        <th scope="col">Parameters</th>
                        <th scope="col">Outcome</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>setSelectedItems</code></th>
                        <td data-label="jQuery object">The multiSelect</td>
                        <td data-label="Parameters">An array of objects with <code>id</code> (unique) and <code>label</code> properties to set as selected</td>
                        <td data-label="Outcome">The objects are converted into entries within the selected list in the order they are passed in</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>setUnselectedItems</code></th>
                        <td data-label="jQuery object">The multiSelect</td>
                        <td data-label="Parameters">An array of objects with <code>id</code> (unique) and <code>label</code> properties to set as unselected</td>
                        <td data-label="Outcome">The objects are converted into entries within the unselected list in the order they are passed in</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>getSelectedItems</code></th>
                        <td data-label="jQuery object">The multiSelect</td>
                        <td data-label="Parameters">N/A</td>
                        <td data-label="Outcome">An array of objects with <code>id</code> (unique) and <code>label</code> properties that represent the selected items is returned</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>getUnselectedItems</code></th>
                        <td data-label="jQuery object">The multiSelect</td>
                        <td data-label="Parameters">N/A</td>
                        <td data-label="Outcome">An array of objects with <code>id</code> (unique) and <code>label</code> properties that represent the unselected items is returned</td>
                    </tr>
                </tbody>
            </table>
        </div>
    {{!--</div>
</div>--}}