{% extends "adminlte/base.html" %}
{% import "adminlte/layout.html" as layout with context %}
{% import "adminlte/widgets.html" as widgets with context %}

{% block navbar %}

  {% include "navbar.html" %}

{%- endblock navbar %}


{% block sidebar -%}

  {% include 'sidebar.html' %}
  
  {% if current_user.role.name == "admin" %}
    {% include 'admin/sidebar_menu.html' %}
  {% endif %}

{%- endblock sidebar %}


{% block content_header -%}
  {% include 'content_header.html' %}
{%- endblock content_header %}


{% block content -%}
          <h4 class="page-header">
            AdminLTE Small Boxes
            <small>Small boxes are used for viewing statistics. To create a small box use the <code>widgets.small_box</code> widget.</small>
          </h4>
          <!-- Small boxes (Stat box) -->
          <div class="row">

            {{
              widgets.small_box(
                bgcolor="bg-aqua",
                header=150,
                body="New Orders",
                iconclass="ion ion-bag",
                footerlink="#"
              )
            }}

            {{
              widgets.small_box(
                bgcolor="bg-green",
                header=53,
                body="Bounce Rate",
                iconclass="ion ion-stats-bars",
                footerlink="#"
              )
            }}

            {{
              widgets.small_box(
                bgcolor="bg-yellow",
                header=43,
                body="User Registrations",
                iconclass="ion ion-person-add",
                footerlink="#"
              )
            }}

            {{
              widgets.small_box(
                bgcolor="bg-red",
                header=65,
                body="Unique Visitors",
                iconclass="ion ion-pie-graph",
                footerlink="#"
              )
            }}

          </div><!-- /.row -->

          <!-- Small boxes (Stat box) -->
          <div class="row">

            {{
              widgets.small_box(
                bgcolor="bg-blue",
                header=230,
                body="Sales",
                iconclass="ion ion-ios7-cart-outline",
                footerlink="#"
              )
            }}

            {{
              widgets.small_box(
                bgcolor="bg-purple",
                header=80,
                percentage=True,
                body="Conversion Rate",
                iconclass="ion ion-ios7-briefcase-outline",
                footerlink="#"
              )
            }}

            {{
              widgets.small_box(
                bgcolor="bg-teal",
                header=14,
                body="Notifications",
                iconclass="ion ion-ios7-alarm-outline",
                footerlink="#"
              )
            }}

            {{
              widgets.small_box(
                bgcolor="bg-maroon",
                header=160,
                body="Products",
                iconclass="ion ion-ios7-pricetag-outline",
                footerlink="#"
              )
            }}

          </div><!-- /.row -->
{%- endblock content %}