<script language="JavaScript" src="../scripts/ESR-Script.js"></script>
<%@ taglib uri="/tags/fw" prefix="fw" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html-el" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-bean-el" prefix="bean-el" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/tags/esr-core" prefix="esrcore" %>
<%@ page import='gov.va.med.esr.ui.common.util.JspUtils' %>

<c:set var="capabilityText" scope="page"><bean-el:message key="label.capability"/></c:set>
<c:set var="capabilitySetText" scope="page"><bean-el:message key="label.capabilitySet"/></c:set>
<c:set var="expandableSectionCollapsed" scope="page"><bean-el:message key="label.expandableSectionCollapsed"/></c:set>
<c:set var="selectLabel" value="Select" />

<script language="javascript">
function expandAllAssignedSets()
{
  expandCollapseLists("assignedCapList", "assignedCapListImage", "assignedCapListHiddenId", null);
  document.getElementById("collapseAllAssignedSetsLink").style.display="block";
  document.getElementById("expandAllAssignedSetsLink").style.display="none";
  return false;
}

function collapseAllAssignedSets()
{
  expandCollapseLists("assignedCapList", "assignedCapListImage", "assignedCapListHiddenId", null);
  document.getElementById("collapseAllAssignedSetsLink").style.display="none";
  document.getElementById("expandAllAssignedSetsLink").style.display="block";
  return false;
}

function expandAllAvailableSets()
{
  expandCollapseLists("capList", "capListImage", "capListHiddenId", null);
  document.getElementById("collapseAllAvailableSetsLink").style.display="block";
  document.getElementById("expandAllAvailableSetsLink").style.display="none";
  return false;
}

function collapseAllAvailableSets()
{
  expandCollapseLists("capList", "capListImage", "capListHiddenId", null);
  document.getElementById("collapseAllAvailableSetsLink").style.display="none";
  document.getElementById("expandAllAvailableSetsLink").style.display="block";
  return false;
}
</script>
<table width="100%" border="1" cellpadding="0" cellspacing="0" class="moduleShell" role="presentation">
<c:set var ="edit" value="true"/>
<c:if test="${empty roleForm.roleId}">
  <c:set var ="edit" value="false"/>
</c:if>

