<script id="noDataTemplate" type="text/x-kendo-tmpl">
    <div class="kd-nodata-wrapper">
        # var value = instance.input.val(); #
        # var id = instance.element[0].id; #
        <div>
            No data found. Do you want to add new item - '#: value #' ?
        </div>
    </div>
    <br />
    <button class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md" onclick="addNew('#: id #', '#: value #')" ontouchend="addNew('#: id #', '#: value #')">Add new item</button>
    <div>
</script>


<div class="demo-wrapper k-d-grid k-gap-8 k-flex-1 k-px-8 k-pt-7">
    <div data-role="skeletoncontainer" class="side-container k-skeleton k-opacity-20 !k-d-flex k-flex-col k-align-items-center k-px-5 k-pt-7.5 k-rounded-tl-md k-rounded-tr-md" aria-live="polite" aria-label="Loading...">
        <span class="k-skeleton k-opacity-80 k-skeleton-circle k-w-18 k-h-18 k-mb-5"></span>
        <div class="k-d-flex k-flex-col k-align-items-center k-gap-1">
            <span class="k-skeleton k-w-24 k-h-4 k-rounded-md"></span>
            <span class="k-skeleton k-opacity-80 k-w-14 k-h-2.5 k-rounded-md"></span>
        </div>
        <div class="k-d-flex k-flex-col k-w-full k-mt-13 k-gap-4">
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        </div>
    </div>
    <div class="main-container k-pb-8 k-d-flex k-flex-col">
        <div class="k-d-flex k-gap-3 k-align-items-center k-mb-5">
            <span class="avatar !k-d-none k-skeleton k-opacity-30 k-skeleton-circle k-w-12 k-h-12"></span>
            <h4 class="k-h4 k-opacity-20 k-font-bold">Hobbies</h4>
        </div>
        <span class="k-d-inline-block">Favourite sport</span>
        @(Html.Kendo().MultiSelect()
            .Name("multiselect")
            .Placeholder("Please select your favourite sport...")
            .DownArrow(true)
            .NoDataTemplateId("noDataTemplate")
            .DataTextField("Text") 
            .DataValueField("Value")
            .Filter("contains")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("Overview_GetHobbies", "MultiSelect");
                });
            })
        )
        <span class="hint k-font-size-sm k-font-italic k-mt-1.5">Add your favourite sport, if it is not in the list.</span>

        <div class="k-d-flex k-flex-col k-gap-1 k-mt-5">
            <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
            <span class="k-skeleton k-opacity-30 k-rounded-md k-h-8"></span>
        </div>
        <div class="k-d-flex k-flex-col k-grow k-gap-1 k-mt-5">
            <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
            <span class="content-expanded k-grow k-skeleton k-opacity-30 k-rounded-md k-h-14"></span>
        </div>
    </div>
</div>
<style>
    .demo-wrapper {
        grid-template-columns: 180px 1fr;
    }

    .k-h4 {
        line-height: 26px;
        margin-bottom: 0;
    }

    .kd-nodata-wrapper {
        display: block !important;
        padding-top: 20px !important;
    }
    /* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */
    @@media (max-width: 678px), (min-width: 838px) and (max-width: 1038px), (min-width: 1241px) and (max-width: 1328px) {
        .demo-wrapper {
            grid-template-columns: 1fr;
        }

        .avatar {
            display: block !important;
        }

        .side-container {
            display: none !important;
        }

        .main-container {
            padding-bottom: 0;
        }

        .content-expanded {
            border-end-end-radius: 0;
            border-end-start-radius: 0;
        }
    }
    /* Breakpoint for full screen demo: max:359px */
    @@media (max-width: 476px) {
        .avatar {
            width: 32px;
            height: 32px;
        }
    }
</style>

<script>
    function addNew(widgetId, value) {
        var widget = $("#" + widgetId).getKendoMultiSelect();
        var dataSource = widget.dataSource;

        if (confirm("Are you sure?")) {
            dataSource.add({
                Value: dataSource.data().length + 1,
                Text: value
            });
            var currentValue = widget.value();
            currentValue.push(dataSource.data().length)
            widget.value(currentValue);
            widget.trigger("change");
        }
    };
</script>