EnVisageOnline/Main/Source/EnVisage/Views/CapacityManagement/_resourceActivityCalendar.c...

973 lines
62 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@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>