<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY amp   "&#38;">
<!ENTITY copy   "&#169;">
<!ENTITY gt   "&#62;">
<!ENTITY hellip "&#8230;">
<!ENTITY laquo  "&#171;">
<!ENTITY lsaquo   "&#8249;">
<!ENTITY lsquo   "&#8216;">
<!ENTITY lt   "&#60;">
<!ENTITY nbsp   "&#160;">
<!ENTITY quot   "&#34;">
<!ENTITY raquo  "&#187;">
<!ENTITY rsaquo   "&#8250;">
<!ENTITY rsquo   "&#8217;">
]>
<!-- 
Widget Example: Global Header Widget

This is an example widget that shows the usage of widget.xsl for the standard PCF to Include Global Header solution.

In some implementations, it may be unnecessary to override the page-content template. when applicable, override a template that is called within the page-content template.
Override <xsl:template name="publish-output"/> to output just the widget content.

Contributors: Akifumi Yamamoto
Last Updated: 2017/10/10
-->
<xsl:stylesheet version="3.0" expand-text="yes"
				xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
				xmlns:xs="http://www.w3.org/2001/XMLSchema"
				xmlns:ou="http://omniupdate.com/XSL/Variables"
				xmlns:fn="http://omniupdate.com/XSL/Functions"
				xmlns:ouc="http://omniupdate.com/XSL/Variables"
				xmlns:xlink="https://www.w3.org/1999/xlink"
				xmlns:map="http://www.w3.org/2005/xpath-functions/map"
				xmlns:func="http://www.w3.org/2005/xpath-functions"
				exclude-result-prefixes="xs ou fn ouc xlink map func">

	<xsl:import href="widget.xsl"/>
	<xsl:template name="template-footcode"/>
	<xsl:template name="common-footer"/>

	<xsl:template name="publish-output">
		<xsl:call-template name="common-header"/>
	</xsl:template>

	<xsl:template match="comment()" />
	<xsl:template name="mobile-header" />

	<xsl:mode name="header" on-no-match="shallow-skip"/>
	<xsl:mode name="header-copy" on-no-match="shallow-skip"/>

	<xsl:template match="ouc:div" mode="header-copy">
		<xsl:element name="{name()}">
			<xsl:copy-of select="./@*"/>
			<xsl:apply-templates select="node()" mode="#current"/>
		</xsl:element>
	</xsl:template>
	<xsl:template match="ouc:*" mode="header-copy">
		<xsl:element name="{name()}">
			<xsl:copy-of select="./@*"/>
			<xsl:apply-templates select="node()" mode="#current"/>
		</xsl:element>
	</xsl:template>
	<xsl:template match="table[@data-snippet]" mode="header-copy">
		<xsl:copy-of select="."/>
	</xsl:template>

	<xsl:template name="template-headcode">
		<style xsl:expand-text="no">
			table {
			width: 100%;
			table-layout: fixed;
			}

			table[class^="ou-"] {
			width: 100%;
			cursor: default;
			margin: 32px 0 !important;
			}

			table[class^="ou-"] td {
			position: relative !important;
			}

			table[class^="ou-"] img:not(.mce-object-iframe) {
			max-width: 100%;
			max-height: 100%;
			width: auto;
			height: auto;
			}

			table[class^="ou-"],
			.edit-region .mce-item-table,
			.edit-region .mce-item-table td,
			.edit-region .mce-item-table th,
			.edit-region .mce-item-table caption {
			border-collapse: separate;
			border-spacing: 0px;
			border: 1px solid white;
			box-sizing: border-box;
			}

			table[class^="ou-"] thead tr th,
			table[class^="ou-"] tbody tr th,
			table[class^="ou-"] caption,
			table[class^="ou-"] thead tr td {
			font-weight: 800;
			}

			table[class^="ou-"] thead tr th,
			table[class^="ou-"] tbody tr th,
			table[class^="ou-"] caption,
			table[class^="ou-"] thead tr td,
			table[class^="ou-"] tbody tr td {
			color: #000;
			font-size: 14px;
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 5px;
			padding-right: 5px;
			vertical-align: top;
			}

			table[class^="ou-"] thead tr th,
			table[class^="ou-"] tbody tr th,
			table[class^="ou-"] caption {
			background: none repeat scroll 0 0 #f0f0f0;
			color: #333;
			font-weight: 600;
			font-size: 14px;
			}

			table[class^="ou-"] caption {
			font-size: 18px;
			text-align: center;
			background-image: linear-gradient(to bottom, #f9f9f9, #d3d3d3);
			margin: 0px;
			border-bottom: 0;
			caption-side: top;
			}
		</style>
	</xsl:template>


	<xsl:template name="page-content">
		<div class="container-lg">
			<div class="row" style="min-height:350px;margin:15px;padding:15px;">
				<div class="col" >

					<hr />
					<h2>Global Header</h2>

					<p>Please use the <strong>Page Properties</strong> to update logo.</p>

					<h3>Main Navigation Links</h3>
					<p>Use the table provided in the region below.</p>
					<xsl:apply-templates select="ouc:div[@label='main-links']" mode="header-copy"/>

					<h3>Quick Links</h3>
					<p>Use the table provided in the region below.</p>
					<xsl:apply-templates select="ouc:div[@label='quick-links']" mode="header-copy"/>

				</div>
			</div>
		</div>
	</xsl:template>

	<xsl:template name="common-header">
		<xsl:variable name="top-logo-img" select="ou:pcf-param('top-logo-img')"/>
		<xsl:variable name="top-logo-description" select="ou:pcf-param('top-logo-description')"/>
		<xsl:variable name="logo-img" select="ou:pcf-param('logo-img')"/>
		<xsl:variable name="logo-description" select="ou:pcf-param('logo-description')"/>
		<xsl:variable name="top-header" select="ou:pcf-param('top-header')"/>

		<header class="main-header L5-header" id="site-navigation">
			<div class="top-nav d-none d-lg-block">
				<div class="row">
					<div class="col-5 col-xl-5">
						<img class="top-logo" src="{$top-logo-img}" alt="{$top-logo-description}" />
						<div class="portal-label">
							<span><xsl:value-of select="$top-header"/></span>
						</div>
					</div>
					<div class="col-7 col-xl-7 d-flex justify-content-end align-items-center">
						
						<xsl:apply-templates select="ouc:div[@label='quick-links']//table" mode="quick-links"/>
						
						<div class="search-container">
							<form action="/action_page.php">
								<label for="search" class="sr-only">Search</label>
								<input type="text" placeholder="Search.." name="search" id="search"/>
								<button type="submit">
									<i class="fa fa-search"></i>
									<span class="sr-only">Submit Search</span>
								</button>
							</form>
						</div>
					</div>
				</div>
			</div>

			<nav class="navbar navbar-expand-lg">
				<div class="row mx-0 px-0">
					<div class="col-8 col-lg-3 px-0 d-flex flex-column justify-content-center align-items-start">
						<a class="navbar-brand" href="#">
							<img src="{$logo-img}" alt="{$logo-description}"/>
						</a>
						<div class="portal-label d-lg-none">
							<span><xsl:value-of select="$top-header"/></span>
						</div>
					</div>

					<div class="col-4 d-lg-none d-flex justify-content-end">
						<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
								data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
								aria-label="Toggle navigation">
							<span class="fa fa-bars"></span>
						</button>
					</div>

					<div class="col-12 mx-0 px-0 col-lg-9">
						<div class="collapse navbar-collapse" id="navbarNavDropdown">
							<div class="top-nav-mobile d-block d-lg-none">
								<div class="search-container">
									<form action="/action_page.php">
										<label for="mobile-search" class="sr-only">Search</label>
										<input type="text" placeholder="Search.." name="mobile-search" id="mobile-search"/>
										<button type="submit">
											<i class="fa fa-search"></i>
											<span class="sr-only">Submit Search</span>
										</button>
									</form>
								</div>
								
								<xsl:apply-templates select="ouc:div[@label='quick-links']//table" mode="quick-links"/>
								
							</div>

							<xsl:apply-templates select="ouc:div[@label='main-links']//table" mode="main-links"/>
						</div>
					</div>
				</div>
			</nav>
		</header>
	</xsl:template>


	<xsl:template match="table[@data-snippet='ou-main-links']" mode="main-links">
		<div class="navbar-nav">
			<xsl:for-each select="tbody/tr[@data-row='item']">
				<div class="nav-dropdown-div">
					<a role="button" href="#" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
						<xsl:value-of select="ou:textual-content(td[@data-name='heading'])"/>
					</a>
					<div class="xl-menu">
						<div class="dropdown-menu">
							<div class="row">
								<div class="col-12">
									<div class="row">
										<ul class="col-12 col-lg-6">
											<xsl:for-each select="td[@data-name='row_1']//a">
												<li>
													<a class="dropdown-item">
														<xsl:apply-templates select="@*[name() != 'class' and name() != 'style']"/>
														<xsl:value-of select="ou:textual-content(.)"/>
													</a>
												</li>
											</xsl:for-each>
										</ul>
										<ul class="col-12 col-lg-6">
											<xsl:for-each select="td[@data-name='row_2']//a">
												<li>
													<a class="dropdown-item">
														<xsl:apply-templates select="@*[name() != 'class' and name() != 'style']"/>
														<xsl:value-of select="ou:textual-content(.)"/>
													</a>
												</li>
											</xsl:for-each>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</xsl:for-each>
		</div>
	</xsl:template>

	<xsl:template match="table[@data-snippet='ou-quick-links']" mode="quick-links">
		<xsl:for-each select="tbody//td[@data-name='links']//a">
			<a>
				<xsl:apply-templates select="@*[name() != 'class' and name() != 'style']"/>
				<xsl:value-of select="ou:textual-content(.)"/>
			</a>
		</xsl:for-each>
	</xsl:template>

</xsl:stylesheet>