{% load static %}


<main class="main page-404">
    <div class="page-content pt-150 pb-150">
        <div class="container">

            <div class="row">



                <div class="col-xl-8 col-lg-10 col-md-12 m-auto text-center">
                    {% if messages %}
                    <div class="col-lg-12 text-center">
                        {% for message in messages %}
            
                        <div    class="alert align-middle alert-{{message.tags}}">
                            
                            <span class="align-middle"> {{message}}</span>
                        </div>
        
                    {% endfor %}
                </div>
                    {% endif %}

                    <p class="mb-20"><img src="{% static 'assets/imgs/page/empty.png'%}" alt="" class="hover-up" /></p>
                    <h1 class="display-2 mb-30">Your Cart is Empty.</h1>
                    <p class="font-lg text-grey-700 mb-30">
                        Add something to make us happy :)<br />
                        {% if user.is_authenticated %}
                        Start<a href="{% url 'categories:shop'%}"> <span> shopping</span></a> Home and computer accessories,shoes, watches, furniture, home supplies... </p>
                        {%else%}
                        Start<a href="{% url 'categories:shop'%}"> <span> shopping</span></a> or <a href="{% url 'accounts:login' %}"><span>login</span></a> to view products in your cart</p>
                        {%endif%}
                    {% comment %} <div class="search-form">
                        <form action="#">
                            <input type="text" placeholder="Search…" />
                            <button type="submit"><i class="fi-rs-search"></i></button>
                        </form>
                    </div> {% endcomment %}
                    <a class="btn btn-default submit-auto-width font-xs hover-up mt-30" href="{% url 'home:index'%}"><i class="fi-rs-home mr-5"></i> Back To Home Page</a>
                </div>
            </div>
        </div>
    </div>
</main>