@model IList<EnVisage.Models.ScenarioModel.ExpenditureItem>
<script type="text/javascript">
    // Multiselect
    $("#jquery-select2-multiple").select2({
        placeholder: "Select an Expenditure"
    });
    $('#s2id_jquery-select2-multiple input.select2-default').css('width', '200px');
</script>
@if (Model != null)
{
    var grouping = Model.GroupBy(x => x.Group);

    <div class="form-group no-margin-hr select2-primary">
        <select multiple="multiple" id="jquery-select2-multiple" name="expCatGroups" class="form-control">
            @foreach (var group in grouping)
            {
                <optgroup label="@group.Key">
                    @foreach (var cntl in group)
                    {
                        if (cntl.Checked)
                        {
                            <option value="@cntl.Id" selected="selected">@cntl.Name</option>
                        }
                        else
                        {
                            <option value="@cntl.Id">@cntl.Name</option>
                        }
                    }
                </optgroup>
            }
        </select>
    </div>
}