<!--
 * Copyright 2008 IHE International (http://www.ihe.net)
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->
<!--  Do not add a doctype it will cause a failure for some browsers as this file is included -->

<s:div xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.ajax4jsf.org/rich"
	xmlns:g="http://www.ihe.net/gazelle"
	xmlns:a4j="http://richfaces.org/a4j" template="/layout/template.xhtml">

	<!-- ======================= -->
	<!-- System IHE implementations section -->
	<!-- ======================= -->

	<rich:panel id="systemImplementations">
		<f:facet name="header">#{messages['gazelle.systems.system.DisplayIntegrationStatementLabel1']}
                #{systemManagerBean.selectedSystemInSession.system.name}</f:facet>

		<s:decorate id="label1Decoration" template="/layout/display.xhtml">
			<h:outputText> #{messages['gazelle.systems.system.ImplementationLabel1']}
                </h:outputText>
		</s:decorate>

		<s:decorate id="label2Decoration" template="/layout/display.xhtml">
			<h:outputText>
                #{messages['gazelle.systems.system.ImplementationLabel2']}</h:outputText>
		</s:decorate>

		<h:form id="formSystemImplementations">
			<s:token allowMultiplePosts="true" />

			<a4j:commandButton id="addImplementationButton"
				styleClass="commandButton"
				value="#{messages['gazelle.systems.system.NoTransactionYetSupportedLabel2']}"
				reRender="AddImplementationModalPanel"
				oncomplete="Richfaces.showModalPanel('AddImplementationModalPanel');">
			</a4j:commandButton>

			<!--  We retrieve the IHE implementation for this system -->
			<rich:panel style="border:0;" id="iheImplementationDataTable">
                ${iheImplementationForSystemManagerBean.getAllIHEImplementationsForSystemInSession()}

				<s:decorate template="/layout/display.xhtml"
					rendered="#{applicationManagerBean.isProductRegistry()}">
					<ui:define name="label">
						<h:outputText
							value="#{messages['net.ihe.gazelle.tm.StatusOfIntegrationStatement']}" />
					</ui:define>
					<h:outputText style="color: blue;font-weight: bold;"
						value="#{systemManagerBean.selectedSystemInSession.system.prStatus.details}" />
				</s:decorate>

				<rich:dataTable id="iheImplementationForSystemManagerBean"
					var="iheImplementationForSystem"
					value="#{iheImplementationForSystemManagerBean.iheImplementationsToDisplay}"
					onRowMouseOver="this.style.backgroundColor='#94C2E6'"
					onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
					columnClasses="center">

					<rich:column id="integrationProfileColumn" style="text-align:right">
						<f:facet name="header">
							<h:outputText
								value="#{messages['gazelle.tf.IntegrationProfile']}" />
						</f:facet>
						<g:link detailed="true"
							value="#{iheImplementationForSystem.integrationProfile}" />
					</rich:column>
					<rich:column id="actorColumn" style="text-align:left">
						<f:facet name="header">
							<h:outputText value="#{messages['gazelle.tf.Actor']}" />
						</f:facet>
						<g:link detailed="true"
							value="#{iheImplementationForSystem.actor}" />
					</rich:column>
					<rich:column id="integrationProfileOptionColumn"
						style="text-align:left">
						<f:facet name="header">
							<h:outputText
								value="#{messages['gazelle.tf.IntegrationProfileOption']}" />
						</f:facet>
						<g:link detailed="true"
							value="#{iheImplementationForSystem.integrationProfileOption}" />
					</rich:column>

					<rich:column
						rendered="#{applicationManagerBean.isTestManagement()}">
						<f:facet name="header">
							<h:outputText
								value="#{messages['net.ihe.gazelle.tm.WantedTestingType']}" />
						</f:facet>

						<h:outputText
							rendered="#{!testingTypeManagerBean.couldSetWantedTestingType(iheImplementationForSystem)}"
							value="#{messages['gazelle.users.NA']}" />

						<s:span
							rendered="#{testingTypeManagerBean.couldSetWantedTestingType(iheImplementationForSystem)}">

							<s:span
								rendered="#{!testingTypeManagerBean.canSetWantedTestingType(iheImplementationForSystem, systemManagerBean.selectedSystemInSession.system)}">
								<h:outputText value="#{messages['net.ihe.gazelle.tm.NotSet']}"
									rendered="#{empty iheImplementationForSystem.wantedTestingType}" />
								<h:panelGrid columns="2"
									rendered="#{not empty iheImplementationForSystem.wantedTestingType}">
									<h:graphicImage width="18" height="18"
										value="#{iheImplementationForSystem.wantedTestingType.imageUrl}" />
									<h:outputText
										value="#{iheImplementationForSystem.wantedTestingType.name}" />
								</h:panelGrid>
							</s:span>

							<h:selectOneMenu
								value="#{iheImplementationForSystem.wantedTestingType}"
								rendered="#{testingTypeManagerBean.canSetWantedTestingType(iheImplementationForSystem, systemManagerBean.selectedSystemInSession.system)}">
								<s:selectItems
									value="#{testingTypeManagerBean.possibleTestingTypes}"
									noSelectionLabel="#{messages['gazelle.common.PleaseSelect']}"
									var="testingType" label="#{testingType.name}" />
								<a4j:support event="onchange"
									actionListener="#{testingTypeManagerBean.setWantedTestingTypeFromListbox(iheImplementationForSystem)}"
									reRender="iheImplementationDataTable,checkDependenciesResetButton,pdfButton" />
							</h:selectOneMenu>

						</s:span>

					</rich:column>

					<rich:column
						rendered="#{applicationManagerBean.isTestManagement()}">
						<f:facet name="header">
							<h:outputText
								value="#{messages['net.ihe.gazelle.tm.TestingTypeReviewed']}" />
						</f:facet>
						<h:outputText
							value="#{iheImplementationForSystem.testingTypeReviewed}"
							rendered="#{testingTypeManagerBean.getAIPO(iheImplementationForSystem).maybeSupportive and !testingTypeManagerBean.canSetTestingType(iheImplementationForSystem)}" />
						<h:selectBooleanCheckbox
							rendered="#{testingTypeManagerBean.getAIPO(iheImplementationForSystem).maybeSupportive and testingTypeManagerBean.canSetTestingType(iheImplementationForSystem)}"
							value="#{iheImplementationForSystem.testingTypeReviewed}">
							<a4j:support event="onclick"
								actionListener="#{testingTypeManagerBean.setTestingTypeReviewed(iheImplementationForSystem, systemManagerBean.selectedSystemInSession.system)}"
								ajaxSingle="true" />
						</h:selectBooleanCheckbox>
					</rich:column>

					<rich:column
						rendered="#{applicationManagerBean.isTestManagement()}">
						<f:facet name="header">
							<h:outputText value="#{messages['gazelle.systems.TestingType']}" />
						</f:facet>

						<h:panelGrid columns="2"
							rendered="#{!testingTypeManagerBean.canSetTestingType(iheImplementationForSystem)}">
							<h:graphicImage width="18" height="18"
								value="#{iheImplementationForSystem.testingType.imageUrl}" />
							<h:outputText
								value="#{iheImplementationForSystem.testingType.name}" />
						</h:panelGrid>
						<h:selectOneMenu value="#{iheImplementationForSystem.testingType}"
							rendered="#{testingTypeManagerBean.canSetTestingType(iheImplementationForSystem)}">
							<s:selectItems
								value="#{testingTypeManagerBean.possibleTestingTypes}"
								noSelectionLabel="#{messages['gazelle.common.PleaseSelect']}"
								var="testingType" label="#{testingType.name}" />
							<a4j:support event="onchange"
								actionListener="#{testingTypeManagerBean.setTestingTypeFromListbox(iheImplementationForSystem)}"
								reRender="iheImplementationDataTable,checkDependenciesResetButton,pdfButton" />
						</h:selectOneMenu>

						<h:graphicImage value="/img/loading/ajax-loader.gif" width="70"
							height="10" style="display:none" />

					</rich:column>

					<rich:column id="removeIntegrationProfileColumn"
						style="text-align:left">

						<f:facet name="header">#{messages['gazelle.common.Action']}</f:facet>

						<a4j:commandLink id="removeIntegrationProfileCommandLink"
							value="#{messages['gazelle.common.button.Remove']}"
							style="height:5px;" ajaxSingle="true"
							rendered="#{iheImplementationForSystemManagerBean.canDeleteIHEImplementationForSystem(iheImplementationForSystem)}"
							actionListener="#{iheImplementationForSystemManagerBean.setImplementationToDelete(iheImplementationForSystem) }"
							oncomplete="#{rich:component('DeleteImplementationConfirmationModalPanel')}.show();" />

					</rich:column>
				</rich:dataTable>
				<center>
					<h:outputText id="autoSavedLabel"
						rendered="#{ not empty iheImplementationForSystemManagerBean.iheImplementations}"
						styleClass="ajaxSupport"
						value="#{messages['gazelle.systems.system.IHEImplementationAutomaticallySaved']}"
						style="font-style:italic" />
					<br />
				</center>
				<rich:spacer
					rendered="#{ empty iheImplementationForSystemManagerBean.iheImplementations}"
					height="30" />
				<p />
				<rich:panel
					rendered="#{ empty iheImplementationForSystemManagerBean.iheImplementations}"
					style="text-align:center">
					<p />
					<h:graphicImage style="align:center"
						value="/img/icons64/warning.gif" width="64" height="72" />
					<p />
					<h:outputText id="noSystemLabel" styleClass="ajaxSupport"
						value="#{messages['gazelle.systems.system.NoIHEImplementationLabel1']}"
						style="font-style:italic" />
					<br />
					<h:outputText id="noSystemLabel2" styleClass="ajaxSupport"
						value="#{messages['gazelle.systems.system.NoIHEImplementationLabel3']}"
						style="font-style:italic" />
				</rich:panel>
			</rich:panel>
			<div style="clear: both" />

			<div align="center">
				<s:decorate id="iheValidationDecoration"
					template="/layout/display.xhtml">
					<h:outputText id="validationBox" />
				</s:decorate>
			</div>
			<div align="right" class="actionButtons">
				<s:div id="checkDependenciesResetButton">

					<s:span
						rendered="#{not empty iheImplementationForSystemManagerBean.iheImplementations}">

						<h:outputText
							value="#{tfDependenciesManager.validateTFDependencies(systemManagerBean.selectedSystemInSession.system)}" />

						<h:graphicImage
							rendered="#{tfDependenciesManager.missingTfDependencies}"
							value="/img/icons64/warning.gif" width="24" height="24" />
						<a4j:commandButton styleClass="commandButton"
							value="#{messages['gazelle.systems.system.CheckTFdependencies.Header']}"
							reRender="TfDependenciesDBModalPanel"
							rendered="#{tfDependenciesManager.missingTfDependencies}"
							oncomplete="#{rich:component('TfDependenciesDBModalPanel')}.show();">
						</a4j:commandButton>

						<h:outputText
							rendered="#{not tfDependenciesManager.missingTfDependencies}"
							value="#{messages['gazelle.systems.system.CheckTFdependencies.NoMissing']}" />

						<a4j:commandButton id="resetAllIHEImplementationForSystemButton"
							styleClass="commandButton"
							value="#{messages['gazelle.systems.system.button.ResetAllIHEImplementationForSystem']} #{systemManagerBean.selectedSystemInSession.system.name}"
							rendered="#{not empty iheImplementationForSystemManagerBean.iheImplementations}"
							oncomplete="#{rich:component('ResetConfirmationModalPanel')}.show();">
						</a4j:commandButton>
					</s:span>

				</s:div>
			</div>

			<div align="left" class="actionButtons">
				<s:div id="pdfButton"
					rendered="#{applicationManagerBean.isTestManagement()}">

					<h:panelGrid columns="4" id="buttonsPanelGrid">

						<rich:spacer width="40" />
						<h:graphicImage value="/img/icons64/bottomJR.gif" width="24"
							height="24"
							rendered="#{ not empty iheImplementationForSystemManagerBean.iheImplementations and systemManagerBean.canViewSystemInSessionAsVendor(systemManagerBean.selectedSystemInSession)}" />
						<h:commandLink
							value="#{messages['gazelle.systems.system.GenerateSampleIS']}"
							action="#{iheImplementationForSystemManagerBean.generatePDF(systemManagerBean.selectedSystemInSession.system)}"
							rendered="#{ not empty iheImplementationForSystemManagerBean.iheImplementations and systemManagerBean.canViewSystemInSessionAsVendor(systemManagerBean.selectedSystemInSession)}"
							styleClass="commandButton" target="_blank" style="color:white;">
						</h:commandLink>
					</h:panelGrid>

				</s:div>
			</div>

		</h:form>

	</rich:panel>

	<rich:modalPanel id="DeleteImplementationConfirmationModalPanel"
		onbeforeshow="ActiveModal.setActiveModalPanel('DeleteImplementationConfirmationModalPanel')"
		width="500" height="120">
		<f:facet name="header">
			<h:outputText
				value="#{messages['gazelle.users.institution.confirmation.delete.label']}" />
		</f:facet>
		<f:facet name="controls">
			<h:graphicImage alt="#{messages['gazelle.common.button.mp.close']}"
				value="/img/modal/close.gif" style="cursor:pointer" height="14"
				width="14"
				onclick="Richfaces.hideModalPanel('DeleteImplementationConfirmationModalPanel')" />
		</f:facet>
		<s:decorate>

			<rich:panel>
				<h:form>
					<s:token allowMultiplePosts="true" />
					<h:outputText
						value="#{messages['net.ihe.gazelle.tm.DoYouWantToRemoveThisActorintegrationProfileopti']}" />

					<div align="right">
						<a4j:commandButton
							value="#{messages['gazelle.common.button.Delete']}"
							styleClass="commandButton"
							reRender="iheImplementationDataTable,checkDependenciesResetButton,pdfButton"
							actionListener="#{iheImplementationForSystemManagerBean.deleteIHEImplementationForSystem()}"
							onclick="Richfaces.hideModalPanel('DeleteImplementationConfirmationModalPanel');"
							ajaxSingle="true" />

						<a4j:commandButton
							value="#{messages['gazelle.common.button.Cancel']}"
							onclick="Richfaces.hideModalPanel('DeleteImplementationConfirmationModalPanel')"
							styleClass="commandButton" />
					</div>
				</h:form>
			</rich:panel>
		</s:decorate>
	</rich:modalPanel>

	<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
	<!-- MODAL PANEL : This is the modal panel to display the reset confirmation (reseting all implementations for the system) -->
	<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
	<rich:modalPanel id="ResetConfirmationModalPanel"
		onbeforeshow="ActiveModal.setActiveModalPanel('ResetConfirmationModalPanel')"
		resizeable="false" minHeight="200" minWidth="540" height="200"
		width="540" zindex="2000">
		<f:facet name="header">
			<h:outputText id="ResetAllIHEImplementationForSystemOutputText"
				value="#{messages['gazelle.systems.system.button.ResetAllIHEImplementationForSystem']}  #{systemManagerBean.selectedSystemInSession.system.name}" />
		</f:facet>
		<f:facet name="controls">
			<h:graphicImage id="ResetConfirmationModalPanelCloseImage"
				alt="#{messages['gazelle.common.button.mp.close']}"
				value="/img/modal/close.gif" style="cursor:pointer" height="14"
				width="14"
				onclick="Richfaces.hideModalPanel('ResetConfirmationModalPanel')" />
		</f:facet>

		<h2>#{messages['gazelle.tm.IHEImplementationsResetingConfirmation']}</h2>
		<p />
		<rich:panel id="ResetConfirmationPanel">
			<p>#{messages['gazelle.tm.PleaseConfirmThatYouWantToRemoveAllTheIHEImpleme']}
				:</p>

			<h:form id="ResetConfirmationForm">
				<s:token allowMultiplePosts="true" />

				<div align="right" id="ResetConfirmationDiv">

					<a4j:commandButton id="ResetAllIHEImplementationForSystemButton"
						value="#{messages['gazelle.systems.system.button.ResetAllIHEImplementationForSystem']}  #{systemManagerBean.selectedSystemInSession.system.name}"
						styleClass="commandButton"
						reRender="iheImplementationDataTable,pdfButton,checkDependenciesResetButton"
						actionListener="#{iheImplementationForSystemManagerBean.resetSelectedIHEImplementationForSystem()}"
						onclick="Richfaces.hideModalPanel('ResetConfirmationModalPanel');" />

					<a4j:commandButton id="ResetConfirmationCancelButton"
						value="#{messages['gazelle.common.button.Cancel']}"
						onclick="Richfaces.hideModalPanel('ResetConfirmationModalPanel')"
						styleClass="commandButton" />

				</div>
			</h:form>
		</rich:panel>

	</rich:modalPanel>

	<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
	<!-- MODAL PANEL : This is the modal panel to select and add an AIPO -->
	<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
	<rich:modalPanel id="AddImplementationModalPanel"
		onbeforeshow="ActiveModal.setActiveModalPanel('AddImplementationModalPanel')"
		resizeable="true" height="400" width="800">
		<f:facet name="header">#{messages['gazelle.systems.system.NoTransactionYetSupportedLabel2']}</f:facet>
		<f:facet name="controls">
			<h:graphicImage alt="#{messages['gazelle.common.button.mp.close']}"
				value="/img/modal/close.gif" style="cursor:pointer" height="14"
				width="14"
				onclick="Richfaces.hideModalPanel('AddImplementationModalPanel')" />
		</f:facet>

		#{dataTableStateHolder.setAscendingOn('actorIntegrationProfile.integrationProfile.name')}

		<h:form id="formSystemImplementationsSelection">
			<s:token allowMultiplePosts="true" />

			<!--  Section containing the drop down list boxes for AIPO -->
			<rich:panel id="criteriaPanel">
				<f:facet name="header"></f:facet>
				<h:panelGrid columns="4">
					<!--  AIPO selection -->
					<ui:include
						src="/testing/research/filterAIPOForSystemImplementation.xhtml">
						<ui:param name="filter" value="#{aipoSelector.filter}" />
						<ui:param name="filterForm"
							value="formSystemImplementationsSelection" />
					</ui:include>

					<a4j:commandButton styleClass="commandButton"
						actionListener="#{aipoSelector.filter.clear()}" ajaxSingle="true"
						reRender="formSystemImplementationsSelection"
						value="#{messages['gazelle.users.reset']}" type="submit" />
				</h:panelGrid>

			</rich:panel>

			<rich:panel id="aipoListPanel">
				<rich:dataTable id="aipoList" value="#{aipoSelector.aipos}"
					var="aipo" onRowMouseOver="this.style.backgroundColor='#94C2E6'"
					onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
					rows="5">
					<rich:column
						sortBy="#{'actorIntegrationProfile.integrationProfile.name'}"
						sortOrder="#{dataTableStateHolder.sortOrders['actorIntegrationProfile.integrationProfile.name']}">
						<f:facet name="header">#{messages['gazelle.tf.IntegrationProfile']}</f:facet>
								#{aipo.actorIntegrationProfile.integrationProfile.name}
					</rich:column>
					<rich:column sortBy="#{'actorIntegrationProfile.actor.name'}"
						sortOrder="#{dataTableStateHolder.sortOrders['actorIntegrationProfile.actor.name']}">
						<f:facet name="header">#{messages['gazelle.tf.Actor']}</f:facet>
								#{aipo.actorIntegrationProfile.actor.name}
					</rich:column>
					<rich:column sortBy="#{'integrationProfileOption.keyword'}"
						sortOrder="#{dataTableStateHolder.sortOrders['integrationProfileOption.keyword']}">
						<f:facet name="header">#{messages['gazelle.tf.IntegrationProfileOption']}</f:facet>
								#{aipo.integrationProfileOption.name}
					</rich:column>
					<rich:column>
						<f:facet name="header">#{messages['gazelle.systems.system.button.AddIHEImplementationForIS']}</f:facet>
						<a4j:commandButton id="addIHEImpButton" ajaxSingle="true"
							value="#{messages['gazelle.systems.system.button.AddIHEImplementationForIS']}"
							styleClass="commandButton"
							reRender="iheImplementationDataTable,checkDependenciesResetButton,pdfButton,TfDependenciesDBModalPanel"
							actionListener="#{iheImplementationForSystemManagerBean.addIHEImplementationForSystem(aipo)}"
							oncomplete="Richfaces.hideModalPanel('AddImplementationModalPanel');"
							ignoreDupResponses="true" />
					</rich:column>
					<f:facet name="footer">
						<rich:datascroller maxPages="10" renderIfSinglePage="false"
							immediate="true" />
					</f:facet>
				</rich:dataTable>
			</rich:panel>
			<div align="right">
				<a
					href="javascript:Richfaces.hideModalPanel('AddImplementationModalPanel')">
					#{messages['gazelle.common.button.mp.close']} </a>
			</div>
		</h:form>
	</rich:modalPanel>

	<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
	<!-- MODAL PANEL : This is the modal panel to display the result of the dependencies checking using DB -->
	<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
	<rich:modalPanel id="TfDependenciesDBModalPanel"
		onbeforeshow="ActiveModal.setActiveModalPanel('TfDependenciesDBModalPanel')"
		height="600" width="800">
		<f:facet name="header">
			<h:outputText
				value="#{messages['gazelle.systems.system.CheckTFdependencies.Header']}" />
		</f:facet>
		<f:facet name="controls">
			<h:graphicImage alt="#{messages['gazelle.common.button.mp.close']}"
				value="/img/modal/close.gif" style="cursor:pointer" height="14"
				width="14"
				onclick="Richfaces.hideModalPanel('TfDependenciesDBModalPanel')" />
		</f:facet>
		<div style="height: 600px;">
			<div class="dr-mpnl-pnl" style="height: 500px;">
				<h:form id="validateTFDependenciesDBSelectedSystemForm">
					<s:token allowMultiplePosts="true" />

					<h:outputText
						value="#{tfDependenciesManager.validateTFDependencies(systemManagerBean.selectedSystemInSession.system)}" />
					<h2>#{messages['gazelle.systems.system.CheckTFdependencies.Title']}</h2>

					<c:forEach items="#{tfDependenciesManager.invalidRules}"
						var="invalidRule">
						<rich:panel>
							<f:facet name="header">#{messages['net.ihe.gazelle.tm.RuleNotMatched']}</f:facet>

							<s:decorate template="/layout/display.xhtml">
								<ui:define name="label">#{messages['gazelle.testmanagement.object.Name']}</ui:define>
								<h:outputText value="#{invalidRule.name}" />
							</s:decorate>

							<s:decorate template="/layout/display.xhtml">
								<ui:define name="label">#{messages['net.ihe.gazelle.tm.Missing']}</ui:define>
								<s:decorate
									template="/systems/system/editSystemImplementationCriterion.xhtml">
									<ui:param name="criterion" value="#{invalidRule.consequence}" />
								</s:decorate>
							</s:decorate>

						</rich:panel>
					</c:forEach>
				</h:form>
			</div>
		</div>
	</rich:modalPanel>

</s:div>