<nav class="navbar navbar-expand-lg navbar-light bg-white yo-public-nav navbar navbar-expand-lg navbar-dark {{'bg-transparent fixed-top' if active_page=='index.html' else ''}} ">
    <a class="navbar-brand" href="#"><img src="/static/logo.svg" height="60" alt="CoolBrand"></a>
    <button class="navbar-toggler" type="button" data-trigger="#main_nav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse" id="main_nav">
        <div class="offcanvas-header mt-3">
            <button class="btn btn-outline-danger btn-close float-right"> &times Close </button>
            <h5 class="py-2 text-black">FREAKS BOUTIQUE</h5>
        </div>
        <ul class="navbar-nav">
            <li class="nav-item active"> <a class="nav-link" href="{{ url_for('shop.homepage') }}"> Home </a> </li>
            <li class="nav-item"><a class="nav-link" href="{{ url_for('shop.index') }}"> Shop </a></li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Men
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    {% set category = Category.query.filter(Category.name == 'men').first() %}
                    {% for subcategory in category.subcategories %}
                    <a class="dropdown-item" href="{{ url_for('shop.subcategory', sub_id=subcategory.id) }}">
                        {{ subcategory.name.capitalize() }}
                    </a>
                    {% endfor %}
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Women
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    {% set category = Category.query.filter(Category.name == 'women').first() %}
                    {% for subcategory in category.subcategories %}
                    <a class="dropdown-item" href="{{ url_for('shop.subcategory', sub_id=subcategory.id) }}">
                        {{ subcategory.name.capitalize() }}
                    </a>
                    {% endfor %}
                </div>
              </li>
            <li class="nav-item"><a class="nav-link" href="{{ url_for('shop.wishlist') }}"> <i class="fa fa-heart"></i> </a></li>
        </ul>
        <!--
<ul class="navbar-nav ml-auto">
    <li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
    <li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
    <li class="nav-item dropdown">
        <a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown"> Dropdown rightn </a>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
          <li><a class="dropdown-item" href="#"> Submenu item 2n </a></li>
        </ul>
    </li>
</ul>-->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                {%if not current_user.is_authenticated%}
                <a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><i class="fa fa-user"></i></a>
                {%else%}
                    {%if current_user.is_admin%}
                        <a class="nav-link" href="{{url_for('dashboard.index')}}" ><i class="fa fa-user" style="color: green;"></i></a>
                    {%else%}
                        <a class="nav-link" href="{{ url_for('customer.dashboard') }}"><i class="fa fa-user" style="color: green;"></i></a>
                    {%endif%}
                {%endif%}
            </li>

            <li class="nav-item">
                <a class="nav-link" href="{{ url_for('shop.cart') }}">
                    <i class="fa fa-shopping-bag"></i> {{Cart.data()['num_items']}}/{{get_currency_symbol()}} {{Cart.data()['total_price']}}</a>
            </li>
        </ul>
    </div> <!-- navbar-collapse.// -->
</nav>

<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Auth</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="signup-tab" data-toggle="tab" href="#signup" role="tab" aria-controls="signup" aria-selected="false">SignUp</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <br>
                        <div class="card">
                            <div class="card-body">
                                <form action="{{url_for('auth.login')}}" method="post">
                                    {%set auth_login_form = get_auth_login_form()%}
                                    <p>{{auth_login_form.email.label}}</p>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-id-card"></i></span>
                                        </div>

                                        {{ auth_login_form.email() }}
                                        {% if auth_login_form.email.errors %}
                                            <ul class="errors">
                                                {% for error in auth_login_form.user_id.errors %}
                                                    <li>{{ error }}</li>
                                                {% endfor %}
                                            </ul>
                                        {% endif %}
                                    </div>
                                    <p>{{auth_login_form.password.label}}</p>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-key"></i></i></span>
                                        </div>
                                        {{ auth_login_form.password() }}
                                        {% if auth_login_form.password.errors %}
                                            <ul class="errors">
                                                {% for error in auth_login_form.password.errors %}
                                                    <li>{{ error }}</li>
                                                {% endfor %}
                                            </ul>
                                        {% endif %}
                                    </div>
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                    <input type="submit" name="" value="submit" class="btn btn-info">
                                </form>

                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="signup" role="tabpanel" aria-labelledby="signup-tab">
                        <div class="card-body">
                            <div class="card">
                                <div class="card-body">
                                    {%set register_customer_form = get_auth_register_customer_form()%}
                                    <form action="{{ url_for('customer.register') }}" method="post">
                                        <p>{{ register_customer_form.email.label }}</p>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fa fa-envelope"></i></span>
                                            </div>
                                            {{ register_customer_form.email() }}
                                        </div>
                                        <p>{{ register_customer_form.password.label }}</p>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fa fa-key"></i></span>
                                            </div>
                                            {{ register_customer_form.password() }}
                                        </div>
                                        <p>{{ register_customer_form.reconfirm_password.label }}</p>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fa fa-key"></i></span>
                                            </div>
                                            {{ register_customer_form.reconfirm_password() }}
                                        </div>
                                        <input type="submit" name="" class="btn btn-info">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    </form>
                                    <br>
                                    <p>
                                    Your personal data will be used to support your experience on this website, to access your account and for purposes described in our <a href="" style="border-bottom: 1px solid gray">privacy policy</a>
                                </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div> -->
        </div>
    </div>
</div>
