{% load static %}

<div class="navbar">
    <div class="navbar-space"></div>
    <div
        data-animation="default"
        data-collapse="medium"
        data-duration="400"
        data-easing="ease-out"
        data-easing2="ease-out"
        role="banner"
        class="navbar-inner w-nav"
    >
        <div class="container-copy">
            <div class="navbar-wrapper">
                <nav role="navigation" class="nav-menu-wrapper w-nav-menu">
                    <div class="nav-menu-flex">
                        <a href="{% url 'index' %}" class="brand w-nav-brand"
                        ><img
                            src="{% static 'images/logo-tpscheck.svg' %}"
                            loading="lazy"
                            height="36"
                            alt="TPSCheck.uk - TPS and CTPS Phone Number Verification"
                            width="160"
                            class="logo"
                        /></a>
                        <ul role="list" class="nav-menu w-list-unstyled">
                            <li>
                                <a href="{% url 'index' %}" class="nav-link">Home</a>
                            </li>
                            <li>
                                <a href="{% url 'subscribe' %}" class="nav-link">Pricing</a>
                            </li>
                            <li>
                                <a href="{% url 'documentation' %}" class="nav-link">API Docs</a>
                            </li>
                            <li>
                                <a href="{% url 'product_guide' %}" class="nav-link">Product Guide</a>
                            </li>
                            <li>
                                <a href="{% url 'index' %}#integrations" class="nav-link">Integrations</a>
                            </li>
                            <li>
                                <a href="{% url 'lotus:article-index' %}" class="nav-link">Blog</a>
                            </li>
                        </ul>
                        {% if user.is_authenticated %}
                            <div class="navbar-button-wrapper">
                                <a href="{% url 'dashboard' %}" class="btn btn-primary btn-sm">Dashboard</a>
                            </div>
                        {% else %}
                            <div class="navbar-button-wrapper">
                                <a href="{% url 'signin' %}" class="btn btn-ghost btn-sm">Sign in</a>
                            </div>
                            <div class="navbar-button-wrapper">
                                <a href="{% url 'signup' %}" class="btn btn-primary btn-sm">Get started</a>
                            </div>
                        {% endif %}
                    </div>
                </nav>
            </div>
        </div>
    </div>
    <div
        data-collapse="medium"
        data-animation="default"
        data-duration="400"
        data-easing="ease-out"
        data-easing2="ease-out"
        data-w-id="577246c2-be80-9a0d-4fe9-018c566815d9"
        role="banner"
        class="navbar-inner-mobile w-nav"
    >
        <div class="container">
            <div class="navbar-wrapper-mobile">
                <a href="{% url 'index' %}" aria-current="page" class="navbar-brand-mobile w-nav-brand w--current"
                ><img
                    src="{% static 'images/logo-tpscheck.svg' %}"
                    loading="lazy"
                    height="36"
                    width="160"
                    alt="TPSCheck.uk - TPS and CTPS Phone Number Verification"
                    class="logo"
                /></a>
                <div data-w-id="577246c2-be80-9a0d-4fe9-018c566815de" class="menu-button w-nav-button">
                    <div class="burger">
                        <div class="burger-line cc-top"></div>
                        <div class="burger-line cc-middle"></div>
                        <div class="burger-line cc-bottom"></div>
                    </div>
                </div>
            </div>
            <nav role="navigation" class="nav-menu-wrapper-mobile w-nav-menu">
                <div class="nav-menu-flex-mobile">
                    <ul role="list" class="nav-menu w-list-unstyled">
                        <li>
                            <a href="{% url 'index' %}" class="nav-link-mobile">Home</a>
                        </li>
                        <li>
                            <a href="{% url 'subscribe' %}" class="nav-link-mobile">Pricing</a>
                        </li>
                        <li>
                            <a href="{% url 'documentation' %}" class="nav-link-mobile">API Docs</a>
                        </li>
                        <li>
                            <a href="{% url 'product_guide' %}" class="nav-link-mobile">Product Guide</a>
                        </li>
                        <li>
                            <a href="{% url 'index' %}#integrations" class="nav-link-mobile">Integrations</a>
                        </li>
                        <li>
                            <a href="{% url 'lotus:article-index' %}" class="nav-link-mobile">Blog</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="navbar-shadow"></div>
    <div class="navbar-space"></div>
</div>