<!-- Same JSP is used for both edit and Add -->
<html-el:form action="/editRole" method="post">
  <%@ include file="/admin/csrfgentoken.jsp" %>
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="moduleShellTable" role="presentation">
        <tr>
          <td>
            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="moduleShellTableHead" role="presentation">
              <tr>
                <td class="moduleBlueBox"><img alt=""  src="../images/spacer.gif" width="28" height="23"/></td>
                <c:choose>
                <c:when test="${edit == true}">
                <td nowrap class="moduleHeadline"><bean-el:message key="label.editRole"/></td>
                <td width="100%"><img alt=""  src="../images/spacer.gif"></td>
                <td nowrap class="moduleBlueLink" style="padding: 1 8 1 8">
                <fw:link action="/viewRoleHistory?methodName=DISPLAY&amp;history=viewHistoricalRole&amp;returnPath=returnToEdit"
                  paramId="entityId" paramName="roleForm" paramProperty="roleId">
                <bean-el:message key="label.link.viewHistoricalRole"/>
                </fw:link>
                </td>
                </c:when>
                <c:otherwise>
                <td nowrap class="moduleHeadline"><bean-el:message key="label.addRole"/></td>
                </c:otherwise>
                </c:choose>
              </tr>
            </table>
          </td>
        </tr>

        <tr>
          <td>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="moduleShellTableBody" role="presentation">
              <tr>
                <td colspan="2">&nbsp;
                  <html-el:hidden name="roleForm" property="roleId" />
                </td>
              </tr>

              <!-- read only fields -->
              <c:choose>
              <c:when test="${edit == true}">
              <tr>
                <td width="45%" class="moduleLabel"><bean-el:message key="label.roleName"/>:</td>
                <td width="55%" class="moduleValue">
                  <c:out value="${roleForm.name}" />
                  <html-el:hidden name="roleForm" property="name" />
                </td>
              </tr>
              <tr>
                <td width="45%" class="moduleLabel"><bean-el:message key="label.roleDescription"/>:</td>
                <td width="55%" class="moduleValue">
                  <c:out value="${roleForm.description}"/>
                  <html-el:hidden name="roleForm" property="description" />
                </td>
              </tr>
              </c:when>
              <c:otherwise>
              <tr>
                <c:set var="roleNameLabel"><bean-el:message key="label.roleName"/></c:set>
                <td width="45%" class="moduleLabel"><fw:label property="name" forId="txtRoleName"><bean-el:message key="label.roleName"/>:</fw:label></td>
                <td width="55%" class="moduleValue"><html-el:text title="${roleNameLabel}" property="name" styleId="txtRoleName" size="50" maxlength="50" /></td>
              </tr>
              <tr>
                <c:set var="roleDescriptionLabel"><bean-el:message key="label.roleDescription"/></c:set>
                <td width="45%" class="moduleLabel"><fw:label property="description" forId="txtRoleDescription"><bean-el:message key="label.roleDescription"/>:</fw:label></td>
                <td width="55%" class="moduleValue"><html-el:textarea title="${roleDescriptionLabel}" property="description" styleId="txtRoleDescription" cols="50" rows="3"/></td>
              </tr>
              </c:otherwise>
              </c:choose>

              <!-- Editable fields of the set-->
              <tr>
                <c:set var="activeDateLabel"><bean-el:message key="label.activeDate"/></c:set>
                <td width="45%" class="moduleLabel"><fw:label property="activeDate" forId="txtActiveDate"><bean-el:message key="label.activeDate"/>:</fw:label></td>
                <td width="55%" class="moduleValue"><html-el:text title="${activeDateLabel}" property="activeDate" styleId="txtActiveDate" size="20" maxlength="30" /></td>
              </tr>
              <tr>
                <c:set var="inactivedateLabel"><bean-el:message key="label.inactivedate"/></c:set>
                <td width="45%" class="moduleLabel"><fw:label property="inactiveDate" forId="txtInactiveDate"><bean-el:message key="label.inactivedate"/>:</fw:label></td>
                <td width="55%" class="moduleValue"><html-el:text title="${inactivedateLabel}" property="inactiveDate" styleId="txtInactiveDate" size="20" maxlength="30" /></td>
              </tr>
            </table>
          </td>
        </tr>

        <%-- Assigned CapabilitySets and Capabilities--%>
        <c:if test="${not empty roleForm.assignedCapabilitySetNameList || not empty roleForm.assignedCapabilityNameList}">
        <tr>
          <td>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="moduleShellTableHead">
              <tr>
                <td class="moduleBrownBox"><img alt=""  src="../images/spacer.gif" width="28" height="23"/></td>
                <td nowrap class="moduleHeadline"><bean-el:message key="label.assignedtoRole"/></td>
                <td width="100%" class="moduleHeadline"><img alt="" src="../images/spacer.gif"/></td>
                <td nowrap class="moduleBlueLink" style="padding: 1 8 1 8">
                  <div id="expandAllAssignedSetsLink" style="display:block">
                    <fw:link onclick="return(expandAllAssignedSets());return false" action="none">EXPAND ALL</fw:link>
                  </div>
                  <div id="collapseAllAssignedSetsLink" style="display:none">
                    <fw:link onclick="return(collapseAllAssignedSets());return false" action="none">COLLAPSE ALL</fw:link>
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>

