<header th:fragment="header">
  <a class="nav-logo-container"><img th:src="@{/images/icons/VZTA.png}" alt="Logo" class="nav-logo"></a>
  <nav class="head-navbar">
    <ul class="nav-ul">
      <li class="nav-li li-first">
        <a href="/mobile-home" class="nav-links">Home</a>
      </li>
      <li class="nav-li li-middle" th:if="${#authentication.principal}!=anonymousUser">
        <a th:href="'/profile/' + ${#authentication.getName()}" class="nav-links">Profile</a>
      </li>
      <li class="nav-li li-middle">
        <a class="nav-links">FAQ</a>
      </li>
      <li class="nav-li li-last">
        <a href="/dragonstale" class="nav-links">Dragon Tale</a>
      </li>
      <li class="nav-li li-last" th:if="${#authentication.principal}==anonymousUser">
        <a href="/login" class="nav-links">Log In</a>
      </li>
      <li class="nav-li li-last" th:if="${#authentication.principal}!=anonymousUser">
        <a class="nav-links" href="javascript: document.logoutForm.submit()" role="menuitem">Log Out</a>
        <form name="logoutForm" th:action="@{/logout}" method="post" th:hidden="true">
          <input hidden type="submit" value="Sign Out"/>
        </form>
      </li>
    </ul>
  </nav>
</header>

<footer th:fragment="footer">
  <!-- By Rhys Nute -->
  <div class="footer-div leftFooter">
    <h3>VZTA</h3>
    Near Me Now LTD
    <br>Britania House
    <br>Caerphilly Business Park
    <br>Caerphilly
    <br>CF83 3GG
  </div>
  <div class="footer-div centerFooter">
    <div class="footerText">
      <ul>
        <li class="nav-li li-first">
          <a href="/local-authorities" class="nav-links">Local Authorities</a>
        </li>
        <li class="nav-li li-first">
          <a href="/businesses" class="nav-links">Local Businesses</a>
        </li>
      </ul>
      <h3>Follow Us</h3>
      <a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"><img src="/images/icons/Facebook.png" height="25" width="25" alt="Facebook Logo" class="icon"/></a>
      <a href="https://www.twitter.com/VZTAsmarttowns/" class="icon"><img src="/images/icons/Twitter.jpg" height="25" width="25" alt="X (formally Twitter) Logo" class="icon"/></a>
      <a href="https://www.instagram.com/vztasmarttowns/" class="icon"><img src="/images/icons/Instagram.jpg" height="25" width="25" alt="Instagram Logo" class="icon"/></a>
      <a href="https://www.linkin.com/company/vztasmarttowns/" class="icon"><img src="/images/icons/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br>
    </div>
  </div>
  <div class="footer-div rightFooter">
    <h3>Connect with us</h3>
    <p>Be the first to know about updates by joining out Community page</p>
    (C) VZTA 2022<br>
    Policy Terms and Conditions
  </div>
</footer>