{% load static i18n %}

<nav id="main-nav" class="main-nav container">
    <div class="main-nav__mobile-wrapper">
        <button id="menu-button" class="main-nav__menu-button" type="button">
            <span class="visually-hidden">Menu button</span>
        </button>

        <a class="main-nav__logo" href="https://www.equiseq.com">
            <img class="main-nav__logo-img" src="{% static 'images/equiseq-logo.svg' %}" width="142" height="32"
                 alt="EquiSeq Logo">
        </a>
        <a class="button button--buy button--buy--mobile" href="#">Buy </a>
    </div>

    <div id="menu" class="main-nav__content-wrapper">
        <ul class="main-nav__list">
            <li class="main-nav__item main-nav__item">
                <span class="main-nav__link main-nav__link--submenu">Company</span>
                <ul class="submenu">
                    <li class="submenu__item"><a class="submenu__link" href="https://www.equiseq.com/story/">Story</a>
                    </li>
                    <li class="submenu__item"><a class="submenu__link" href="https://www.equiseq.com/team/">Team</a>
                    </li>
                    <li class="submenu__item"><a class="submenu__link" href="https://www.equiseq.com/board/">Board</a>
                    </li>
                    <li class="submenu__item"><a class="submenu__link" href="https://www.equiseq.com/news/">News</a>
                    </li>
                    <li class="submenu__item"><a class="submenu__link" href="https://www.equiseq.com/blog/">Blog</a>
                    </li>
                    <li class="submenu__item"><a class="submenu__link" href="https://www.equiseq.com/downloads/">Downloads</a>
                    </li>
                </ul>
            </li>
            <li class="main-nav__item main-nav__item--submenu">
                <span class="main-nav__link main-nav__link--submenu">Product</span>
                <ul class="submenu">
                    <li class="submenu__item"><a class="submenu__link"
                                                 href="https://www.equiseq.com/dna-learning-center/">DNA Leaning
                        Center</a>
                    </li>
                    <li class="submenu__item"><a class=" submenu__link"
                                                 href="https://www.equiseq.com/tests-learning-center/">Test Leaning
                        Center</a>
                    </li>
                    <li class="submenu__item"><a class="submenu__link" href="https://www.equiseq.com/pssm-faq/">FAQ</a>
                    </li>
                </ul>
            </li>
            <li class="main-nav__item">
                <a class="main-nav__link" href="https://www.equiseq.com/contact/">Contact</a>
            </li>

            {% if user.is_authenticated %}
                <li class="main-nav__item main-nav__item--submenu">
                    <span class="main-nav__link main-nav__link--submenu">Horses</span>
                    <ul class="submenu">

                        {% if perms.horses.add_horse %}
                            <li class="submenu__item">
                                <a id="log-in-link" class="main-nav__link submenu__link"
                                   href="{% url 'horses:horse-add' %}">Add Horse</a>
                            </li>
                        {% endif %}
                        {% if perms.horses.view_all_horses %}
                            <li class="submenu__item">
                                <a class="main-nav__link submenu__link" href="{% url 'horses:horses-list' %}">
                                    All Horses List</a>
                            </li>
                        {% endif %}

                        <li>
                            <a class="main-nav__link submenu__link" href="{% url 'horses:horses-public' %}">
                                Search Public Horses</a>
                        </li>

                        {% if user.horse_set.exists %}
                            <li><span class="submenu__link">My Horses</span>
                                <ul class="submenu__list">
                                    {% for horse in user.horse_set.all %}
                                        <li class="submenu__item">
                                            <a class="main-nav__link submenu__list-item"
                                               href="{% url 'horses:horse-detail' horse.uuid %}">{{ horse.name|title }}</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endif %}

                    </ul>
                </li>
            {% endif %}
            {% if perms.horses.view_all_horses %}
                <li class="main-nav__item">
                <a class="main-nav__link" href="{% url 'users:users-list' %}">
                                    All Users</a>
                            </li>
                        {% endif %}

            <li class=" main-nav__item main-nav__item--button">
            <a class="button button--buy" href="https://www.equiseq.com/order/">Buy </a>
            </li>
        </ul>
        <ul class="main-nav__list">

            {% if request.user.is_authenticated %}
                <li class="main-nav__item main-nav__user-nav">
                    <img src="{{ request.user.avatar.url }}" alt="" width="56" height="auto">
                    <span class="main-nav__link main-nav__link--submenu">{{ request.user.username }}</span>
                    <ul class="submenu">
                        <li class="submenu__item">

                            {# URL provided by django-allauth/account/urls.py #}
                            <a id="sign-up-link" class="main-nav__link submenu__link"
                               href="{% url 'users:detail' request.user.username %}"> View Profile</a>
                        </li>


                        <li class="submenu__item">

                            {# URL provided by django-allauth/account/urls.py #}
                            <a id="sign-up-link" class="main-nav__link submenu__link"
                               href="{% url 'account_logout' %}">Sign Out</a>
                        </li>
                    </ul>
                </li>




            {% else %}

                <li class="main-nav__item">
                    {# URL provided by django-allauth/account/urls.py #}
                    <a id="sign-up-link" class="button button--transparent"
                       href="{% url 'account_login' %}">Log In</a>
                </li>
                <li class="main-nav__item">
                    {# URL provided by django-allauth/account/urls.py #}
                    <a id="log-in-link" class="button"
                       href="{% url 'account_signup' %}">Sign Up</a>
                </li>
            {% endif %}

        </ul>
    </div>

</nav>

<script src="{% static 'js/components/menu.js' %}"></script>