@{
    List<string> countries = ViewBag.Countries;
}
@section Scripts{
<script>
    var checkedItemsChanged = function (sender,e) {
        var i,result = document.getElementById("result"),
            items = sender.checkedItems;

        result.innerHTML = "";

        for (i = 0; i < items.length; i++) {
            result.innerHTML+="<span>" + (i+1) + ". " + items[i] + "<\/span><br>";
        }
    }
</script>
}
<div>
    <label>@Html.Raw(MultiSelectRes.Index_Text0)</label>

    <c1-multi-select id="multiselect" placeholder="@MultiSelectRes.Index_Placeholder" header-format="@MultiSelectRes.Index_HeaderFormat" checked-items-changed="checkedItemsChanged">
        <c1-items-source source-collection="countries" />
    </c1-multi-select>

    <label>@Html.Raw(MultiSelectRes.Index_SelectResults)</label>
    <div id="result"></div>
</div>

@section Description{
    @Html.Raw(MultiSelectRes.Index_Text1)
}
