{% extends "site_base.html" %}

{% block messages %}{% endblock %}

{% block body %}
<section class="fragment-container">
    <h1>Pinax Theme Bootstrap Fragments</h1>

    <h2>
        <div class="variation">With Closed Signup</div>
        <code>_account_bar.html</code>
    </h2>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="topbar-container">
                <div class="nav-container">
                    <div class="mr-auto"></div>
                    {% include "_account_bar.html" %}
                </div>
            </div>
        </nav>
    </header>

    <h2>
        <div class="variation">With Open Signup</div>
        <code>_account_bar.html</code>
    </h2>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="topbar-container">
                <div class="nav-container">
                    <div class="mr-auto"></div>
                    {% include "_account_bar.html" with ACCOUNT_OPEN_SIGNUP=True %}
                </div>
            </div>
        </nav>
    </header>

    <h2>
        <div class="variation">With Dropdown</div>
        <code>_nav.html</code>
    </h2>
    <header>
        <nav>
            <div class="topbar-container">
                <a href="#">Your Site Name</a>
                <button class="expand" type="button" data-toggle="collapse" data-target=".nav-container" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                    <i></i>
                </button>

                <div class="nav-container">
                    <ul class="main-bar">  {# copied in instead of including becuase this demo site is also using _nav.html #}
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="">Dropdown Menu</a>
                            <div class="dropdown-menu">
                                <a href="">Item 1</a>
                                <a href="">Item 2</a>
                                <hr />
                                <a href="">Item 3</a>
                            </div>
                        </li>
                    </ul>
                    {% include "_account_bar.html" with ACCOUNT_OPEN_SIGNUP=True %}
                </div>
            </div>
        </nav>
    </header>

    <h2>
        <code>pagination/_pagination.html</code>
    </h2>
    <div class="pagination-container">
        {% include "pagination/_pagination.html" %}
    </div>


    <h2>
        <code>_messages.html</code>
    </h2>
    <div class="messages-container">
        {% include "_messages.html" %}
    </div>
</section>
{% endblock %}

{% load i18n %}
{% load account_tags %}


<ul class="account-bar">
    {% if request.user.is_authenticated %}
        <li class="user">
            <i class="fas fa-user"></i>
            {% user_display request.user %}
        </li>
        <li class="settings">
            <a href="{% url 'account_settings' %}">
                <i class="fas fa-cog"></i>
                {% trans "Settings" %}
            </a>
        </li>
        <li class="logout">
            <a id="account_logout" href="{% url 'account_logout' %}">
                <i class="fas fa-power-off"></i>
                {% trans "Log out" %}
            </a>
        </li>
    {% else %}
        <li><a href="{% url 'account_login' %}">{% trans "Log in" %}</a></li>
        {% if ACCOUNT_OPEN_SIGNUP %}
            <li><a href="{% url 'account_signup' %}">{% trans "Sign up" %}</a></li>
        {% endif %}
    {% endif %}
</ul>

<form id="accountLogOutForm" style="display: none;" action="{% url 'account_logout' %}" method="POST">
    {% csrf_token %}
</form>

{# Pagination for default django.core.paginator.Paginator #}
{# This template will work with CBV views with ``paginate_by`` specified. #}
{% load i18n %}

{% if is_paginated %}
<nav class="page-navigation" aria-label="page navigation">
    <ul>
        {% if page_obj.has_previous %}
            <li class="prev">
                <a href="?page={{ page_obj.previous_page_number|stringformat:"d" }}{{ getvars }}{{ hashtag }}">
                    <i class="fas fa-long-arrow-alt-left"></i>
                    {% trans "Previous" %}
                </a>
            </li>
        {% else %}
            <li class="prev disabled">
                <a>{% block pagination_previous_label %}<i class="fas fa-long-arrow-alt-left"></i> {% trans "Previous" %}{% endblock %}</a>
            </li>
        {% endif %}
        {% for page in paginator.page_range %}
            <li class="{% ifequal page page_obj.number %}active{% endifequal %}">
                <a href="?page={{ page|stringformat:"d" }}{{ getvars }}{{ hashtag }}">{{ page|stringformat:"d" }}</a>
            </li>
        {% endfor %}
        {% if page_obj.has_next %}
            <li class="next">
                <a href="?page={{ page_obj.next_page_number|stringformat:"d" }}{{ getvars }}{{ hashtag }}">
                    {% trans "Next" %}
                    <i class="fas fa-long-arrow-alt-right"></i>
                </a>
            </li>
        {% else %}
            <li class="next disabled">
                <a>{% block pagination_next_label %}
                    {% trans "Next" %}
                    <i class="fas fa-long-arrow-alt-right"></i>
                    {% endblock %}
                </a>
            </li>
        {% endif %}
    </ul>
</nav>
{% endif %}

{% for message in messages %}
    <div class="message {{ message.tags }}">
        <button type="button" class="close" data-dismiss="message"><i  class="fas fa-times"></i></button>
        {{ message }}
    </div>
{% endfor %}