<!--CCR13056 - 508- The user is unable to use table commands after the link is expanded on the data table on Edit Role page- Adding Sumamry for navigation help
 					Commenting out internal nested tables and adding formatting to <div> tag to maintain the same UI -->
 					
        <tr>
          <td>
            <table summary="Capability Sets and Capabilities Currently Assigned to Role - Unselect to Delete 
            		Use Enter or Space Bar, to expand a link. Continue using table commands to read the next row within expanded link. Within the expanded link, use the up and down arrow keys to read line by line.
					To return to the expanded link, use the up arrow keys and collapse the link by using Enter or Space Bar. To return to the first level/main expandable link use table commands and then collapse it.
                    Continue using normal table commands to read the rest of the table." 
					width="100%" border="0" cellspacing="0" cellpadding="0" class="moduleShellTableBody">
              <thead>
              <tr>
                <th scope="col" nowrap width="5%" class="moduleLabel" style="text-align: left;"><c:out value="${selectLabel}"/></th>
                <th scope="col" nowrap width="5%"class="moduleLabel" style="text-align: left;"><img alt=""  src="../images/spacer.gif"/></th>
                <th scope="col" nowrap width="50%" class="moduleLabel" style="text-align: left;"><b>Name</b></th>
                <th scope="col" nowrap width="7%" class="moduleLabel" style="text-align: left;"><b>Active Date</b></th>
                <th scope="col" nowrap width="7%" class="moduleLabel" style="text-align: left;"><b>Inactive Date</b></th>
                <th scope="col" nowrap width="26%"class="moduleLabel" style="text-align: left;"><img alt=""  src="../images/spacer.gif"/></th>
              </tr>
             </thead>
             
              <%-- Assigned CapabilitySets --%>
              <c:if test="${not empty roleForm.assignedCapabilitySetNameList}">
              <c:forEach var="capabilitySet" items="${roleForm.assignedCapabilitySetNameList}" varStatus="status">
              <c:set var="counter" value="${status.count - 1}" />
              <c:set var="setid" value="${roleForm.assignedCapabilitySetIdList[counter]}"/>
              <c:set var="refCapabilitySet" value="${REF_CAPABILITY_SETS[setid]}"/>
              <tr>
                <td class="moduleValue" style="padding:5 5 5 5">                  
                  <html-el:checkbox title="${selectLabel} ${roleForm.assignedCapabilitySetNameList[counter]}" property="assignedCapabilitySetInd[${counter}]" styleId="assignedCapabilitySetInd${counter}"/>
                  <html-el:hidden property="assignedCapabilitySetId[${counter}]" />
                  <html-el:hidden property="assignedCapabilitySetName[${counter}]" />
                </td>
                <td class="moduleValue" style="padding:5 5 5 5"><html-el:img alt="${capabilitySetText}"  src="../images/capabilitySet.gif"/></td>
                <td scope="row" nowrap style="text-align: left;padding:5 5 5 5" class="moduleLabel">
                  <fw:link href="." onclick="expandOrCollapse(assignedCapList${counter}, assignedCapListImage${counter}, assignedCapListHiddenId${counter}); return false">
                    <html-el:img alt="${expandableSectionCollapsed}" align="center" border="0" styleId="assignedCapListImage${counter}" src="../images/redArrowRight.gif"/>
                    <fw:label property="assignedCapabilitySetName[${counter}]" forId="assignedCapabilitySetInd${counter}"><c:out value="${roleForm.assignedCapabilitySetNameList[counter]}"/></fw:label>
                  </fw:link>
                  <input name="assignedCapListHiddenId<c:out value="${counter}"/>" id="assignedCapListHiddenId<c:out value="${counter}"/>" type="hidden" value="false"/>
                </td>
                <td class="moduleValue" style="padding:5 5 5 5">
                  <html-el:hidden property="assignedCapabilitySetActiveDate[${counter}]" />
                  <c:out value="${roleForm.assignedCapabilitySetActiveDateList[counter]}"/>
                </td>
                <td class="moduleValue" style="padding:5 5 5 5">
                  <html-el:hidden property="assignedCapabilitySetInactiveDate[${counter}]" />
                  <c:out value="${roleForm.assignedCapabilitySetInactiveDateList[counter]}"/>
                </td>
              </tr>

              <tr>
                <td colspan="2"><img alt=""  src="../images/spacer.gif" width="1" height="1" /></td>
                <td colspan="3">
                  <div id="<c:out value="assignedCapList${counter}"/>" class="expandCollapseBody" style= "font-family: Verdana, Arial, Helvetica, sans-serif;
							font-size: 11px;
							font-weight: normal;
							color: #000000;text-align: left;margin:5px 0px 0px 25px;">
							
                <!--   <table role="presentation"> -->
                    <c:set var="rowColor" value="moduleValue"/>
                    <c:forEach var="capability" items="${refCapabilitySet.capabilities}" varStatus="status">
                   <!-- <tr>
                      <td nowrap style="padding:5 5 5 5" class="<c:out value="${rowColor}"/>">
                        &nbsp;
                      </td>
                      <td nowrap style="padding:5 5 5 5" class="<c:out value="${rowColor}"/>"> -->
                        <c:out value="${capability.name}"/> <br/><br/>
                    <!--  </td>
                      <td width="100%"><img alt=""  src="../images/spacer.gif"/></td>
                    </tr> -->
                    </c:forEach>
                <!--   </table>  -->
                  </div>
                </td>
              </tr>
              </c:forEach>
              </c:if>

              <%-- Assigned Capabilities --%>
              <c:if test="${not empty roleForm.assignedCapabilityNameList}">
              <c:forEach var="capability" items="${roleForm.assignedCapabilityNameList}" varStatus="status">
              <c:set var="counter" value="${status.count - 1}" />
              <tr>
                <td class="moduleValue" style="padding:5 5 5 5">                 
                  <html-el:checkbox title="${selectLabel} ${roleForm.assignedCapabilityNameList[counter]}" name="roleForm" property="assignedCapabilityInd[${counter}]" styleId="assignedCapabilityInd${counter}"/>
                  <html-el:hidden name="roleForm" property="assignedCapabilityCode[${counter}]" />
                </td>
                <td class="moduleValue" padding:5 5 5 5><html-el:img alt="${capabilityText}"  src="../images/capability.gif"/></td>
                <td nowrap class="moduleValue" style="padding:5 5 5 5">
                  <html-el:hidden name="roleForm" property="assignedCapabilityName[${counter}]" />
                  <fw:label property="roleForm" forId="assignedCapabilityInd${counter}"><c:out value="${roleForm.assignedCapabilityNameList[counter]}"/></fw:label>
                </td>
              </tr>
              </c:forEach>
              </c:if>

            </table>
          </td>
        </tr>
        </c:if>

        <%-- Available CapabilitySets and Capabilities--%>
        <tr>
          <td>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="moduleShellTableHead">
              <tr>
                <td class="moduleBrownBox"><img alt=""  src="../images/spacer.gif" width="28" height="23"/></td>
                <td nowrap class="moduleHeadline"><bean-el:message key="label.availabletoRole"/></td>
                <td width="100%" class="moduleHeadline"><img alt="" src="../images/spacer.gif"/></td>
                <td nowrap class="moduleBlueLink" style="padding: 1 8 1 8">
                  <div id="expandAllAvailableSetsLink" style="display:block">
                    <fw:link onclick="return(expandAllAvailableSets());return false" action="none">EXPAND ALL</fw:link>
                  </div>
                  <div id="collapseAllAvailableSetsLink" style="display:none">
                    <fw:link onclick="return(collapseAllAvailableSets());return false" action="none">COLLAPSE ALL</fw:link>
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <%-- Available CapabilitySets and Capabilities --%>
        <tr>
          <td>
            <table summary="Capability Sets and Capabilities Available to be Assigned - Select to Add
                    Use Enter or Space Bar, to expand a link. Continue using table commands to read the next row within expanded link. Within the expanded link, use the up and down arrow keys to read line by line.
					To return to the expanded link, use the up arrow keys and collapse the link by using Enter or Space Bar. To return to the first level/main expandable link use table commands and then collapse it.
                    Continue using normal table commands to read the rest of the table."
		        	width="100%" border="0" cellspacing="0" cellpadding="0" class="moduleShellTableBody">
              <thead>
              <tr>
                <th scope="col" nowrap width="5%" class="moduleLabel" style="text-align: left; padding:5 5 5 5"><c:out value="${selectLabel}"/></th>
                <th scope="col" nowrap width="5%"class="moduleLabel" style="text-align: left; padding:5 5 5 5">&nbsp;</th>
                <th scope="col" nowrap width="50%" class="moduleLabel" style="text-align: left; padding:5 5 5 5"><b>Name</b></th>
                <th scope="col" nowrap width="7%" class="moduleLabel" style="text-align: left; padding:5 5 5 5"><b>Active Date</b></th>
                <th scope="col" nowrap width="7%" class="moduleLabel" style="text-align: left; padding:5 5 5 5"><b>Inactive Date</b></th>
                <th scope="col" nowrap width="26%"class="moduleLabel" style="text-align: left; padding:5 5 5 5">&nbsp;</th>
              </tr>
              </thead>

              <tbody>
              <c:set var="rowColor" value="darkValue" />
              <%-- Available CapabilitySets --%>
              <c:forEach var="capabilitySet" items="${roleForm.capabilitySetNameList}" varStatus="status">
              <c:set var="counter" value="${status.count - 1}" />
              <c:set var="setid" value="${roleForm.capabilitySetIdList[counter]}"/>
              <c:set var="refCapabilitySet" value="${REF_CAPABILITY_SETS[setid]}"/>
              <c:set var="active" value="${refCapabilitySet.active}"/>
              <tr>
                <td class="moduleValue" style="padding:5 5 5 5">                             
                  <html-el:checkbox title="${selectLabel} ${roleForm.capabilitySetNameList[counter]}"  property="capabilitySetInd[${counter}]" disabled="${not active}" styleId="capabilitySetInd${counter}"/>
                  <html-el:hidden property="capabilitySetId[${counter}]" />
                  <html-el:hidden property="capabilitySetName[${counter}]" />
                </td>
                <td class="moduleValue" style="padding:5 5 5 5"><html-el:img alt="${capabilitySetText}"  src="../images/capabilitySet.gif"/></td>
                <td scope="row" nowrap style="text-align: left;padding:5 5 5 5" class="moduleLabel">
                  <fw:link href="." onclick="expandOrCollapse(capList${counter}, capListImage${counter}, capListHiddenId${counter}); return false">
                    <html-el:img alt="${expandableSectionCollapsed}" align="center" border="0" styleId="capListImage${counter}" src="../images/redArrowRight.gif"/>
                    <fw:label property="capabilitySetName[${counter}]" forId="capabilitySetInd${counter}"><c:out value="${roleForm.capabilitySetNameList[counter]}"/></fw:label>
                  </fw:link>
                  <input name="capListHiddenId<c:out value="${counter}"/>" id="capListHiddenId<c:out value="${counter}"/>" type="hidden" value="false"/>
                </td>
                <td nowrap class="moduleValue" style="padding:5 5 5 5">
                  <html-el:hidden property="capabilitySetActiveDate[${counter}]" />
                  <c:out value="${roleForm.capabilitySetActiveDateList[counter]}"/>
                </td>
                <td nowrap class="moduleValue" style="padding:5 5 5 5">
                  <html-el:hidden property="capabilitySetInactiveDate[${counter}]" />
                  <c:out value="${roleForm.capabilitySetInactiveDateList[counter]}"/>
                </td>
              </tr>
              <tr>
                <td colspan="2"><img alt=""  src="../images/spacer.gif" width="1" height="1" /></td>
                <td colspan="3">
                <div id="<c:out value="capList${counter}"/>" class="expandCollapseBody" style= "font-family: Verdana, Arial, Helvetica, sans-serif;
							font-size: 11px;
							font-weight: normal;
							color: #000000;text-align: left;margin:5px 0px 0px 25px;">
                <!--   <table role="presentation"> -->
                    <c:set var="rowColor" value="moduleValue"/>
                  <c:forEach var="capability" items="${refCapabilitySet.capabilities}" varStatus="status">
                  <!--   <tr>
                      <td nowrap style="padding:5 5 5 5" class="<c:out value="${rowColor}"/>">
                        &nbsp;
                      </td> 
                      <td scope="row" nowrap style="padding:5 5 5 5" class="<c:out value="${rowColor}"/>"> -->
                        <c:out value="${capability.name}"/><br/><br/>
                    <!--   </td>
                      <td width="100%"><img alt=""  src="../images/spacer.gif"/></td>
                    </tr> -->
                  </c:forEach>
               <!--    </table> -->
                </div>
                </td>
              </tr>
              </c:forEach>
             </tbody>
             
              <%-- Available Capabilities --%>
              <c:set var="rowColor" value="darkValue" />
              <c:forEach var="capability" items="${roleForm.capabilityNameList}" varStatus="status">
              <c:set var="counter" value="${status.count - 1}" />
              <tr>
                <td class="moduleValue" style="style="padding:5 5 5 5"">                  
                  <html-el:checkbox title="${selectLabel} ${roleForm.capabilityNameList[counter]}}"  property="capabilityInd[${counter}]" styleId="capabilityInd${counter}"/>
                  <html-el:hidden property="capabilityCode[${counter}]" />
                </td>
                <td class="moduleValue" style="padding:5 5 5 5"><html-el:img alt="${capabilityText}"  src="../images/capability.gif"/></td>
                <td scope="row" nowrap class="moduleValue" style="padding:5 5 5 5">
                  <html-el:hidden property="capabilityName[${counter}]" />
                  <fw:label property="capabilityName[${counter}]" forId="capabilityInd${counter}"><c:out value="${roleForm.capabilityNameList[counter]}"/></fw:label>
                </td>
              </tr>
              </c:forEach>
              <tr>
                <td height = "25"/>
              </tr>
            </table>
          </td>
        </tr>

        <%-- Button Row --%>
        <tr>
          <td>
            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="moduleShellTableBody" role="presentation">
              <tr>
                <td width="45%"><img alt=""  src="../images/spacer.gif"/></td>
                <td><img alt=""  src="../images/buttonEndLeft.gif"/></td>
                <c:choose>
                <c:when test="${edit == true}">
                <td>
                  <html-el:submit property="methodName" style="width:50; vertical-align: top;" styleClass="buttonText">
                    <bean-el:message key="button.update"/>
                  </html-el:submit>
                </td>
                </c:when>
                <c:otherwise>
                <td>
                  <html-el:submit property="methodName" style="width:50; vertical-align: top;" styleClass="buttonText">
                    <bean-el:message key="button.add"/>
                  </html-el:submit>
                </td>
                </c:otherwise>
                </c:choose>
                <td><img alt=""  src="../images/buttonEndRight.gif"/></td>
                <td width="1%"><img alt=""  src="../images/spacer.gif"/></td>
                <td><img alt=""  src="../images/buttonEndLeft.gif"/></td>
                <td>
                  <html-el:submit property="methodName" style="width:50; vertical-align: top;" styleClass="buttonText">
                    <bean-el:message key="button.cancel"/>
                  </html-el:submit></td>
                <td><img alt=""  src="../images/buttonEndRight.gif"/></td>
                <td width="45%"><img alt=""  src="../images/spacer.gif"/></td>
              </tr>
              <tr>
                <td height = "25"/>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  </html-el:form>
</table>
