{% load bayketags shoptags %}
<header id="header">
    <div class="has-background-black-ter">
        <div class="container">
            <div class="is-flex is-justify-content-space-between" style="line-height: 40px;">
                <div class="has-text-light is-size-7">欢迎光临本店!</div>
                <div class="is-flex">
                    {% if request.user.is_authenticated %}
                    <b-dropdown :triggers="['hover']" aria-role="list" style="z-index: 100;">
                        <template #trigger>
                            <div class=" is-clickable has-text-light is-size-7">
                                <span>欢迎您，{{ request.user.username }}</span>
                                <span class="icon"><i class="mdi mdi-menu-down"></i></span>
                            </div>
                        </template>
                        <b-dropdown-item aria-role="listitem" has-link>
                            <a href="{% url 'shop:member' %}">
                                <span class="icon"><i class="mdi mdi-account-box-outline"></i></span>
                                个人中心
                            </a>
                        </b-dropdown-item>
                        <b-dropdown-item aria-role="listitem" has-link>
                            <a href="{% url 'shop:orders-list' %}">
                                <span class="icon"><i class="mdi mdi-basket-plus-outline"></i></span>
                                我的订单
                            </a>
                        </b-dropdown-item>
                        <div class="dropdown-divider"></div>
                        <b-dropdown-item aria-role="listitem" has-link>
                            <a href="{% url 'system:logout' %}">
                                <span class="icon"><i class="mdi mdi-logout"></i></span>
                                退出
                            </a> 
                        </b-dropdown-item>
                    </b-dropdown>
                    {% else %}
                    <a class="has-text-light is-size-7" href="{% url 'system:login' %}">
                        <span class="icon"><i class="mdi mdi-login"></i></span>
                        <span>登录</span>
                    </a>
                    <span class="pl-2 pr-1">|</span>
                    <a class="has-text-light is-size-7" href="{% url 'system:register' %}">
                        <span class="icon"><i class="mdi mdi-account-plus-outline"></i></span>
                        <span>注册</span>
                    </a>
                    {% endif %}
                    <div class="has-background-grey-darker ml-4">
                        <a class="pl-4 pr-5 has-text-light is-size-7" href="{% url 'shop:carts' %}">
                            <span class="icon"><i class="mdi mdi-cart-outline"></i></span>
                            购物车({$ cartcount $})
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <template>
        <b-navbar spaced shadow wrapper-class="container">
            <template #brand>
                <b-navbar-item tag="div">
                    <h1 class="title">baykeShop</h1>
                </b-navbar-item>
            </template>
            <template #start>
                <b-navbar-item href="{% url 'shop:home' %}">
                    首页
                </b-navbar-item>
                <b-navbar-item href="{% url 'shop:goods' %}" 
                    {% if title == '全部商品' %} active {% endif %}>
                    全部商品
                </b-navbar-item>
                {% shopcates as shopnavs %}
                {% for cate in shopnavs %}
                <b-navbar-dropdown label="{{ cate.name }}">
                    {% for subcate in cate.baykeshopcategory_set.all %}
                    <b-navbar-item href="{% url 'shop:cate-detail' subcate.id %}" 
                        {% if title == subcate.name %} active {% endif %}>
                        {{ subcate.name }}
                    </b-navbar-item>
                    {% endfor %}
                </b-navbar-dropdown>
                {% endfor %}
                <b-navbar-item href="{% url 'baykearticle:article-list' %}">
                    商城资讯
                </b-navbar-item>
            </template>

            <template #end>
                <b-navbar-item tag="div">
                    <form action="{% url 'shop:search' %}" method="get">
                        {% csrf_token %}
                        <b-field>
                            <b-input placeholder="请输入商品关键词搜索" type="search" name="words" icon="magnify" value="{{ request.GET.words }}">
                            </b-input>
                            <p class="control">
                                <b-button type="is-primary" label="搜索" native-type="submit" />
                            </p>
                        </b-field>
                    </form>
                </b-navbar-item>
            </template>
        </b-navbar>
    </template>
</header>

<script>
    var header = new Vue({
        el: '#header',
        delimiters: ['{$', '$}'],
        data: {
            cartcount: Number('{% cartscount request %}')
        },
    })
</script>