@using EnVisage.Code
@using EnVisage.Models
@using Microsoft.AspNet.Identity
@model Object
@{
    var user = (new EnVisage.Code.Cache.UsersCache()).Value.FirstOrDefault(x => x.Id == new Guid(User.Identity.GetID()));
    var menuId = (Model is CapacityDetailsOptionsModel ? ((CapacityDetailsOptionsModel)Model).MenuId : "visibilitydropdown_calendar");
    CapacityPageInitOption initDataObject = new CapacityPageInitOption()
    {
        ShowUpper = true,
        ShowLower = false,
        IsUOMHours = user != null && !user.PreferredResourceAllocation,
        PreferredTotalsDisplaying = user != null && user.PreferredTotalsDisplaying,
        IsBarMode = false,
        IsViewModeMonth = true,
        IsCapacityModeActuals = false,
        GroupByTeam = false,
        ShowCapacity = 1,
        StartDate = new DateTime(DateTime.UtcNow.Year, DateTime.UtcNow.Month, 1).ToString("MM/dd/yyyy"),
        EndDate = new DateTime(DateTime.UtcNow.Year, DateTime.UtcNow.Month, 1).AddMonths(6).ToString("MM/dd/yyyy"),
        MenuId = menuId,
        ModelType = Model != null ? Model.GetType().ToString() : string.Empty,
        PagePreferences = user.GetPreferences(Request.Url.AbsolutePath, "capacityManagementView"),
        DataSection = "capacityManagementView",
    };

    //if (Model is CapacityDetailsModel)
    //{
    //    initDataObject.CompanyId = ((CapacityDetailsModel)Model).CompanyId;
    //    initDataObject.ViewId = ((CapacityDetailsModel)Model).ViewId;
    //    initDataObject.TeamId = ((CapacityDetailsModel)Model).TeamId;
    //    initDataObject.ResourceId = ((CapacityDetailsModel)Model).ResourceId;
    //    initDataObject.FilterOptions = ((CapacityDetailsModel)Model).OptionsForFilters;
    //    initDataObject.PageTitle = "calendar"; // SA. ENV-905. Backurl page name - to return to this page
    //}

    //if (Model is ViewBoardModel)
    //{
    //    initDataObject.ViewId = ((ViewBoardModel)Model).SelectedViewId;
    //    initDataObject.PageTitle = "dashboard";  // SA. ENV-905. Backurl page name - to return to this page
    //}

    //if (Model is TeamboardModel)
    //{
    //    initDataObject.TeamId = ((TeamboardModel)Model).SelectedTeamId;
    //    initDataObject.PageTitle = "dashboard";  // SA. ENV-905. Backurl page name - to return to this page
    //}

    //if (Model is PeopleResourceModel)
    //{
    initDataObject.ResourceId = ((PeopleResourceModel)Model).Id;
    initDataObject.PageTitle = "dashboard";  // SA. ENV-905. Backurl page name - to return to this page
    @*}*@

    var json = Newtonsoft.Json.JsonConvert.SerializeObject(initDataObject);
}
<div id="erorMsgPlaceholder"></div>
<script type="text/javascript">
    var _menuCM;
    var _pageCMPreferences = [];
    var angularScope;
    var liHeight = 30;
    var _saveScenarioDataChanged = false;
    function onSSDataChanged() {
        _saveScenarioDataChanged = true;
    }
    function resetSSDataChanged() {
        _saveScenarioDataChanged = false;
    }
    function isSSDataChanged() {
        return _saveScenarioDataChanged;
    }

    function initSwitchers() {
        $('#showTopMode').switcher({
            on_state_content: 'On',
            off_state_content: 'Off'
        });
        $('#showButtomMode').switcher({
            on_state_content: 'On',
            off_state_content: 'Off'
        });
        $('#sortOrder').switcher({
            on_state_content: 'Asc',
            off_state_content: 'Desc'
        });

        if (!$('#showButtomMode').prop('checked'))
            $("#showTopMode").switcher('disable');

        if (!$('#showTopMode').prop('checked'))
            $("#showButtomMode").switcher('disable');

        $('#saveScenarioModal').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
            if (typeof onSSDataChanged === 'function')
                onSSDataChanged();
        });

        $(document).on('hide.bs.modal', '#saveScenarioModal', function (e) {
            if ($(e.target).attr('id') != 'saveScenarioModal') {
                $("#saveScenarioModal").focus();
                return true; // close modal form
            }
            if (typeof isSSDataChanged === 'function')
                if (isSSDataChanged()) {
                    if (confirm("Scenario Save form contains unsaved changes, do you really want to close the form?")) {
                        if (typeof resetSSDataChanged === 'function') {
                            resetSSDataChanged();
                            return true;
                        }
                    }
                    $("#saveScenarioModal").focus();
                    return false; // DO NOT close modal form
                }
            $("#saveScenarioModal").focus();
            return true; // close modal form
        }).on('show.bs.modal', '#saveScenarioModal', function (e) {
            if (typeof resetSSDataChanged === 'function') {
                resetSSDataChanged();
            }
        }).on('calendar.scenario-saved', function () {
            if (typeof resetSSDataChanged === 'function') {
                resetSSDataChanged();
            }
            $("#saveScenarioModal").modal('hide');
        });

        $('#uomMode').switcher({
            on_state_content: '# Hours',
            off_state_content: '# Resources'
        });
        $('#uomMode').parent().css("width", "93px");
        $('#capBarMode').switcher({
            on_state_content: 'Colors',
            off_state_content: 'Values'
        });
        $('#capBarMode').parent().css("width", "73px");

        $('#defaultView').switcher({
            on_state_content: 'Month',
            off_state_content: 'Week'
        });
        $('#defaultView').parent().css("width", "93px");

        // SA. ENV-886
        @if (Model is PeopleResourceModel)
		{
			<text>
        $('#capacityView').prop('checked', true);
        </text>
		}

        $('#capacityView').switcher({
            on_state_content: 'Actual',
            off_state_content: 'Planned'
        });
        $('#capacityView').parent().css("width", "93px");

        // SA. ENV-886
        @if (Model is PeopleResourceModel)
		{
			<text>
        $('#capacityView').switcher('disable');
        </text>
		}

    }

    init.push(function () {

        var options = {
            format: 'mm/dd/yyyy',
            autoclose: true,
            orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto',
            startDate: '@Constants.MIN_SELECTABLE_DATE', // SA. ENV-1235. Disable incorrect dates input
            endDate: '@Constants.MAX_SELECTABLE_DATE'    // SA. ENV-1235. Disable incorrect dates input
        };

        $('#bs-datepicker-range').datepicker(options).on('changeDate', function (evt) {
            onCMPreferencesItemClick($('#@menuId'));
            if (evt.target.id == 'filterStartDate') {
                var sDate = undefined;
                var tmpValue = $('#filterStartDate').val();
                var endDateValue = $('#filterEndDate').val();

                if (tmpValue && (tmpValue.length > 0))
                    sDate = new Date(tmpValue);

                if (!endDateValue || (endDateValue.length > 0)) {
                    $('#bs-datepicker-range').data('datepicker').pickers[1].prepopulate(sDate);
                    //$('#bs-datepicker-range').data('datepicker').pickers[1].update(tmpValue);
                    //$('#bs-datepicker-range').data('datepicker').pickers[1].update('');
                }

                $('#filterEndDate').data('datepicker').setStartDate(sDate);
            }
        });

        $('#saveScenarioModal').find('input[type=checkbox],input[type=text],select,textarea').on("change", function () {
            if (typeof onSSDataChanged === 'function')
                onSSDataChanged();
        });

        $(document).on('hide.bs.modal', '#saveScenarioModal', function (e) {
            if ($(e.target).attr('id') != 'saveScenarioModal') {
                $("#saveScenarioModal").focus();
                return true; // close modal form
            }
            if (typeof isSSDataChanged === 'function')
                if (isSSDataChanged()) {
                    if (confirm("Scenario Save form contains unsaved changes, do you really want to close the form?")) {
                        if (typeof resetSSDataChanged === 'function') {
                            resetSSDataChanged();
                            return true;
                        }
                    }
                    $("#saveScenarioModal").focus();
                    return false; // DO NOT close modal form
                }
            $("#saveScenarioModal").focus();
            return true; // close modal form
        }).on('show.bs.modal', '#saveScenarioModal', function (e) {
            if (typeof resetSSDataChanged === 'function') {
                resetSSDataChanged();
            }
        }).on('calendar.scenario-saved', function () {
            if (typeof resetSSDataChanged === 'function') {
                resetSSDataChanged();
            }
            $("#saveScenarioModal").modal('hide');
        });

        $(window).scroll(function () {
            $('.menuGroup').removeClass('open');
            hideRedundantPopovers($('#dataTable2_CFB'), null);
        });

        $('.table-light').scroll(function () {
            $('.menuGroup').removeClass('open');
            hideRedundantPopovers($('#dataTable2_CFB'), null);
        });
        $(document).click(function (event) {
            if (!$(event.target).is('[data-toggled="popover"]'))
                hideRedundantPopovers($('#dataTable2_CFB'), null);
        });

        $('.for-select2').select2({
            minimumResultsForSearch: -1
        });
        $('[name=selFilterElement]').select2();
        $('.for-select2 a').css('line-height', '30px');


        initSwitchers();

        angularScope = angular.element(document.getElementById('controller1')).scope();
        $(document).on('hide.bs.modal', '#createScenario', function (e) {
            // skip modal hide event from datepickers
            if ($(e.target).attr('id') != 'createScenario')
                return true; // close modal form
            // check that form has been changed
            if (typeof isScenarioDataChanged === 'function')
                // if form has been changed
                if (isScenarioDataChanged()) {
                    // ask user for confirmation of form close
                    if (confirm('@EnVisage.Code.Constants.CONFIRM_CREATE_SCENARIO')) {
                        // reset change indicator
                        if (typeof resetScenarioDataChanged === 'function') {
                            resetScenarioDataChanged();
                        }
                        return true; // close modal form
                    };
                    return false; // DO NOT close modal form
                }
            return true; // close modal form
        });
    });


    function onCMPreferencesItemClick(menu) {
        saveCapacityManagementPreferences();
    }

    function dropDownFixPositionCalendar(button, dropdown) {

        setDropdownProps(button, dropdown, liHeight);


        hideRedundantPopovers($('#dataTable2_CFB'), null);
    }

    function dropDownInsideClick(event) {
        if (!event)
            event = window.event;

        var container = null, button = null;
        if ($(event.target).hasClass('dropdown-menu'))
            container = $(event.target);
        else {
            button = $(event.target);
            container = button.closest('.dropdown-menu');
        }
        hideRedundantPopovers(container, button);

        if (event.stopPropagation)
            event.stopPropagation();
        else
            window.event.cancelBubble = true;
    }

    function changeCapacityView(val) {
        angularScope.$apply(function () {
            angularScope.changeCapacity(val.value);
        });
    }

    function changeSortColumn(val) {
        angular.element(document.getElementById('controller1')).scope().changeSortBy(val.value);
    }

    function switchSortOrder(val) {
        angular.element(document.getElementById('controller1')).scope().switchSortOrder();
    }

    function switchUOMMode() {
        angular.element(document.getElementById('controller1')).scope().switchUOMMode();
    }

    function switchBarMode() {
        angular.element(document.getElementById('controller1')).scope().switchBarMode();
    }

    function switchViewMode() {
        angular.element(document.getElementById('controller1')).scope().switchViewMode();
    }

    function switchGroupByTeam() {
        angular.element(document.getElementById('controller1')).scope().switchGroupByTeam();
    }

    function switchCapacityViewMode() {
        angular.element(document.getElementById('controller1')).scope().switchCapacityVew();
    }

    // SA. ENV-799. Begin
    function switchToCompanyFilterMode() {
        angular.element(document.getElementById('controller1')).scope().switchCompanyFilterMode();
    }

    function switchToViewFilterMode() {
        angular.element(document.getElementById('controller1')).scope().switchViewFilterMode();
    }

    function switchToTeamFilterMode() {
        angular.element(document.getElementById('controller1')).scope().switchTeamFilterMode();
    }
    // SA. ENV-799. End

    function switchShow(upper) {
        angularScope.hideCalendarPart(upper);
    }

    // SA. ENV-815
    function saveCapacityManagementPreferences() {
        var section = getDataSection($("#menuCalendarOptions"));
        var prefs = collectPreferences(section);

        prefs.push({
            Key: "filteredCompany",
            Value: angular.element(document.getElementById('controller1')).scope().CalendarFilterMode.SelectedItemId
        });

        saveUserPagePreferences(prefs, section);
    }

    // SA. ENV-815
    function loadCapacityManagementPreferences() {
        var section = getDataSection($("#menuCalendarOptions"));
        _pageCMPreferences = loadUserPagePreferences(section);
        return section;
    }

    function loadScenario(projectId) {
        var url = "?Id=" + projectId;
        $('#reloadForm').load('@Url.Action("LoadScenario", "Scenarios")' + url, function () {
            if (typeof initScenario === 'function')
                initScenario();
            $('#createScenario').modal('show');
        });
    }

