<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="/">
    <img src="/assets/images/btr-logo-white.svg" width="auto" height="40em" class="d-inline-block align-top" alt="Wycliffe Associates">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <LinkTo @route="site-purpose" class="nav-link">About</LinkTo>
      </li>
      <li class="nav-item">
        <LinkTo @route="user-guide" class="nav-link">How to Use the Site</LinkTo>
      </li>
      <li class="nav-item">
        <LinkTo @route="contact-us" class="nav-link">Contact Us</LinkTo>
      </li>
    </ul>
    <LinkTo @route="user-guide"><div id="help-button-desktop" title="Get Help">?</div></LinkTo>
  </div>
</nav>

<ScriptureNavBar/>

<LinkTo @route="user-guide"><div id="help-button-mobile" title="Get Help">?</div></LinkTo>

{{outlet}}

<footer class="card-fluid bg-dark mt-5">
	<div class="card-body">
		<div class="container">
			<div class="row mt-4">
				<div class="col-sm-4 mb-4">
					<h4 class="text-light text-center mb-3">About This Site</h4>
					<p class="text-light">Developed by Wycliffe Associates and our partners to provide access to tools and resources needed to complete the work of Bible translation.</p>
          <p class="text-light"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.</p>
				</div>
				<div class="col-sm-4 mb-3 text-center">
					<h4 class="text-light mb-3">Find Us</h4>
					<p class="text-light">
						11450 Translation Way<br>
						Orlando, FL 32832<br><br>
						1-800-THE-WORD
					</p>
				</div>
				<div class="col-sm-4">
					<h4 class="text-light text-center mb-2">Pages</h4>
					<nav class="nav justify-content-center">
            <LinkTo @route="home" class="nav-link">Home</LinkTo><br>
            <LinkTo @route="contributors" class="nav-link">Contributors</LinkTo><br>
            <LinkTo @route="user-guide" class="nav-link">User Guide</LinkTo><br>
            <LinkTo @route="morph-legend" class="nav-link">Morphology Codes</LinkTo><br>
            <LinkTo @route="site-purpose" class="nav-link">About</LinkTo><br>
					</nav>
				</div>
			</div>
		</div>
	</div>
	<div class="card-footer text-muted text-center">
		<div class="mt-3 mb-2"><a href="http://www.wycliffeassociates.org"><img width="266" height="50" src="/assets/images/wycliffe-associates-logo-l.svg"></a></div>
	</div>
</footer>