<!DOCTYPE html>
<html>
<!--- Head Section --->
<head>
    <title>Botanical Lens - <%= title %></title>
    <%- include('./base'); %>
    <link rel='stylesheet' href='/stylesheets/partials/header_style.css'/>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>

<body>

<!--- Header Section --->
<div class="popover-header">
    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between bg-white">

        <!-- Company Branding -->
        <a onclick="location.href='/'"
           class="d-flex align-items-center col-md-3 text-dark text-decoration-none"
           style="font-size: xx-large;cursor: pointer;">
            <img src="../images/logo/botanical-lens-logo.png"
                 alt="Botanical Lens" class="" width="80" height="80" style="margin-left: 7%; margin-top: 2%"/>
            <span class="gradient-text logo-title-gradient"> Botanical Lens </span>
        </a>

        <!-- Navigation Options -->
        <ul class=" nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
            <li><a href="/addplant" class="nav-link px-2"
                   style="font-size: large; color: #3C1414">Add Plant</a>
            </li>
            <li><a href="/contact-us" class="nav-link px-2"
                   style="font-size: large; color: #3C1414">Contact</a>
            </li>
            <li><a href="/faq" class="nav-link px-2" style="font-size: large; color: #3C1414">FAQs</a>
            </li>
            <li><a class="nav-link px-2"></a>
            </li>
        </ul>

    </header>
</div>
</body>