</script>

<style type="text/css">
    .validation-error {
        color: red;
    }

    #table thead {
        border-collapse: separate;
        border-spacing: 0;
    }

        #table thead tr th {
            -moz-background-clip: padding-box;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border-top: 1.1px solid;
            border-right: 1.1px solid;
        }

    .editable-input {
        width: 140px;
    }
</style>

<!-- / Large modal -->
<div id="controller1" ng-controller="capacityManagementController" ng-init="init(@json)" ng-cloak>
    <div id="menuCalendarOptions" ng-show="false">
        <ul>
            
            <li class="padding-xs-hr">
                <label><span class="switcherLbl">Mode</span><input type="checkbox" data-key="uomMode" name="uomMode" id="uomMode" class="switcher px" onclick="switchUOMMode()" /></label>
            </li>
            <li class="padding-xs-hr">
                <label><span class="switcherLbl">Projects Displayed as</span><input type="checkbox" data-key="capBarMode" name="capBarMode" id="capBarMode" class="switcher px" onclick="switchBarMode()" /></label>
            </li>
            <li class="padding-xs-hr">
                <label><span class="switcherLbl">Default View</span><input type="checkbox" data-key="defaultView" name="defaultView" id="defaultView" class="switcher px" onclick="switchViewMode()" /></label>
            </li>
            
            
            <li class="divider"></li>
            <li class="padding-xs-hr" style="padding-bottom:3px;">
                <nobr>
                    <span class="switcherLbl" style="padding-top:3px;">Sort By </span>
                    <select id="sortBy" data-key="sortBy" class="form-control for-select2" style="width: 100px;"
                            onchange="changeSortColumn(this)">
                        <option value="Name">Name</option>
                        <option value="Type">Type</option>
                        <option value="Date">Date</option>
                        <option value="Priority">Priority</option>
                    </select>
                </nobr>
            </li>
            <li class="padding-xs-hr">
                <label><span class="switcherLbl">Sort Order</span><input type="checkbox" data-key="sortOrder" name="sortOrder" id="sortOrder" class="switcher px" onclick="switchSortOrder()" /></label>
            </li>
            <li class="padding-xs-hr">
                <label><span class="switcherLbl">Show Projects</span><input type="checkbox" data-key="showChart" name="showTopMode" id="showTopMode" class="switcher px" checked onclick="switchShow(true)" /></label>
            </li>
            
        </ul>
    </div>
    <div class="form-inline panel-body">
        <div class="row">
            <form class="form-horizontal" name="filterForm" id="filterForm">                
                <div class="col-sm-8 col-md-5 col-lg-4">
                    <div class="form-group no-margin-hr">
                        <label class="control-label">Start<span class="enddatespan">/End</span> Date</label>
                        <div style="overflow: hidden;">

                            <div class="input-daterange input-group" id="bs-datepicker-range">
                                <input class="form-control" data-key="capacityFilterStartDate" ng-model="calendarFilters.StartDate" ng-change="onStartDate" id="filterStartDate" name="filterStartDate" type="text" />
                                <div class="input-group-addon">to</div>
                                <input class="form-control enddate" data-key="capacityFilterEndDate" ng-model="calendarFilters.EndDate" id="filterEndDate" name="filterEndDate" type="text">
                            </div>
                            <span class="field-validation-error" ng-show="dateError"><span>End Date should not be less than Start Date</span></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group no-margin-hr">
                        <label class="control-label">&nbsp;</label><br />
                        <button class="btn btn-default" ng-disabled="dateError" id="btnReloadCapacityCalendar" ng-click="loadCalendarData()"><i class="fa fa-refresh"></i> Reload</button>
                        <button class="btn btn-primary" ng-if="!isReadOnly" ng-disabled="!anyUpdated()" data-target="#saveScenarioModal" data-toggle="modal"><i class="fa fa-save"></i> Save Changes</button>
                        
                        <span id="loader" class="h3">
                            <img class="valign-middle" src="@Url.Content("~/Content/images/loadFA.gif")" />
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="ac-control">
        <!--Project Cell-->
        <div id="dataTable2:scroller:fxcol" class="ac-left-col">
            <div class="freezeTable1 ac-left-col-header" id="dataTable2:scroller:fxCH">
                <table class="table1 table-light" ng-if="data != null && data.Calendar.length > 0" id="dataTable2_CFH">
                    <thead>
                        <tr>
                            <th class="firstcol">
                                <div>Name</div>
                            </th>
                            <th class="firstcol">
                                <div>Grand Totals</div>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!--Left Column-->
            <div class="freezeTable1 ac-left-col-content height-container" id="dataTable2:scroller:fxCB">
                <table class="table table1" id="dataTable2_CFB">
                    <tbody ng-repeat="row in data.Calendar track by $index" ng-init="projectIndex = $index">
                        <!--Project-->
                        <tr ng-if="row.RowType == RowType.Project && (data.Calendar.length - 1) > $index && data.Calendar[$index+1].RowType==RowType.ProjectExpenditureCategory && (!row.HideProjection  || !row.HideActuals)"
                            ng-repeat-start="res in data.Calendar[$index+1].Resources" style="border-left: 0px !important;">
                            <!--Show projection title-->
                            <td style="height:31px;border-left: 0px !important;border-right: 1px solid #dbdbdb !important;" class="headcol1 headcol-week expCat"
                                ng-if="!row.HideProjection && !row.HideActuals" ng-click="onParentNodeClick(row, $event);">
                                @if (SecurityManager.CheckSecurityObjectPermission(Areas.Projects, AccessLevel.Write))
                                {
                                    <text>
                                        <div id="div_dd_{{$index}}" ng-if="row.RowType == RowType.Project && ((row.InactiveScenarios != null && row.InactiveScenarios.length > 0) || row.ScenarioId != null)" class="btn-group menuGroup pull-right">
                                            <a class="dropdown-toggle" data-toggle="dropdown" onclick='dropDownFixPositionCalendar($(this), $(this).parent().find(".dropdown-menu"));'>
                                                <i class="fa fa-chevron-circle-down menu-arrow"></i>
                                            </a>
                                            <ul id="ul_dd_{{$index}}" class="dropdown-menu dropdown-menu-form dropdown-menu-right dropdown-menu-scroll-auto" style="width: 472px; clear: both; z-index: 499;" onclick="dropDownInsideClick(event);">
                                                <li ng-if="row.ScenarioId != null">
                                                    <div style="float: left;">
                                                        Edit Project
                                                    </div>
                                                    <div style="float: right;">
                                                        <a ng-show="row.ParentProjectId != null" class="btn btn-xs btn-primary popover-warning popover-dark pull-right" style="width: 27px;" title="Edit Project" href="@Url.Action("Edit", "Project")/{{ row.PartId.length > 0 ? row.ParentProjectId + '?partId=' + row.PartId : row.ParentProjectId}}" data-placement="left" data-toggle="popover">
                                                            <i class="fa fa-edit"></i>
                                                        </a>
                                                    </div>
                                                </li>
                                                <li ng-if="row.ScenarioId != null">
                                                    <div style="-ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; max-width: 172px; float: left;">
                                                        <a id="a-cl-{{row.ScenarioId}}-{{row.TeamId}}" ng-click="CheckLock($event, 'Scenario', row.ScenarioId, '@Url.Action("Details", "Scenarios")')" class="popover-warning popover-dark" data-toggle="popover" title="{{row.ActiveScenarioName || 'empty'}}">{{ row.ActiveScenarioName || 'empty' }}</a>
                                                    </div>
                                                    <div style="float: right;">
                                                        <a id="a-ts-{{row.ScenarioId}}-{{row.TeamId}}" class="btn btn-xs btn-warning popover-warning popover-dark" ng-click="ToggleStatus($event, 'Scenario', row.ScenarioId)" title="Deactivate" data-toggle="popover" style="width: 27px;"><i class="fa fa-times-circle-o"></i></a>
                                                        <a id="a-copy-{{row.ScenarioId}}-{{row.TeamId}}" ng-click="CopyScenario($event, row.ScenarioId)" data-toggle="popover" class="btn btn-xs popover-warning popover-dark" title="Copy" style="width: 27px;"><i class="fa fa-copy"></i></a>
                                                        <a id="a_add_{{$index}}-{{row.TeamId}}" ng-click="AddScenario($event, row.ProjectId)" data-toggle="popover" class="btn btn-xs btn-success popover-warning popover-dark" title="Add Scenario" style="width: 27px;"><i class="fa fa-plus"></i></a>
                                                    </div>
                                                </li>
                                                <li class="divider" ng-if="row.RowType == RowType.Project && row.InactiveScenarios.length > 0"></li>
                                                <li ng-repeat="scenario in row.InactiveScenarios">
                                                    <div style="-ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; max-width: 200px; float: left;">
                                                        <a id="a-cl-{{scenario.Id}}-{{row.TeamId}}" ng-click="CheckLock($event, 'Scenario', scenario.Id, '@Url.Action("Details", "Scenarios")')" class="popover-warning popover-dark" data-toggle="popover" title="{{scenario.Name || 'empty'}}">{{ scenario.Name || 'empty' }}</a>
                                                    </div>
                                                    <div style="float: right;">
                                                        <a id="a-ts-{{scenario.Id}}-{{row.TeamId}}" ng-click="ToggleStatus($event, 'Scenario', scenario.Id)" class="btn btn-xs btn-primary popover-warning popover-dark" title="Activate" data-toggle="popover"><i class="fa fa-check-circle-o"></i></a>
                                                        <a id="a-cs-{{scenario.Id}}-{{row.TeamId}}" ng-click="CopyScenario($event, scenario.Id)" data-toggle="popover" class="btn btn-xs popover-warning popover-dark" title="Copy"><i class="fa fa-copy"></i></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </text>
                                }
                                <a id="id_exp{{row.ExpCatId}}" href="javascript:;" title="{{ row.Name || 'empty' }}">
                                    <i class="fa" ng-class="row.CollapsedClass" style="margin-right: 5px;" title="Show actual"></i>
                                    <div style="display:inline-block;vertical-align: bottom;" class="shortName">{{ row.Name || 'empty' }}</div>
                                </a>
                            </td>
                            <!--Hide projections or actuals title-->
                            <td style="height:31px;border-left: 0px !important;border-right: 1px solid #dbdbdb !important;" class="headcol1 headcol-week expCat"
                                ng-if="row.HideProjection || row.HideActuals">
                                @if (!SecurityManager.CheckSecurityObjectPermission(Areas.Projects, AccessLevel.Write))
                                {
                                    <text>
                                        <div id="div_dd_{{$index}}" class="btn-group menuGroup pull-right"
                                             ng-if="row.RowType == RowType.Project && ((row.InactiveScenarios != null && row.InactiveScenarios.length > 0) || row.ScenarioId != null)">
                                            <a class="dropdown-toggle" data-toggle="dropdown" onclick='dropDownFixPositionCalendar($(this), $(this).parent().find(".dropdown-menu"));'>
                                                <i class="fa fa-chevron-circle-down menu-arrow"></i>
                                            </a>
                                            <ul id="ul_dd_{{$index}}" class="dropdown-menu dropdown-menu-form dropdown-menu-right dropdown-menu-scroll-auto" style="width: 472px; clear: both; z-index: 499;" onclick="dropDownInsideClick(event);">
                                                <li ng-if="row.ScenarioId != null">
                                                    <div style="float: left;">
                                                        Edit Project
                                                    </div>
                                                    <div style="float: right;">
                                                        <a ng-show="row.ParentProjectId != null" class="btn btn-xs btn-primary popover-warning popover-dark pull-right" style="width: 27px;" title="Edit Project" href="@Url.Action("Edit", "Project")/{{ row.PartId.length > 0 ? row.ParentProjectId + '?partId=' + row.PartId : row.ParentProjectId}}" data-placement="left" data-toggle="popover">
                                                            <i class="fa fa-edit"></i>
                                                        </a>
                                                    </div>
                                                </li>
                                                <li ng-if="row.ScenarioId != null">
                                                    <div style="-ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; max-width: 172px; float: left;">
                                                        <a id="a-cl-{{row.ScenarioId}}-{{row.TeamId}}" ng-click="CheckLock($event, 'Scenario', row.ScenarioId, '@Url.Action("Details", "Scenarios")')" class="popover-warning popover-dark" data-toggle="popover" title="{{row.Name1 || 'empty'}}">{{ row.Name1 || 'empty' }}</a>
                                                    </div>
                                                    <div style="float: right;">
                                                        <a id="a-ts-{{row.ScenarioId}}-{{row.TeamId}}" class="btn btn-xs btn-warning popover-warning popover-dark" ng-click="ToggleStatus($event, 'Scenario', row.ScenarioId)" title="Deactivate" data-toggle="popover" style="width: 27px;"><i class="fa fa-times-circle-o"></i></a>
                                                        <a id="a-copy-{{row.ScenarioId}}-{{row.TeamId}}" ng-click="CopyScenario($event, row.ScenarioId)" data-toggle="popover" class="btn btn-xs popover-warning popover-dark" title="Copy" style="width: 27px;"><i class="fa fa-copy"></i></a>
                                                        <a id="a_add_{{$index}}-{{row.TeamId}}" ng-click="AddScenario($event, row.ProjectId)" data-toggle="popover" class="btn btn-xs btn-success popover-warning popover-dark" title="Add Scenario" style="width: 27px;"><i class="fa fa-plus"></i></a>
                                                    </div>
                                                </li>
                                                <li class="divider" ng-if="(row.RowType == RowType.Project && row.InactiveScenarios.length > 0)"></li>
                                                <li ng-repeat="scenario in row.InactiveScenarios">
                                                    <div style="-ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; max-width: 200px; float: left;">
                                                        <a id="a-cl-{{scenario.Id}}-{{row.TeamId}}" ng-click="CheckLock($event, 'Scenario', scenario.Id, '@Url.Action("Details", "Scenarios")')" class="popover-warning popover-dark" data-toggle="popover" title="{{scenario.Name || 'empty'}}">{{ scenario.Name || 'empty' }}</a>
                                                    </div>
                                                    <div style="float: right;">
                                                        <a id="a-ts-{{scenario.Id}}-{{row.TeamId}}" ng-click="ToggleStatus($event, 'Scenario', scenario.Id)" class="btn btn-xs btn-primary popover-warning popover-dark" title="Activate" data-toggle="popover"><i class="fa fa-check-circle-o"></i></a>
                                                        <a id="a-cs-{{scenario.Id}}-{{row.TeamId}}" ng-click="CopyScenario($event, scenario.Id)" data-toggle="popover" class="btn btn-xs popover-warning popover-dark" title="Copy"><i class="fa fa-copy"></i></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </text>
                                }
                                <div ng-if="row.HideProjection" class="shortName2">Actual {{ row.Name || 'empty' }}</div>
                                <div ng-if="row.HideActuals" class="shortName2">{{ row.Name || 'empty' }}</div>
                            </td>
                            <!--Grand Total value-->
                            <td style="height:31px;width:100px;padding-bottom: 0px !important;border-left: none !important;border-right: 1px solid #dbdbdb !important;">
                                <div style="width:80px !important; white-space: nowrap;overflow: hidden;height:19px;"
                                     ng-if="((!row.HideProjection && !res.GrandTotalReadOnly) || (row.HideProjection && !row.HideActuals && !res.GrandTotalActualReadOnly))">
                                    <!--Projection edit total-->
                                    <a ng-if="!row.HideProjection && !res.GrandTotalReadOnly" href="#" editable-text="res.GrandTotalQuantity" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
                                       onbeforesave="checkResourceValue($data, data.Calendar[projectIndex + 1].ScenarioId, data.Calendar[projectIndex + 1].ExpCatId, res.Id, data.Calendar[projectIndex + 1].TeamId, -1)" e-required>
                                        {{ (res.GrandTotalQuantity || 0 | number:2) }}
                                    </a>
                                    <!--Actuals edit total-->
                                    <a ng-if="!row.HideActuals && row.HideProjection && !res.GrandTotalActualReadOnly" href="#" editable-text="res.GrandActualTotalQuantity" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
                                       onbeforesave="checkActualValue($data, data.Calendar[projectIndex + 1].ScenarioId, data.Calendar[projectIndex + 1].ExpCatId, res.Id, data.Calendar[projectIndex + 1].TeamId, -1)" e-required>
                                        {{ (res.GrandActualTotalQuantity || 0 | number:2) }}
                                    </a>
                                </div>
                                <!--Projection r/o-->
                                <div style="width:90px !important; white-space: nowrap;overflow: hidden;height:19px;"
                                     ng-if="res.GrandTotalReadOnly && !row.HideProjection">
                                    {{ (res.GrandTotalQuantity || 0 | number:2) }}
                                </div>
                                <!--Actuals r/o-->
                                <div style="width:90px !important; white-space: nowrap;overflow: hidden;height:19px;"
                                     ng-if="res.GrandTotalActualReadOnly && !row.HideActuals && row.HideProjection">
                                    {{ (res.GrandActualTotalQuantity || 0 | number:2) }}
                                </div>
                            </td>
                        </tr>
                        <!--Actual-->
                        <tr style="border-left: 0px !important;"
                            ng-if="row.RowType == RowType.Project && !row.HideProjection && !row.HideActuals"
                            ng-show="!row.ProjectCollapsed">
                            <td style="height:31px;border-left: 0px !important;border-right: 1px solid #dbdbdb !important;" class="headcol1 headcol-week expCat">
                                <div class="shortName2" title="Actual">Actual</div>
                            </td>
                            <!--Grand Total value-->
                            <td style="height:31px;width:100px;padding-bottom: 0px !important;border-left: none !important;border-right: 1px solid #dbdbdb !important;">
                                <div style="width:80px !important; white-space: nowrap;overflow: hidden;height:19px;" ng-if="!res.GrandTotalActualReadOnly">
                                    <a href="#" editable-text="res.GrandActualTotalQuantity" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
                                       onbeforesave="checkActualValue($data, data.Calendar[projectIndex + 1].ScenarioId, data.Calendar[projectIndex + 1].ExpCatId, res.Id, data.Calendar[projectIndex + 1].TeamId, -1)" e-required>
                                        {{ (res.GrandActualTotalQuantity || 0 | number:2) }}
                                    </a>
                                </div>

                                <div style="width:90px !important; white-space: nowrap;overflow: hidden;height:19px;" ng-if="res.GrandTotalActualReadOnly">
                                    {{ (res.GrandActualTotalQuantity || 0 | number:2) }}
                                </div>
                            </td>
                        </tr>
                        <tr ng-repeat-end ng-if="false"></tr>
                        <!-- Total (Active Scenarios) , Currently Assigned , Remaining Capacity  rows-->
                        <tr style="border-left: 0px !important;" ng-if="row.RowType == RowType.Capacity || row.IsTotals">
                            <td style="height:31px;width:300px;border-left: 0px !important;border-right: 1px solid #dbdbdb !important;" class="headcol1 headcol-week"
                                ng-if="row.IsTotals && (row.RowType != RowType.Total || (row.RowType == RowType.Total && row.ActualsValues == null))">
                                <strong ng-if="(row.RowType == RowType.Total && row.ActualsValues == null) || row.RowType == RowType.Capacity || row.RowType == RowType.CurrentlyAssigned" title="{{ row.Name || 'empty' }}">
                                    {{ row.Name || 'empty' }}
                                </strong>
                            </td>
                            <td style="height:31px;width:300px;border-left: 0px !important;border-right: 1px solid #dbdbdb !important;" class="headcol1 headcol-week"
                                ng-click="toggleTotalRow(row, $event);"
                                ng-if="row.RowType == RowType.Total && row.ActualsValues != null">
                                <a href="javascript:;" title="{{ row.Name || 'empty' }}">
                                    <i class="fa" ng-class="row.CollapsedClass" style="margin-right: 5px;" title="Expand"></i>
                                    <div style="display:inline-block;vertical-align: bottom;" class="shortName">{{ row.Name || 'empty' }}</div>
                                </a>
                            </td>
                            <!--Grand Total value-->
                            <td style="height:31px;width:100px;padding-bottom: 0px !important;border-left: none !important;border-right: 1px solid #dbdbdb !important;">
                                <div style="width:90px !important; white-space: nowrap;overflow: hidden;height:19px;">
                                    <strong ng-if="row.IsTotals && row.RowType != RowType.Capacity"> {{ (row.GrandTotalQuantity || 0 | number:2) }}</strong>
                                    <strong ng-if="row.IsTotals && row.RowType == RowType.Capacity">
                                        {{(CalcRemainingCapacityTotal(row.GrandTotalQuantity) || 0 | number:2)}}
                                    </strong>
                                </div>
                            </td>
                        </tr>
                        <tr style="border-left: 0px !important;" ng-if="row.RowType == RowType.Total && row.ActualsValues != null"
                            ng-show="!row.IsCollapsed">
                            <td style="height:31px;border-left: 0px !important;border-right: 1px solid #dbdbdb !important;" class="headcol1 headcol-week expCat">
                                <div class="shortName2" title="Actual">Actual</div>
                            </td>
                            <!--Grand Total value-->
                            <td style="height:31px;width:100px;padding-bottom: 0px !important;border-left: none !important;border-right: 1px solid #dbdbdb !important;">
                                <div style="width:90px !important; white-space: nowrap;overflow: hidden;height:19px;">
                                    {{(row.ActualsTotalValue || 0 | number:2)}}
                                </div>
                            </td>
                        </tr>

                        <!--NonProjectTime rows-->
                        <tr style="border-left: 0 !important;" ng-if="row.RowType == RowType.NonProjectTimeTotal">
                            <td style="width:300px; border-left: 0px !important; border-right: 1px solid #dbdbdb !important;"
                                class="headcol1 headcol-week" ng-click="toggleNonProjectTotalRow(row)">
                                <a href="javascript:;" title="{{ row.Name || 'empty' }}">
                                    <i class="fa" ng-class="row.CollapsedClass" style="margin-right: 5px;" title="Expand"></i>
                                    <div style="display:inline-block;vertical-align: bottom;" class="shortName">{{ row.Name || 'empty' }}</div>
                                </a>
                            </td>
                            <td style="width:100px;padding-bottom: 0px !important;border-left: none !important;border-right: 1px solid #dbdbdb !important;">
                                <div style="width:90px !important; white-space: nowrap;overflow: hidden;height:19px;">
                                    {{ (row.GrandTotalQuantity || 0 | number:2) }}
                                </div>
                            </td>
                        </tr>
                        <tr style="border-left: 0 !important;" ng-style="{'height': (npCategory.RowType == RowType.NonProjectTimeCategory ? '26px' :'31px')}"
                            ng-if="(row.RowType == RowType.NonProjectTimeTotal || npCategory.RowType == RowType.NonProjectTimeCategory || npCategory.RowType == RowType.NonProjectTime) && !row.IsUpperHidden"
                            ng-show="!row.IsCollapsed && (npCategory.RowType != RowType.NonProjectTime || !npCategory.IsParentCollapsed)"
                            ng-repeat="npCategory in row.Categories">
                            <td style="border-left: 0px !important;border-right: 1px solid #dbdbdb !important;"
                                class="headcol1 headcol-week expCat"
                                ng-click="toggleNonProjectTotalRow(npCategory)">
                                <a ng-if="npCategory.RowType == RowType.NonProjectTimeCategory"
                                   ng-style="{'margin-left': npCategory.RowType == RowType.NonProjectTime ? '30px': '15px'}" id="id_cat{{npCategory.Id}}" href="javascript:;"
                                   title="{{ npCategory.Name || 'empty' }}">
                                    <i class="fa" ng-class="npCategory.CollapsedClass" style="margin-right: 5px;" title="Expand"></i>
                                    <div style="display:inline-block;vertical-align: bottom;" class="shortName">{{ npCategory.Name || 'empty' }}</div>
                                </a>
                                <div style="margin-left:15px;" class="shortName2"
                                     ng-if="npCategory.RowType == RowType.NonProjectTime" title="{{ npCategory.Name || 'empty' }}">{{ npCategory.Name || 'empty' }}</div>
                            </td>
                            <td style="width:100px;padding-bottom: 0px !important;border-left: none !important;border-right: 1px solid #dbdbdb !important;" ng-init="res=(npCategory.RowType == RowType.NonProjectTime && npCategory.Resources.length > 0 ? npCategory.Resources[0]:null)">
                                <div style="width:90px !important; white-space: nowrap;overflow: hidden;height:19px;">
                                    <a ng-if="npCategory.RowType == RowType.NonProjectTime && !res.GrandTotalReadOnly" href="#" editable-text="res.GrandTotalQuantity" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
                                       onbeforesave="checkNonProjectTimeValue($data, npCategory.Id, res.NonProjectTimeCategoryId, res.Id, -1)"
                                       e-required>
                                        {{ (res.GrandTotalQuantity || 0 | number:2) }}
                                    </a>

                                    <div ng-if="npCategory.RowType == RowType.NonProjectTimeCategory" style="width:90px !important; white-space: nowrap;overflow: hidden;height:19px;">
                                        {{ (npCategory.GrandTotalQuantity || 0 | number:2) }}
                                    </div>

                                    <div ng-if="npCategory.RowType == RowType.NonProjectTime && res.GrandTotalReadOnly" style="width:90px !important; white-space: nowrap;overflow: hidden;height:19px;">
                                        {{ (res.GrandTotalQuantity || 0 | number:2) }}
                                    </div>
                                </div>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--Header-->
        <div id="dataTable2:scroller:fx:OuterDiv" class="header-container width-container">
            <div class="freezeTable1" id="dataTable2:scroller:fx" style="margin-left: -400px">
                <table class="table ac-table-header table-light" ng-if="data != null && data.Calendar.length > 0" id="dataTable2_header">
                    <thead>
                        <tr>
                            <th style="width:400px" class="firstcol">Project</th>
                            <!-- year header -->
                            <th class="nextcol" ng-repeat="header in (data.YearHeaders)" colspan="{{ header.SpanCount }}">
                                {{ header.Title }}
                            </th>
                        </tr>
                        <tr>
                            <th class="headcol" style="visibility: hidden;"></th>
                            <th data-ng-attr-style="{{(header.Collapsed ? 'width:70px;' : '')}}"
                                ng-repeat="header in (data.Headers | filter : {IsMonth:true}) track by $index"
                                class="nextcol headcol-month" ng-click="onMonthHeaderClick(header)" colspan="{{header.Collapsed ? 1 : header.Weeks.length}}">
                                <i class="fa" ng-class="header.CollapsedClass" style="margin-right: 5px;"></i>
                                {{header.Title.substr(0,3)}}
                            </th>
                        </tr>
                        <tr>
                            <!--Months in year -->
                            <th class="headcol headcol-week" style="visibility: hidden;"></th>
                            <th ng-data="weekCol" data-ng-attr-style="{{(header.Collapsed ? '' : 'width:70px;')}}"
                                ng-repeat="header in (data.Headers) track by $index" ng-if="header.Initialized"
                                ng-show="header.Show" ng-class="header.Collapsed ? 'collapsedWeeks' : ''" colspan="{{header.Collapsed ? 1 : header.Weeks.length}}">
                                {{ header.IsMonth ? '' : header.Title}}
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <!--Inner table-->
        <div id="dataTable2:scroller" scroll-header
             class="table-light table-responsive very-big-table freezeTable freezeTable1 main-table-container height-container width-container">
            <table class="table table-striped table-bordered main-table" id="capacity-table" ng-if="data != null && data.Calendar.length > 0">
                <tbody ng-repeat="row in data.Calendar" ng-init="projectIndex = $index">
                    <!-- Project -->
                    <tr ng-if="row.RowType == RowType.Project && (data.Calendar.length - 1) > $index && data.Calendar[$index+1].RowType==RowType.ProjectExpenditureCategory && (!row.HideProjection || !row.HideActuals)" 
                            ng-repeat-start="res in data.Calendar[$index+1].Resources">
                        <!--values-->
                        <td ng-repeat="col in (data.Headers) track by $index" ng-show="col.Show" style="height:31px;"
                            ng-if="col.Initialized" ng-class="res.CSSClass[$index]">

                            <!--Show projections-->
                            <a href="#" editable-text="res.QuantityValues[$index]" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
                               onbeforesave="checkResourceValue($data, data.Calendar[projectIndex + 1].ScenarioId, data.Calendar[projectIndex + 1].ExpCatId, res.Id, data.Calendar[projectIndex + 1].TeamId, $index)"
                               ng-if="!row.ReadOnly[$index] && !res.ReadOnly && !res.ReadOnlyWeeks[$index] && !row.HideProjection" e-required>
                                {{ (res.QuantityValues[$index] || 0 | number:2) }}
                            </a>
                            <span ng-if="!row.ReadOnly[$index] && (res.ReadOnly || res.ReadOnlyWeeks[$index]) && !row.HideProjection">
                                {{ (res.QuantityValues[$index] || 0 | number:2) }}
                            </span>

                            <!--Show actuals-->
                            <a href="#" editable-text="res.ActualQuantityValues[$index]" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
                               onbeforesave="checkActualValue($data, data.Calendar[projectIndex + 1].ScenarioId, data.Calendar[projectIndex + 1].ExpCatId, res.Id, data.Calendar[projectIndex + 1].TeamId, $index)"
                               ng-if="!row.ReadOnly[$index] && !res.ReadOnly[$index] && !res.ReadOnlyWeeksActuals[$index] && !row.HideActuals && row.HideProjection" e-required>
                                {{ (res.ActualQuantityValues[$index] || 0 | number:2) }}
                            </a>
                            <span ng-if="!row.ReadOnly[$index] && (res.ReadOnly[$index] || res.ReadOnlyWeeksActuals[$index]) && !row.HideActuals && row.HideProjection">
                                {{ (res.ActualQuantityValues[$index] || 0 | number:2) }}
                            </span>
                        </td>
                    </tr>
                    <!-- Actual -->
                    <tr ng-if="row.RowType == RowType.Project && !row.HideProjection && !row.HideActuals" ng-show="!row.ProjectCollapsed">
                        <!--values-->
                        <td ng-repeat="col in (data.Headers) track by $index" ng-show="col.Show" style="height:31px;" ng-if="col.Initialized">
                            <a href="#" editable-text="res.ActualQuantityValues[$index]" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
                               onbeforesave="checkActualValue($data, data.Calendar[projectIndex + 1].ScenarioId, data.Calendar[projectIndex + 1].ExpCatId, res.Id, data.Calendar[projectIndex + 1].TeamId, $index)"
                               ng-if="(!row.ReadOnly[$index] && !res.ReadOnly[$index] && !res.ReadOnlyWeeksActuals[$index])" e-required>
                                {{ (res.ActualQuantityValues[$index] || 0 | number:2) }}
                            </a>
                            <span ng-if="!row.ReadOnly[$index] && (res.ReadOnly[$index] || res.ReadOnlyWeeksActuals[$index])">
                                {{ (res.ActualQuantityValues[$index] || 0 | number:2) }}
                            </span>
                        </td>
                    </tr>
                    <tr ng-repeat-end ng-if="false"></tr>
                    <tr ng-if="(row.RowType == RowType.Capacity || row.IsTotals)">
                        <!--values-->
                        <td ng-repeat="col in (data.Headers) track by $index" ng-show="col.Show" style="height:31px;"
                            ng-if="col.Initialized">                            
                            <strong ng-if="row.IsTotals && (row.RowType == RowType.Total || row.RowType == RowType.CurrentlyAssigned)">
                                {{ (row.QuantityValues[$index] || 0 | number:2)}}
                            </strong>
                            <strong ng-if="row.IsTotals && (row.RowType == RowType.Capacity)">
                                {{(CalcRemainingCapacity(row.QuantityValues[$index], $index)|| 0 | number:2)}}
                            </strong>
                        </td>
                    </tr>
                    <tr ng-if="(row.RowType == RowType.Total && row.ActualsValues != null)"
                        ng-show="!row.IsCollapsed">
                        <!--values-->
                        <td ng-repeat="col in (data.Headers) track by $index" ng-show="col.Show" style="height:31px;"
                            ng-if="col.Initialized">
                                {{ (row.ActualsValues[$index] || 0 | number:2)}}
                        </td>
                    </tr>

                    <!--NonProjectTime row-->
                    <tr style="border-left: 0 !important;"
                        ng-if="row.RowType == RowType.NonProjectTimeTotal">
                        <td ng-repeat="col in (row.QuantityValues) track by $index" ng-show="data.Headers[$index].Show"
                            ng-if="data.Headers[$index].Initialized">
                            {{col || 0 | number:2}}
                        </td>
                    </tr>
                    <tr ng-style="{'height': (npCategory.RowType == RowType.NonProjectTimeCategory ? '26px' :'31px'), 'border-left': '0 !important;'}"
                        ng-if="(row.RowType == RowType.NonProjectTimeTotal || npCategory.RowType == RowType.NonProjectTimeCategory || npCategory.RowType == RowType.NonProjectTime) && !row.IsUpperHidden"
                        ng-show="!row.IsCollapsed && (npCategory.RowType != RowType.NonProjectTime || !npCategory.IsParentCollapsed)"
                        ng-repeat="npCategory in row.Categories track by $index">
                        <td ng-repeat="col in (npCategory.QuantityValues) track by $index" ng-show="data.Headers[$index].Show" ng-init="res=(npCategory.RowType == RowType.NonProjectTime && npCategory.Resources.length > 0 ? npCategory.Resources[0] : null)"
                            ng-if="data.Headers[$index].Initialized">
                            <a href="#" editable-text="res.QuantityValues[$index]" e-name="ColValue" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit"
                               onbeforesave="checkNonProjectTimeValue($data, npCategory.Id, res.NonProjectTimeCategoryId, res.Id, $index)"
                               ng-if="npCategory.RowType == RowType.NonProjectTime && res.QuantityValues[$index] != null && !res.ReadOnly && !res.ReadOnlyWeeks[$index]" e-required>
                                {{ (res.QuantityValues[$index] || 0 | number:2) }}
                            </a>
                            <span ng-if="npCategory.RowType == RowType.NonProjectTime && res.QuantityValues[$index] != null &&  (res.ReadOnly || res.ReadOnlyWeeks[$index])">
                                {{ (res.QuantityValues[$index] || 0 | number:2) }}
                            </span>
                            <span ng-if="npCategory.RowType == RowType.NonProjectTimeCategory">
                                {{ (npCategory.QuantityValues[$index] || 0 | number:2) }}
                            </span>
                        </td>
                    </tr>                    
                </tbody>
            </table>
        </div>
        <!--There is no data available-->
        <table class="table" style="width: 100%" id="capacity-table-empty" ng-if="data == null">
            <tbody>
                <tr>
                    <td style="text-align: center;">
                        There is no data available.
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <form name="saveScenarioForm">
        <div id="saveScenarioModal" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">Save Changes</h4>
                    </div>
                    <div class="modal-body">
                        @*<div class="panel-body form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <input id="save-as-update" name="save-as-update" type="radio" ng-model="SaveAs" value="0" />
                                    <label for="save-as-update" class="control-label">Save Changes to Current Scenario</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <input id="save-as-new" name="save-as-new" type="radio" ng-model="SaveAs" value="1" />
                                    <label for="save-as-new" class="control-label">Create New Scenario</label>
                                </div>
                            </div>
                            <div class="form-group" ng-show="SaveAs == 1">
                                <div class="row">
                                    <div class="col-sm-offset-1 col-sm-2">
                                        <label class="control-label">Name: </label>
                                    </div>
                                    <div class="col-sm-9">
                                        <input type="text" ng-model="ScenarioName" id="scenarioName" name="scenarioName" class="form-control" ng-required="SaveAs == 1" />
                                        <span class="validation-error" ng-show="SaveAs == 1 && saveScenarioForm.scenarioName.$error.required">Scenario Name is a required field</span>
                                    </div>
                                </div>
                                <div class="row" style="margin-top:5px;">
                                    <div class="col-sm-offset-1 col-sm-2">
                                        <label class="control-label">Status: </label>
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="checkbox" ng-model="isActiveScenario" id="is-active-scenario" name="is-active-scenario" class="form-control" />
                                    </div>
                                    <div class="col-sm-3">
                                        <label class="control-label">Scenario Type: </label>
                                    </div>
                                    <div class="col-sm-3">
                                        <select ng-model="saveType" id="save-type" name="save-type" class="form-control">
                                            <option value="0">Keep Current</option>
                                            <option value="1">Bottom Up</option>
                                            <option value="2">Top Down</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>*@
                        <div class="panel-body form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <input id="update-projections" style="margin-top:5px;" name="update-projections" type="checkbox" ng-model="isMatchChecked" ng-disabled="saveType == '1'" value="0" />
                                    <label for="update-projections" class="control-label"><b>For Projections Only</b>: update projections to match Resource Allocations</label>
                                    
                                </div>
                            </div>
                            <div class="alert alert-danger" ng-show="isOverAllocated && !isMatchChecked">
                                <ul>
                                    <li>
                                        Current scenario contains overallocated Categories and you need to update Projections to match Resource Allocations to continue
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-disabled="(isOverAllocated && !isMatchChecked)" ng-click="saveScenarioForm.$valid && saveChanges()">Ok</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </div> <!-- / .modal-content -->
            </div> <!-- / .modal-dialog -->
        </div> <!-- / .modal -->
    </form>
</div>