From 9120f7014799f9cfc248d531d97b5b0ada2bc810 Mon Sep 17 00:00:00 2001
From: Christopher Pickering <cpickering@rhc.net>
Date: Thu, 29 Jul 2021 13:41:34 -0500
Subject: [PATCH] updated formatter and docs

---
 MANIFEST.in                                   |    2 +-
 README.rst                                    |  117 +-
 docs/_static/icon.png                         |  Bin 0 -> 3815 bytes
 docs/conf.py                                  |    4 +-
 docs/djlint/configuration.rst                 |    6 +
 docs/djlint/formatter.rst                     |   51 +
 docs/djlint/rules.rst                         |   60 +
 docs/djlint/usage.rst                         |   54 +
 docs/index.rst                                |   60 +-
 pyproject.toml                                |    2 +-
 setup.py                                      |   11 +-
 src/djlint/__init__.py                        |   40 +-
 src/djlint/formatter/__init__.py              |    1 +
 src/djlint/formatter/compress_html.py         |  116 +
 src/djlint/formatter/expand_html.py           |  201 ++
 src/djlint/formatter/indent_html.py           |  163 +
 src/djlint/reformat.py                        |  261 +-
 src/djlint/rules.yaml                         |    4 +-
 src/djlint/settings.py                        |  201 +-
 tests/bad.html                                |    8 +-
 tests/django_admin/admin/404.html             |   11 +
 tests/django_admin/admin/500.html             |   21 +
 tests/django_admin/admin/actions.html         |   44 +
 tests/django_admin/admin/app_index.html       |   13 +
 tests/django_admin/admin/app_list.html        |   63 +
 .../admin/auth/user/add_form.html             |   13 +
 .../admin/auth/user/change_password.html      |   85 +
 tests/django_admin/admin/base.html            |  122 +
 tests/django_admin/admin/base_site.html       |   13 +
 tests/django_admin/admin/change_form.html     |   97 +
 .../admin/change_form_object_tools.html       |   16 +
 tests/django_admin/admin/change_list.html     |  113 +
 .../admin/change_list_object_tools.html       |   13 +
 .../admin/change_list_results.html            |   59 +
 tests/django_admin/admin/date_hierarchy.html  |   25 +
 .../admin/delete_confirmation.html            |   84 +
 .../admin/delete_selected_confirmation.html   |   80 +
 .../admin/edit_inline/stacked.html            |   53 +
 .../admin/edit_inline/tabular.html            |  110 +
 tests/django_admin/admin/filter.html          |   17 +
 .../django_admin/admin/includes/fieldset.html |   37 +
 .../admin/includes/object_delete_summary.html |    9 +
 tests/django_admin/admin/index.html           |   53 +
 tests/django_admin/admin/invalid_setup.html   |   13 +
 tests/django_admin/admin/login.html           |   64 +
 tests/django_admin/admin/nav_sidebar.html     |   11 +
 tests/django_admin/admin/object_history.html  |   53 +
 tests/django_admin/admin/pagination.html      |   23 +
 tests/django_admin/admin/popup_response.html  |   10 +
 .../admin/prepopulated_fields_js.html         |    2 +
 tests/django_admin/admin/search_form.html     |   44 +
 tests/django_admin/admin/submit_line.html     |   32 +
 .../admin/widgets/clearable_file_input.html   |   21 +
 .../admin/widgets/foreign_key_raw_id.html     |   11 +
 .../admin/widgets/many_to_many_raw_id.html    |    1 +
 tests/django_admin/admin/widgets/radio.html   |    1 +
 .../admin/widgets/related_widget_wrapper.html |   34 +
 .../admin/widgets/split_datetime.html         |    7 +
 tests/django_admin/admin/widgets/url.html     |    9 +
 .../django_admin/registration/logged_out.html |   16 +
 .../registration/password_change_done.html    |   24 +
 .../registration/password_change_form.html    |   71 +
 .../registration/password_reset_complete.html |   16 +
 .../registration/password_reset_confirm.html  |   44 +
 .../registration/password_reset_done.html     |   16 +
 .../registration/password_reset_email.html    |   15 +
 .../registration/password_reset_form.html     |   30 +
 .../admin/cms/extensions/change_form.html     |   17 +
 tests/django_cms/admin/cms/mail/base.html     |   73 +
 tests/django_cms/admin/cms/mail/base.txt      |   10 +
 .../admin/cms/mail/page_user_change.html      |   14 +
 .../admin/cms/mail/page_user_change.txt       |    7 +
 .../admin/cms/page/change_form.html           |  130 +
 .../admin/cms/page/close_frame.html           |   37 +
 .../admin/cms/page/includes/fieldset.html     |    1 +
 .../admin/cms/page/permissions.html           |   75 +
 .../admin/cms/page/plugin/change_form.html    |   16 +
 .../admin/cms/page/plugin/confirm_form.html   |    1 +
 .../cms/page/plugin/delete_confirmation.html  |    3 +
 .../admin/cms/page/plugin/error_form.html     |   17 +
 .../admin/cms/page/plugin/submit_line.html    |   22 +
 .../django_cms/admin/cms/page/submit_row.html |   34 +
 .../admin/cms/page/tree/actions_dropdown.html |  162 +
 .../admin/cms/page/tree/base.html.broken      |  182 +
 .../admin/cms/page/tree/copy_premissions.html |   16 +
 .../admin/cms/page/tree/filter.html           |   13 +
 .../admin/cms/page/tree/legend.html           |   77 +
 .../admin/cms/page/tree/menu.html.brocken     |  282 ++
 .../admin/cms/usersettings/change_form.html   |   50 +
 tests/django_cms/cms/content.html             |    1 +
 tests/django_cms/cms/dummy.html               |    1 +
 tests/django_cms/cms/plugins/alias.html       |    4 +
 tests/django_cms/cms/toolbar/clipboard.html   |    8 +
 tests/django_cms/cms/toolbar/content.html     |    2 +
 tests/django_cms/cms/toolbar/dragbar.html     |   66 +
 tests/django_cms/cms/toolbar/dragitem.html    |   77 +
 .../cms/toolbar/dragitem_extra_menu.html      |   20 +
 .../django_cms/cms/toolbar/dragitem_menu.html |   22 +
 tests/django_cms/cms/toolbar/items/break.html |    3 +
 .../django_cms/cms/toolbar/items/button.html  |    4 +
 .../cms/toolbar/items/button_list.html        |   16 +
 .../cms/toolbar/items/button_modal.html       |    5 +
 .../cms/toolbar/items/button_sideframe.html   |    5 +
 .../cms/toolbar/items/dropdown.html           |   20 +
 .../cms/toolbar/items/dropdown_button.html    |    5 +
 .../cms/toolbar/items/item_ajax.html          |   13 +
 .../cms/toolbar/items/item_link.html          |   10 +
 .../cms/toolbar/items/item_modal.html         |   12 +
 .../cms/toolbar/items/item_sideframe.html     |   12 +
 .../cms/toolbar/items/live_draft.html         |   16 +
 tests/django_cms/cms/toolbar/items/login.html |   26 +
 tests/django_cms/cms/toolbar/items/logo.html  |    6 +
 tests/django_cms/cms/toolbar/items/menu.html  |   15 +
 tests/django_cms/cms/toolbar/plugin.html      |   44 +
 tests/django_cms/cms/toolbar/structure.html   |   16 +
 tests/django_cms/cms/toolbar/toolbar.html     |   39 +
 .../cms/toolbar/toolbar_javascript.html       |  150 +
 .../cms/toolbar/toolbar_with_structure.html   |  106 +
 tests/django_cms/cms/welcome.html             |  127 +
 .../cms/widgets/applicationconfigselect.html  |    8 +
 .../cms/widgets/pageselectwidget.html         |    2 +
 .../cms/widgets/pagesmartlinkwidget.html      |    2 +
 tests/django_cms/cms/wizards/base.html        |   18 +
 tests/django_cms/cms/wizards/create.html      |   28 +
 tests/django_cms/cms/wizards/done.html        |   10 +
 .../cms/wizards/includes/form_fields.html     |   32 +
 tests/django_cms/cms/wizards/start.html       |   22 +
 .../cms/wizards/wizardoptionwidget.html       |   11 +
 tests/django_ledger/account_create.html       |   24 +
 tests/django_ledger/account_create_child.html |   30 +
 tests/django_ledger/account_detail.html       |   29 +
 tests/django_ledger/account_list.html         |   19 +
 tests/django_ledger/account_update.html       |   23 +
 tests/django_ledger/auth/login.html           |   52 +
 tests/django_ledger/balance_sheet.html        |   78 +
 tests/django_ledger/bank_account_create.html  |   24 +
 tests/django_ledger/bank_account_list.html    |   20 +
 tests/django_ledger/bank_account_update.html  |   36 +
 tests/django_ledger/base.html                 |   40 +
 tests/django_ledger/bill_create.html          |  117 +
 tests/django_ledger/bill_delete.html          |   39 +
 tests/django_ledger/bill_detail.html          |  172 +
 tests/django_ledger/bill_list.html            |  127 +
 tests/django_ledger/bill_update.html          |  234 ++
 tests/django_ledger/bill_void.html            |   36 +
 tests/django_ledger/coa_update.html           |   23 +
 tests/django_ledger/customer_create.html      |   22 +
 tests/django_ledger/customer_list.html        |   21 +
 tests/django_ledger/customer_update.html      |   23 +
 tests/django_ledger/data_import_job_list.html |   17 +
 tests/django_ledger/data_import_job_txs.html  |   23 +
 tests/django_ledger/data_import_ofx.html      |   54 +
 tests/django_ledger/entitiy_list.html         |   40 +
 tests/django_ledger/entity_create.html        |   34 +
 tests/django_ledger/entity_dashboard.html     |  120 +
 tests/django_ledger/entity_delete.html        |   34 +
 tests/django_ledger/entity_update.html        |   24 +
 tests/django_ledger/expense_create.html       |   34 +
 tests/django_ledger/expense_list.html         |   27 +
 tests/django_ledger/expense_update.html       |   34 +
 tests/django_ledger/home.html                 |   27 +
 tests/django_ledger/includes/breadcrumbs.html |    8 +
 tests/django_ledger/includes/card_bill.html   |  189 ++
 .../django_ledger/includes/card_customer.html |   47 +
 tests/django_ledger/includes/card_entity.html |   27 +
 .../django_ledger/includes/card_invoice.html  |  169 +
 .../django_ledger/includes/card_markdown.html |   30 +
 tests/django_ledger/includes/card_po.html     |   69 +
 tests/django_ledger/includes/card_vendor.html |   47 +
 tests/django_ledger/includes/footer.html      |   20 +
 tests/django_ledger/includes/messages.html    |   11 +
 tests/django_ledger/includes/nav.html         |   39 +
 tests/django_ledger/includes/page_header.html |   54 +
 tests/django_ledger/includes/widget_bs.html   |   28 +
 tests/django_ledger/includes/widget_ic.html   |   34 +
 .../django_ledger/includes/widget_ratios.html |   72 +
 tests/django_ledger/income_statement.html     |   76 +
 .../django_ledger/inventory_item_create.html  |   34 +
 tests/django_ledger/inventory_item_list.html  |   27 +
 .../django_ledger/inventory_item_update.html  |   34 +
 tests/django_ledger/invoice_create.html       |  104 +
 tests/django_ledger/invoice_delete.html       |   37 +
 tests/django_ledger/invoice_detail.html       |  156 +
 tests/django_ledger/invoice_list.html         |  127 +
 tests/django_ledger/invoice_update.html       |  202 ++
 tests/django_ledger/je_create.html            |   23 +
 tests/django_ledger/je_detail.html            |   22 +
 tests/django_ledger/je_list.html              |   21 +
 tests/django_ledger/je_update.html            |   23 +
 .../layouts/content_layout_1.html             |   24 +
 .../layouts/content_layout_2.html             |   12 +
 tests/django_ledger/ledger_create.html        |   24 +
 tests/django_ledger/ledger_list.html          |   16 +
 tests/django_ledger/ledger_update.html        |   24 +
 tests/django_ledger/pns_list.html             |   27 +
 tests/django_ledger/po_create.html            |   17 +
 tests/django_ledger/po_delete.html            |   37 +
 tests/django_ledger/po_detail.html            |  111 +
 tests/django_ledger/po_list.html              |  127 +
 tests/django_ledger/po_update.html            |   99 +
 tests/django_ledger/product_create.html       |   34 +
 tests/django_ledger/product_list.html         |   27 +
 tests/django_ledger/product_update.html       |   34 +
 .../django_ledger/tags/account_txs_table.html |   63 +
 tests/django_ledger/tags/accounts_table.html  |  120 +
 tests/django_ledger/tags/activity_form.html   |   24 +
 tests/django_ledger/tags/balance_sheet.html   |  192 ++
 .../tags/bank_accounts_table.html             |   57 +
 .../django_ledger/tags/bill_item_formset.html |   71 +
 tests/django_ledger/tags/bill_table.html      |   94 +
 tests/django_ledger/tags/breadcrumbs.html     |   38 +
 tests/django_ledger/tags/chart_container.html |    3 +
 tests/django_ledger/tags/customer_table.html  |   41 +
 .../tags/data_import_job_list_table.html      |   60 +
 .../tags/data_import_job_txs_imported.html    |   32 +
 .../tags/data_import_job_txs_table.html       |   53 +
 tests/django_ledger/tags/date_picker.html     |    8 +
 tests/django_ledger/tags/default_entity.html  |   10 +
 .../tags/expense_item_table.html              |   43 +
 tests/django_ledger/tags/feedback_button.html |   87 +
 tests/django_ledger/tags/filters.html         |   11 +
 tests/django_ledger/tags/icon.html            |    1 +
 .../django_ledger/tags/income_statement.html  |  112 +
 .../tags/inventory_item_table.html            |   45 +
 .../tags/invoice_item_formset.html            |   69 +
 tests/django_ledger/tags/invoice_table.html   |   94 +
 tests/django_ledger/tags/jes_table.html       |   78 +
 tests/django_ledger/tags/ledgers_table.html   |   67 +
 tests/django_ledger/tags/menu.html            |   56 +
 tests/django_ledger/tags/modals.html          |   29 +
 .../django_ledger/tags/period_navigator.html  |   54 +
 tests/django_ledger/tags/pns_table.html       |   51 +
 tests/django_ledger/tags/po_item_formset.html |   91 +
 tests/django_ledger/tags/po_table.html        |   61 +
 tests/django_ledger/tags/txs_table.html       |   46 +
 tests/django_ledger/tags/uom_table.html       |   53 +
 tests/django_ledger/tags/vendor_table.html    |   46 +
 tests/django_ledger/txs.html                  |   51 +
 tests/django_ledger/unit_create.html          |   33 +
 tests/django_ledger/unit_detail.html          |   38 +
 tests/django_ledger/unit_list.html            |   62 +
 tests/django_ledger/unit_update.html          |   33 +
 tests/django_ledger/uom_create.html           |   32 +
 tests/django_ledger/uom_list.html             |   27 +
 tests/django_ledger/uom_update.html           |   34 +
 tests/django_ledger/vendor_create.html        |   22 +
 tests/django_ledger/vendor_list.html          |   20 +
 tests/django_ledger/vendor_update.html        |   23 +
 tests/django_oscar/flatpages/default.html     |   33 +
 tests/django_oscar/oscar/403.html             |   13 +
 tests/django_oscar/oscar/404.html             |   13 +
 tests/django_oscar/oscar/500.html             |   24 +
 tests/django_oscar/oscar/README.rst           |   68 +
 tests/django_oscar/oscar/base.html            |   47 +
 tests/django_oscar/oscar/basket/basket.html   |   33 +
 .../oscar/basket/messages/addition.html       |   14 +
 .../oscar/basket/messages/line_restored.html  |    5 +
 .../oscar/basket/messages/line_saved.html     |    5 +
 .../oscar/basket/messages/new_total.html      |   26 +
 .../oscar/basket/messages/offer_gained.html   |    6 +
 .../oscar/basket/messages/offer_lost.html     |    6 +
 .../oscar/basket/partials/basket_content.html |  277 ++
 .../oscar/basket/partials/basket_quick.html   |   69 +
 .../oscar/basket/partials/basket_totals.html  |  291 ++
 .../django_oscar/oscar/catalogue/browse.html  |  133 +
 .../oscar/catalogue/category.html             |   56 +
 .../django_oscar/oscar/catalogue/detail.html  |  235 ++
 .../partials/add_to_basket_form.html          |   47 +
 .../partials/add_to_basket_form_compact.html  |   18 +
 .../catalogue/partials/add_to_wishlist.html   |   69 +
 .../oscar/catalogue/partials/gallery.html     |   51 +
 .../oscar/catalogue/partials/product.html     |   43 +
 .../oscar/catalogue/partials/review.html      |   77 +
 .../catalogue/partials/stock_record.html      |   35 +
 .../reviews/partials/review_stars.html        |   30 +
 .../catalogue/reviews/review_detail.html      |   45 +
 .../oscar/catalogue/reviews/review_form.html  |   50 +
 .../oscar/catalogue/reviews/review_list.html  |   56 +
 .../catalogue/reviews/review_product.html     |   23 +
 .../django_oscar/oscar/checkout/checkout.html |  173 +
 .../django_oscar/oscar/checkout/gateway.html  |   64 +
 tests/django_oscar/oscar/checkout/layout.html |   45 +
 tests/django_oscar/oscar/checkout/nav.html    |   65 +
 .../oscar/checkout/payment_details.html       |   46 +
 .../django_oscar/oscar/checkout/preview.html  |   37 +
 .../oscar/checkout/shipping_address.html      |  107 +
 .../oscar/checkout/shipping_methods.html      |   69 +
 .../oscar/checkout/thank_you.html             |  225 ++
 .../oscar/checkout/user_address_delete.html   |   38 +
 .../oscar/checkout/user_address_form.html     |   36 +
 .../communication/email/email_detail.html     |   41 +
 .../oscar/communication/email/email_list.html |   31 +
 .../oscar/communication/emails/base.html      |  302 ++
 .../oscar/communication/emails/base.txt       |    4 +
 .../emails/commtype_email_changed_body.html   |   31 +
 .../emails/commtype_email_changed_body.txt    |   11 +
 .../emails/commtype_email_changed_subject.txt |    1 +
 .../emails/commtype_order_placed_body.html    |   85 +
 .../emails/commtype_order_placed_body.txt     |   24 +
 .../emails/commtype_order_placed_subject.txt  |    1 +
 .../commtype_password_changed_body.html       |   29 +
 .../emails/commtype_password_changed_body.txt |   14 +
 .../commtype_password_changed_subject.txt     |    1 +
 .../emails/commtype_password_reset_body.html  |   24 +
 .../emails/commtype_password_reset_body.txt   |    9 +
 .../commtype_password_reset_subject.txt       |    1 +
 .../emails/commtype_product_alert_body.html   |   34 +
 .../emails/commtype_product_alert_body.txt    |   14 +
 ...mtype_product_alert_confirmation_body.html |   21 +
 ...mmtype_product_alert_confirmation_body.txt |   17 +
 ...ype_product_alert_confirmation_subject.txt |    1 +
 .../emails/commtype_product_alert_subject.txt |    1 +
 .../emails/commtype_registration_body.html    |    4 +
 .../emails/commtype_registration_body.txt     |    1 +
 .../emails/commtype_registration_sms.txt      |    0
 .../emails/commtype_registration_subject.txt  |    1 +
 .../communication/notifications/detail.html   |   43 +
 .../communication/notifications/list.html     |   91 +
 .../customer/address/address_delete.html      |   29 +
 .../oscar/customer/address/address_form.html  |   13 +
 .../oscar/customer/address/address_list.html  |   67 +
 .../oscar/customer/alerts/alert_list.html     |   47 +
 .../oscar/customer/alerts/form.html           |    1 +
 .../oscar/customer/alerts/message.html        |    5 +
 .../customer/alerts/message_subject.html      |    4 +
 .../oscar/customer/anon_order.html            |  151 +
 .../oscar/customer/baseaccountpage.html       |   34 +
 .../history/recently_viewed_products.html     |   16 +
 .../oscar/customer/login_registration.html    |   58 +
 .../oscar/customer/order/order_detail.html    |  214 ++
 .../oscar/customer/order/order_list.html      |   84 +
 .../customer/partials/standard_tabs.html      |   40 +
 .../profile/change_password_form.html         |    4 +
 .../oscar/customer/profile/profile.html       |   37 +
 .../customer/profile/profile_delete.html      |   28 +
 .../oscar/customer/profile/profile_form.html  |    4 +
 .../oscar/customer/registration.html          |   42 +
 .../customer/wishlists/wishlists_delete.html  |   48 +
 .../wishlists/wishlists_delete_product.html   |   48 +
 .../customer/wishlists/wishlists_detail.html  |  131 +
 .../customer/wishlists/wishlists_form.html    |   58 +
 .../customer/wishlists/wishlists_list.html    |   54 +
 tests/django_oscar/oscar/dashboard/base.html  |    8 +
 .../attribute_option_group_delete.html        |   77 +
 .../attribute_option_group_form.html          |  168 +
 .../attribute_option_group_list.html          |   44 +
 .../attribute_option_group_row_actions.html   |   24 +
 .../attribute_option_group_row_name.html      |    4 +
 ...ibute_option_group_row_option_summary.html |    4 +
 .../dashboard/catalogue/category_delete.html  |   50 +
 .../dashboard/catalogue/category_form.html    |  131 +
 .../dashboard/catalogue/category_list.html    |   60 +
 .../catalogue/category_row_actions.html       |   32 +
 .../catalogue/messages/product_saved.html     |   47 +
 .../dashboard/catalogue/option_delete.html    |   71 +
 .../dashboard/catalogue/option_form.html      |   99 +
 .../dashboard/catalogue/option_list.html      |   43 +
 .../catalogue/option_row_actions.html         |   24 +
 .../dashboard/catalogue/option_row_name.html  |    4 +
 .../catalogue/product_class_delete.html       |   54 +
 .../catalogue/product_class_form.html         |  160 +
 .../catalogue/product_class_list.html         |   93 +
 .../dashboard/catalogue/product_delete.html   |   73 +
 .../dashboard/catalogue/product_list.html     |  102 +
 .../catalogue/product_row_actions.html        |   25 +
 .../catalogue/product_row_image.html          |   14 +
 .../catalogue/product_row_stockrecords.html   |    5 +
 .../catalogue/product_row_title.html          |    4 +
 .../catalogue/product_row_variants.html       |    5 +
 .../dashboard/catalogue/product_update.html   |  447 +++
 .../dashboard/catalogue/stockalert_list.html  |  101 +
 .../oscar/dashboard/comms/detail.html         |  183 ++
 .../oscar/dashboard/comms/list.html           |   66 +
 tests/django_oscar/oscar/dashboard/index.html |  270 ++
 .../django_oscar/oscar/dashboard/layout.html  |  166 +
 tests/django_oscar/oscar/dashboard/login.html |   35 +
 .../oscar/dashboard/offers/benefit_form.html  |   34 +
 .../dashboard/offers/condition_form.html      |   31 +
 .../oscar/dashboard/offers/metadata_form.html |    7 +
 .../oscar/dashboard/offers/offer_delete.html  |   48 +
 .../oscar/dashboard/offers/offer_detail.html  |  270 ++
 .../oscar/dashboard/offers/offer_list.html    |  226 ++
 .../oscar/dashboard/offers/progress.html      |   49 +
 .../dashboard/offers/restrictions_form.html   |   11 +
 .../oscar/dashboard/offers/step_form.html     |  105 +
 .../oscar/dashboard/offers/summary.html       |   87 +
 .../oscar/dashboard/orders/line_detail.html   |  272 ++
 .../oscar/dashboard/orders/order_detail.html  | 1088 ++++++
 .../oscar/dashboard/orders/order_list.html    |  231 ++
 .../orders/shippingaddress_form.html          |   49 +
 .../oscar/dashboard/orders/statistics.html    |   87 +
 .../oscar/dashboard/pages/delete.html         |   61 +
 .../oscar/dashboard/pages/index.html          |  122 +
 .../oscar/dashboard/pages/messages/saved.html |   16 +
 .../oscar/dashboard/pages/update.html         |   43 +
 .../partials/advanced_search_modal.html       |   28 +
 .../dashboard/partials/alert_messages.html    |   40 +
 .../oscar/dashboard/partials/form.html        |   22 +
 .../oscar/dashboard/partials/form_field.html  |   60 +
 .../oscar/dashboard/partials/form_fields.html |   19 +
 .../partials/form_fields_inline.html          |   20 +
 .../oscar/dashboard/partials/pagination.html  |   31 +
 .../dashboard/partials/product_images.html    |   37 +
 .../oscar/dashboard/partials/stock_info.html  |   13 +
 .../partners/messages/user_unlinked.html      |    7 +
 .../dashboard/partners/partner_delete.html    |   48 +
 .../dashboard/partners/partner_form.html      |   32 +
 .../dashboard/partners/partner_list.html      |  138 +
 .../dashboard/partners/partner_manage.html    |   88 +
 .../dashboard/partners/partner_user_form.html |   50 +
 .../dashboard/partners/partner_user_list.html |   86 +
 .../partners/partner_user_select.html         |  102 +
 .../ranges/messages/range_products_saved.html |   55 +
 .../ranges/messages/range_saved.html          |   16 +
 .../oscar/dashboard/ranges/range_delete.html  |   51 +
 .../oscar/dashboard/ranges/range_form.html    |   58 +
 .../oscar/dashboard/ranges/range_list.html    |  118 +
 .../dashboard/ranges/range_product_list.html  |  185 ++
 .../oscar/dashboard/reports/index.html        |   51 +
 .../reports/partials/offer_report.html        |   27 +
 .../reports/partials/open_basket_report.html  |   43 +
 .../reports/partials/order_report.html        |   47 +
 .../reports/partials/product_report.html      |   25 +
 .../partials/submitted_basket_report.html     |   41 +
 .../reports/partials/user_report.html         |   57 +
 .../reports/partials/voucher_report.html      |   31 +
 .../dashboard/reviews/review_delete.html      |   95 +
 .../oscar/dashboard/reviews/review_list.html  |  176 +
 .../dashboard/reviews/review_update.html      |   96 +
 .../shipping/messages/band_created.html       |    8 +
 .../shipping/messages/band_deleted.html       |    7 +
 .../shipping/messages/band_updated.html       |    4 +
 .../shipping/messages/method_created.html     |    8 +
 .../shipping/messages/method_deleted.html     |    8 +
 .../shipping/messages/method_updated.html     |    8 +
 .../shipping/weight_band_delete.html          |   64 +
 .../dashboard/shipping/weight_band_form.html  |   52 +
 .../shipping/weight_based_delete.html         |   48 +
 .../shipping/weight_based_detail.html         |  115 +
 .../dashboard/shipping/weight_based_form.html |   63 +
 .../dashboard/shipping/weight_based_list.html |   78 +
 tests/django_oscar/oscar/dashboard/table.html |   33 +
 .../oscar/dashboard/users/alerts/delete.html  |   62 +
 .../oscar/dashboard/users/alerts/list.html    |  114 +
 .../users/alerts/partials/alert.html          |   52 +
 .../oscar/dashboard/users/alerts/update.html  |   56 +
 .../oscar/dashboard/users/detail.html         |  310 ++
 .../oscar/dashboard/users/index.html          |   66 +
 .../oscar/dashboard/users/table.html          |   31 +
 .../dashboard/users/user_row_actions.html     |    4 +
 .../dashboard/users/user_row_checkbox.html    |    1 +
 .../partials/voucher_details_table.html       |   45 +
 .../partials/voucher_set_details_table.html   |   66 +
 .../dashboard/vouchers/voucher_delete.html    |   72 +
 .../dashboard/vouchers/voucher_detail.html    |  212 ++
 .../dashboard/vouchers/voucher_form.html      |   61 +
 .../dashboard/vouchers/voucher_list.html      |  220 ++
 .../vouchers/voucher_set_delete.html          |   59 +
 .../vouchers/voucher_set_detail.html          |  222 ++
 .../dashboard/vouchers/voucher_set_form.html  |   61 +
 .../dashboard/vouchers/voucher_set_list.html  |  113 +
 .../dashboard/widgets/popup_response.html     |   10 +
 .../related_multiple_widget_wrapper.html      |   28 +
 .../widgets/related_widget_wrapper.html       |   26 +
 tests/django_oscar/oscar/error.html           |   23 +
 .../oscar/forms/widgets/date_time_picker.html |   14 +
 .../forms/widgets/image_input_widget.html     |   18 +
 tests/django_oscar/oscar/layout.html          |   60 +
 tests/django_oscar/oscar/layout_2_col.html    |   31 +
 tests/django_oscar/oscar/layout_3_col.html    |   28 +
 tests/django_oscar/oscar/login_forbidden.html |    7 +
 tests/django_oscar/oscar/offer/detail.html    |   68 +
 tests/django_oscar/oscar/offer/list.html      |   52 +
 tests/django_oscar/oscar/offer/range.html     |   40 +
 .../oscar/order/partials/basket_totals.html   |  190 ++
 .../oscar/partials/alert_messages.html        |   39 +
 tests/django_oscar/oscar/partials/brand.html  |    8 +
 .../oscar/partials/extrascripts.html          |    4 +
 tests/django_oscar/oscar/partials/footer.html |    7 +
 .../oscar/partials/footer_checkout.html       |    3 +
 tests/django_oscar/oscar/partials/form.html   |   24 +
 .../oscar/partials/form_field.html            |   62 +
 .../oscar/partials/form_fields.html           |   17 +
 .../oscar/partials/form_fields_inline.html    |   20 +
 .../oscar/partials/google_analytics.html      |   15 +
 .../google_analytics_transaction.html         |   24 +
 .../oscar/partials/mini_basket.html           |   27 +
 .../oscar/partials/nav_accounts.html          |   88 +
 .../oscar/partials/nav_checkout.html          |   35 +
 .../oscar/partials/nav_primary.html           |   79 +
 .../oscar/partials/pagination.html            |   31 +
 tests/django_oscar/oscar/partials/search.html |    7 +
 .../registration/password_reset_complete.html |   35 +
 .../registration/password_reset_confirm.html  |   46 +
 .../registration/password_reset_done.html     |   38 +
 .../registration/password_reset_form.html     |   34 +
 .../search/indexes/product/item_text.txt      |    3 +
 .../oscar/search/partials/facet.html          |   25 +
 tests/django_oscar/oscar/search/results.html  |  105 +
 tests/django_rest/admin.html                  |  316 ++
 tests/django_rest/admin/detail.html           |   13 +
 tests/django_rest/admin/dict_value.html       |   11 +
 tests/django_rest/admin/list.html             |   29 +
 tests/django_rest/admin/list_value.html       |   11 +
 .../django_rest/admin/simple_list_value.html  |    5 +
 tests/django_rest/api.html                    |    2 +
 tests/django_rest/base.html                   |  372 +++
 tests/django_rest/docs/auth/basic.html        |   46 +
 tests/django_rest/docs/auth/session.html      |   41 +
 tests/django_rest/docs/auth/token.html        |   74 +
 tests/django_rest/docs/document.html          |   31 +
 tests/django_rest/docs/error.html             |   71 +
 tests/django_rest/docs/index.html             |   51 +
 tests/django_rest/docs/interact.html          |   59 +
 .../docs/langs/javascript-intro.html          |    7 +
 tests/django_rest/docs/langs/javascript.html  |   17 +
 .../django_rest/docs/langs/python-intro.html  |    5 +
 tests/django_rest/docs/langs/python.html      |   15 +
 tests/django_rest/docs/langs/shell-intro.html |    5 +
 tests/django_rest/docs/langs/shell.html       |    8 +
 tests/django_rest/docs/link.html              |  194 ++
 tests/django_rest/docs/sidebar.html           |   89 +
 tests/django_rest/filters/base.html           |   18 +
 tests/django_rest/filters/ordering.html       |   17 +
 tests/django_rest/filters/search.html         |   15 +
 tests/django_rest/horizontal/checkbox.html    |   18 +
 .../horizontal/checkbox_multiple.html         |   41 +
 tests/django_rest/horizontal/dict_field.html  |   12 +
 tests/django_rest/horizontal/fieldset.html    |   16 +
 tests/django_rest/horizontal/form.html        |    6 +
 tests/django_rest/horizontal/input.html       |   21 +
 tests/django_rest/horizontal/list_field.html  |   12 +
 .../django_rest/horizontal/list_fieldset.html |   14 +
 tests/django_rest/horizontal/radio.html       |   60 +
 tests/django_rest/horizontal/select.html      |   41 +
 .../horizontal/select_multiple.html           |   40 +
 tests/django_rest/horizontal/textarea.html    |   21 +
 tests/django_rest/inline/checkbox.html        |   10 +
 .../django_rest/inline/checkbox_multiple.html |   20 +
 tests/django_rest/inline/dict_field.html      |   10 +
 tests/django_rest/inline/fieldset.html        |    6 +
 tests/django_rest/inline/form.html            |    6 +
 tests/django_rest/inline/input.html           |   16 +
 tests/django_rest/inline/list_field.html      |   10 +
 tests/django_rest/inline/list_fieldset.html   |    1 +
 tests/django_rest/inline/radio.html           |   32 +
 tests/django_rest/inline/select.html          |   33 +
 tests/django_rest/inline/select_multiple.html |   32 +
 tests/django_rest/inline/textarea.html        |   11 +
 tests/django_rest/login.html                  |    2 +
 tests/django_rest/login_base.html             |   83 +
 tests/django_rest/pagination/numbers.html     |   47 +
 .../pagination/previous_and_next.html         |   20 +
 tests/django_rest/raw_data_form.html          |   11 +
 tests/django_rest/schema.js                   |    3 +
 tests/django_rest/vertical/checkbox.html      |   16 +
 .../vertical/checkbox_multiple.html           |   43 +
 tests/django_rest/vertical/dict_field.html    |   12 +
 tests/django_rest/vertical/fieldset.html      |   15 +
 tests/django_rest/vertical/form.html          |    6 +
 tests/django_rest/vertical/input.html         |   21 +
 tests/django_rest/vertical/list_field.html    |   12 +
 tests/django_rest/vertical/list_fieldset.html |   12 +
 tests/django_rest/vertical/radio.html         |   62 +
 tests/django_rest/vertical/select.html        |   41 +
 .../django_rest/vertical/select_multiple.html |   40 +
 tests/django_rest/vertical/textarea.html      |   21 +
 .../flask_admin/bootstrap2/admin/actions.html |   40 +
 tests/flask_admin/bootstrap2/admin/base.html  |   79 +
 .../bootstrap2/admin/file/form.html           |    6 +
 .../bootstrap2/admin/file/list.html           |  215 ++
 .../bootstrap2/admin/file/modals/form.html    |   15 +
 tests/flask_admin/bootstrap2/admin/index.html |    2 +
 .../flask_admin/bootstrap2/admin/layout.html  |  104 +
 tests/flask_admin/bootstrap2/admin/lib.html   |  267 ++
 .../flask_admin/bootstrap2/admin/master.html  |    1 +
 .../bootstrap2/admin/model/create.html        |   26 +
 .../bootstrap2/admin/model/details.html       |   54 +
 .../bootstrap2/admin/model/edit.html          |   40 +
 .../admin/model/inline_field_list.html        |   14 +
 .../bootstrap2/admin/model/inline_form.html   |    4 +
 .../admin/model/inline_list_base.html         |   55 +
 .../bootstrap2/admin/model/layout.html        |  130 +
 .../bootstrap2/admin/model/list.html          |  194 ++
 .../bootstrap2/admin/model/modals/create.html |   21 +
 .../admin/model/modals/details.html           |   36 +
 .../bootstrap2/admin/model/modals/edit.html   |   21 +
 .../bootstrap2/admin/model/row_actions.html   |   37 +
 .../bootstrap2/admin/rediscli/console.html    |   24 +
 .../bootstrap2/admin/rediscli/response.html   |   35 +
 .../flask_admin/bootstrap2/admin/static.html  |    3 +
 .../flask_admin/bootstrap3/admin/actions.html |   40 +
 tests/flask_admin/bootstrap3/admin/base.html  |   96 +
 .../bootstrap3/admin/file/form.html           |    6 +
 .../bootstrap3/admin/file/list.html           |  211 ++
 .../bootstrap3/admin/file/modals/form.html    |   19 +
 tests/flask_admin/bootstrap3/admin/index.html |    2 +
 .../flask_admin/bootstrap3/admin/layout.html  |  108 +
 tests/flask_admin/bootstrap3/admin/lib.html   |  262 ++
 .../flask_admin/bootstrap3/admin/master.html  |    1 +
 .../bootstrap3/admin/model/create.html        |   26 +
 .../bootstrap3/admin/model/details.html       |   52 +
 .../bootstrap3/admin/model/edit.html          |   40 +
 .../admin/model/inline_field_list.html        |   14 +
 .../bootstrap3/admin/model/inline_form.html   |    4 +
 .../admin/model/inline_list_base.html         |   61 +
 .../bootstrap3/admin/model/layout.html        |  136 +
 .../bootstrap3/admin/model/list.html          |  196 ++
 .../bootstrap3/admin/model/modals/create.html |   23 +
 .../admin/model/modals/details.html           |   38 +
 .../bootstrap3/admin/model/modals/edit.html   |   25 +
 .../bootstrap3/admin/model/row_actions.html   |   37 +
 .../bootstrap3/admin/rediscli/console.html    |   24 +
 .../bootstrap3/admin/rediscli/response.html   |   35 +
 .../flask_admin/bootstrap3/admin/static.html  |    3 +
 .../flask_admin/bootstrap4/admin/actions.html |   43 +
 tests/flask_admin/bootstrap4/admin/base.html  |   99 +
 .../bootstrap4/admin/file/form.html           |    6 +
 .../bootstrap4/admin/file/list.html           |  206 ++
 .../bootstrap4/admin/file/modals/form.html    |   19 +
 tests/flask_admin/bootstrap4/admin/index.html |    2 +
 .../flask_admin/bootstrap4/admin/layout.html  |  116 +
 tests/flask_admin/bootstrap4/admin/lib.html   |  313 ++
 .../flask_admin/bootstrap4/admin/master.html  |    1 +
 .../bootstrap4/admin/model/create.html        |   30 +
 .../bootstrap4/admin/model/details.html       |   58 +
 .../bootstrap4/admin/model/edit.html          |   44 +
 .../admin/model/inline_field_list.html        |   14 +
 .../bootstrap4/admin/model/inline_form.html   |    4 +
 .../admin/model/inline_list_base.html         |   62 +
 .../bootstrap4/admin/model/layout.html        |  138 +
 .../bootstrap4/admin/model/list.html          |  198 ++
 .../bootstrap4/admin/model/modals/create.html |   31 +
 .../admin/model/modals/details.html           |   40 +
 .../bootstrap4/admin/model/modals/edit.html   |   27 +
 .../bootstrap4/admin/model/row_actions.html   |   37 +
 .../bootstrap4/admin/rediscli/console.html    |   24 +
 .../bootstrap4/admin/rediscli/response.html   |   35 +
 .../flask_admin/bootstrap4/admin/static.html  |    3 +
 tests/jinja_adminlte/calendar.html            |  345 ++
 tests/jinja_adminlte/charts-chartjs.html      |  383 +++
 tests/jinja_adminlte/charts-flot.html         |  483 +++
 tests/jinja_adminlte/charts-inline.html       |  611 ++++
 tests/jinja_adminlte/examples-404.html        |   85 +
 tests/jinja_adminlte/examples-500.html        |   83 +
 tests/jinja_adminlte/examples-blank.html      |   83 +
 tests/jinja_adminlte/examples-contacts.html   |  572 ++++
 tests/jinja_adminlte/examples-e-commerce.html |  275 ++
 .../examples-forgot-password.html             |   72 +
 .../examples-invoice-print.html               |  238 ++
 tests/jinja_adminlte/examples-invoice.html    |  313 ++
 .../examples-language-menu.html               |   83 +
 .../examples-legacy-user-menu.html            |   81 +
 tests/jinja_adminlte/examples-lockscreen.html |   77 +
 tests/jinja_adminlte/examples-login.html      |  105 +
 tests/jinja_adminlte/examples-profile.html    |  566 ++++
 .../jinja_adminlte/examples-project-add.html  |  167 +
 .../examples-project-detail.html              |  257 ++
 .../jinja_adminlte/examples-project-edit.html |  278 ++
 tests/jinja_adminlte/examples-projects.html   |  679 ++++
 .../examples-recover-password.html            |   75 +
 tests/jinja_adminlte/examples-register.html   |  114 +
 tests/jinja_adminlte/forms-advanced.html      | 1007 ++++++
 tests/jinja_adminlte/forms-editors.html       |  115 +
 tests/jinja_adminlte/forms-general.html       |  874 +++++
 tests/jinja_adminlte/forms-validation.html    |  176 +
 tests/jinja_adminlte/gallery.html             |  404 +++
 tests/jinja_adminlte/includes/footer.html     |   17 +
 tests/jinja_adminlte/includes/navigation.html |  170 +
 tests/jinja_adminlte/includes/scripts.html    |   34 +
 tests/jinja_adminlte/includes/sidebar.html    |  685 ++++
 tests/jinja_adminlte/index.html               |  871 +++++
 tests/jinja_adminlte/index2.html              | 1283 ++++++++
 tests/jinja_adminlte/index3.html              |  333 ++
 tests/jinja_adminlte/layout-boxed.html        |   94 +
 .../layout-collapsed-sidebar.html             |   94 +
 tests/jinja_adminlte/layout-fixed-footer.html |   94 +
 .../jinja_adminlte/layout-fixed-sidebar.html  |   98 +
 tests/jinja_adminlte/layout-fixed-topnav.html |   94 +
 .../layout-top-nav-sidebar.html               |  133 +
 .../layouts/base-fullscreen.html              |   21 +
 tests/jinja_adminlte/layouts/base.html        |   31 +
 tests/jinja_adminlte/login.html               |  105 +
 tests/jinja_adminlte/mailbox-compose.html     |  257 ++
 tests/jinja_adminlte/mailbox-read-mail.html   |  354 ++
 tests/jinja_adminlte/mailbox.html             |  718 ++++
 tests/jinja_adminlte/page-403.html            |   85 +
 tests/jinja_adminlte/page-404.html            |   84 +
 tests/jinja_adminlte/page-500.html            |   83 +
 tests/jinja_adminlte/page-blank.html          |   83 +
 tests/jinja_adminlte/register.html            |  114 +
 tests/jinja_adminlte/tables-data.html         | 2128 ++++++++++++
 tests/jinja_adminlte/tables-jsgrid.html       |   94 +
 tests/jinja_adminlte/tables-simple.html       | 1075 ++++++
 tests/jinja_adminlte/ui-buttons.html          | 2256 +++++++++++++
 tests/jinja_adminlte/ui-general.html          | 1562 +++++++++
 tests/jinja_adminlte/ui-icons.html            |   83 +
 tests/jinja_adminlte/ui-modals.html           |  774 +++++
 tests/jinja_adminlte/ui-navbar.html           | 1116 +++++++
 tests/jinja_adminlte/ui-ribbons.html          |  277 ++
 tests/jinja_adminlte/ui-sliders.html          |  363 ++
 tests/jinja_adminlte/ui-timeline.html         |  194 ++
 tests/jinja_adminlte/widgets.html             | 2913 +++++++++++++++++
 tests/test_djlint.py                          |   26 +
 tox.ini                                       |    4 +
 705 files changed, 61642 insertions(+), 382 deletions(-)
 create mode 100644 docs/_static/icon.png
 create mode 100644 docs/djlint/configuration.rst
 create mode 100644 docs/djlint/formatter.rst
 create mode 100644 docs/djlint/rules.rst
 create mode 100644 docs/djlint/usage.rst
 create mode 100644 src/djlint/formatter/__init__.py
 create mode 100644 src/djlint/formatter/compress_html.py
 create mode 100644 src/djlint/formatter/expand_html.py
 create mode 100644 src/djlint/formatter/indent_html.py
 create mode 100644 tests/django_admin/admin/404.html
 create mode 100644 tests/django_admin/admin/500.html
 create mode 100644 tests/django_admin/admin/actions.html
 create mode 100644 tests/django_admin/admin/app_index.html
 create mode 100644 tests/django_admin/admin/app_list.html
 create mode 100644 tests/django_admin/admin/auth/user/add_form.html
 create mode 100644 tests/django_admin/admin/auth/user/change_password.html
 create mode 100644 tests/django_admin/admin/base.html
 create mode 100644 tests/django_admin/admin/base_site.html
 create mode 100644 tests/django_admin/admin/change_form.html
 create mode 100644 tests/django_admin/admin/change_form_object_tools.html
 create mode 100644 tests/django_admin/admin/change_list.html
 create mode 100644 tests/django_admin/admin/change_list_object_tools.html
 create mode 100644 tests/django_admin/admin/change_list_results.html
 create mode 100644 tests/django_admin/admin/date_hierarchy.html
 create mode 100644 tests/django_admin/admin/delete_confirmation.html
 create mode 100644 tests/django_admin/admin/delete_selected_confirmation.html
 create mode 100644 tests/django_admin/admin/edit_inline/stacked.html
 create mode 100644 tests/django_admin/admin/edit_inline/tabular.html
 create mode 100644 tests/django_admin/admin/filter.html
 create mode 100644 tests/django_admin/admin/includes/fieldset.html
 create mode 100644 tests/django_admin/admin/includes/object_delete_summary.html
 create mode 100644 tests/django_admin/admin/index.html
 create mode 100644 tests/django_admin/admin/invalid_setup.html
 create mode 100644 tests/django_admin/admin/login.html
 create mode 100644 tests/django_admin/admin/nav_sidebar.html
 create mode 100644 tests/django_admin/admin/object_history.html
 create mode 100644 tests/django_admin/admin/pagination.html
 create mode 100644 tests/django_admin/admin/popup_response.html
 create mode 100644 tests/django_admin/admin/prepopulated_fields_js.html
 create mode 100644 tests/django_admin/admin/search_form.html
 create mode 100644 tests/django_admin/admin/submit_line.html
 create mode 100644 tests/django_admin/admin/widgets/clearable_file_input.html
 create mode 100644 tests/django_admin/admin/widgets/foreign_key_raw_id.html
 create mode 100644 tests/django_admin/admin/widgets/many_to_many_raw_id.html
 create mode 100644 tests/django_admin/admin/widgets/radio.html
 create mode 100644 tests/django_admin/admin/widgets/related_widget_wrapper.html
 create mode 100644 tests/django_admin/admin/widgets/split_datetime.html
 create mode 100644 tests/django_admin/admin/widgets/url.html
 create mode 100644 tests/django_admin/registration/logged_out.html
 create mode 100644 tests/django_admin/registration/password_change_done.html
 create mode 100644 tests/django_admin/registration/password_change_form.html
 create mode 100644 tests/django_admin/registration/password_reset_complete.html
 create mode 100644 tests/django_admin/registration/password_reset_confirm.html
 create mode 100644 tests/django_admin/registration/password_reset_done.html
 create mode 100644 tests/django_admin/registration/password_reset_email.html
 create mode 100644 tests/django_admin/registration/password_reset_form.html
 create mode 100644 tests/django_cms/admin/cms/extensions/change_form.html
 create mode 100644 tests/django_cms/admin/cms/mail/base.html
 create mode 100644 tests/django_cms/admin/cms/mail/base.txt
 create mode 100644 tests/django_cms/admin/cms/mail/page_user_change.html
 create mode 100644 tests/django_cms/admin/cms/mail/page_user_change.txt
 create mode 100644 tests/django_cms/admin/cms/page/change_form.html
 create mode 100644 tests/django_cms/admin/cms/page/close_frame.html
 create mode 100644 tests/django_cms/admin/cms/page/includes/fieldset.html
 create mode 100644 tests/django_cms/admin/cms/page/permissions.html
 create mode 100644 tests/django_cms/admin/cms/page/plugin/change_form.html
 create mode 100644 tests/django_cms/admin/cms/page/plugin/confirm_form.html
 create mode 100644 tests/django_cms/admin/cms/page/plugin/delete_confirmation.html
 create mode 100644 tests/django_cms/admin/cms/page/plugin/error_form.html
 create mode 100644 tests/django_cms/admin/cms/page/plugin/submit_line.html
 create mode 100644 tests/django_cms/admin/cms/page/submit_row.html
 create mode 100644 tests/django_cms/admin/cms/page/tree/actions_dropdown.html
 create mode 100644 tests/django_cms/admin/cms/page/tree/base.html.broken
 create mode 100644 tests/django_cms/admin/cms/page/tree/copy_premissions.html
 create mode 100644 tests/django_cms/admin/cms/page/tree/filter.html
 create mode 100644 tests/django_cms/admin/cms/page/tree/legend.html
 create mode 100644 tests/django_cms/admin/cms/page/tree/menu.html.brocken
 create mode 100644 tests/django_cms/admin/cms/usersettings/change_form.html
 create mode 100644 tests/django_cms/cms/content.html
 create mode 100644 tests/django_cms/cms/dummy.html
 create mode 100644 tests/django_cms/cms/plugins/alias.html
 create mode 100644 tests/django_cms/cms/toolbar/clipboard.html
 create mode 100644 tests/django_cms/cms/toolbar/content.html
 create mode 100644 tests/django_cms/cms/toolbar/dragbar.html
 create mode 100644 tests/django_cms/cms/toolbar/dragitem.html
 create mode 100644 tests/django_cms/cms/toolbar/dragitem_extra_menu.html
 create mode 100644 tests/django_cms/cms/toolbar/dragitem_menu.html
 create mode 100644 tests/django_cms/cms/toolbar/items/break.html
 create mode 100644 tests/django_cms/cms/toolbar/items/button.html
 create mode 100644 tests/django_cms/cms/toolbar/items/button_list.html
 create mode 100644 tests/django_cms/cms/toolbar/items/button_modal.html
 create mode 100644 tests/django_cms/cms/toolbar/items/button_sideframe.html
 create mode 100644 tests/django_cms/cms/toolbar/items/dropdown.html
 create mode 100644 tests/django_cms/cms/toolbar/items/dropdown_button.html
 create mode 100644 tests/django_cms/cms/toolbar/items/item_ajax.html
 create mode 100644 tests/django_cms/cms/toolbar/items/item_link.html
 create mode 100644 tests/django_cms/cms/toolbar/items/item_modal.html
 create mode 100644 tests/django_cms/cms/toolbar/items/item_sideframe.html
 create mode 100644 tests/django_cms/cms/toolbar/items/live_draft.html
 create mode 100644 tests/django_cms/cms/toolbar/items/login.html
 create mode 100644 tests/django_cms/cms/toolbar/items/logo.html
 create mode 100644 tests/django_cms/cms/toolbar/items/menu.html
 create mode 100644 tests/django_cms/cms/toolbar/plugin.html
 create mode 100644 tests/django_cms/cms/toolbar/structure.html
 create mode 100644 tests/django_cms/cms/toolbar/toolbar.html
 create mode 100644 tests/django_cms/cms/toolbar/toolbar_javascript.html
 create mode 100644 tests/django_cms/cms/toolbar/toolbar_with_structure.html
 create mode 100644 tests/django_cms/cms/welcome.html
 create mode 100644 tests/django_cms/cms/widgets/applicationconfigselect.html
 create mode 100644 tests/django_cms/cms/widgets/pageselectwidget.html
 create mode 100644 tests/django_cms/cms/widgets/pagesmartlinkwidget.html
 create mode 100755 tests/django_cms/cms/wizards/base.html
 create mode 100755 tests/django_cms/cms/wizards/create.html
 create mode 100644 tests/django_cms/cms/wizards/done.html
 create mode 100755 tests/django_cms/cms/wizards/includes/form_fields.html
 create mode 100755 tests/django_cms/cms/wizards/start.html
 create mode 100644 tests/django_cms/cms/wizards/wizardoptionwidget.html
 create mode 100644 tests/django_ledger/account_create.html
 create mode 100644 tests/django_ledger/account_create_child.html
 create mode 100644 tests/django_ledger/account_detail.html
 create mode 100644 tests/django_ledger/account_list.html
 create mode 100644 tests/django_ledger/account_update.html
 create mode 100644 tests/django_ledger/auth/login.html
 create mode 100644 tests/django_ledger/balance_sheet.html
 create mode 100644 tests/django_ledger/bank_account_create.html
 create mode 100644 tests/django_ledger/bank_account_list.html
 create mode 100644 tests/django_ledger/bank_account_update.html
 create mode 100644 tests/django_ledger/base.html
 create mode 100644 tests/django_ledger/bill_create.html
 create mode 100644 tests/django_ledger/bill_delete.html
 create mode 100644 tests/django_ledger/bill_detail.html
 create mode 100644 tests/django_ledger/bill_list.html
 create mode 100644 tests/django_ledger/bill_update.html
 create mode 100644 tests/django_ledger/bill_void.html
 create mode 100644 tests/django_ledger/coa_update.html
 create mode 100644 tests/django_ledger/customer_create.html
 create mode 100644 tests/django_ledger/customer_list.html
 create mode 100644 tests/django_ledger/customer_update.html
 create mode 100644 tests/django_ledger/data_import_job_list.html
 create mode 100644 tests/django_ledger/data_import_job_txs.html
 create mode 100644 tests/django_ledger/data_import_ofx.html
 create mode 100644 tests/django_ledger/entitiy_list.html
 create mode 100644 tests/django_ledger/entity_create.html
 create mode 100644 tests/django_ledger/entity_dashboard.html
 create mode 100644 tests/django_ledger/entity_delete.html
 create mode 100644 tests/django_ledger/entity_update.html
 create mode 100644 tests/django_ledger/expense_create.html
 create mode 100644 tests/django_ledger/expense_list.html
 create mode 100644 tests/django_ledger/expense_update.html
 create mode 100644 tests/django_ledger/home.html
 create mode 100644 tests/django_ledger/includes/breadcrumbs.html
 create mode 100644 tests/django_ledger/includes/card_bill.html
 create mode 100644 tests/django_ledger/includes/card_customer.html
 create mode 100644 tests/django_ledger/includes/card_entity.html
 create mode 100644 tests/django_ledger/includes/card_invoice.html
 create mode 100644 tests/django_ledger/includes/card_markdown.html
 create mode 100644 tests/django_ledger/includes/card_po.html
 create mode 100644 tests/django_ledger/includes/card_vendor.html
 create mode 100644 tests/django_ledger/includes/footer.html
 create mode 100644 tests/django_ledger/includes/messages.html
 create mode 100644 tests/django_ledger/includes/nav.html
 create mode 100644 tests/django_ledger/includes/page_header.html
 create mode 100644 tests/django_ledger/includes/widget_bs.html
 create mode 100644 tests/django_ledger/includes/widget_ic.html
 create mode 100644 tests/django_ledger/includes/widget_ratios.html
 create mode 100644 tests/django_ledger/income_statement.html
 create mode 100644 tests/django_ledger/inventory_item_create.html
 create mode 100644 tests/django_ledger/inventory_item_list.html
 create mode 100644 tests/django_ledger/inventory_item_update.html
 create mode 100644 tests/django_ledger/invoice_create.html
 create mode 100644 tests/django_ledger/invoice_delete.html
 create mode 100644 tests/django_ledger/invoice_detail.html
 create mode 100644 tests/django_ledger/invoice_list.html
 create mode 100644 tests/django_ledger/invoice_update.html
 create mode 100644 tests/django_ledger/je_create.html
 create mode 100644 tests/django_ledger/je_detail.html
 create mode 100644 tests/django_ledger/je_list.html
 create mode 100644 tests/django_ledger/je_update.html
 create mode 100644 tests/django_ledger/layouts/content_layout_1.html
 create mode 100644 tests/django_ledger/layouts/content_layout_2.html
 create mode 100644 tests/django_ledger/ledger_create.html
 create mode 100644 tests/django_ledger/ledger_list.html
 create mode 100644 tests/django_ledger/ledger_update.html
 create mode 100644 tests/django_ledger/pns_list.html
 create mode 100644 tests/django_ledger/po_create.html
 create mode 100644 tests/django_ledger/po_delete.html
 create mode 100644 tests/django_ledger/po_detail.html
 create mode 100644 tests/django_ledger/po_list.html
 create mode 100644 tests/django_ledger/po_update.html
 create mode 100644 tests/django_ledger/product_create.html
 create mode 100644 tests/django_ledger/product_list.html
 create mode 100644 tests/django_ledger/product_update.html
 create mode 100644 tests/django_ledger/tags/account_txs_table.html
 create mode 100644 tests/django_ledger/tags/accounts_table.html
 create mode 100644 tests/django_ledger/tags/activity_form.html
 create mode 100644 tests/django_ledger/tags/balance_sheet.html
 create mode 100644 tests/django_ledger/tags/bank_accounts_table.html
 create mode 100644 tests/django_ledger/tags/bill_item_formset.html
 create mode 100644 tests/django_ledger/tags/bill_table.html
 create mode 100644 tests/django_ledger/tags/breadcrumbs.html
 create mode 100644 tests/django_ledger/tags/chart_container.html
 create mode 100644 tests/django_ledger/tags/customer_table.html
 create mode 100644 tests/django_ledger/tags/data_import_job_list_table.html
 create mode 100644 tests/django_ledger/tags/data_import_job_txs_imported.html
 create mode 100644 tests/django_ledger/tags/data_import_job_txs_table.html
 create mode 100644 tests/django_ledger/tags/date_picker.html
 create mode 100644 tests/django_ledger/tags/default_entity.html
 create mode 100644 tests/django_ledger/tags/expense_item_table.html
 create mode 100644 tests/django_ledger/tags/feedback_button.html
 create mode 100644 tests/django_ledger/tags/filters.html
 create mode 100644 tests/django_ledger/tags/icon.html
 create mode 100644 tests/django_ledger/tags/income_statement.html
 create mode 100644 tests/django_ledger/tags/inventory_item_table.html
 create mode 100644 tests/django_ledger/tags/invoice_item_formset.html
 create mode 100644 tests/django_ledger/tags/invoice_table.html
 create mode 100644 tests/django_ledger/tags/jes_table.html
 create mode 100644 tests/django_ledger/tags/ledgers_table.html
 create mode 100644 tests/django_ledger/tags/menu.html
 create mode 100644 tests/django_ledger/tags/modals.html
 create mode 100644 tests/django_ledger/tags/period_navigator.html
 create mode 100644 tests/django_ledger/tags/pns_table.html
 create mode 100644 tests/django_ledger/tags/po_item_formset.html
 create mode 100644 tests/django_ledger/tags/po_table.html
 create mode 100644 tests/django_ledger/tags/txs_table.html
 create mode 100644 tests/django_ledger/tags/uom_table.html
 create mode 100644 tests/django_ledger/tags/vendor_table.html
 create mode 100644 tests/django_ledger/txs.html
 create mode 100644 tests/django_ledger/unit_create.html
 create mode 100644 tests/django_ledger/unit_detail.html
 create mode 100644 tests/django_ledger/unit_list.html
 create mode 100644 tests/django_ledger/unit_update.html
 create mode 100644 tests/django_ledger/uom_create.html
 create mode 100644 tests/django_ledger/uom_list.html
 create mode 100644 tests/django_ledger/uom_update.html
 create mode 100644 tests/django_ledger/vendor_create.html
 create mode 100644 tests/django_ledger/vendor_list.html
 create mode 100644 tests/django_ledger/vendor_update.html
 create mode 100644 tests/django_oscar/flatpages/default.html
 create mode 100644 tests/django_oscar/oscar/403.html
 create mode 100644 tests/django_oscar/oscar/404.html
 create mode 100644 tests/django_oscar/oscar/500.html
 create mode 100644 tests/django_oscar/oscar/README.rst
 create mode 100644 tests/django_oscar/oscar/base.html
 create mode 100644 tests/django_oscar/oscar/basket/basket.html
 create mode 100644 tests/django_oscar/oscar/basket/messages/addition.html
 create mode 100644 tests/django_oscar/oscar/basket/messages/line_restored.html
 create mode 100644 tests/django_oscar/oscar/basket/messages/line_saved.html
 create mode 100644 tests/django_oscar/oscar/basket/messages/new_total.html
 create mode 100644 tests/django_oscar/oscar/basket/messages/offer_gained.html
 create mode 100644 tests/django_oscar/oscar/basket/messages/offer_lost.html
 create mode 100644 tests/django_oscar/oscar/basket/partials/basket_content.html
 create mode 100644 tests/django_oscar/oscar/basket/partials/basket_quick.html
 create mode 100644 tests/django_oscar/oscar/basket/partials/basket_totals.html
 create mode 100644 tests/django_oscar/oscar/catalogue/browse.html
 create mode 100644 tests/django_oscar/oscar/catalogue/category.html
 create mode 100644 tests/django_oscar/oscar/catalogue/detail.html
 create mode 100644 tests/django_oscar/oscar/catalogue/partials/add_to_basket_form.html
 create mode 100644 tests/django_oscar/oscar/catalogue/partials/add_to_basket_form_compact.html
 create mode 100644 tests/django_oscar/oscar/catalogue/partials/add_to_wishlist.html
 create mode 100644 tests/django_oscar/oscar/catalogue/partials/gallery.html
 create mode 100644 tests/django_oscar/oscar/catalogue/partials/product.html
 create mode 100644 tests/django_oscar/oscar/catalogue/partials/review.html
 create mode 100644 tests/django_oscar/oscar/catalogue/partials/stock_record.html
 create mode 100644 tests/django_oscar/oscar/catalogue/reviews/partials/review_stars.html
 create mode 100644 tests/django_oscar/oscar/catalogue/reviews/review_detail.html
 create mode 100644 tests/django_oscar/oscar/catalogue/reviews/review_form.html
 create mode 100644 tests/django_oscar/oscar/catalogue/reviews/review_list.html
 create mode 100644 tests/django_oscar/oscar/catalogue/reviews/review_product.html
 create mode 100644 tests/django_oscar/oscar/checkout/checkout.html
 create mode 100644 tests/django_oscar/oscar/checkout/gateway.html
 create mode 100644 tests/django_oscar/oscar/checkout/layout.html
 create mode 100644 tests/django_oscar/oscar/checkout/nav.html
 create mode 100644 tests/django_oscar/oscar/checkout/payment_details.html
 create mode 100644 tests/django_oscar/oscar/checkout/preview.html
 create mode 100644 tests/django_oscar/oscar/checkout/shipping_address.html
 create mode 100644 tests/django_oscar/oscar/checkout/shipping_methods.html
 create mode 100644 tests/django_oscar/oscar/checkout/thank_you.html
 create mode 100644 tests/django_oscar/oscar/checkout/user_address_delete.html
 create mode 100644 tests/django_oscar/oscar/checkout/user_address_form.html
 create mode 100644 tests/django_oscar/oscar/communication/email/email_detail.html
 create mode 100644 tests/django_oscar/oscar/communication/email/email_list.html
 create mode 100644 tests/django_oscar/oscar/communication/emails/base.html
 create mode 100644 tests/django_oscar/oscar/communication/emails/base.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_email_changed_body.html
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_email_changed_body.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_email_changed_subject.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_order_placed_body.html
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_order_placed_body.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_order_placed_subject.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_password_changed_body.html
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_password_changed_body.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_password_changed_subject.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_password_reset_body.html
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_password_reset_body.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_password_reset_subject.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_product_alert_body.html
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_product_alert_body.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_body.html
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_body.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_subject.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_product_alert_subject.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_registration_body.html
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_registration_body.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_registration_sms.txt
 create mode 100644 tests/django_oscar/oscar/communication/emails/commtype_registration_subject.txt
 create mode 100644 tests/django_oscar/oscar/communication/notifications/detail.html
 create mode 100644 tests/django_oscar/oscar/communication/notifications/list.html
 create mode 100644 tests/django_oscar/oscar/customer/address/address_delete.html
 create mode 100644 tests/django_oscar/oscar/customer/address/address_form.html
 create mode 100644 tests/django_oscar/oscar/customer/address/address_list.html
 create mode 100644 tests/django_oscar/oscar/customer/alerts/alert_list.html
 create mode 100644 tests/django_oscar/oscar/customer/alerts/form.html
 create mode 100644 tests/django_oscar/oscar/customer/alerts/message.html
 create mode 100644 tests/django_oscar/oscar/customer/alerts/message_subject.html
 create mode 100644 tests/django_oscar/oscar/customer/anon_order.html
 create mode 100644 tests/django_oscar/oscar/customer/baseaccountpage.html
 create mode 100644 tests/django_oscar/oscar/customer/history/recently_viewed_products.html
 create mode 100644 tests/django_oscar/oscar/customer/login_registration.html
 create mode 100644 tests/django_oscar/oscar/customer/order/order_detail.html
 create mode 100644 tests/django_oscar/oscar/customer/order/order_list.html
 create mode 100644 tests/django_oscar/oscar/customer/partials/standard_tabs.html
 create mode 100644 tests/django_oscar/oscar/customer/profile/change_password_form.html
 create mode 100644 tests/django_oscar/oscar/customer/profile/profile.html
 create mode 100644 tests/django_oscar/oscar/customer/profile/profile_delete.html
 create mode 100644 tests/django_oscar/oscar/customer/profile/profile_form.html
 create mode 100644 tests/django_oscar/oscar/customer/registration.html
 create mode 100644 tests/django_oscar/oscar/customer/wishlists/wishlists_delete.html
 create mode 100644 tests/django_oscar/oscar/customer/wishlists/wishlists_delete_product.html
 create mode 100644 tests/django_oscar/oscar/customer/wishlists/wishlists_detail.html
 create mode 100644 tests/django_oscar/oscar/customer/wishlists/wishlists_form.html
 create mode 100644 tests/django_oscar/oscar/customer/wishlists/wishlists_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/base.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_actions.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_name.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_option_summary.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/category_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/category_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/category_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/category_row_actions.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/messages/product_saved.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/option_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/option_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/option_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/option_row_actions.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/option_row_name.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/product_class_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/product_class_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/product_class_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/product_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/product_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/product_row_actions.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/product_row_image.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/product_row_stockrecords.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/product_row_title.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/product_row_variants.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/product_update.html
 create mode 100644 tests/django_oscar/oscar/dashboard/catalogue/stockalert_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/comms/detail.html
 create mode 100644 tests/django_oscar/oscar/dashboard/comms/list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/index.html
 create mode 100644 tests/django_oscar/oscar/dashboard/layout.html
 create mode 100644 tests/django_oscar/oscar/dashboard/login.html
 create mode 100644 tests/django_oscar/oscar/dashboard/offers/benefit_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/offers/condition_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/offers/metadata_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/offers/offer_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/offers/offer_detail.html
 create mode 100644 tests/django_oscar/oscar/dashboard/offers/offer_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/offers/progress.html
 create mode 100644 tests/django_oscar/oscar/dashboard/offers/restrictions_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/offers/step_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/offers/summary.html
 create mode 100644 tests/django_oscar/oscar/dashboard/orders/line_detail.html
 create mode 100644 tests/django_oscar/oscar/dashboard/orders/order_detail.html
 create mode 100644 tests/django_oscar/oscar/dashboard/orders/order_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/orders/shippingaddress_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/orders/statistics.html
 create mode 100644 tests/django_oscar/oscar/dashboard/pages/delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/pages/index.html
 create mode 100644 tests/django_oscar/oscar/dashboard/pages/messages/saved.html
 create mode 100644 tests/django_oscar/oscar/dashboard/pages/update.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partials/advanced_search_modal.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partials/alert_messages.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partials/form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partials/form_field.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partials/form_fields.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partials/form_fields_inline.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partials/pagination.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partials/product_images.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partials/stock_info.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partners/messages/user_unlinked.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partners/partner_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partners/partner_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partners/partner_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partners/partner_manage.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partners/partner_user_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partners/partner_user_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/partners/partner_user_select.html
 create mode 100644 tests/django_oscar/oscar/dashboard/ranges/messages/range_products_saved.html
 create mode 100644 tests/django_oscar/oscar/dashboard/ranges/messages/range_saved.html
 create mode 100644 tests/django_oscar/oscar/dashboard/ranges/range_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/ranges/range_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/ranges/range_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/ranges/range_product_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/reports/index.html
 create mode 100644 tests/django_oscar/oscar/dashboard/reports/partials/offer_report.html
 create mode 100644 tests/django_oscar/oscar/dashboard/reports/partials/open_basket_report.html
 create mode 100644 tests/django_oscar/oscar/dashboard/reports/partials/order_report.html
 create mode 100644 tests/django_oscar/oscar/dashboard/reports/partials/product_report.html
 create mode 100644 tests/django_oscar/oscar/dashboard/reports/partials/submitted_basket_report.html
 create mode 100644 tests/django_oscar/oscar/dashboard/reports/partials/user_report.html
 create mode 100644 tests/django_oscar/oscar/dashboard/reports/partials/voucher_report.html
 create mode 100644 tests/django_oscar/oscar/dashboard/reviews/review_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/reviews/review_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/reviews/review_update.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/messages/band_created.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/messages/band_deleted.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/messages/band_updated.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/messages/method_created.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/messages/method_deleted.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/messages/method_updated.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/weight_band_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/weight_band_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/weight_based_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/weight_based_detail.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/weight_based_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/shipping/weight_based_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/table.html
 create mode 100644 tests/django_oscar/oscar/dashboard/users/alerts/delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/users/alerts/list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/users/alerts/partials/alert.html
 create mode 100644 tests/django_oscar/oscar/dashboard/users/alerts/update.html
 create mode 100644 tests/django_oscar/oscar/dashboard/users/detail.html
 create mode 100644 tests/django_oscar/oscar/dashboard/users/index.html
 create mode 100644 tests/django_oscar/oscar/dashboard/users/table.html
 create mode 100644 tests/django_oscar/oscar/dashboard/users/user_row_actions.html
 create mode 100644 tests/django_oscar/oscar/dashboard/users/user_row_checkbox.html
 create mode 100644 tests/django_oscar/oscar/dashboard/vouchers/partials/voucher_details_table.html
 create mode 100644 tests/django_oscar/oscar/dashboard/vouchers/partials/voucher_set_details_table.html
 create mode 100644 tests/django_oscar/oscar/dashboard/vouchers/voucher_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/vouchers/voucher_detail.html
 create mode 100644 tests/django_oscar/oscar/dashboard/vouchers/voucher_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/vouchers/voucher_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/vouchers/voucher_set_delete.html
 create mode 100644 tests/django_oscar/oscar/dashboard/vouchers/voucher_set_detail.html
 create mode 100644 tests/django_oscar/oscar/dashboard/vouchers/voucher_set_form.html
 create mode 100644 tests/django_oscar/oscar/dashboard/vouchers/voucher_set_list.html
 create mode 100644 tests/django_oscar/oscar/dashboard/widgets/popup_response.html
 create mode 100644 tests/django_oscar/oscar/dashboard/widgets/related_multiple_widget_wrapper.html
 create mode 100644 tests/django_oscar/oscar/dashboard/widgets/related_widget_wrapper.html
 create mode 100644 tests/django_oscar/oscar/error.html
 create mode 100644 tests/django_oscar/oscar/forms/widgets/date_time_picker.html
 create mode 100644 tests/django_oscar/oscar/forms/widgets/image_input_widget.html
 create mode 100644 tests/django_oscar/oscar/layout.html
 create mode 100644 tests/django_oscar/oscar/layout_2_col.html
 create mode 100644 tests/django_oscar/oscar/layout_3_col.html
 create mode 100644 tests/django_oscar/oscar/login_forbidden.html
 create mode 100644 tests/django_oscar/oscar/offer/detail.html
 create mode 100644 tests/django_oscar/oscar/offer/list.html
 create mode 100644 tests/django_oscar/oscar/offer/range.html
 create mode 100644 tests/django_oscar/oscar/order/partials/basket_totals.html
 create mode 100644 tests/django_oscar/oscar/partials/alert_messages.html
 create mode 100644 tests/django_oscar/oscar/partials/brand.html
 create mode 100644 tests/django_oscar/oscar/partials/extrascripts.html
 create mode 100644 tests/django_oscar/oscar/partials/footer.html
 create mode 100644 tests/django_oscar/oscar/partials/footer_checkout.html
 create mode 100644 tests/django_oscar/oscar/partials/form.html
 create mode 100644 tests/django_oscar/oscar/partials/form_field.html
 create mode 100644 tests/django_oscar/oscar/partials/form_fields.html
 create mode 100644 tests/django_oscar/oscar/partials/form_fields_inline.html
 create mode 100644 tests/django_oscar/oscar/partials/google_analytics.html
 create mode 100644 tests/django_oscar/oscar/partials/google_analytics_transaction.html
 create mode 100644 tests/django_oscar/oscar/partials/mini_basket.html
 create mode 100644 tests/django_oscar/oscar/partials/nav_accounts.html
 create mode 100644 tests/django_oscar/oscar/partials/nav_checkout.html
 create mode 100644 tests/django_oscar/oscar/partials/nav_primary.html
 create mode 100644 tests/django_oscar/oscar/partials/pagination.html
 create mode 100644 tests/django_oscar/oscar/partials/search.html
 create mode 100644 tests/django_oscar/oscar/registration/password_reset_complete.html
 create mode 100644 tests/django_oscar/oscar/registration/password_reset_confirm.html
 create mode 100644 tests/django_oscar/oscar/registration/password_reset_done.html
 create mode 100644 tests/django_oscar/oscar/registration/password_reset_form.html
 create mode 100644 tests/django_oscar/oscar/search/indexes/product/item_text.txt
 create mode 100644 tests/django_oscar/oscar/search/partials/facet.html
 create mode 100644 tests/django_oscar/oscar/search/results.html
 create mode 100644 tests/django_rest/admin.html
 create mode 100644 tests/django_rest/admin/detail.html
 create mode 100644 tests/django_rest/admin/dict_value.html
 create mode 100644 tests/django_rest/admin/list.html
 create mode 100644 tests/django_rest/admin/list_value.html
 create mode 100644 tests/django_rest/admin/simple_list_value.html
 create mode 100644 tests/django_rest/api.html
 create mode 100644 tests/django_rest/base.html
 create mode 100644 tests/django_rest/docs/auth/basic.html
 create mode 100644 tests/django_rest/docs/auth/session.html
 create mode 100644 tests/django_rest/docs/auth/token.html
 create mode 100644 tests/django_rest/docs/document.html
 create mode 100644 tests/django_rest/docs/error.html
 create mode 100644 tests/django_rest/docs/index.html
 create mode 100644 tests/django_rest/docs/interact.html
 create mode 100644 tests/django_rest/docs/langs/javascript-intro.html
 create mode 100644 tests/django_rest/docs/langs/javascript.html
 create mode 100644 tests/django_rest/docs/langs/python-intro.html
 create mode 100644 tests/django_rest/docs/langs/python.html
 create mode 100644 tests/django_rest/docs/langs/shell-intro.html
 create mode 100644 tests/django_rest/docs/langs/shell.html
 create mode 100644 tests/django_rest/docs/link.html
 create mode 100644 tests/django_rest/docs/sidebar.html
 create mode 100644 tests/django_rest/filters/base.html
 create mode 100644 tests/django_rest/filters/ordering.html
 create mode 100644 tests/django_rest/filters/search.html
 create mode 100644 tests/django_rest/horizontal/checkbox.html
 create mode 100644 tests/django_rest/horizontal/checkbox_multiple.html
 create mode 100644 tests/django_rest/horizontal/dict_field.html
 create mode 100644 tests/django_rest/horizontal/fieldset.html
 create mode 100644 tests/django_rest/horizontal/form.html
 create mode 100644 tests/django_rest/horizontal/input.html
 create mode 100644 tests/django_rest/horizontal/list_field.html
 create mode 100644 tests/django_rest/horizontal/list_fieldset.html
 create mode 100644 tests/django_rest/horizontal/radio.html
 create mode 100644 tests/django_rest/horizontal/select.html
 create mode 100644 tests/django_rest/horizontal/select_multiple.html
 create mode 100644 tests/django_rest/horizontal/textarea.html
 create mode 100644 tests/django_rest/inline/checkbox.html
 create mode 100644 tests/django_rest/inline/checkbox_multiple.html
 create mode 100644 tests/django_rest/inline/dict_field.html
 create mode 100644 tests/django_rest/inline/fieldset.html
 create mode 100644 tests/django_rest/inline/form.html
 create mode 100644 tests/django_rest/inline/input.html
 create mode 100644 tests/django_rest/inline/list_field.html
 create mode 100644 tests/django_rest/inline/list_fieldset.html
 create mode 100644 tests/django_rest/inline/radio.html
 create mode 100644 tests/django_rest/inline/select.html
 create mode 100644 tests/django_rest/inline/select_multiple.html
 create mode 100644 tests/django_rest/inline/textarea.html
 create mode 100644 tests/django_rest/login.html
 create mode 100644 tests/django_rest/login_base.html
 create mode 100644 tests/django_rest/pagination/numbers.html
 create mode 100644 tests/django_rest/pagination/previous_and_next.html
 create mode 100644 tests/django_rest/raw_data_form.html
 create mode 100644 tests/django_rest/schema.js
 create mode 100644 tests/django_rest/vertical/checkbox.html
 create mode 100644 tests/django_rest/vertical/checkbox_multiple.html
 create mode 100644 tests/django_rest/vertical/dict_field.html
 create mode 100644 tests/django_rest/vertical/fieldset.html
 create mode 100644 tests/django_rest/vertical/form.html
 create mode 100644 tests/django_rest/vertical/input.html
 create mode 100644 tests/django_rest/vertical/list_field.html
 create mode 100644 tests/django_rest/vertical/list_fieldset.html
 create mode 100644 tests/django_rest/vertical/radio.html
 create mode 100644 tests/django_rest/vertical/select.html
 create mode 100644 tests/django_rest/vertical/select_multiple.html
 create mode 100644 tests/django_rest/vertical/textarea.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/actions.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/base.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/file/form.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/file/list.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/file/modals/form.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/index.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/layout.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/lib.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/master.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/model/create.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/model/details.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/model/edit.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/model/inline_field_list.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/model/inline_form.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/model/inline_list_base.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/model/layout.html
 create mode 100755 tests/flask_admin/bootstrap2/admin/model/list.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/model/modals/create.html
 create mode 100755 tests/flask_admin/bootstrap2/admin/model/modals/details.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/model/modals/edit.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/model/row_actions.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/rediscli/console.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/rediscli/response.html
 create mode 100644 tests/flask_admin/bootstrap2/admin/static.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/actions.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/base.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/file/form.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/file/list.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/file/modals/form.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/index.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/layout.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/lib.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/master.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/model/create.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/model/details.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/model/edit.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/model/inline_field_list.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/model/inline_form.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/model/inline_list_base.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/model/layout.html
 create mode 100755 tests/flask_admin/bootstrap3/admin/model/list.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/model/modals/create.html
 create mode 100755 tests/flask_admin/bootstrap3/admin/model/modals/details.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/model/modals/edit.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/model/row_actions.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/rediscli/console.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/rediscli/response.html
 create mode 100644 tests/flask_admin/bootstrap3/admin/static.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/actions.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/base.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/file/form.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/file/list.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/file/modals/form.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/index.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/layout.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/lib.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/master.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/model/create.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/model/details.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/model/edit.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/model/inline_field_list.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/model/inline_form.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/model/inline_list_base.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/model/layout.html
 create mode 100755 tests/flask_admin/bootstrap4/admin/model/list.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/model/modals/create.html
 create mode 100755 tests/flask_admin/bootstrap4/admin/model/modals/details.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/model/modals/edit.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/model/row_actions.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/rediscli/console.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/rediscli/response.html
 create mode 100644 tests/flask_admin/bootstrap4/admin/static.html
 create mode 100644 tests/jinja_adminlte/calendar.html
 create mode 100644 tests/jinja_adminlte/charts-chartjs.html
 create mode 100644 tests/jinja_adminlte/charts-flot.html
 create mode 100644 tests/jinja_adminlte/charts-inline.html
 create mode 100644 tests/jinja_adminlte/examples-404.html
 create mode 100644 tests/jinja_adminlte/examples-500.html
 create mode 100644 tests/jinja_adminlte/examples-blank.html
 create mode 100644 tests/jinja_adminlte/examples-contacts.html
 create mode 100644 tests/jinja_adminlte/examples-e-commerce.html
 create mode 100644 tests/jinja_adminlte/examples-forgot-password.html
 create mode 100644 tests/jinja_adminlte/examples-invoice-print.html
 create mode 100644 tests/jinja_adminlte/examples-invoice.html
 create mode 100644 tests/jinja_adminlte/examples-language-menu.html
 create mode 100644 tests/jinja_adminlte/examples-legacy-user-menu.html
 create mode 100644 tests/jinja_adminlte/examples-lockscreen.html
 create mode 100644 tests/jinja_adminlte/examples-login.html
 create mode 100644 tests/jinja_adminlte/examples-profile.html
 create mode 100644 tests/jinja_adminlte/examples-project-add.html
 create mode 100644 tests/jinja_adminlte/examples-project-detail.html
 create mode 100644 tests/jinja_adminlte/examples-project-edit.html
 create mode 100644 tests/jinja_adminlte/examples-projects.html
 create mode 100644 tests/jinja_adminlte/examples-recover-password.html
 create mode 100644 tests/jinja_adminlte/examples-register.html
 create mode 100644 tests/jinja_adminlte/forms-advanced.html
 create mode 100644 tests/jinja_adminlte/forms-editors.html
 create mode 100644 tests/jinja_adminlte/forms-general.html
 create mode 100644 tests/jinja_adminlte/forms-validation.html
 create mode 100644 tests/jinja_adminlte/gallery.html
 create mode 100644 tests/jinja_adminlte/includes/footer.html
 create mode 100644 tests/jinja_adminlte/includes/navigation.html
 create mode 100644 tests/jinja_adminlte/includes/scripts.html
 create mode 100644 tests/jinja_adminlte/includes/sidebar.html
 create mode 100644 tests/jinja_adminlte/index.html
 create mode 100644 tests/jinja_adminlte/index2.html
 create mode 100644 tests/jinja_adminlte/index3.html
 create mode 100644 tests/jinja_adminlte/layout-boxed.html
 create mode 100644 tests/jinja_adminlte/layout-collapsed-sidebar.html
 create mode 100644 tests/jinja_adminlte/layout-fixed-footer.html
 create mode 100644 tests/jinja_adminlte/layout-fixed-sidebar.html
 create mode 100644 tests/jinja_adminlte/layout-fixed-topnav.html
 create mode 100644 tests/jinja_adminlte/layout-top-nav-sidebar.html
 create mode 100644 tests/jinja_adminlte/layouts/base-fullscreen.html
 create mode 100644 tests/jinja_adminlte/layouts/base.html
 create mode 100644 tests/jinja_adminlte/login.html
 create mode 100644 tests/jinja_adminlte/mailbox-compose.html
 create mode 100644 tests/jinja_adminlte/mailbox-read-mail.html
 create mode 100644 tests/jinja_adminlte/mailbox.html
 create mode 100644 tests/jinja_adminlte/page-403.html
 create mode 100644 tests/jinja_adminlte/page-404.html
 create mode 100644 tests/jinja_adminlte/page-500.html
 create mode 100644 tests/jinja_adminlte/page-blank.html
 create mode 100644 tests/jinja_adminlte/register.html
 create mode 100644 tests/jinja_adminlte/tables-data.html
 create mode 100644 tests/jinja_adminlte/tables-jsgrid.html
 create mode 100644 tests/jinja_adminlte/tables-simple.html
 create mode 100644 tests/jinja_adminlte/ui-buttons.html
 create mode 100644 tests/jinja_adminlte/ui-general.html
 create mode 100644 tests/jinja_adminlte/ui-icons.html
 create mode 100644 tests/jinja_adminlte/ui-modals.html
 create mode 100644 tests/jinja_adminlte/ui-navbar.html
 create mode 100644 tests/jinja_adminlte/ui-ribbons.html
 create mode 100644 tests/jinja_adminlte/ui-sliders.html
 create mode 100644 tests/jinja_adminlte/ui-timeline.html
 create mode 100644 tests/jinja_adminlte/widgets.html

diff --git a/MANIFEST.in b/MANIFEST.in
index 8f6d769..0d79874 100644
--- a/MANIFEST.in
+++ b/MANIFEST.in
@@ -1,2 +1,2 @@
 include pyproject.toml
-include rules.yaml
+include src/djlint/rules.yaml
diff --git a/README.rst b/README.rst
index 3e066fc..ec3f36c 100644
--- a/README.rst
+++ b/README.rst
@@ -1,114 +1,41 @@
-djlint
+djLint
 ======
 
-Simple Django template linter and reformatter. Ps, reformatting might
-work with Jinja and Handlebar templates as well! Test it out with the
-``--check`` flag.
+Simple html template linter and reformatter to find common formatting issues with and *reformat* django html templates
+
+Ps, ``--check`` it out on Jinja and Handlebar templates as well!
 
 |codecov| |test| |Codacy Badge| |Maintainability|
 
-Install from `Pypi <https://pypi.org/project/djlint/>`__
---------------------------------------------------------
 
-.. code:: sh
-
-    pip install djlint
-
-Linter Usage
-------------
-
-.. code:: sh
-
-    djlint src # file or path
-
-    # with custom extensions
-    djlint src -e html.dj
-
-Reformatter Usage
------------------
-
-Reforamtting is beta. Check the output before applying changes. Please
-PR any changes needed 👍🏽
-
-.. code:: sh
-
-    djlint src --reformat --check
-
-    djlint src --reformat
-
-Optional args
+Documentation
 -------------
 
-+--------------------+---------------------------+----------------+
-| Arg                | Definition                | Default        |
-+====================+===========================+================+
-| -e, --extension    | File extension to lint.   | default=html   |
-+--------------------+---------------------------+----------------+
-| --reformat --check | Checks html formatting    |                |
-+--------------------+---------------------------+----------------+
-| --reformat         | Reformats html            |                |
-+--------------------+---------------------------+----------------+
+Read the `documentation <https://djlint.readthedocs.io>`_
 
-Linter Rules
-------------
+Show your format
+----------------
 
-Error Codes
-~~~~~~~~~~~
+Add a badge to your projects `readme.md`:
 
-+--------+----------------------------------------------------------------------+
-| Code   | Meaning                                                              |
-+========+======================================================================+
-| E001   | Variables should be wrapped in a single whitespace. Ex: {{ this }}   |
-+--------+----------------------------------------------------------------------+
-| E002   | Double quotes should be used in tags. Ex {% extends "this.html" %}   |
-+--------+----------------------------------------------------------------------+
+.. code-block:: md
 
-Warning Codes
-~~~~~~~~~~~~~
+   [![Code style: black](https://img.shields.io/badge/html%20style-djlint-blue.svg)](https://github.com/Riverside-Healthcare/djlint)
 
-+--------+----------------------------------------------------------------+
-| Code   | Meaning                                                        |
-+========+================================================================+
-| W003   | Endblock should have name. Ex: {% endblock body %}.            |
-+--------+----------------------------------------------------------------+
-| W004   | Status urls should follow {% static path/to/file %} pattern.   |
-+--------+----------------------------------------------------------------+
-| W005   | Html tag should have lang attribute.                           |
-+--------+----------------------------------------------------------------+
-| W006   | Img tag should have alt, height and width attributes.          |
-+--------+----------------------------------------------------------------+
-| W007   | <!DOCTYPE ... > should be present before the html tag.         |
-+--------+----------------------------------------------------------------+
-| W008   | Attributes should be double quoted.                            |
-+--------+----------------------------------------------------------------+
-| W009   | Tag names should be lowercase.                                 |
-+--------+----------------------------------------------------------------+
-| W010   | Attribute names should be lowercase.                           |
-+--------+----------------------------------------------------------------+
-| W011   | Attirbute values should be quoted.                             |
-+--------+----------------------------------------------------------------+
-| W012   | There should be no spaces around attribute =.                  |
-+--------+----------------------------------------------------------------+
-| W013   | Line is longer than 99 chars.                                  |
-+--------+----------------------------------------------------------------+
-| W014   | More than 2 blank lines.                                       |
-+--------+----------------------------------------------------------------+
-| W015   | Follow h tags with a blank line.                               |
-+--------+----------------------------------------------------------------+
-| W016   | Missging title tag in html.                                    |
-+--------+----------------------------------------------------------------+
-| W017   | Tag should be self closing.                                    |
-+--------+----------------------------------------------------------------+
 
-Adding Rules
-------------
+Add a badge to your `readme.rst`:
 
-A good rule consists of
+.. code-block:: rst
+
+   .. image:: https://img.shields.io/badge/html%20style-djlint-blue.svg
+      :target: https://github.com/Riverside-Healthcare/djlint
+
+
+Looks like this:
+
+.. image:: https://img.shields.io/badge/html%20style-djlint-blue.svg
+   :target: https://github.com/Riverside-Healthcare/djlint
 
--  Name
--  Code - Codes beginning with "E" signify error, and "W" warning.
--  Message - Message to display when error is found.
--  Patterns - regex expressions that will find the error.
 
 Contributing - Please Help!
 ---------------------------
diff --git a/docs/_static/icon.png b/docs/_static/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..36961676cc51c7b9e3847fae9796a20560cd4fb6
GIT binary patch
literal 3815
zcmb7Hi8s{W`+twI#mK%SSth%zLrFrJGE5{YV<!faW$a9(5izohn8}txwvjz!&z2h5
z(qzpC4U*6hW&2M5!0(*jx%avE+~?eT&$;(`y`I;35-crDc(}y5007`IMZm3?^E;+F
zak4W<4^R6}006~ejEyZ#jg6)K1F;?$A2a|crr%G$i0C$w=ykR(hN>Q4leUsI4ylz^
zo_}>q@$w@}mHO{4fh(fg7=)FB1RL#Pj8x(+4pC3XQx0sGHo!fDgQg=_%=Vq_y!aQo
z0t{zoBBtBGu~#2qZV%}et~3%Y<a>PlZb4e1c*V<{ZYYnZnhK^$;VIP-ySw*9muzR3
z4kcuCu$r9;0z+Ee^$F()rRRKO7zP2cS?*c8x#858+yaJyj+o7pOGO`8hLUoKTlxX9
zs57B8qrH{xcYCaRG;fV5IlpT}eQWKtt@wo6%in+0)!JT54I$l-ts%%E_?{QWX(_+v
zFTJJEdztiGQ1VcQrk;+Ju{n_>!TsuT%#XiaM{{9Kw_O8^vV^VyZR#luO%~SBXpfnI
z_S93QIF{XlXqC2w>a%#__0iQ+s-dh9AFwFxl=%c$EezkKV0;#B^J`3qi*4>8sa=U9
z78`xoa2vaJKi2>_@m)CtEFr=2;>vrco$xT{Fziu2W@iWNd@-<qYFIhP3=8`mqzN22
z`qv8EN}n)2$NUktK>)xl_|HH9DOZf?<Onu3zryj2LxM+4F|ViTHq&(?_zEi680+hc
z_6r7#1JSO*Xm{x_Ot6=<iK)4zP4sb50DyFu!Y|znpIpm}@V_~Js=uQn;#{=cbEsx|
zysr_<!>&xR-?KBU#40b(Pw66ZoVSR_8_ZUd#><vpsX{|5tyS+<^qQEIG~6;Nz1D9d
zW$@T8W4fgo{kRbSix8vuP*KO0b0Q+@z)c<Y`lrXb8dCDvS5J9x-OhB-`o*Q4i%a_-
z1^HMn{Xcr_mZh`d>zbOH_aQS%)JPH7b!brlRX>H$2hwHhM69<xooqZva!<GX#G+}=
z@CN+c>3jg#C~L_6g71{1lCA8PLiCdZfELn!mlT>U+aS%dV&d^Jcj6^xQVVDR`aoYm
zov!q(8kA4GdxM5M+Z_@;(8HptxCESI0q5rFely*;mYt}|C>rs?+1SwX;Mz15p+=V7
zWZ$U=LSt%>$$=;%9PUpjlr%u)2JI&i4sXBP<>@A9F!I`1Pq5Do*w%UE+4&s0=}SH!
z68zXT*o@BO*?|WdkOdLVwM$kpmG(_)pw7)h0C;Y>d;)5RBJ2|XXhGl0Z<WKL0g`yp
zz=Rg&^YzjZKa>eNg2^>!ys;qf!NeR~Xxs;tyWZYX)2%oLzvd>$DaPF;sLQ};?CwFV
zwVAnkZR?(gI_+VXi~r-C9qH{$1Om6PDD1%x*mS<b!q1hJ75So5fIRd_ZIczhMk?7B
z(&EXo+Dp*t$RMxoJsz;+=|=Imw0jz2ZJ&lT>#iI^I+6)b-MLFJq&)BG8q^O#;EA}n
zxW!0F+wo2azztB}yEg$&TeFzNRf;{}6DCnwI{ekq%Ien;9Lmq30UbnFqzyKMGKPW@
zmbKT9UOc9-E6JkKXz%&W-3Gwpx4;kn54E#{J10^WBv>~ZcXsT%HGF{Q+Qe{^Ga@Zb
z>g_GX#l_tkN#20|&-2SB6YMSlnhB>Rj$gMnOTHkVw@1|(W{;S!V*Y0rHJb%-PPO=C
z=f%@klTf$k<nNq`F?8Sl)-=Tg%PPeha4>~`$ie-L26KG(nVP+QjU~Ww=WXWJI;=(Y
zaR6Vn(pH<lZe)v9`BP#)=nD}cd)VUI9rv)QmuQRL;J)enpk+Z<3LH+!IfaH&3Ol%d
z8)?e9+uKj60WB}ri^B<5UqpxNOPcdvD=@Dem*tL)zUJv!ny?7L5_qAUO3M_3YQwe0
zLi0*5ZM&%D;pY=n{dnTgHszZ#=w@yb-61HbuHBnPE`w{c4XlXh0DXY&%$^EZLt;QP
zNyTR>s!S}YgiI#;e0lB419uk~nV>o(ENVS81G3=tZ)+>}4tj(W;8#_O-vVy|c`XJC
za04aDKvmKa)G!H!e0n~Eh&!Iq7M}%JFh+4w_~X#O5zzGTj{&)B%~8(2zP=b74#$JX
z!Wg5M)YIbP;!G)I_0;}_L?APKt>?+_Q6^H^0fwHQ-everI-}7uATn&Z@U#%uj4?c0
z`n;R%4(a5I9zU6NxWWk1y(^4wc2XBZFDJc0(6+Il@QH{+F`$V;Zuz7VK6-<vkVN!c
zrL@1*NZPBYsK_=v+GqGRuEWe3mpz<#Tv%YMZE}xX#iH1sNj3QHnH<Qckw_$0VPWBl
zoIjK8!Mh1w={ED<ZrbzyCK->_<EZ)#MwoCVSi!f`%O~;+pR%CXq;tC6%s|t#BO^E1
z=He$<REo<9UZZ$3MkH1n@}j7yXg<W_Q1fx+xof%>2*GP(k({01wda>X8%p?Y+oEQ9
zAuh-N76KyDb4zJDmhFb>-T9hseTqO8RsTG4n1|ZRWyH;Y>XUZW`w+(`gs6v$^*k~h
z4zvR@dDWVT%UHsyZtS<TI$VX4Dl^MviUt5O%SN*HU}b@%?^*D!KxYBaD$dFJxv9QB
z@}9PXu0(z(HIeuyR5n}eC6})pehF~*5%0ZILrZh$kNNxe?|UO@jc7tXo4<$Ia16X&
zZ;C^!Zd{#3Nmcbeq;v6%`c9?Q-GKM{FNc6uPqDsTL4Hn{VKHWMi5mIol7v8gQxo<|
z;Ehi=zG9ons}U)hE?>ig8h*3vo&&UXbY`Z;#_H6Q1F`{KI6RDlB|4r~?R<o$?6zvY
z%3=oH9C}Y@@PhfV`0i~cN{%)eQM16hLAS<XHvQMqQ}oPP>1QbBwmqkT@ssP!<8lga
z8TmG&`yXp76Md)1zvTJ-#2@QCUeMhm;*c`)zaS61NyvgX<cJisZ3k60C9@R=vtA)*
zQoM%$+;3*}^Yi<h;PogqbhWLjsw)2PJlM|O{wwIU2j?EAALs@0+%5VOhnBmJwEIxw
zLBqCJY@;J1nxX@Kt+Tq77(3^6&k#%fOwhQ{bnId{qC7`Iw802)SU-IY={zp^7EhiS
z9aJPM+eO1)jQj_DWboIUQ;mVw7Y4CiMZySAPfu_L*l;54;wx5-AWBUV{}mNJN7`wF
zn4dxnKEkp;h_n@BB2CpF^n3%pBYC;x3cB~l%e~3)WWqdiS(BD%bTz?<mH*wb&(frl
z8rcdBA+~vyAL*w};*hmmy_eOV2zP8u^l+Kg(o-=c8<k>84o(4v)w5+x#J=TTEW93_
zn<Ar!+klr<S692!b>J@r`5kC^>@JBfsdHX;?*Fuw_C(auO)!`heTlkXntYtWX5|op
zXugpP1~K`n10*SG<a8W$W@ZMOwzUklkTz55cxD(ccNC}~kdVage;9DPaMdwG3!`+>
zpJnCe&ro33Hez^rElOq)Z}t6xl7VZg?(#q|f-zM#;#D7Mbj*FBFWHg$V=1=-UxJ|_
z+w)NjF1&VihWXyXN>ob!g1Ig7dtYC<fgm9}A@wgL45=t|_lF#zfIOE0@}aWLY*jpe
z{+~7=TC%^N{toOy=Y=`g#W@|<(So?$fTn-Jkm$#RKcDxV9G;y$<n7it+ckwN5;aR$
z))~`Y_oRywmZf12P7Ux3iGVg>uyB;35CtldxJ?nfYM6D`np@b03CJ??D(`#+^4RQ9
zD3+N*nS@U#(>5U08;pytue0CuEs1CM_dsxZeN)L_)vLj8)CSjsm~?+e#0EL;v@t^y
z+PAP-19*T@^9S4>?WYA2^oi@x_FUv!rWlZ|%By&hyF-A_=^~L2wSFHh?e>Ar^}3#*
zFO6%h9GcHaq&_);gcX1eV`KzhRD#!k330q&U1bcv1QjpC*qw)^$`$FY`#cHm3oh`T
zB3e`wGczkp$GjzhKpxs?HOaK%)lI28jRZZ>Q3H5e$PoohjqyO1{^R`U=qTH4==EaE
zsFy0f<zd%c%Pgq6&C15c=4|Bd#u~y;?pZ1}EFdBxVpc(AY5b;!IpeBF)EsM4lp((_
znlArU-K@U1wi0uKHIN6dPz&d8^1V<xoBHqSjEsy9K$pWn!CU0@Qwo!*{nn!gcZxsF
zIPuWKHgDt-o4iQBgFe(co$q?n4!kZaEnTYp6l4SG4nIC1TpD%3>mJZLM7`d3r^eZ{
zrm2E>o>uqumW;*zdv8!8+Lo6EMKWpN2BawD2q$Si6i^V8YOn!2Qdv?yD+Wo~&}zHh
zJAxGShVthnPT!^{Z~P>p@Nceya=sNKm756*uTpW1B^X%bmnmy_uyvedRdB<SBvW$v
z`v3dZ_Vz>LT7RY$KY;yad8ZOu6eQ6<Q5$ve_aa>A(U2U)R%C9s>;(IG&O@v3;DC`-
z^~?k>c6@)DLjy_qDHw2)E&8(=9$AF8JyJ%PI}s4q#vtG~vBaUBT#B-6s^Otn=W*yg
zrF2B)b_(~N*-4lfM9qc%2auO;PCkr+PIgnJKwtW(jaKDyAtw*r@{jmnU(>$nO!-Wu
z5Xyvk>|_N_tWx}ltCSYlL?50H@xYBlSE1(m(%MUXr`oN4m@Pk%|7;{9p3I)pJQ6>)
zSK{8JvB)|)J}%7WZ}ypYy#AbQ%Oe>DKJziZZT`v^4Gp()om{<+^=J=1qDDri7Ivgn
zio|6y1vY1Zn!3kHX{J!_CA&AI@y67Ost9onZkC*hR7DP36o1P7{X5jY*6v;WrI1D!
zbMwL1BQH#<S^eu$C)GbvvkAJf&n;upT*bIS(=m%Kcg`9NYp<0zHl9V+q7?5%!=dSg
zs}w1jJ$i^5%y4pM=KgA5@=0`ax&K?p<GSv!_1Qcz!>Ik0cdaRloOm7bs+tcLd&HP+
zi$Ir^Yt%>bLG1>q=OnFHw}J2&!sqXlLz-KvtVry0dJMA~=|&;pm6>)GnfC?)B+fsx
g{J$#$vDSSl#XL%g^{?;!%z6hfy<!0;Uv_!;KXOtHjQ{`u

literal 0
HcmV?d00001

diff --git a/docs/conf.py b/docs/conf.py
index 73ea1dc..5ca082a 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -38,14 +38,14 @@ html_sidebars = {
 
 html_theme_options = {
     "show_related": False,
-    "description": "django template formatter",
+    "description": "Html Template Lint",
     "github_button": True,
     "github_user": "Riverside-Healthcare",
     "github_repo": "djlint",
     "github_type": "star",
     "show_powered_by": False,
     "fixed_sidebar": True,
-    # "logo": "logo2.png",
+    "logo": "icon.png",
 }
 
 html_static_path = ["_static"]
diff --git a/docs/djlint/configuration.rst b/docs/djlint/configuration.rst
new file mode 100644
index 0000000..bd6af68
--- /dev/null
+++ b/docs/djlint/configuration.rst
@@ -0,0 +1,6 @@
+Configuration
+=============
+
+Help needed!
+
+Ideally we'd like to be able to ignore rules through pyproject.toml, or cli.
diff --git a/docs/djlint/formatter.rst b/docs/djlint/formatter.rst
new file mode 100644
index 0000000..c5ff6e0
--- /dev/null
+++ b/docs/djlint/formatter.rst
@@ -0,0 +1,51 @@
+Formatter
+=========
+
+djLint's formatter will take sloppy html templates and make it look pretty nice!
+
+For an example of what the output will be, check out the `/tests/` folder to see over 300 **formatted** templates from the top django and flask projects.
+
+Before
+------
+.. code :: html
+
+   {% load admin_list %}   {% load i18n %}
+   <p class="paginator">
+       {% if pagination_required %}
+   {% for i in page_range %}          {% paginator_number cl i %}
+          {% endfor %}       {% endif %}
+       {{ cl.result_count }}
+       {% if cl.result_count == 1 %}{{ cl.opts.verbose_name }}   {% else %}
+   {{ cl.opts.verbose_name_plural }}       {% endif %}
+   {% if show_all_url %} <a href="{{ show_all_url }}" class="showall">{% translate 'Show all' %}
+          </a>
+  {% endif %}{% if cl.formset and cl.result_count %}<input type="submit" name="_save" class="default" value="{% translate 'Save' %}">{% endif %}
+                     </p>
+
+After
+-----
+.. code :: html
+
+   {% load admin_list %}
+   {% load i18n %}
+   <p class="paginator">
+       {% if pagination_required %}
+           {% for i in page_range %}
+               {% paginator_number cl i %}
+           {% endfor %}
+       {% endif %}
+       {{ cl.result_count }}
+       {% if cl.result_count == 1 %}
+           {{ cl.opts.verbose_name }}
+       {% else %}
+           {{ cl.opts.verbose_name_plural }}
+       {% endif %}
+       {% if show_all_url %}
+           <a href="{{ show_all_url }}" class="showall">
+               {% translate 'Show all' %}
+           </a>
+       {% endif %}
+       {% if cl.formset and cl.result_count %}
+           <input type="submit" name="_save" class="default" value="{% translate 'Save' %}">
+       {% endif %}
+   </p>
diff --git a/docs/djlint/rules.rst b/docs/djlint/rules.rst
new file mode 100644
index 0000000..0b66478
--- /dev/null
+++ b/docs/djlint/rules.rst
@@ -0,0 +1,60 @@
+Linter Rules
+============
+
+Error Codes
+~~~~~~~~~~~
+
++--------+----------------------------------------------------------------------+
+| Code   | Meaning                                                              |
++========+======================================================================+
+| E001   | Variables should be wrapped in a single whitespace. Ex: {{ this }}   |
++--------+----------------------------------------------------------------------+
+| E002   | Double quotes should be used in tags. Ex {% extends "this.html" %}   |
++--------+----------------------------------------------------------------------+
+
+Warning Codes
+~~~~~~~~~~~~~
+
++--------+----------------------------------------------------------------+
+| Code   | Meaning                                                        |
++========+================================================================+
+| W003   | Endblock should have name. Ex: {% endblock body %}.            |
++--------+----------------------------------------------------------------+
+| W004   | Status urls should follow {% static path/to/file %} pattern.   |
++--------+----------------------------------------------------------------+
+| W005   | Html tag should have lang attribute.                           |
++--------+----------------------------------------------------------------+
+| W006   | Img tag should have alt, height and width attributes.          |
++--------+----------------------------------------------------------------+
+| W007   | <!DOCTYPE ... > should be present before the html tag.         |
++--------+----------------------------------------------------------------+
+| W008   | Attributes should be double quoted.                            |
++--------+----------------------------------------------------------------+
+| W009   | Tag names should be lowercase.                                 |
++--------+----------------------------------------------------------------+
+| W010   | Attribute names should be lowercase.                           |
++--------+----------------------------------------------------------------+
+| W011   | Attirbute values should be quoted.                             |
++--------+----------------------------------------------------------------+
+| W012   | There should be no spaces around attribute =.                  |
++--------+----------------------------------------------------------------+
+| W013   | Line is longer than 120 chars.                                 |
++--------+----------------------------------------------------------------+
+| W014   | More than 2 blank lines.                                       |
++--------+----------------------------------------------------------------+
+| W015   | Follow h tags with a blank line.                               |
++--------+----------------------------------------------------------------+
+| W016   | Missging title tag in html.                                    |
++--------+----------------------------------------------------------------+
+| W017   | Tag should be self closing.                                    |
++--------+----------------------------------------------------------------+
+
+Adding Rules
+------------
+
+A good rule consists of
+
+-  Name
+-  Code - Codes beginning with "E" signify error, and "W" warning.
+-  Message - Message to display when error is found.
+-  Patterns - regex expressions that will find the error.
diff --git a/docs/djlint/usage.rst b/docs/djlint/usage.rst
new file mode 100644
index 0000000..67e712a
--- /dev/null
+++ b/docs/djlint/usage.rst
@@ -0,0 +1,54 @@
+Getting Started
+================
+
+Installation from `Pypi <https://pypi.org/project/djlint/>`__
+--------------------------------------------------------------
+
+.. code:: sh
+
+    pip install djlint
+
+Linter Usage
+------------
+
+.. code:: sh
+
+    djlint src # file or path
+
+    # with custom extensions
+    djlint src -e html.dj
+
+Reformatter Usage
+-----------------
+
+Reforamtting is a beta product. Check the output before applying changes.
+
+Reformatting does not work with long json/html embedded into attribute data.
+
+To check what may change in formatting run:
+
+.. code:: sh
+
+    djlint src --check
+
+To reformat run:
+
+.. code:: sh
+
+    djlint src --reformat
+
+CLI Args
+-------------
+
+.. code:: sh
+
+    Usage: djlint [OPTIONS] SRC ...
+
+    Djlint django template files.
+
+    Options:
+      -e, --extension TEXT  File extension to lint  [default: html]
+      --reformat            Reformat the file(s).
+      --check               Check formatting on the file(s).
+      --quiet               Do not print diff when reformatting.
+      -h, --help            Show this message and exit.
diff --git a/docs/index.rst b/docs/index.rst
index fcd2071..fa6c5ae 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -1,12 +1,17 @@
 .. djlint documentation master file, created by
    sphinx-quickstart on Tue Jul 27 15:28:35 2021.
 
-Django Template Formatter
-=========================
+Html Template Linter and Formatter
+==================================
 
 .. toctree::
-   :maxdepth: 2
-   :caption: Contents:
+   :hidden:
+   :glob:
+   :maxdepth: 1
+   :titlesonly:
+
+   Welcome<self>
+   djlint/*
 
 .. toctree::
    :hidden:
@@ -15,5 +20,48 @@ Django Template Formatter
    PyPI ↪ <https://pypi.org/project/djlint/>
 
 
-.. include:: ../readme.rst
-   :start-line: 1
+Simple html template linter and reformatter to find common formatting issues with and *reformat* django html templates
+
+Ps, ``--check`` it out on Jinja and Handlebar templates as well!
+
+|codecov| |test| |Codacy Badge| |Maintainability|
+
+.. note:: djLint is not an html parser or syntax validator.
+
+Show your format
+----------------
+
+Add a badge to your projects `readme.md`:
+
+.. code-block:: md
+
+   [![Code style: black](https://img.shields.io/badge/html%20style-djlint-blue.svg)](https://github.com/Riverside-Healthcare/djlint)
+
+
+Add a badge to your `readme.rst`:
+
+.. code-block:: rst
+
+   .. image:: https://img.shields.io/badge/html%20style-djlint-blue.svg
+      :target: https://github.com/Riverside-Healthcare/djlint
+
+
+Looks like this:
+
+.. image:: https://img.shields.io/badge/html%20style-djlint-blue.svg
+   :target: https://github.com/Riverside-Healthcare/djlint
+
+
+Contributing - Please Help!
+---------------------------
+
+Checkout the `issue <https://github.com/Riverside-Healthcare/djlint/issues>`_ list and help where you can!
+
+.. |codecov| image:: https://codecov.io/gh/Riverside-Healthcare/djlint/branch/master/graph/badge.svg?token=eNTG721BAA
+   :target: https://codecov.io/gh/Riverside-Healthcare/djlint
+.. |test| image:: https://github.com/Riverside-Healthcare/djlint/actions/workflows/test.yml/badge.svg
+   :target: https://github.com/Riverside-Healthcare/djlint/actions/workflows/test.yml
+.. |Codacy Badge| image:: https://app.codacy.com/project/badge/Grade/dba6338b0e7a4de896b45b382574f369
+   :target: https://www.codacy.com/gh/Riverside-Healthcare/djlint/dashboard?utm_source=github.com&utm_medium=referral&utm_content=Riverside-Healthcare/djlint&utm_campaign=Badge_Grade
+.. |Maintainability| image:: https://api.codeclimate.com/v1/badges/5febe4111a36c7e0d2ed/maintainability
+   :target: https://codeclimate.com/github/Riverside-Healthcare/djlint/maintainability
diff --git a/pyproject.toml b/pyproject.toml
index 1d3b2ae..0c46ca0 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -22,4 +22,4 @@ quiet = true
 
 
 [tool.pylint.messages_control]
-disable = "E1120, R0914, E0401, R0912"
+disable = "E1120, R0914, E0401, R0912, R0916"
diff --git a/setup.py b/setup.py
index fe05419..19bc553 100644
--- a/setup.py
+++ b/setup.py
@@ -12,7 +12,7 @@ __version__ = "0.1.1"
 def long_description():
     """Build long description from readme and changelog."""
     return (
-        (project_path / "README.md").read_text(encoding="utf8")
+        (project_path / "README.rst").read_text(encoding="utf8")
         + "\n\n"
         + (project_path / "CHANGELOG.md").read_text(encoding="utf8")
     )
@@ -31,7 +31,7 @@ setup(
     author_email="cpickering@rhc.net",
     description="Django Template Linter",
     long_description=long_description(),
-    long_description_content_type="text/markdown",
+    long_description_content_type="text/rst",
     url="https://github.com/Riverside-Healthcare/djlint",
     include_package_data=True,
     package_data={"djlint": ["rules.yaml"]},
@@ -43,7 +43,12 @@ setup(
     package_dir={"": "src"},
     packages=find_packages(where="src"),
     python_requires=">=3.6",
-    install_requires=["click>=7.1.2", "pyyaml>=5.4.1", "colorama>=0.4.3"],
+    install_requires=[
+        "click>=7.1.2",
+        "pyyaml>=5.4.1",
+        "colorama>=0.4.3",
+        "regex>=2020.11.13",
+    ],
     test_suite="tests.test_djlint",
     entry_points={
         "console_scripts": [
diff --git a/src/djlint/__init__.py b/src/djlint/__init__.py
index 7ca3530..d05af14 100644
--- a/src/djlint/__init__.py
+++ b/src/djlint/__init__.py
@@ -4,10 +4,11 @@ Check Django template syntax.
 
 usage::
 
-    djlint INPUT -e <extension>
+    djlint src
 
     options:
 
+    -e or --extension | <extension>
     --check | will check html formatting for needed changes
     --reformat | will reformat html
 
@@ -24,9 +25,9 @@ import click
 from click import echo
 from colorama import Fore, Style, deinit, init
 
-from djlint.lint import lint_file
-from djlint.reformat import reformat_file
-from djlint.settings import ignored_paths
+from .lint import lint_file
+from .reformat import reformat_file
+from .settings import ignored_paths
 
 
 def get_src(src: Path, extension=None):
@@ -149,17 +150,17 @@ def build_quantity_tense(size: int):
 @click.option(
     "--reformat",
     is_flag=True,
-    help="Reformat the file.",
+    help="Reformat the file(s).",
 )
 @click.option(
     "--check",
     is_flag=True,
-    help="Reformat the file.",
+    help="Check formatting on the file(s).",
 )
 @click.option(
     "--quiet",
     is_flag=True,
-    help="Reformat the file.",
+    help="Do not print diff when reformatting.",
 )
 def main(src: str, extension: str, reformat: bool, check: bool, quiet: bool):
     """Djlint django template files."""
@@ -192,7 +193,7 @@ def main(src: str, extension: str, reformat: bool, check: bool, quiet: bool):
         worker_count = min(worker_count, 60)
 
     with ProcessPoolExecutor(max_workers=worker_count) as exe:
-        if reformat is True:
+        if reformat is True or check is True:
             func = partial(reformat_file, check)
             file_errors = exe.map(func, file_list)
         else:
@@ -202,16 +203,8 @@ def main(src: str, extension: str, reformat: bool, check: bool, quiet: bool):
     success_message = ""
     error_count = 0
 
-    if reformat is not True:
-        for error in file_errors:
-            error_count += build_output(error)
-
-        success_message = "%sed %s, found %d errors." % (
-            message,
-            file_quantity,
-            error_count,
-        )
-    else:
+    if reformat is True or check is True:
+        # reformat message
         for error in file_errors:
             error_count += build_check_output(error, quiet)
             tense_message = (
@@ -221,6 +214,17 @@ def main(src: str, extension: str, reformat: bool, check: bool, quiet: bool):
             )
         success_message = "%s updated." % tense_message
 
+    else:
+        # lint message
+        for error in file_errors:
+            error_count += build_output(error)
+
+        success_message = "%sed %s, found %d errors." % (
+            message,
+            file_quantity,
+            error_count,
+        )
+
     echo("\n%s\n" % (success_message))
 
 
diff --git a/src/djlint/formatter/__init__.py b/src/djlint/formatter/__init__.py
new file mode 100644
index 0000000..609bdb4
--- /dev/null
+++ b/src/djlint/formatter/__init__.py
@@ -0,0 +1 @@
+# flake8:noqa
diff --git a/src/djlint/formatter/compress_html.py b/src/djlint/formatter/compress_html.py
new file mode 100644
index 0000000..781444d
--- /dev/null
+++ b/src/djlint/formatter/compress_html.py
@@ -0,0 +1,116 @@
+"""djLint Attempt to logically shrink html."""
+import regex as re
+
+from ..settings import (
+    ignored_inline_blocks,
+    ignored_tag_closing,
+    ignored_tag_opening,
+    single_line_html_tags,
+    single_line_template_tags,
+    start_template_tags,
+    tag_raw_flat_closing,
+    tag_raw_flat_opening,
+)
+
+
+def _clean_line(line):
+    """Clean up a line of html.
+
+    * remove duplicate spaces
+    * remove trailing spaces
+
+    """
+    return re.sub(r" {2,}", " ", line.strip())
+
+
+def _strip_html_whitespace(html):
+    """Remove unnecessary whitespace from text."""
+    rawcode_flat = ""
+    is_block_ignored = False
+    is_block_raw = False
+
+    for item in html.strip().splitlines():
+
+        # start of ignored block
+        is_block_raw = bool(re.search(tag_raw_flat_opening, item, re.IGNORECASE))
+
+        # find ignored blocks and retain indentation, otherwise strip white space
+        if re.findall(
+            r"(?:%s)" % "|".join(ignored_inline_blocks), item, flags=re.IGNORECASE
+        ):
+            tmp = _clean_line(item)
+
+        elif (
+            re.search(ignored_tag_closing, item, re.IGNORECASE)
+            and is_block_raw is False
+        ):
+            tmp = _clean_line(item)
+            is_block_ignored = False
+
+        elif (
+            re.search(ignored_tag_opening, item, re.IGNORECASE)
+            and is_block_raw is False
+        ):
+            tmp = _clean_line(item)
+            is_block_ignored = True
+
+        elif is_block_raw or is_block_ignored:
+            tmp = item
+
+        else:
+            tmp = _clean_line(item)
+
+        # end of ignore raw code
+        is_block_raw = not bool(re.search(tag_raw_flat_closing, item, re.IGNORECASE))
+
+        rawcode_flat = rawcode_flat + tmp + "\n"
+
+    return rawcode_flat
+
+
+def compress_html(html):
+    """Compress back tags that do not need to be expanded."""
+    # put empty tags on one line
+    html = re.sub(
+        r"(<([\w]+)[^>]*>)\s+?(<\/\2>)",
+        r"\1\3",
+        html,
+        flags=re.IGNORECASE | re.MULTILINE,
+    )
+
+    # put empty template tags on one line
+    html = re.sub(
+        r"(" + start_template_tags + r")\s+?(\{\% end[^}]*?\%\})",
+        r"\1\2",
+        html,
+        re.MULTILINE,
+    )
+
+    # put short single line tags on one line
+    slt_html = "|".join(single_line_html_tags)
+    html = re.sub(
+        r"(<(%s)>)\s*([^<\n]{,80})\s*?(</(\2)>)" % slt_html,
+        r"\1\3\4",
+        html,
+        re.IGNORECASE | re.MULTILINE,
+    )
+    html = re.sub(
+        r"(<(%s) [^\n]{,30}>)\s*([^<\n]{,50})\s*?(</(\2)>)" % slt_html,
+        r"\1\3\4",
+        html,
+        re.IGNORECASE | re.MULTILINE,
+    )
+
+    slt_template = "|".join(single_line_template_tags)
+    html = re.sub(
+        r"({% +?("
+        + slt_template
+        + r") +?[^\n]{,30}%})\s*([^%\n]{,50})\s*?({% +?end(\2) +?%})",
+        r"\1\3\4",
+        html,
+        re.IGNORECASE | re.MULTILINE,
+    )
+
+    html = _strip_html_whitespace(html)
+
+    return html
diff --git a/src/djlint/formatter/expand_html.py b/src/djlint/formatter/expand_html.py
new file mode 100644
index 0000000..7fbfe97
--- /dev/null
+++ b/src/djlint/formatter/expand_html.py
@@ -0,0 +1,201 @@
+"""djLint expand out html code."""
+from functools import partial
+
+import regex as re
+
+from ..settings import (
+    break_html_tags,
+    break_template_tags,
+    ignored_attributes,
+    ignored_blocks,
+    tag_pattern,
+)
+
+
+def _flatten_attributes(match):
+    """Flatten multiline attributes back to one line.
+
+    Skip when attribute is ignored.
+    Attribute name can be in group one or group 2.
+    for now, skipping if they are anywhere
+    """
+    for attribute in ignored_attributes:
+        if attribute in match.group():
+            return match.group()
+
+    return "{} {}{}".format(
+        match.group(1),
+        " ".join(match.group(2).strip().splitlines()),
+        match.group(3),
+    )
+
+
+def _should_ignore(html, match):
+    """Do not add whitespace if the tag is in a non indent block."""
+    for block in ignored_blocks:
+        return any(
+            ignored_match.start() < match.start(1)
+            and ignored_match.end() > match.end(1)
+            for ignored_match in re.finditer(
+                block % re.escape(match.group(1)), html, re.DOTALL | re.IGNORECASE
+            )
+        )
+
+    return False
+
+
+def expand_html(html):
+    """Split single line html into many lines based on tags."""
+
+    def add_html_line(out_format, match):
+        """Add whitespace.
+
+        Do not add whitespace if the tag is in a non indent block.
+        """
+        if _should_ignore(html, match):
+            return match.group(1)
+
+        return out_format % match.group(1)
+
+    # put attributes on one line
+    html = re.sub(
+        tag_pattern,
+        _flatten_attributes,
+        html,
+        flags=re.IGNORECASE | re.DOTALL | re.MULTILINE,
+    )
+
+    html_tags = "|".join(break_html_tags)
+
+    # process opening tags ############
+
+    # the tag either closes <div>
+    # self closes <img />
+    # has attributes <div text>
+    # or has attributes and self closes <img text/>
+
+    add_left = partial(add_html_line, "\n%s")
+    add_right = partial(add_html_line, "%s\n")
+
+    break_char = r"(?<!\n *?)"
+
+    html = re.sub(
+        r"%s\K(<(?:%s)>)"
+        % (
+            break_char,
+            html_tags,
+        ),
+        add_left,
+        html,
+        flags=re.IGNORECASE,
+    )
+    html = re.sub(
+        r"(<(?:%s)>)(?=[^\n])" % html_tags, add_right, html, flags=re.IGNORECASE
+    )
+
+    html = re.sub(
+        r"%s\K(<(?:%s) ?/>)"
+        % (
+            break_char,
+            html_tags,
+        ),
+        add_left,
+        html,
+        flags=re.IGNORECASE,
+    )
+    html = re.sub(
+        r"(<(?:%s) ?/>)(?=[^\n])" % html_tags, add_right, html, flags=re.IGNORECASE
+    )
+
+    html = re.sub(
+        r"%s\K(<(?:%s) [^>]*?[^/]>)"
+        % (
+            break_char,
+            html_tags,
+        ),
+        add_left,
+        html,
+        flags=re.IGNORECASE,
+    )
+    html = re.sub(
+        r"(<(?:%s) [^>]*?[^/]>)(?=[^\n])" % html_tags,
+        add_right,
+        html,
+        flags=re.IGNORECASE,
+    )
+
+    html = re.sub(
+        r"%s\K(<(?:%s) [^>]+?/>)"
+        % (
+            break_char,
+            html_tags,
+        ),
+        add_left,
+        html,
+        flags=re.IGNORECASE,
+    )
+    html = re.sub(
+        r"(<(?:%s) [^>]+?/>)(?=[^\n])" % html_tags, add_right, html, flags=re.IGNORECASE
+    )
+
+    # process closing (break_char, html_tags,)s ######
+
+    html = re.sub(
+        r"%s\K(</(?:%s)>)"
+        % (
+            break_char,
+            html_tags,
+        ),
+        add_left,
+        html,
+        flags=re.IGNORECASE,
+    )
+    html = re.sub(
+        r"(</(?:%s)>)(?=[^\n])" % html_tags, add_right, html, flags=re.IGNORECASE
+    )
+
+    # template tag breaks
+
+    def should_i_move_template_tag(out_format, match):
+        # ensure template tag is not inside an html tag
+        html_tags = "|".join(break_html_tags)
+
+        if _should_ignore(html, match):
+            return match.group(1)
+
+        if not re.findall(
+            r"\<(?:"
+            + html_tags
+            + r") .*? ?\w+=[\"][^\"]*?"
+            + re.escape(match.group(1))
+            + "$",
+            html[: match.end()],
+            re.MULTILINE,
+        ):
+
+            return out_format % match.group(1)
+
+        return match.group(1)
+
+    for tag in break_template_tags:
+        # find all matching tags
+
+        html = re.sub(
+            r"%s\K(%s)"
+            % (
+                break_char,
+                tag,
+            ),
+            partial(should_i_move_template_tag, "\n%s"),
+            html,
+            re.IGNORECASE | re.MULTILINE,
+        )
+
+        html = re.sub(
+            r"(%s)(?=[^\n])" % tag,
+            partial(should_i_move_template_tag, "%s\n"),
+            html,
+            re.IGNORECASE | re.MULTILINE,
+        )
+
+    return html
diff --git a/src/djlint/formatter/indent_html.py b/src/djlint/formatter/indent_html.py
new file mode 100644
index 0000000..472fb16
--- /dev/null
+++ b/src/djlint/formatter/indent_html.py
@@ -0,0 +1,163 @@
+"""djLint add indentation to html."""
+import regex as re
+
+from ..settings import (
+    always_single_line_html_tags,
+    attribute_pattern,
+    break_html_tags,
+    format_long_attributes,
+    ignored_inline_blocks,
+    ignored_tag_closing,
+    ignored_tag_opening,
+    indent,
+    max_line_length,
+    reduce_extralines_gt,
+    single_line_template_tags,
+    tag_indent,
+    tag_raw_flat_closing,
+    tag_raw_flat_opening,
+    tag_unindent,
+    tag_unindent_line,
+)
+
+
+def _format_attributes(match):
+    """Spread long attributes over multiple lines."""
+    leading_space = match.group(1)
+
+    tag = match.group(2)
+
+    spacing = "\n" + leading_space + len(tag) * " "
+
+    attributes = (spacing).join(re.findall(attribute_pattern, match.group(3).strip()))
+
+    close = match.group(4)
+
+    return "{}{}{}{}".format(
+        leading_space,
+        tag,
+        attributes,
+        close,
+    )
+
+
+def indent_html(rawcode):
+    """Indent raw code."""
+    rawcode_flat_list = re.split("\n", rawcode)
+
+    beautified_code = ""
+    indent_level = 0
+    is_block_raw = False
+    blank_counter = 0
+
+    slt_html = "|".join(
+        break_html_tags
+    )  # here using all tags cause we allow empty tags on one line
+    always_slt_html = "|".join(
+        always_single_line_html_tags
+    )  # here using all tags cause we allow empty tags on one line
+    slt_template = "|".join(single_line_template_tags)
+
+    for item in rawcode_flat_list:
+        # if a raw tag then start ignoring
+        if (
+            tag_raw_flat_opening
+            and re.search(tag_raw_flat_opening, item, re.IGNORECASE)
+        ) or re.search(tag_raw_flat_opening, item, re.IGNORECASE):
+            is_block_raw = True
+        if re.findall(
+            r"(?:%s)" % "|".join(ignored_inline_blocks), item, flags=re.IGNORECASE
+        ):
+            tmp = (indent * indent_level) + item + "\n"
+
+        # if a one-line, inline tag, just process it, only if line starts w/ it
+        elif (
+            re.findall(r"(<(%s)>)(.*?)(</(\2)>)" % slt_html, item, re.IGNORECASE)
+            or re.findall(r"(<(%s) .+?>)(.*?)(</(\2)>)" % slt_html, item, re.IGNORECASE)
+            or re.findall(
+                r"({% +?(" + slt_template + r") +?.+?%})(.*?)({% +?end(\2) +?%})",
+                item,
+                re.IGNORECASE,
+            )
+            or re.findall(r"(<(%s) .*?/>)" % slt_html, item, flags=re.IGNORECASE)
+            or re.findall(
+                r"(<(%s) .*?/?>)" % always_slt_html, item, flags=re.IGNORECASE
+            )
+        ) and is_block_raw is False:
+
+            tmp = (indent * indent_level) + item + "\n"
+            blank_counter = 0
+
+        # if unindent, move left
+        elif (
+            re.search(r"^(?:" + tag_unindent + r")", item, re.IGNORECASE | re.MULTILINE)
+            and is_block_raw is False
+            or re.search(ignored_tag_closing, item, re.IGNORECASE)
+        ):
+            indent_level = indent_level - 1
+            tmp = (indent * indent_level) + item + "\n"
+            blank_counter = 0
+
+        elif (
+            re.search(r"^" + tag_unindent_line, item, re.IGNORECASE | re.MULTILINE)
+            and is_block_raw is False
+        ):
+            tmp = (indent * (indent_level - 1)) + item + "\n"
+            blank_counter = 0
+
+        # if indent, move right
+        elif (
+            re.search(r"^(?:" + tag_indent + r")", item, re.IGNORECASE | re.MULTILINE)
+            and is_block_raw is False
+        ):
+            tmp = (indent * indent_level) + item + "\n"
+            indent_level = indent_level + 1
+            blank_counter = 0
+
+        elif is_block_raw is True:
+            tmp = item + "\n"
+
+        # if just a blank line
+        elif item.strip() == "" and (
+            blank_counter < int(reduce_extralines_gt) or blank_counter + 1
+        ):
+            tmp = item.strip()
+
+        # otherwise, just leave same level
+        else:
+            tmp = (indent * indent_level) + item + "\n"
+
+        # we can try to fix django tags
+        tmp = re.sub(r"({[{|%])(\w[^}].+?)([}|%]})", r"\1 \2\3", tmp)
+        tmp = re.sub(r"({[{|%])([^}].+?[^ ])([}|%]})", r"\1\2 \3", tmp)
+
+        # handlebars templates
+        tmp = re.sub(r"({{#(?:each|if).+?[^ ])(}})", r"\1 \2", tmp)
+
+        # if a opening raw tag then start ignoring.. only if there is no closing tag
+        # on the same line
+        if (
+            tag_raw_flat_closing
+            and re.search(tag_raw_flat_opening, item, re.IGNORECASE)
+        ) or re.search(ignored_tag_opening, item, re.IGNORECASE):
+            is_block_raw = True
+
+        # if a normal tag, we can try to expand attributes
+        elif (
+            format_long_attributes
+            and is_block_raw is False
+            and len(tmp) > max_line_length
+        ):
+            # get leading space, and attributes
+            tmp = re.sub(r"(\s*?)(<\w+\s)([^>]+?)(/?>)", _format_attributes, tmp)
+
+        # turn off raw block if we hit end - for one line raw blocks
+        if (
+            tag_raw_flat_closing
+            and re.search(tag_raw_flat_closing, item, re.IGNORECASE)
+        ) or re.search(ignored_tag_closing, item, re.IGNORECASE):
+            is_block_raw = False
+
+        beautified_code = beautified_code + tmp
+
+    return beautified_code.strip() + "\n"
diff --git a/src/djlint/reformat.py b/src/djlint/reformat.py
index 454ce0d..b11dad0 100644
--- a/src/djlint/reformat.py
+++ b/src/djlint/reformat.py
@@ -4,246 +4,43 @@ Much code is borrowed from https://github.com/rareyman/HTMLBeautify, many thanks
 """
 
 import difflib
-import re
 from pathlib import Path
 
-from djlint.settings import (
-    attribute_pattern,
-    format_long_attributes,
-    ignored_tag_closing,
-    ignored_tag_opening,
-    indent,
-    max_line_length,
-    reduce_extralines_gt,
-    tag_indent,
-    tag_newline_after,
-    tag_newline_before,
-    tag_pattern,
-    tag_pos_inline,
-    tag_raw_flat_closing,
-    tag_raw_flat_opening,
-    tag_unindent,
-    tag_unindent_line,
-)
-
-
-def clean_line(line):
-    """Clean up a line of html.
-
-    * remove duplicate spaces
-    * remove trailing spaces
-
-    """
-    return re.sub(r" {2,}", " ", line.strip())
-
-
-def flatten_attributes(match):
-    """Flatten multiline attributes back to one line."""
-    return "{} {}{}".format(
-        match.group(1),
-        " ".join(match.group(2).strip().splitlines()),
-        match.group(3),
-    )
-
-
-def format_attributes(match):
-    """Spread long attributes over multiple lines."""
-    leading_space = match.group(1)
-
-    tag = match.group(2)
-
-    attributes = "{}{}".format(
-        ("\n" + leading_space + indent),
-        ("\n" + leading_space + indent).join(
-            re.findall(attribute_pattern, match.group(3).strip())
-        ),
-    )
-
-    close = match.group(4)
-
-    return "{}{}{}{}".format(
-        leading_space,
-        tag,
-        attributes,
-        close,
-    )
-
-
-def add_newlines(match):
-    """Only add newlines of the match is not in our acceptable one line pattern."""
-    g_one = match.group(1)
-    g_two = match.group(2)
-
-    if not re.search(tag_pos_inline, g_one + g_two, flags=re.IGNORECASE | re.MULTILINE):
-        return g_one + "\n" + g_two
-
-    return g_one + g_two
-
-
-def remove_indentation(rawcode):
-    """Remove indentation from raw code."""
-    rawcode_flat = ""
-    is_block_ignored = False
-    is_block_raw = False
-
-    for item in rawcode.strip().splitlines():
-
-        # ignore raw code
-        if re.search(tag_raw_flat_closing, item, re.IGNORECASE):
-            is_block_raw = False
-
-        elif re.search(tag_raw_flat_opening, item, re.IGNORECASE):
-            is_block_raw = True
-
-        # find ignored blocks and retain indentation, otherwise strip white space
-        if re.search(ignored_tag_closing, item, re.IGNORECASE):
-            tmp = clean_line(item)
-            is_block_ignored = False
-
-        elif re.search(ignored_tag_opening, item, re.IGNORECASE):
-            tmp = clean_line(item)
-            is_block_ignored = True
-
-        # not filtered so just output it
-        elif is_block_raw:
-            # remove tabs from raw_flat content
-            tmp = re.sub(indent, "", item)
-
-        elif is_block_ignored:
-            tmp = item
-
-        else:
-            tmp = clean_line(item)  # item.strip()
-
-            # add missing line breaks before tag
-            tmp = re.sub(
-                tag_newline_before,
-                add_newlines,
-                tmp,
-                flags=re.IGNORECASE | re.MULTILINE,
-            )
-
-            # add missing line breaks after tag
-            tmp = re.sub(
-                tag_newline_after, add_newlines, tmp, flags=re.IGNORECASE | re.MULTILINE
-            )
-
-        rawcode_flat = rawcode_flat + tmp + "\n"
-
-    # put attributes back on one line
-    rawcode_flat = re.sub(
-        tag_pattern,
-        flatten_attributes,
-        rawcode_flat,
-        flags=re.IGNORECASE | re.DOTALL | re.MULTILINE,
-    )
-
-    # put empty tags on one line
-    rawcode_flat = re.sub(
-        r"(<([\w]+)[^>]*>)\n(<\/\2>)",
-        r"\1\3",
-        rawcode_flat,
-        flags=re.IGNORECASE | re.MULTILINE,
-    )
-
-    return rawcode_flat
-
-
-def add_indentation(rawcode):
-    """Indent raw code."""
-    rawcode_flat_list = re.split("\n", rawcode)
-
-    beautified_code = ""
-    indent_level = 0
-    is_block_raw = False
-    blank_counter = 0
-
-    for item in rawcode_flat_list:
-
-        # if a raw tag then start ignoring
-        if (
-            tag_raw_flat_closing
-            and re.search(tag_raw_flat_closing, item, re.IGNORECASE)
-        ) or re.search(ignored_tag_closing, item, re.IGNORECASE):
-            is_block_raw = False
-
-        # if a one-line, inline tag, just process it
-        if re.search(tag_pos_inline, item, re.IGNORECASE) and is_block_raw is False:
-            tmp = (indent * indent_level) + item
-            blank_counter = 0
-
-        # if unindent, move left
-        elif re.search(tag_unindent, item, re.IGNORECASE) and is_block_raw is False:
-            indent_level = indent_level - 1
-            tmp = (indent * indent_level) + item
-            blank_counter = 0
-
-        elif (
-            re.search(tag_unindent_line, item, re.IGNORECASE) and is_block_raw is False
-        ):
-            tmp = (indent * (indent_level - 1)) + item
-            blank_counter = 0
-
-        # if indent, move right
-        elif re.search(tag_indent, item, re.IGNORECASE) and is_block_raw is False:
-            tmp = (indent * indent_level) + item
-            indent_level = indent_level + 1
-            blank_counter = 0
-
-        elif is_block_raw is True:
-            tmp = item
-
-        # if just a blank line
-        elif item.strip() == "" and (
-            blank_counter < int(reduce_extralines_gt) or blank_counter + 1
-        ):
-            tmp = item.strip()
-
-        # otherwise, just leave same level
-        else:
-            tmp = (indent * indent_level) + item
-
-        # if not raw, we can try to fix django tags
-        tmp = re.sub(r"({[{|%])(\w[^}].+?)([}|%]})", r"\1 \2\3", tmp)
-        tmp = re.sub(r"({[{|%])([^}].+?[^ ])([}|%]})", r"\1\2 \3", tmp)
-
-        # handlebars templates
-        tmp = re.sub(r"({{#(?:each|if).+?[^ ])(}})", r"\1 \2", tmp)
-
-        # if a opening raw tag then start ignoring.. only if there is no closing tag
-        # on the same line
-        if (
-            tag_raw_flat_closing
-            and re.search(tag_raw_flat_opening, item, re.IGNORECASE)
-        ) or re.search(ignored_tag_opening, item, re.IGNORECASE):
-            is_block_raw = True
-
-        # if a normal tag, we can try to expand attributes
-        elif (
-            format_long_attributes
-            and is_block_raw is False
-            and len(tmp) > max_line_length
-        ):
-            # get leading space, and attributes
-            tmp = re.sub(r"(\s*?)(<\w+)(\s[^>]+?)(/?>)", format_attributes, tmp)
-
-        # turn off raw block if we hit end - for one line raw blocks
-        if (
-            tag_raw_flat_closing
-            and re.search(tag_raw_flat_closing, item, re.IGNORECASE)
-        ) or re.search(ignored_tag_closing, item, re.IGNORECASE):
-            is_block_raw = False
-
-        beautified_code = beautified_code + tmp + "\n"
-
-    return beautified_code.strip() + "\n"
+from .formatter.compress_html import compress_html
+from .formatter.expand_html import expand_html
+from .formatter.indent_html import indent_html
 
 
 def reformat_file(check: bool, this_file: Path):
     """Reformat html file."""
     rawcode = this_file.read_text(encoding="utf8")
 
-    beautified_code = add_indentation(remove_indentation(rawcode))
+    itteration = 0
+
+    beautified_code = rawcode
+
+    while itteration < 10:
+
+        expanded = expand_html(rawcode)
+        compressed = compress_html(expanded)
+        indented = indent_html(compressed)
+
+        if (
+            len(
+                list(
+                    difflib.unified_diff(
+                        beautified_code.splitlines(), indented.splitlines()
+                    )
+                )
+            )
+            == 0
+        ):
+            beautified_code = indented
+            break
+
+        beautified_code = indented
+
+        itteration += 1
 
     if check is not True:
         # update the file
diff --git a/src/djlint/rules.yaml b/src/djlint/rules.yaml
index 2d734f0..e26a095 100644
--- a/src/djlint/rules.yaml
+++ b/src/djlint/rules.yaml
@@ -65,9 +65,9 @@
     - <(?:(?!\{[%|{|#])[^\n])*=\s
 - rule:
     name: W013
-    message: Line is longer than 99 chars.
+    message: Line is longer than 120 chars.
     patterns:
-    - "[^\n]{99,}"
+    - "[^\n]{120,}"
 - rule:
     name: W014
     message: More than 2 blank lines.
diff --git a/src/djlint/settings.py b/src/djlint/settings.py
index e4201e7..3bffd19 100644
--- a/src/djlint/settings.py
+++ b/src/djlint/settings.py
@@ -5,20 +5,17 @@
 # default indentation
 indent = "    "
 
+break_html_tags = ["a", "abbr"]
+
+
 # indicates tags whose contents should not be formatted
-ignored_tag_opening = r"<script|<style|<!--|{\*|<\?php|<pre|<svg"
+ignored_tag_opening = r"<script|<style|<!--|{\*|<\?php|<pre|<svg|{#"
 
 # indicates when to stop ignoring
-ignored_tag_closing = r"</script|</style|-->|\*}|\?>|</pre|</svg"
-
-# the contents of these tag blocks will be start on a new line
-tag_newline_before = r"([^\n]+?)((?:(?:\{\{[\/|\#])|\{% +?(?:if|end|for|block|endblock|else|spaceless|compress|load|include|assets)|(?:<script)|(?:{% endverbatim %})|(?:{% verbatim %})|(?:</?(html|head|body|div|cache|a|nav|ul|ol|dl|li|table|thead|tbody|tr|th|td|blockquote|select|form|option|optgroup|fieldset|legend|label|header|main|section|aside|footer|figure|video|span|p|g|svg|button|img|source)[^>]*?>.*?)))"
-
-# these tags should be followed by a newline
-tag_newline_after = r"((?:(?:\{\{[\/\#].*?\}\})|\{% +?(?:if|end|for|block|else|spaceless|compress|load|include)(?:.*?%}))|(?:{% endverbatim %})|(?:{% verbatim %})|(?:<html|<head|</head|<body|</body|</script|<div|</div|<cache|</cache|<nav|</nav|<ul|</ul|<ol|</ol|<dl|</dl|<li|</li|<table|</table|<thead|</thead|<tbody|</tbody|<tr|</tr|<th|</th|<td|</td|<blockquote|</blockquote|<select|</select|<form|</form|<option|</option|<optgroup|</optgroup|<fieldset|</fieldset|<legend|</legend|<label|</label|<header|</header|<main|</main|<section|</section|<aside|</aside|<footer|</footer|<figure|</figure|<video|</video|<source|</source|</span|<p|</p|<g|</g|<svg|</svg|</h\d|<img).*?\>)([^\n]+)"
+ignored_tag_closing = r"</script|</style|-->|\*}|\?>|</pre|</svg|#}"
 
 # the contents of these tag blocks will be indented
-tag_indent = r"(?:\{\{\#)|\{% +?(if|for|block|else|spaceless|compress)|(?:{% verbatim %})|(?:<(?:html|head|body|div|a|nav|ul|ol|dl|li|table|thead|tbody|tr|th|td|blockquote|select|form|option|cache|optgroup|fieldset|legend|label|header|main|section|aside|footer|figure|video|span|p|g|svg|h\d|button|img|script|style|source))"
+tag_indent = r"(?:\{\{\#)|\{% +?(if|for|block|else|spaceless|compress|addto|language)|(?:{% verbatim %})|(?:<(?:html|head|body|div|a|nav|ul|ol|dl|li|table|thead|tbody|tr|th|td|blockquote|select|form|option|cache|optgroup|fieldset|legend|label|header|main|section|aside|footer|figure|video|span|p|g|svg|h\d|button|img|script|style|source))"
 
 # this signals when tags should be unindented (see tags above)
 tag_unindent = r"(?:\{\{\/)|\{% end|(?:{% endverbatim %})|(?:</(?:html|head|body|div|a|nav|ul|ol|dl|li|table|thead|tbody|tr|th|td|blockquote|select|form|option|optgroup|fieldset|legend|label|header|cache|main|section|aside|footer|figure|video|span|p|g|svg|h\d|button|img|script|style|source))"
@@ -26,26 +23,198 @@ tag_unindent = r"(?:\{\{\/)|\{% end|(?:{% endverbatim %})|(?:</(?:html|head|body
 # these tags should be unindented and next line will be indented
 tag_unindent_line = r"(?:\{% el)|(?:\{\{ *?(?:else|\^) *?\}\})"
 
-# these tags can sometimes be on one line
-tag_pos_inline = r"(?:<link.*/>|<link.*\">|<link.*>|<meta.*/>|<script.*</script>|<div[^>]*>[^<]*</div>|<a[^>]*>[^<]*</a>|<li[^>]*>[^<]*</li>|<dt[^>]*>[^<]*</dt>|<dd[^>]*>[^<]*</dd>|<th[^>]*>[^<]*</th>|<td[^>]*>[^<]*</td>|<legend[^>]*>[^<]*</legend>|<label[^>]*>[^<]*</label>|<option[^>]*>[^<]*</option>|<input.*/>|<input.*\">|<span[^>]*>[^<]*</span>|<p[^>]*>[^<]*</p>|<path.*/>|<!--.*-->|<button[^>]*>[^<]*</button>|<h\d[^>]*>[^<]*</h\d>|<img.*?/>)"
-
 # these tags use raw code and should flatten to column 1
 # tabs will be removed inside these tags! use spaces for spacing if needed!
 # flatten starting with this tag...
-tag_raw_flat_opening = r""
+tag_raw_flat_opening = r"{#"
 
 # ...stop flattening when you encounter this tag
-tag_raw_flat_closing = r""
+tag_raw_flat_closing = r"#}"
 
 # reduce empty lines greater than  x to 1 line
 reduce_extralines_gt = 2
 
 # if lines are longer than x
-max_line_length = 99
+max_line_length = 120
 format_long_attributes = True
 
 # pattern used to find attributes in a tag
 attribute_pattern = r"(.+?=(?:\".*?\"|\'.*?\')|required|checked)\s*"
-tag_pattern = r"(<\w+?)((?:\n\s*?[^>]+?)+?)(/?\>)"
+tag_pattern = r"(<\w+?[^>]*?)((?:\n\s*?[^>]+?)+?)(/?\>)"
+ignored_attributes = [
+    "data-json",
+]
 
 ignored_paths = r"(?:\.tox|\.venv|node_modules|_build)"
+
+
+start_template_tags = r"{% ?(?:if|for|block|spaceless|compress|load|include|assets|addto|language)[^}]+?%}"
+
+break_template_tags = [
+    r"{% ?(?:if|end|for|block|endblock|else|spaceless|compress|load|include|assets|addto|language)[^}]+?%}",
+]
+
+unformated_html_tags = ["script"]
+
+ignored_blocks = [
+    r"<(script|style|pre|svg).*?(?:%s).*?</(\1)>",
+    r"<!--.*?(?:%s).*?-->",
+    r"{\*.*?(?:%s).*?\*}",
+    r"{#.*?(?:%s).*?#}",
+    r"<\?php.*?(?:%s).*?\?>",
+]
+
+ignored_inline_blocks = [
+    r"<!--.*?-->",
+    r"{\*.*?\*}",
+    r"{#.*?#}",
+    r"<\?php.*?\?>",
+]
+
+single_line_html_tags = [
+    "button",
+    "a",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "td",
+    "th",
+    "strong",
+    "em",
+    "icon",
+    "span",
+    "title",
+    "link",
+]
+
+always_single_line_html_tags = ["link"]
+
+single_line_template_tags = ["if", "for", "block"]
+
+break_html_tags = [
+    "a",
+    "abbr",
+    "acronym",
+    "address",
+    "applet",
+    "area",
+    "article",
+    "aside",
+    "audio",
+    "b",
+    "base",
+    "basefont",
+    "bdi",
+    "bdo",
+    "big",
+    "blockquote",
+    "body",
+    "br",
+    "button",
+    "canvas",
+    "caption",
+    "center",
+    "cite",
+    "code",
+    "col",
+    "colgroup",
+    "data",
+    "datalist",
+    "dd",
+    "del",
+    "details",
+    "dfn",
+    "dialog",
+    "dir",
+    "div",
+    "dl",
+    "dt",
+    "em",
+    "embed",
+    "fieldset",
+    "figcaption",
+    "figure",
+    "font",
+    "footer",
+    "form",
+    "frame",
+    "frameset",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "head",
+    "header",
+    "hr",
+    "html",
+    "i",
+    "iframe",
+    "img",
+    "input",
+    "ins",
+    "kbd",
+    "label",
+    "legend",
+    "li",
+    "link",
+    "main",
+    "map",
+    "mark",
+    "meta",
+    "meter",
+    "nav",
+    "noframes",
+    "noscript",
+    "object",
+    "ol",
+    "optgroup",
+    "option",
+    "output",
+    "p",
+    "param",
+    "picture",
+    "pre",
+    "progress",
+    "q",
+    "rp",
+    "rt",
+    "ruby",
+    "s",
+    "samp",
+    "script",
+    "section",
+    "select",
+    "small",
+    "source",
+    "span",
+    "strike",
+    "strong",
+    "style",
+    "sub",
+    "summary",
+    "sup",
+    "svg",
+    "table",
+    "tbody",
+    "td",
+    "template",
+    "textarea",
+    "tfoot",
+    "th",
+    "thead",
+    "time",
+    "title",
+    "tr",
+    "track",
+    "tt",
+    "u",
+    "ul",
+    "var",
+    "video",
+    "wbr",
+]
diff --git a/tests/bad.html b/tests/bad.html
index 166ec5d..4c03b27 100644
--- a/tests/bad.html
+++ b/tests/bad.html
@@ -1,10 +1,6 @@
-My first name is {{htmlfirst_name }}. My last name is {{ last_name}}.
-
+My first name is {{ htmlfirst_name }}. My last name is {{ last_name }}.
 {% extends 'base_generic.html" %}
-{% block body %}
-{% endblock%}
-
-
+{% block body %}{% endblock %}
 <link rel="stylesheet" href="/static/css/nav.scss" type="text/x-scss" charset="utf-8"/>
 <script type="text/javascript" src="/static/lib/markdown-it/markdown-it.js"></script>
 <img src="/static/images/hi.jpg" alt="Hi!">
diff --git a/tests/django_admin/admin/404.html b/tests/django_admin/admin/404.html
new file mode 100644
index 0000000..d7b0b72
--- /dev/null
+++ b/tests/django_admin/admin/404.html
@@ -0,0 +1,11 @@
+{% extends "admin/base_site.html" %}
+{% load i18n %}
+{% block title %}
+    {% translate 'Page not found' %}
+{% endblock %}
+{% block content %}
+    <h2>{% translate 'Page not found' %}</h2>
+    <p>
+        {% translate 'We’re sorry, but the requested page could not be found.' %}
+    </p>
+{% endblock %}
diff --git a/tests/django_admin/admin/500.html b/tests/django_admin/admin/500.html
new file mode 100644
index 0000000..6a8d0aa
--- /dev/null
+++ b/tests/django_admin/admin/500.html
@@ -0,0 +1,21 @@
+{% extends "admin/base_site.html" %}
+{% load i18n %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+        &rsaquo; {% translate 'Server error' %}
+    </div>
+{% endblock %}
+{% block title %}
+    {% translate 'Server error (500)' %}
+{% endblock %}
+{% block content %}
+    <h1>
+        {% translate 'Server Error
+        <em>(500)</em>
+        ' %}
+    </h1>
+    <p>
+        {% translate 'There’s been an error. It’s been reported to the site administrators via email and should be fixed shortly. Thanks for your patience.' %}
+    </p>
+{% endblock %}
diff --git a/tests/django_admin/admin/actions.html b/tests/django_admin/admin/actions.html
new file mode 100644
index 0000000..2604981
--- /dev/null
+++ b/tests/django_admin/admin/actions.html
@@ -0,0 +1,44 @@
+{% load i18n %}
+<div class="actions">
+    {% block actions %}
+        {% block actions-form %}
+            {% for field in action_form %}
+                {% if field.label %}
+                    <label>
+                        {{ field.label }}
+                    {% endif %}
+                    {{ field }}
+                    {% if field.label %}</label>{% endif %}
+                {% endfor %}
+            {% endblock %}
+            {% block actions-submit %}
+                <button type="submit"
+                        class="button"
+                        title="{% translate "
+                        Run the selected action" %}" name="index"
+                        value="{{ action_index|default:0 }}">
+                    {% translate "Go" %}
+                </button>
+            {% endblock %}
+            {% block actions-counter %}
+                {% if actions_selection_counter %}
+                    <span class="action-counter" data-actions-icnt="{{ cl.result_list|length }}">
+                        {{ selection_note }}
+                    </span>
+                    {% if cl.result_count != cl.result_list|length %}
+                        <span class="all hidden">{{ selection_note_all }}</span>
+                        <span class="question hidden">
+                            <a href="#" title="{% translate ">
+                                {% blocktranslate with cl.result_count as total_count %}
+                                    Select all {{ total_count }} {{ module_name }}
+                                {% endblocktranslate %}
+                            </a>
+                        </span>
+                        <span class="clear hidden">
+                            <a href="#">{% translate "Clear selection" %}</a>
+                        </span>
+                    {% endif %}
+                {% endif %}
+            {% endblock %}
+        {% endblock %}
+    </div>
diff --git a/tests/django_admin/admin/app_index.html b/tests/django_admin/admin/app_index.html
new file mode 100644
index 0000000..819b2e5
--- /dev/null
+++ b/tests/django_admin/admin/app_index.html
@@ -0,0 +1,13 @@
+{% extends "admin/index.html" %}
+{% load i18n %}
+{% block bodyclass %}{{ block.super }} app-{{ app_label }}{% endblock %}
+{% if not is_popup %}
+    {% block breadcrumbs %}
+        <div class="breadcrumbs">
+            <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+            &rsaquo;
+            {% for app in app_list %}{{ app.name }}{% endfor %}
+        </div>
+    {% endblock %}
+{% endif %}
+{% block sidebar %}{% endblock %}
diff --git a/tests/django_admin/admin/app_list.html b/tests/django_admin/admin/app_list.html
new file mode 100644
index 0000000..b20be2a
--- /dev/null
+++ b/tests/django_admin/admin/app_list.html
@@ -0,0 +1,63 @@
+{% load i18n %}
+{% if app_list %}
+    {% for app in app_list %}
+        <div class="app-{{ app.app_label }} module{% if app.app_url in request.path %}current-app{% endif %}">
+        <table>
+            <caption>
+            <a href="{{ app.app_url }}"
+               class="section"
+               title="{% blocktranslate with name=app.name %}Models in the {{ name }} application{% endblocktranslate %}">
+                {{ app.name }}
+            </a>
+            </caption>
+            {% for model in app.models %}
+                <tr class="model-{{ model.object_name|lower }}{% if model.admin_url in request.path %} current-model{% endif %}">
+                {% if model.admin_url %}
+                    <th scope="row">
+                        <a href="{{ model.admin_url }}"
+                            {% if model.admin_url in request.path %}
+                                aria-current="page"
+                            {% endif %}
+                            >
+                            {{ model.name }}
+                        </a>
+                    </th>
+                {% else %}
+                    <th scope="row">{{ model.name }}</th>
+                {% endif %}
+                {% if model.add_url %}
+                    <td>
+                        <a href="{{ model.add_url }}" class="addlink">
+                            {% translate 'Add' %}
+                        </a>
+                    </td>
+                {% else %}
+                    <td></td>
+                {% endif %}
+                {% if model.admin_url and show_changelinks %}
+                    {% if model.view_only %}
+                        <td>
+                            <a href="{{ model.admin_url }}" class="viewlink">
+                                {% translate 'View' %}
+                            </a>
+                        </td>
+                    {% else %}
+                        <td>
+                            <a href="{{ model.admin_url }}" class="changelink">
+                                {% translate 'Change' %}
+                            </a>
+                        </td>
+                    {% endif %}
+                {% elif show_changelinks %}
+                    <td></td>
+                {% endif %}
+            </tr>
+        {% endfor %}
+    </table>
+</div>
+{% endfor %}
+{% else %}
+<p>
+{% translate 'You don’t have permission to view or edit anything.' %}
+</p>
+{% endif %}
diff --git a/tests/django_admin/admin/auth/user/add_form.html b/tests/django_admin/admin/auth/user/add_form.html
new file mode 100644
index 0000000..f757af4
--- /dev/null
+++ b/tests/django_admin/admin/auth/user/add_form.html
@@ -0,0 +1,13 @@
+{% extends "admin/change_form.html" %}
+{% load i18n %}
+{% block form_top %}
+    {% if not is_popup %}
+        <p>
+            {% translate 'First, enter a username and password. Then, you’ll be able to edit more user options.' %}
+        </p>
+    {% else %}
+        <p>
+            {% translate "Enter a username and password." %}
+        </p>
+    {% endif %}
+{% endblock %}
diff --git a/tests/django_admin/admin/auth/user/change_password.html b/tests/django_admin/admin/auth/user/change_password.html
new file mode 100644
index 0000000..9892bf5
--- /dev/null
+++ b/tests/django_admin/admin/auth/user/change_password.html
@@ -0,0 +1,85 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static %}
+{% load admin_urls %}
+{% block extrastyle %}
+    {{ block.super }}
+    <link rel="stylesheet" type="text/css" href="{% static ">
+{% endblock %}
+{% block bodyclass %}
+    {{ block.super }} {{ opts.app_label }}-{{ opts.model_name }} change-form
+{% endblock %}
+{% if not is_popup %}
+    {% block breadcrumbs %}
+        <div class="breadcrumbs">
+            <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+            &rsaquo;
+            <a href="{% url 'admin:app_list' app_label=opts.app_label %}">
+                {{ opts.app_config.verbose_name }}
+            </a>
+            &rsaquo;
+            <a href="{% url opts|admin_urlname:'changelist' %}">
+                {{ opts.verbose_name_plural|capfirst }}
+            </a>
+            &rsaquo;
+            <a href="{% url opts|admin_urlname:'change' original.pk|admin_urlquote %}">
+                {{ original|truncatewords:"18" }}
+            </a>
+            &rsaquo; {% translate 'Change password' %}
+        </div>
+    {% endblock %}
+{% endif %}
+{% block content %}
+    <div id="content-main">
+        <form
+            {% if form_url %}action="{{ form_url }}" {% endif %}
+            method="post" id="{{ opts.model_name }}_form">
+            {% csrf_token %}
+            {% block form_top %}{% endblock %}
+            <input type="text" name="username" value="{{ original.get_username }}" class="hidden">
+            <div>
+                {% if is_popup %}
+                    <input type="hidden" name="{{ is_popup_var }}" value="1">
+                {% endif %}
+                {% if form.errors %}
+                    <p class="errornote">
+                        {% if form.errors.items|length == 1 %}
+                            {% translate "Please correct the error below." %}
+                        {% else %}
+                            {% translate "Please correct the errors below." %}
+                        {% endif %}
+                    </p>
+                {% endif %}
+                <p>
+                    {% blocktranslate with username=original %}
+                        Enter a new password for the user
+                        <strong>{{ username }}</strong>
+                        .
+                    {% endblocktranslate %}
+                </p>
+                <fieldset class="module aligned">
+                    <div class="form-row">
+                        {{ form.password1.errors }}
+                        {{ form.password1.label_tag }} {{ form.password1 }}
+                        {% if form.password1.help_text %}
+                            <div class="help">
+                                {{ form.password1.help_text|safe }}
+                            </div>
+                        {% endif %}
+                    </div>
+                    <div class="form-row">
+                        {{ form.password2.errors }}
+                        {{ form.password2.label_tag }} {{ form.password2 }}
+                        {% if form.password2.help_text %}
+                            <div class="help">
+                                {{ form.password2.help_text|safe }}
+                            </div>
+                        {% endif %}
+                    </div>
+                </fieldset>
+                <div class="submit-row">
+                    <input type="submit" value="{% translate 'Change password' %}" class="default">
+                </div>
+            </div>
+        </form>
+    </div>
+{% endblock %}
diff --git a/tests/django_admin/admin/base.html b/tests/django_admin/admin/base.html
new file mode 100644
index 0000000..89852c9
--- /dev/null
+++ b/tests/django_admin/admin/base.html
@@ -0,0 +1,122 @@
+{% load i18n static %}
+<!DOCTYPE html>
+{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
+<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr,auto' }}">
+    <head>
+        <title>{% block title %}{% endblock %}</title>
+        <link rel="stylesheet" type="text/css" href=" {% block stylesheet %} {% static "admin/css/base.css" %}
+        {% endblock %}
+        ">
+        {% if not is_popup and is_nav_sidebar_enabled %}
+            <link rel="stylesheet" type="text/css" href="{% static "admin/css/nav_sidebar.css" %}">
+            <script src="{% static 'admin/js/nav_sidebar.js' %}" defer></script>
+        {% endif %}
+        {% block extrastyle %}{% endblock %}
+        {% if LANGUAGE_BIDI %}
+            <link rel="stylesheet" type="text/css" href=" {% block stylesheet_rtl %} {% static "admin/css/rtl.css" %}
+            {% endblock %}
+            ">
+        {% endif %}
+        {% block extrahead %}{% endblock %}
+        {% block responsive %}
+            <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
+            <link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive.css" %}">
+            {% if LANGUAGE_BIDI %}
+                <link rel="stylesheet" type="text/css" href="{% static ">
+            {% endif %}
+        {% endblock %}
+        {% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
+    </head>
+    <body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
+          data-admin-utc-offset="{% now ">
+    <!-- Container -->
+    <div id="container">
+        {% if not is_popup %}
+            <!-- Header -->
+            {% block header %}
+                <div id="header">
+                    <div id="branding">
+                        {% block branding %}{% endblock %}
+                    </div>
+                    {% block usertools %}
+                        {% if has_permission %}
+                            <div id="user-tools">
+                                {% block welcome-msg %}
+                                    {% translate 'Welcome,' %}
+                                    <strong>{% firstof user.get_short_name user.get_username %}</strong>
+                                    .
+                                {% endblock %}
+                                {% block userlinks %}
+                                    {% if site_url %}
+                                        <a href="{{ site_url }}">{% translate 'View site' %}</a>
+                                        /
+                                    {% endif %}
+                                    {% if user.is_active and user.is_staff %}
+                                        {% url 'django-admindocs-docroot' as docsroot %}
+                                        {% if docsroot %}
+                                            <a href="{{ docsroot }}">{% translate 'Documentation' %}</a>
+                                            /
+                                        {% endif %}
+                                    {% endif %}
+                                    {% if user.has_usable_password %}
+                                        <a href="{% url 'admin:password_change' %}">
+                                            {% translate 'Change password' %}
+                                        </a>
+                                        /
+                                    {% endif %}
+                                    <a href="{% url 'admin:logout' %}">
+                                        {% translate 'Log out' %}
+                                    </a>
+                                {% endblock %}
+                            </div>
+                        {% endif %}
+                    {% endblock %}
+                    {% block nav-global %}{% endblock %}</div>{% endblock %}
+                    <!-- END Header -->
+                    {% block breadcrumbs %}
+                        <div class="breadcrumbs">
+                            <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+                            {% if title %}&rsaquo; {{ title }}{% endif %}
+                        </div>
+                    {% endblock %}{% endif %}
+                    <div class="main" id="main">
+                        {% if not is_popup and is_nav_sidebar_enabled %}
+                            {% block nav-sidebar %}
+                                {% include "admin/nav_sidebar.html" %}{% endblock %}{% endif %}
+                                <div class="content">
+                                    {% block messages %}
+                                        {% if messages %}
+                                            <ul class="messagelist">
+                                                {% for message in messages %}
+                                                    <li{% if message.tags %}class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}
+                                                </li>
+                                            {% endfor %}
+                                        </ul>
+                                    {% endif %}
+                                {% endblock messages %}
+                                <!-- Content -->
+                                <div id="content" class="{% block coltype %}colM{% endblock %}">
+                                {% block pretitle %}{% endblock %}
+                                {% block content_title %}{% if title %}
+                                    <h1>{{ title }}</h1>
+                                {% endif %}{% endblock %}
+                                {% block content_subtitle %}{% if subtitle %}
+                                    <h2>{{ subtitle }}</h2>
+                                {% endif %}{% endblock %}
+                                {% block content %}
+                                    {% block object-tools %}{% endblock %}
+                                    {{ content }}
+                                {% endblock %}
+                                {% block sidebar %}{% endblock %}
+                                <br class="clear">
+                            </div>
+                            <!-- END Content -->
+                            {% block footer %}
+                                <div id="footer"></div>
+                            {% endblock %}
+                        </div>
+                    </div>
+                </div>
+                <!-- END Container -->
+            </body>
+        </html>
diff --git a/tests/django_admin/admin/base_site.html b/tests/django_admin/admin/base_site.html
new file mode 100644
index 0000000..524ced2
--- /dev/null
+++ b/tests/django_admin/admin/base_site.html
@@ -0,0 +1,13 @@
+{% extends "admin/base.html" %}
+{% block title %}
+    {% if subtitle %}{{ subtitle }} |{% endif %}
+    {{ title }} | {{ site_title|default:_('Django site admin') }}
+{% endblock %}
+{% block branding %}
+    <h1 id="site-name">
+        <a href="{% url 'admin:index' %}">
+            {{ site_header|default:_('Django administration') }}
+        </a>
+    </h1>
+{% endblock %}
+{% block nav-global %}{% endblock %}
diff --git a/tests/django_admin/admin/change_form.html b/tests/django_admin/admin/change_form.html
new file mode 100644
index 0000000..48d5671
--- /dev/null
+++ b/tests/django_admin/admin/change_form.html
@@ -0,0 +1,97 @@
+{% extends "admin/base_site.html" %}
+{% load i18n admin_urls static admin_modify %}
+{% block extrahead %}
+    {{ block.super }}
+    <script src="{% url 'admin:jsi18n' %}"></script>
+    {{ media }}
+{% endblock %}
+{% block extrastyle %}
+    {{ block.super }}
+    <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}">
+{% endblock %}
+{% block coltype %}colM{% endblock %}
+{% block bodyclass %}
+    {{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-form
+{% endblock %}
+{% if not is_popup %}
+    {% block breadcrumbs %}
+        <div class="breadcrumbs">
+            <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+            &rsaquo;
+            <a href="{% url 'admin:app_list' app_label=opts.app_label %}">
+                {{ opts.app_config.verbose_name }}
+            </a>
+            &rsaquo;
+            {% if has_view_permission %}
+                <a href="{% url opts|admin_urlname:'changelist' %}">
+                    {{ opts.verbose_name_plural|capfirst }}
+                </a>
+            {% else %}
+                {{ opts.verbose_name_plural|capfirst }}
+            {% endif %}
+            &rsaquo;
+            {% if add %}
+                {% blocktranslate with name=opts.verbose_name %}
+                    Add {{ name }}
+                {% endblocktranslate %}
+            {% else %}
+                {{ original|truncatewords:"18" }}
+            {% endif %}
+        </div>
+    {% endblock %}{% endif %}
+    {% block content %}
+        <div id="content-main">
+            {% block object-tools %}
+                {% if change %}
+                    {% if not is_popup %}
+                        <ul class="object-tools">
+                            {% block object-tools-items %}
+                                {% change_form_object_tools %}
+                            {% endblock %}
+                        </ul>
+                    {% endif %}
+                {% endif %}
+            {% endblock %}
+            <form {% if has_file_field %}enctype="multipart/form-data"
+                  {% endif %} {% if form_url %}action="{{ form_url }}"
+                  {% endif %} method="post"
+                  id="{{ opts.model_name }}_form">
+            {% csrf_token %}{% block form_top %}{% endblock %}
+            <div>
+                {% if is_popup %}
+                    <input type="hidden" name="{{ is_popup_var }}" value="1">
+                {% endif %}
+                {% if to_field %}
+                    <input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}">
+                {% endif %}
+                {% if save_on_top %}
+                    {% block submit_buttons_top %}
+                        {% submit_row %}{% endblock %}{% endif %}
+                        {% if errors %}
+                            <p class="errornote">
+                                {% if errors|length == 1 %}{% translate "Please correct the error below." %}{% else %}
+                                    {% translate "Please correct the errors below." %}{% endif %}
+                                </p>
+                                {{ adminform.form.non_field_errors }}
+                            {% endif %}
+                            {% block field_sets %}
+                                {% for fieldset in adminform %}
+                                    {% include "admin/includes/fieldset.html" %}{% endfor %}
+                                {% endblock %}
+                                {% block after_field_sets %}{% endblock %}
+                                {% block inline_field_sets %}
+                                    {% for inline_admin_formset in inline_admin_formsets %}
+                                        {% include inline_admin_formset.opts.template %}{% endfor %}
+                                    {% endblock %}
+                                    {% block after_related_objects %}{% endblock %}
+                                    {% block submit_buttons_bottom %}
+                                        {% submit_row %}{% endblock %}
+                                        {% block admin_change_form_document_ready %}
+                                            <script id="django-admin-form-add-constants" src="{% static 'admin/js/change_form.js' %}" {% if adminform and add %}data-model-name="{{ opts.model_name }}" {% endif %} async></script>
+                                        {% endblock %}
+                                        {# JavaScript for prepopulated fields #}
+                                        {% prepopulated_fields_js %}
+                                    </div>
+                                </form>
+                            </div>
+                        {% endblock %}
diff --git a/tests/django_admin/admin/change_form_object_tools.html b/tests/django_admin/admin/change_form_object_tools.html
new file mode 100644
index 0000000..6772453
--- /dev/null
+++ b/tests/django_admin/admin/change_form_object_tools.html
@@ -0,0 +1,16 @@
+{% load i18n admin_urls %}
+{% block object-tools-items %}
+    <li>
+        {% url opts|admin_urlname:'history' original.pk|admin_urlquote as history_url %}
+        <a href="{% add_preserved_filters history_url %}" class="historylink">
+            {% translate "History" %}
+        </a>
+    </li>
+    {% if has_absolute_url %}
+        <li>
+            <a href="{{ absolute_url }}" class="viewsitelink">
+                {% translate "View on site" %}
+            </a>
+        </li>
+    {% endif %}
+{% endblock %}
diff --git a/tests/django_admin/admin/change_list.html b/tests/django_admin/admin/change_list.html
new file mode 100644
index 0000000..ececaa4
--- /dev/null
+++ b/tests/django_admin/admin/change_list.html
@@ -0,0 +1,113 @@
+{% extends "admin/base_site.html" %}
+{% load i18n admin_urls static admin_list %}
+{% block extrastyle %}
+    {{ block.super }}
+    <link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}">
+    {% if cl.formset %}
+        <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}">
+    {% endif %}
+    {% if cl.formset or action_form %}
+        <script src="{% url 'admin:jsi18n' %}"></script>
+    {% endif %}
+    {{ media.css }}
+    {% if not actions_on_top and not actions_on_bottom %}
+        <style>
+      #changelist table thead th:first-child {width: inherit}
+
+        </style>
+    {% endif %}
+{% endblock %}
+{% block extrahead %}
+    {{ block.super }}
+    {{ media.js }}
+{% endblock %}
+{% block bodyclass %}
+    {{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list
+{% endblock %}
+{% if not is_popup %}
+    {% block breadcrumbs %}
+        <div class="breadcrumbs">
+            <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+            &rsaquo;
+            <a href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">
+                {{ cl.opts.app_config.verbose_name }}
+            </a>
+            &rsaquo; {{ cl.opts.verbose_name_plural|capfirst }}
+        </div>
+    {% endblock %}
+{% endif %}
+{% block coltype %}{% endblock %}
+{% block content %}
+    <div id="content-main">
+        {% block object-tools %}
+            <ul class="object-tools">
+                {% block object-tools-items %}
+                    {% change_list_object_tools %}
+                {% endblock %}
+            </ul>
+        {% endblock %}
+        {% if cl.formset and cl.formset.errors %}
+            <p class="errornote">
+                {% if cl.formset.total_error_count == 1 %}
+                    {% translate "Please correct the error below." %}
+                {% else %}
+                    {% translate "Please correct the errors below." %}
+                {% endif %}
+            </p>
+            {{ cl.formset.non_form_errors }}
+        {% endif %}
+        <div class="module{% if cl.has_filters %}filtered{% endif %}" id="changelist">
+        <div class="changelist-form-container">
+            {% block search %}
+                {% search_form cl %}
+            {% endblock %}
+            {% block date_hierarchy %}
+                {% if cl.date_hierarchy %}
+                    {% date_hierarchy cl %}
+                {% endif %}
+            {% endblock %}
+            <form id="changelist-form" method="post"
+                {% if cl.formset and cl.formset.is_multipart %}
+                    enctype="multipart/form-data"
+                {% endif %}
+                novalidate>
+                {% csrf_token %}
+                {% if cl.formset %}
+                    <div>
+                        {{ cl.formset.management_form }}
+                    </div>
+                {% endif %}
+                {% block result_list %}
+                    {% if action_form and actions_on_top and cl.show_admin_actions %}
+                        {% admin_actions %}
+                    {% endif %}
+                    {% result_list cl %}
+                    {% if action_form and actions_on_bottom and cl.show_admin_actions %}
+                        {% admin_actions %}
+                    {% endif %}
+                {% endblock %}
+                {% block pagination %}
+                    {% pagination cl %}
+                {% endblock %}
+            </form>
+        </div>
+        {% block filters %}
+            {% if cl.has_filters %}
+                <div id="changelist-filter">
+                    <h2>{% translate 'Filter' %}</h2>
+                    {% if cl.has_active_filters %}
+                        <h3 id="changelist-filter-clear">
+                            <a href="{{ cl.clear_all_filters_qs }}">
+                                &#10006; {% translate "Clear all filters" %}
+                            </a>
+                        </h3>
+                    {% endif %}
+                    {% for spec in cl.filter_specs %}
+                        {% admin_list_filter cl spec %}
+                    {% endfor %}
+                </div>
+            {% endif %}
+        {% endblock %}
+    </div>
+</div>
+{% endblock %}
diff --git a/tests/django_admin/admin/change_list_object_tools.html b/tests/django_admin/admin/change_list_object_tools.html
new file mode 100644
index 0000000..26b5d47
--- /dev/null
+++ b/tests/django_admin/admin/change_list_object_tools.html
@@ -0,0 +1,13 @@
+{% load i18n admin_urls %}
+{% block object-tools-items %}
+    {% if has_add_permission %}
+        <li>
+            {% url cl.opts|admin_urlname:'add' as add_url %}
+            <a href="{% add_preserved_filters add_url is_popup to_field %}" class="addlink">
+                {% blocktranslate with cl.opts.verbose_name as name %}
+                    Add {{ name }}
+                {% endblocktranslate %}
+            </a>
+        </li>
+    {% endif %}
+{% endblock %}
diff --git a/tests/django_admin/admin/change_list_results.html b/tests/django_admin/admin/change_list_results.html
new file mode 100644
index 0000000..12ae1a6
--- /dev/null
+++ b/tests/django_admin/admin/change_list_results.html
@@ -0,0 +1,59 @@
+{% load i18n %}
+{% if result_hidden_fields %}
+    <div class="hiddenfields">
+        {# DIV for HTML validation #}
+        {% for item in result_hidden_fields %}{{ item }}{% endfor %}
+    </div>
+{% endif %}
+{% if results %}
+    <div class="results">
+        <table id="result_list">
+            <thead>
+                <tr>
+                    {% for header in result_headers %}
+                        <th scope="col"{{ header.class_attrib }}>
+                            {% if header.sortable %}
+                                {% if header.sort_priority > 0 %}
+                                    <div class="sortoptions">
+                                        <a class="sortremove" href="{{ header.url_remove }}" title="{% translate "></a>
+                                        {% if num_sorted_fields > 1 %}
+                                            <span class="sortpriority"
+                                                  title="{% blocktranslate with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktranslate %}">
+                                                {{ header.sort_priority }}
+                                            </span>
+                                        {% endif %}
+                                        <a href="{{ header.url_toggle }}"
+                                           class="toggle {% if header.ascending %}ascending{% else %}descending{% endif %}"
+                                           title="{% translate "></a>
+                                    </div>
+                                {% endif %}
+                            {% endif %}
+                            <div class="text">
+                                {% if header.sortable %}
+                                    <a href="{{ header.url_primary }}">
+                                        {{ header.text|capfirst }}
+                                    </a>
+                                {% else %}
+                                    <span>{{ header.text|capfirst }}</span>
+                                {% endif %}
+                            </div>
+                            <div class="clear"></div>
+                        </th>
+                    {% endfor %}
+                </tr>
+            </thead>
+            <tbody>
+                {% for result in results %}
+                    {% if result.form and result.form.non_field_errors %}
+                        <tr>
+                            <td colspan="{{ result|length }}">{{ result.form.non_field_errors }}</td>
+                        </tr>
+                    {% endif %}
+                    <tr>
+                        {% for item in result %}{{ item }}{% endfor %}
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+{% endif %}
diff --git a/tests/django_admin/admin/date_hierarchy.html b/tests/django_admin/admin/date_hierarchy.html
new file mode 100644
index 0000000..3975689
--- /dev/null
+++ b/tests/django_admin/admin/date_hierarchy.html
@@ -0,0 +1,25 @@
+{% if show %}
+    <div class="xfull">
+        <ul class="toplinks">
+            {% block date-hierarchy-toplinks %}
+                {% block date-hierarchy-back %}
+                    {% if back %}
+                        <li class="date-back">
+                            <a href="{{ back.link }}">&lsaquo; {{ back.title }}</a>
+                        </li>
+                    {% endif %}
+                {% endblock %}
+                {% block date-hierarchy-choices %}
+                    {% for choice in choices %}
+                        <li>
+                            {% if choice.link %}<a href="{{ choice.link }}">{% endif %}
+                            {{ choice.title }}
+                            {% if choice.link %}</a>{% endif %}
+                        </li>
+                    {% endfor %}
+                {% endblock %}
+            {% endblock %}
+        </ul>
+        <br class="clear">
+    </div>
+{% endif %}
diff --git a/tests/django_admin/admin/delete_confirmation.html b/tests/django_admin/admin/delete_confirmation.html
new file mode 100644
index 0000000..96f86db
--- /dev/null
+++ b/tests/django_admin/admin/delete_confirmation.html
@@ -0,0 +1,84 @@
+{% extends "admin/base_site.html" %}
+{% load i18n admin_urls static %}
+{% block extrahead %}
+    {{ block.super }}
+    {{ media }}
+    <script src="{% static 'admin/js/cancel.js' %}" async></script>
+{% endblock %}
+{% block bodyclass %}
+    {{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation
+{% endblock %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+        &rsaquo;
+        <a href="{% url 'admin:app_list' app_label=opts.app_label %}">
+            {{ opts.app_config.verbose_name }}
+        </a>
+        &rsaquo;
+        <a href="{% url opts|admin_urlname:'changelist' %}">
+            {{ opts.verbose_name_plural|capfirst }}
+        </a>
+        &rsaquo;
+        <a href="{% url opts|admin_urlname:'change' object.pk|admin_urlquote %}">
+            {{ object|truncatewords:"18" }}
+        </a>
+        &rsaquo; {% translate 'Delete' %}
+    </div>
+{% endblock %}
+{% block content %}
+    {% if perms_lacking %}
+        <p>
+            {% blocktranslate with escaped_object=object %}
+                Deleting the {{ object_name }} '{{ escaped_object }}' would result in deleting related objects, but your account doesn't have permission to delete the following types of objects:
+            {% endblocktranslate %}
+        </p>
+        <ul>
+            {% for obj in perms_lacking %}
+                <li>
+                    {{ obj }}
+                </li>
+            {% endfor %}
+        </ul>
+    {% elif protected %}
+        <p>
+            {% blocktranslate with escaped_object=object %}
+                Deleting the {{ object_name }} '{{ escaped_object }}' would require deleting the following protected related objects:
+            {% endblocktranslate %}
+        </p>
+        <ul>
+            {% for obj in protected %}
+                <li>
+                    {{ obj }}
+                </li>
+            {% endfor %}
+        </ul>
+    {% else %}
+        <p>
+            {% blocktranslate with escaped_object=object %}
+                Are you sure you want to delete the {{ object_name }} "{{ escaped_object }}"? All of the following related items will be deleted:
+            {% endblocktranslate %}
+        </p>
+        {% include "admin/includes/object_delete_summary.html" %}
+        <h2>{% translate "Objects" %}</h2>
+        <ul>
+            {{ deleted_objects|unordered_list }}
+        </ul>
+        <form method="post">
+            {% csrf_token %}
+            <div>
+                <input type="hidden" name="post" value="yes">
+                {% if is_popup %}
+                    <input type="hidden" name="{{ is_popup_var }}" value="1">
+                {% endif %}
+                {% if to_field %}
+                    <input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}">
+                {% endif %}
+                <input type="submit" value="{% translate 'Yes, I’m sure' %}">
+                <a href="#" class="button cancel-link">
+                    {% translate "No, take me back" %}
+                </a>
+            </div>
+        </form>
+    {% endif %}
+{% endblock %}
diff --git a/tests/django_admin/admin/delete_selected_confirmation.html b/tests/django_admin/admin/delete_selected_confirmation.html
new file mode 100644
index 0000000..7b87bcb
--- /dev/null
+++ b/tests/django_admin/admin/delete_selected_confirmation.html
@@ -0,0 +1,80 @@
+{% extends "admin/base_site.html" %}
+{% load i18n l10n admin_urls static %}
+{% block extrahead %}
+    {{ block.super }}
+    {{ media }}
+    <script src="{% static 'admin/js/cancel.js' %}" async></script>
+{% endblock %}
+{% block bodyclass %}
+    {{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation delete-selected-confirmation
+{% endblock %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+        &rsaquo;
+        <a href="{% url 'admin:app_list' app_label=opts.app_label %}">
+            {{ opts.app_config.verbose_name }}
+        </a>
+        &rsaquo;
+        <a href="{% url opts|admin_urlname:'changelist' %}">
+            {{ opts.verbose_name_plural|capfirst }}
+        </a>
+        &rsaquo; {% translate 'Delete multiple objects' %}
+    </div>
+{% endblock %}
+{% block content %}
+    {% if perms_lacking %}
+        <p>
+            {% blocktranslate %}
+                Deleting the selected {{ objects_name }} would result in deleting related objects, but your account doesn't have permission to delete the following types of objects:
+            {% endblocktranslate %}
+        </p>
+        <ul>
+            {% for obj in perms_lacking %}
+                <li>
+                    {{ obj }}
+                </li>
+            {% endfor %}
+        </ul>
+    {% elif protected %}
+        <p>
+            {% blocktranslate %}
+                Deleting the selected {{ objects_name }} would require deleting the following protected related objects:
+            {% endblocktranslate %}
+        </p>
+        <ul>
+            {% for obj in protected %}
+                <li>
+                    {{ obj }}
+                </li>
+            {% endfor %}
+        </ul>
+    {% else %}
+        <p>
+            {% blocktranslate %}
+                Are you sure you want to delete the selected {{ objects_name }}? All of the following objects and their related items will be deleted:
+            {% endblocktranslate %}
+        </p>
+        {% include "admin/includes/object_delete_summary.html" %}
+        <h2>{% translate "Objects" %}</h2>
+        {% for deletable_object in deletable_objects %}
+            <ul>
+                {{ deletable_object|unordered_list }}
+            </ul>
+        {% endfor %}
+        <form method="post">
+            {% csrf_token %}
+            <div>
+                {% for obj in queryset %}
+                    <input type="hidden" name="{{ action_checkbox_name }}" value="{{ obj.pk|unlocalize }}">
+                {% endfor %}
+                <input type="hidden" name="action" value="delete_selected">
+                <input type="hidden" name="post" value="yes">
+                <input type="submit" value="{% translate 'Yes, I’m sure' %}">
+                <a href="#" class="button cancel-link">
+                    {% translate "No, take me back" %}
+                </a>
+            </div>
+        </form>
+    {% endif %}
+{% endblock %}
diff --git a/tests/django_admin/admin/edit_inline/stacked.html b/tests/django_admin/admin/edit_inline/stacked.html
new file mode 100644
index 0000000..dacb1a4
--- /dev/null
+++ b/tests/django_admin/admin/edit_inline/stacked.html
@@ -0,0 +1,53 @@
+{% load i18n admin_urls %}
+<div class="js-inline-admin-formset inline-group"
+     id="{{ inline_admin_formset.formset.prefix }}-group"
+     data-inline-type="stacked"
+     data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
+    <fieldset class="module {{ inline_admin_formset.classes }}">
+        {% if inline_admin_formset.formset.max_num == 1 %}
+            <h2>{{ inline_admin_formset.opts.verbose_name|capfirst }}</h2>
+        {% else %}
+            <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
+        {% endif %}
+        {{ inline_admin_formset.formset.management_form }}
+        {{ inline_admin_formset.formset.non_form_errors }}
+        {% for inline_admin_form in inline_admin_formset %}
+            <div class="inline-related{% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form last-related{% endif %}"
+                 id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
+            <h3>
+                <b>
+                {{ inline_admin_formset.opts.verbose_name|capfirst }}:
+                </b>
+                <span class="inline_label">
+                    {% if inline_admin_form.original %}
+                        {{ inline_admin_form.original }}
+                        {% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
+                            <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}"
+                               class="{% if inline_admin_formset.has_change_permission %}inlinechangelink{% else %}inlineviewlink{% endif %}">
+                            {% if inline_admin_formset.has_change_permission %}{% translate "Change" %}{% else %}{% translate "View" %}{% endif %}
+                        </a>
+                    {% endif %}
+                {% else %}
+                    #{{ forloop.counter }}
+                {% endif %}
+            </span>
+            {% if inline_admin_form.show_url %}
+                <a href="{{ inline_admin_form.absolute_url }}">
+                    {% translate "View on site" %}
+                </a>
+            {% endif %}
+            {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission and inline_admin_form.original %}
+                <span class="delete">
+                    {{ inline_admin_form.deletion_field.field }} {{ inline_admin_form.deletion_field.label_tag }}
+                </span>
+            {% endif %}
+        </h3>
+        {% if inline_admin_form.form.non_field_errors %}{{ inline_admin_form.form.non_field_errors }}{% endif %}
+        {% for fieldset in inline_admin_form %}
+            {% include "admin/includes/fieldset.html" %}{% endfor %}
+            {% if inline_admin_form.needs_explicit_pk_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
+            {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
+        </div>
+    {% endfor %}
+</fieldset>
+</div>
diff --git a/tests/django_admin/admin/edit_inline/tabular.html b/tests/django_admin/admin/edit_inline/tabular.html
new file mode 100644
index 0000000..491868b
--- /dev/null
+++ b/tests/django_admin/admin/edit_inline/tabular.html
@@ -0,0 +1,110 @@
+{% load i18n admin_urls static admin_modify %}
+<div class="js-inline-admin-formset inline-group"
+     id="{{ inline_admin_formset.formset.prefix }}-group"
+     data-inline-type="tabular"
+     data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
+    <div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
+    {{ inline_admin_formset.formset.management_form }}
+    <fieldset class="module {{ inline_admin_formset.classes }}">
+        {% if inline_admin_formset.formset.max_num == 1 %}
+            <h2>{{ inline_admin_formset.opts.verbose_name|capfirst }}</h2>
+        {% else %}
+            <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
+        {% endif %}
+        {{ inline_admin_formset.formset.non_form_errors }}
+        <table>
+            <thead>
+                <tr>
+                    <th class="original"></th>
+                    {% for field in inline_admin_formset.fields %}
+                        {% if not field.widget.is_hidden %}
+                            <th class="column-{{ field.name }}{% if field.required %}required{% endif %}">
+                            {{ field.label|capfirst }}
+                            {% if field.help_text %}
+                                <img src="{% static "
+                                     admin/img/icon-unknown.svg" %}" class="help help-tooltip"
+                                     width="10"
+                                     height="10"
+                                     alt="({{ field.help_text|striptags }})"
+                                     title="{{ field.help_text|striptags }}">
+                                {% endif %}
+                            </th>
+                        {% endif %}
+                    {% endfor %}
+                    {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
+                        <th>{% translate "Delete?" %}</th>
+                    {% endif %}
+                </tr>
+            </thead>
+            <tbody>
+                {% for inline_admin_form in inline_admin_formset %}
+                    {% if inline_admin_form.form.non_field_errors %}
+                        <tr class="row-form-errors">
+                            <td colspan="{{ inline_admin_form|cell_count }}">
+                                {{ inline_admin_form.form.non_field_errors }}
+                            </td>
+                        </tr>
+                    {% endif %}
+                    <tr class="form-row {% if inline_admin_form.original or inline_admin_form.show_url %}has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form{% endif %}"
+                        id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
+                    <td class="original">
+                        {% if inline_admin_form.original or inline_admin_form.show_url %}
+                            <p>
+                                {% if inline_admin_form.original %}
+                                    {{ inline_admin_form.original }}
+                                    {% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
+                                        <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}"
+                                           class="{% if inline_admin_formset.has_change_permission %}inlinechangelink{% else %}inlineviewlink{% endif %}">
+                                        {% if inline_admin_formset.has_change_permission %}{% translate "Change" %}{% else %}{% translate "View" %}{% endif %}
+                                    </a>
+                                {% endif %}
+                            {% endif %}
+                            {% if inline_admin_form.show_url %}
+                                <a href="{{ inline_admin_form.absolute_url }}">
+                                    {% translate "View on site" %}
+                                </a>
+                            {% endif %}
+                        </p>
+                    {% endif %}
+                    {% if inline_admin_form.needs_explicit_pk_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
+                    {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
+                    {% spaceless %}
+                        {% for fieldset in inline_admin_form %}
+                            {% for line in fieldset %}
+                                {% for field in line %}
+                                    {% if not field.is_readonly and field.field.is_hidden %}{{ field.field }}{% endif %}
+                                {% endfor %}
+                            {% endfor %}
+                        {% endfor %}
+                    {% endspaceless %}
+                </td>
+                {% for fieldset in inline_admin_form %}
+                    {% for line in fieldset %}
+                        {% for field in line %}
+                            {% if field.is_readonly or not field.field.is_hidden %}
+                                <td{% if field.field.name %}class="field-{{ field.field.name }}"{% endif %}>
+                                {% if field.is_readonly %}
+                                    <p>
+                                        {{ field.contents }}
+                                    </p>
+                                {% else %}
+                                    {{ field.field.errors.as_ul }}
+                                    {{ field.field }}
+                                {% endif %}
+                            </td>
+                        {% endif %}
+                    {% endfor %}
+                {% endfor %}
+            {% endfor %}
+            {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
+                <td class="delete">
+                    {% if inline_admin_form.original %}{{ inline_admin_form.deletion_field.field }}{% endif %}
+                </td>
+            {% endif %}
+        </tr>
+    {% endfor %}
+</tbody>
+</table>
+</fieldset>
+</div>
+</div>
diff --git a/tests/django_admin/admin/filter.html b/tests/django_admin/admin/filter.html
new file mode 100644
index 0000000..e13d963
--- /dev/null
+++ b/tests/django_admin/admin/filter.html
@@ -0,0 +1,17 @@
+{% load i18n %}
+<h3>
+    {% blocktranslate with filter_title=title %}
+        By {{ filter_title }}
+    {% endblocktranslate %}
+</h3>
+<ul>
+    {% for choice in choices %}
+        <li
+            {% if choice.selected %}class="selected" {% endif %}
+            >
+            <a href="{{ choice.query_string|iriencode }}" title="{{ choice.display }}">
+                {{ choice.display }}
+            </a>
+        </li>
+    {% endfor %}
+</ul>
diff --git a/tests/django_admin/admin/includes/fieldset.html b/tests/django_admin/admin/includes/fieldset.html
new file mode 100644
index 0000000..4d36059
--- /dev/null
+++ b/tests/django_admin/admin/includes/fieldset.html
@@ -0,0 +1,37 @@
+<fieldset class="module aligned {{ fieldset.classes }}">
+    {% if fieldset.name %}<h2>{{ fieldset.name }}</h2>{% endif %}
+    {% if fieldset.description %}
+        <div class="description">
+            {{ fieldset.description|safe }}
+        </div>
+    {% endif %}
+    {% for line in fieldset %}
+        <div class="form-row{% if line.fields|length_is:'1' and line.errors %} errors{% endif %}{% if not line.has_visible_field %}hidden{% endif %}{% for field in line %}{% if field.field.name %}field-{{ field.field.name }}{% endif %}{% endfor %}">
+        {% if line.fields|length_is:'1' %}{{ line.errors }}{% endif %}
+        {% for field in line %}
+            <div
+                {% if not line.fields|length_is:'1' %}
+                    class="fieldBox {% if field.field.name %}field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %}hidden{% endif %}"{% elif field.is_checkbox %} class="checkbox-row"{% endif %}>
+                    {% if not line.fields|length_is:'1' and not field.is_readonly %}{{ field.errors }}{% endif %}
+                    {% if field.is_checkbox %}
+                        {{ field.field }}{{ field.label_tag }}
+                    {% else %}
+                        {{ field.label_tag }}
+                        {% if field.is_readonly %}
+                            <div class="readonly">
+                                {{ field.contents }}
+                            </div>
+                        {% else %}
+                            {{ field.field }}
+                        {% endif %}
+                    {% endif %}
+                    {% if field.field.help_text %}
+                        <div class="help">
+                            {{ field.field.help_text|safe }}
+                        </div>
+                    {% endif %}
+                </div>
+            {% endfor %}
+        </div>
+    {% endfor %}
+</fieldset>
diff --git a/tests/django_admin/admin/includes/object_delete_summary.html b/tests/django_admin/admin/includes/object_delete_summary.html
new file mode 100644
index 0000000..ac8a4f6
--- /dev/null
+++ b/tests/django_admin/admin/includes/object_delete_summary.html
@@ -0,0 +1,9 @@
+{% load i18n %}
+<h2>{% translate "Summary" %}</h2>
+<ul>
+    {% for model_name, object_count in model_count %}
+        <li>
+            {{ model_name|capfirst }}: {{ object_count }}
+        </li>
+    {% endfor %}
+</ul>
diff --git a/tests/django_admin/admin/index.html b/tests/django_admin/admin/index.html
new file mode 100644
index 0000000..867311b
--- /dev/null
+++ b/tests/django_admin/admin/index.html
@@ -0,0 +1,53 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static %}
+{% block extrastyle %}
+    {{ block.super }}
+    <link rel="stylesheet" type="text/css" href="{% static "admin/css/dashboard.css" %}">
+{% endblock %}
+{% block coltype %}colMS{% endblock %}
+{% block bodyclass %}{{ block.super }} dashboard{% endblock %}
+{% block breadcrumbs %}{% endblock %}
+{% block nav-sidebar %}{% endblock %}
+{% block content %}
+    <div id="content-main">
+        {% include "admin/app_list.html" with app_list=app_list show_changelinks=True %}
+    </div>
+{% endblock %}
+{% block sidebar %}
+    <div id="content-related">
+        <div class="module" id="recent-actions-module">
+            <h2>{% translate 'Recent actions' %}</h2>
+            <h3>{% translate 'My actions' %}</h3>
+            {% load log %}
+            {% get_admin_log 10 as admin_log for_user user %}
+            {% if not admin_log %}
+                <p>
+                    {% translate 'None available' %}
+                </p>
+            {% else %}
+                <ul class="actionlist">
+                    {% for entry in admin_log %}
+                        <li class="{% if entry.is_addition %}addlink{% endif %}{% if entry.is_change %}changelink{% endif %}{% if entry.is_deletion %}deletelink{% endif %}">
+                        {% if entry.is_deletion or not entry.get_admin_url %}
+                            {{ entry.object_repr }}
+                        {% else %}
+                            <a href="{{ entry.get_admin_url }}">
+                                {{ entry.object_repr }}
+                            </a>
+                        {% endif %}
+                        <br>
+                        {% if entry.content_type %}
+                            <span class="mini quiet">
+                                {% filter capfirst %}{{ entry.content_type.name }}
+                            {% endfilter %}
+                        </span>
+                    {% else %}
+                        <span class="mini quiet">{% translate 'Unknown content' %}</span>
+                    {% endif %}
+                </li>
+            {% endfor %}
+        </ul>
+    {% endif %}
+</div>
+</div>
+{% endblock %}
diff --git a/tests/django_admin/admin/invalid_setup.html b/tests/django_admin/admin/invalid_setup.html
new file mode 100644
index 0000000..affaa9c
--- /dev/null
+++ b/tests/django_admin/admin/invalid_setup.html
@@ -0,0 +1,13 @@
+{% extends "admin/base_site.html" %}
+{% load i18n %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+        &rsaquo; {{ title }}
+    </div>
+{% endblock %}
+{% block content %}
+    <p>
+        {% translate 'Something’s wrong with your database installation. Make sure the appropriate database tables have been created, and make sure the database is readable by the appropriate user.' %}
+    </p>
+{% endblock %}
diff --git a/tests/django_admin/admin/login.html b/tests/django_admin/admin/login.html
new file mode 100644
index 0000000..af36a68
--- /dev/null
+++ b/tests/django_admin/admin/login.html
@@ -0,0 +1,64 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static %}
+{% block extrastyle %}
+    {{ block.super }}
+    <link rel="stylesheet" type="text/css" href="{% static "admin/css/login.css" %}">
+    {{ form.media }}
+{% endblock %}
+{% block bodyclass %}{{ block.super }} login{% endblock %}
+{% block usertools %}{% endblock %}
+{% block nav-global %}{% endblock %}
+{% block nav-sidebar %}{% endblock %}
+{% block content_title %}{% endblock %}
+{% block breadcrumbs %}{% endblock %}
+{% block content %}
+    {% if form.errors and not form.non_field_errors %}
+        <p class="errornote">
+            {% if form.errors.items|length == 1 %}
+                {% translate "Please correct the error below." %}
+            {% else %}
+                {% translate "Please correct the errors below." %}
+            {% endif %}
+        </p>
+    {% endif %}
+    {% if form.non_field_errors %}
+        {% for error in form.non_field_errors %}
+            <p class="errornote">
+                {{ error }}
+            </p>
+        {% endfor %}
+    {% endif %}
+    <div id="content-main">
+        {% if user.is_authenticated %}
+            <p class="errornote">
+                {% blocktranslate trimmed %}
+                    You are authenticated as {{ username }}, but are not authorized to
+                    access this page. Would you like to login to a different account?
+                {% endblocktranslate %}
+            </p>
+        {% endif %}
+        <form action="{{ app_path }}" method="post" id="login-form">
+            {% csrf_token %}
+            <div class="form-row">
+                {{ form.username.errors }}
+                {{ form.username.label_tag }} {{ form.username }}
+            </div>
+            <div class="form-row">
+                {{ form.password.errors }}
+                {{ form.password.label_tag }} {{ form.password }}
+                <input type="hidden" name="next" value="{{ next }}">
+            </div>
+            {% url 'admin_password_reset' as password_reset_url %}
+            {% if password_reset_url %}
+                <div class="password-reset-link">
+                    <a href="{{ password_reset_url }}">
+                        {% translate 'Forgotten your password or username?' %}
+                    </a>
+                </div>
+            {% endif %}
+            <div class="submit-row">
+                <input type="submit" value="{% translate 'Log in' %}">
+            </div>
+        </form>
+    </div>
+{% endblock %}
diff --git a/tests/django_admin/admin/nav_sidebar.html b/tests/django_admin/admin/nav_sidebar.html
new file mode 100644
index 0000000..4764137
--- /dev/null
+++ b/tests/django_admin/admin/nav_sidebar.html
@@ -0,0 +1,11 @@
+{% load i18n %}
+<button class="sticky toggle-nav-sidebar"
+        id="toggle-nav-sidebar"
+        aria-label="{% translate 'Toggle navigation' %}"></button>
+<nav class="sticky" id="nav-sidebar">
+    <input type="search"
+           id="nav-filter"
+           placeholder="{% translate 'Start typing to filter...' %}"
+           aria-label="{% translate 'Filter navigation items' %}">
+    {% include 'admin/app_list.html' with app_list=available_apps show_changelinks=False %}
+</nav>
diff --git a/tests/django_admin/admin/object_history.html b/tests/django_admin/admin/object_history.html
new file mode 100644
index 0000000..a28f59f
--- /dev/null
+++ b/tests/django_admin/admin/object_history.html
@@ -0,0 +1,53 @@
+{% extends "admin/base_site.html" %}
+{% load i18n admin_urls %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+        &rsaquo;
+        <a href="{% url 'admin:app_list' app_label=opts.app_label %}">
+            {{ opts.app_config.verbose_name }}
+        </a>
+        &rsaquo;
+        <a href="{% url opts|admin_urlname:'changelist' %}">
+            {{ module_name }}
+        </a>
+        &rsaquo;
+        <a href="{% url opts|admin_urlname:'change' object.pk|admin_urlquote %}">
+            {{ object|truncatewords:"18" }}
+        </a>
+        &rsaquo; {% translate 'History' %}
+    </div>
+{% endblock %}
+{% block content %}
+    <div id="content-main">
+        <div class="module">
+            {% if action_list %}
+                <table id="change-history">
+                    <thead>
+                        <tr>
+                            <th scope="col">{% translate 'Date/time' %}</th>
+                            <th scope="col">{% translate 'User' %}</th>
+                            <th scope="col">{% translate 'Action' %}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for action in action_list %}
+                            <tr>
+                                <th scope="row">{{ action.action_time|date:"DATETIME_FORMAT" }}</th>
+                                <td>
+                                    {{ action.user.get_username }}
+                                    {% if action.user.get_full_name %}({{ action.user.get_full_name }}){% endif %}
+                                </td>
+                                <td>{{ action.get_change_message }}</td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            {% else %}
+                <p>
+                    {% translate 'This object doesn’t have a change history. It probably wasn’t added via this admin site.' %}
+                </p>
+            {% endif %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_admin/admin/pagination.html b/tests/django_admin/admin/pagination.html
new file mode 100644
index 0000000..891bdd6
--- /dev/null
+++ b/tests/django_admin/admin/pagination.html
@@ -0,0 +1,23 @@
+{% load admin_list %}
+{% load i18n %}
+<p class="paginator">
+    {% if pagination_required %}
+        {% for i in page_range %}
+            {% paginator_number cl i %}
+        {% endfor %}
+    {% endif %}
+    {{ cl.result_count }}
+    {% if cl.result_count == 1 %}
+        {{ cl.opts.verbose_name }}
+    {% else %}
+        {{ cl.opts.verbose_name_plural }}
+    {% endif %}
+    {% if show_all_url %}
+        <a href="{{ show_all_url }}" class="showall">
+            {% translate 'Show all' %}
+        </a>
+    {% endif %}
+    {% if cl.formset and cl.result_count %}
+        <input type="submit" name="_save" class="default" value="{% translate 'Save' %}">
+    {% endif %}
+</p>
diff --git a/tests/django_admin/admin/popup_response.html b/tests/django_admin/admin/popup_response.html
new file mode 100644
index 0000000..830bbc3
--- /dev/null
+++ b/tests/django_admin/admin/popup_response.html
@@ -0,0 +1,10 @@
+{% load i18n static %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>{% translate 'Popup closing…' %}</title>
+    </head>
+    <body>
+        <script id="django-admin-popup-response-constants" src="{% static "admin/js/popup_response.js" %}" data-popup-response="{{ popup_response_data }}"></script>
+    </body>
+</html>
diff --git a/tests/django_admin/admin/prepopulated_fields_js.html b/tests/django_admin/admin/prepopulated_fields_js.html
new file mode 100644
index 0000000..c42ebcd
--- /dev/null
+++ b/tests/django_admin/admin/prepopulated_fields_js.html
@@ -0,0 +1,2 @@
+{% load static %}
+<script id="django-admin-prepopulated-fields-constants" src="{% static "admin/js/prepopulate_init.js" %}" data-prepopulated-fields="{{ prepopulated_fields_json }}"></script>
diff --git a/tests/django_admin/admin/search_form.html b/tests/django_admin/admin/search_form.html
new file mode 100644
index 0000000..ec2f252
--- /dev/null
+++ b/tests/django_admin/admin/search_form.html
@@ -0,0 +1,44 @@
+{% load i18n static %}
+{% if cl.search_fields %}
+    <div id="toolbar">
+        <form id="changelist-search" method="get">
+            <div>
+                <!-- DIV needed for valid HTML -->
+                <label for="searchbar">
+                    <img src="{% static "admin/img/search.svg" %}" alt="Search">
+                    </label>
+                    <input type="text" size="40" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar">
+                    <input type="submit" value="{% translate 'Search' %}">
+                    {% if show_result_count %}
+                        <span class="small quiet">
+                            {% blocktranslate count counter=cl.result_count %}
+                                {{ counter }} result{% plural %}{{ counter }} results
+                            {% endblocktranslate %}
+                            (
+                            <a href="?{% if cl.is_popup %}{{ is_popup_var }}=1{% endif %}">
+                            {% if cl.show_full_result_count %}
+                                {% blocktranslate with full_result_count=cl.full_result_count %}
+                                    {{ full_result_count }} total
+                                {% endblocktranslate %}
+                            {% else %}
+                                {% translate "Show all" %}
+                            {% endif %}
+                        </a>
+                        )
+                    </span>
+                {% endif %}
+                {% for pair in cl.params.items %}
+                    {% if pair.0 != search_var %}
+                        <input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}">
+                    {% endif %}
+                {% endfor %}
+            </div>
+            {% if cl.search_help_text %}
+                <br class="clear">
+                <div class="help">
+                    {{ cl.search_help_text }}
+                </div>
+            {% endif %}
+        </form>
+    </div>
+{% endif %}
diff --git a/tests/django_admin/admin/submit_line.html b/tests/django_admin/admin/submit_line.html
new file mode 100644
index 0000000..dee59b6
--- /dev/null
+++ b/tests/django_admin/admin/submit_line.html
@@ -0,0 +1,32 @@
+{% load i18n admin_urls %}
+<div class="submit-row">
+    {% block submit-row %}
+        {% if show_save %}
+            <input type="submit" value="{% translate 'Save' %}" class="default" name="_save">
+        {% endif %}
+        {% if show_delete_link and original %}
+            {% url opts|admin_urlname:'delete' original.pk|admin_urlquote as delete_url %}
+            <p class="deletelink-box">
+                <a href="{% add_preserved_filters delete_url %}" class="deletelink">
+                    {% translate "Delete" %}
+                </a>
+            </p>
+        {% endif %}
+        {% if show_save_as_new %}
+            <input type="submit" value="{% translate 'Save as new' %}" name="_saveasnew">
+        {% endif %}
+        {% if show_save_and_add_another %}
+            <input type="submit" value="{% translate 'Save and add another' %}" name="_addanother">
+        {% endif %}
+        {% if show_save_and_continue %}
+            <input type="submit"
+                   value="{% if can_change %} {% translate 'Save and continue editing' %}{% else %}{% translate 'Save and view' %}{% endif %}"
+                   name="_continue">
+        {% endif %}
+        {% if show_close %}
+            <a href="{% url opts|admin_urlname:'changelist' %}" class="closelink">
+                {% translate 'Close' %}
+            </a>
+        {% endif %}
+    {% endblock %}
+</div>
diff --git a/tests/django_admin/admin/widgets/clearable_file_input.html b/tests/django_admin/admin/widgets/clearable_file_input.html
new file mode 100644
index 0000000..c24d089
--- /dev/null
+++ b/tests/django_admin/admin/widgets/clearable_file_input.html
@@ -0,0 +1,21 @@
+{% if widget.is_initial %}
+    <p class="file-upload">
+        {{ widget.initial_text }}:
+        <a href="{{ widget.value.url }}">{{ widget.value }}</a>
+        {% if not widget.required %}
+            <span class="clearable-file-input">
+                <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"
+                {% if widget.attrs.disabled %}disabled {% endif %}
+                >
+                <label for="{{ widget.checkbox_id }}">
+                    {{ widget.clear_checkbox_label }}
+                </label>
+            </span>
+        {% endif %}
+        <br>
+        {{ widget.input_text }}:
+    {% endif %}
+    <input type="{{ widget.type }}" name="{{ widget.name }}"
+    {% include "django/forms/widgets/attrs.html" %}
+    >
+    {% if widget.is_initial %}</p>{% endif %}
diff --git a/tests/django_admin/admin/widgets/foreign_key_raw_id.html b/tests/django_admin/admin/widgets/foreign_key_raw_id.html
new file mode 100644
index 0000000..ee61804
--- /dev/null
+++ b/tests/django_admin/admin/widgets/foreign_key_raw_id.html
@@ -0,0 +1,11 @@
+{% include 'django/forms/widgets/input.html' %}
+{% if related_url %}
+    <a href="{{ related_url }}" class="related-lookup" id="lookup_id_{{ widget.name }}" title="{{ link_title }}"></a>
+{% endif %}
+{% if link_label %}
+    <strong>
+    {% if link_url %}<a href="{{ link_url }}">{% endif %}
+    {{ link_label }}
+    {% if link_url %}</a>{% endif %}
+    </strong>
+{% endif %}
diff --git a/tests/django_admin/admin/widgets/many_to_many_raw_id.html b/tests/django_admin/admin/widgets/many_to_many_raw_id.html
new file mode 100644
index 0000000..0dd0331
--- /dev/null
+++ b/tests/django_admin/admin/widgets/many_to_many_raw_id.html
@@ -0,0 +1 @@
+{% include 'admin/widgets/foreign_key_raw_id.html' %}
diff --git a/tests/django_admin/admin/widgets/radio.html b/tests/django_admin/admin/widgets/radio.html
new file mode 100644
index 0000000..780899a
--- /dev/null
+++ b/tests/django_admin/admin/widgets/radio.html
@@ -0,0 +1 @@
+{% include "django/forms/widgets/multiple_input.html" %}
diff --git a/tests/django_admin/admin/widgets/related_widget_wrapper.html b/tests/django_admin/admin/widgets/related_widget_wrapper.html
new file mode 100644
index 0000000..176d89a
--- /dev/null
+++ b/tests/django_admin/admin/widgets/related_widget_wrapper.html
@@ -0,0 +1,34 @@
+{% load i18n static %}
+<div class="related-widget-wrapper">
+    {{ rendered_widget }}
+    {% block links %}
+        {% spaceless %}
+            {% if not is_hidden %}
+                {% if can_change_related %}
+                    <a class="related-widget-wrapper-link change-related"
+                       id="change_id_{{ name }}"
+                       data-href-template="{{ change_related_template_url }}?{{ url_params }}"
+                       title="{% blocktranslate %}Change selected {{ model }}{% endblocktranslate %}">
+                        <img src="{% static 'admin/img/icon-changelink.svg' %}" alt="{% translate 'Change' %}">
+                        </a>
+                    {% endif %}
+                    {% if can_add_related %}
+                        <a class="related-widget-wrapper-link add-related"
+                           id="add_id_{{ name }}"
+                           href="{{ add_related_url }}?{{ url_params }}"
+                           title="{% blocktranslate %}Add another {{ model }}{% endblocktranslate %}">
+                            <img src="{% static 'admin/img/icon-addlink.svg' %}" alt="{% translate 'Add' %}">
+                            </a>
+                        {% endif %}
+                        {% if can_delete_related %}
+                            <a class="related-widget-wrapper-link delete-related"
+                               id="delete_id_{{ name }}"
+                               data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
+                               title="{% blocktranslate %}Delete selected {{ model }}{% endblocktranslate %}">
+                                <img src="{% static 'admin/img/icon-deletelink.svg' %}" alt="{% translate 'Delete' %}">
+                                </a>
+                            {% endif %}
+                        {% endif %}
+                    {% endspaceless %}
+                {% endblock %}
+            </div>
diff --git a/tests/django_admin/admin/widgets/split_datetime.html b/tests/django_admin/admin/widgets/split_datetime.html
new file mode 100644
index 0000000..8d4f327
--- /dev/null
+++ b/tests/django_admin/admin/widgets/split_datetime.html
@@ -0,0 +1,7 @@
+<p class="datetime">
+    {{ date_label }} {% with widget=widget.subwidgets.0 %}
+    {% include widget.template_name %}{% endwith %}
+    <br>
+    {{ time_label }} {% with widget=widget.subwidgets.1 %}
+    {% include widget.template_name %}{% endwith %}
+</p>
diff --git a/tests/django_admin/admin/widgets/url.html b/tests/django_admin/admin/widgets/url.html
new file mode 100644
index 0000000..2777d8a
--- /dev/null
+++ b/tests/django_admin/admin/widgets/url.html
@@ -0,0 +1,9 @@
+{% if url_valid %}
+    <p class="url">
+        {{ current_label }}
+        <a href="{{ widget.href }}">{{ widget.value }}</a>
+        <br>
+        {{ change_label }}
+    {% endif %}
+    {% include "django/forms/widgets/input.html" %}
+    {% if url_valid %}</p>{% endif %}
diff --git a/tests/django_admin/registration/logged_out.html b/tests/django_admin/registration/logged_out.html
new file mode 100644
index 0000000..be03861
--- /dev/null
+++ b/tests/django_admin/registration/logged_out.html
@@ -0,0 +1,16 @@
+{% extends "admin/base_site.html" %}
+{% load i18n %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+    </div>
+{% endblock %}
+{% block nav-sidebar %}{% endblock %}
+{% block content %}
+    <p>
+        {% translate "Thanks for spending some quality time with the Web site today." %}
+    </p>
+    <p>
+        <a href="{% url 'admin:index' %}">{% translate 'Log in again' %}</a>
+    </p>
+{% endblock %}
diff --git a/tests/django_admin/registration/password_change_done.html b/tests/django_admin/registration/password_change_done.html
new file mode 100644
index 0000000..a035040
--- /dev/null
+++ b/tests/django_admin/registration/password_change_done.html
@@ -0,0 +1,24 @@
+{% extends "admin/base_site.html" %}
+{% load i18n %}
+{% block userlinks %}
+    {% url 'django-admindocs-docroot' as docsroot %}
+    {% if docsroot %}
+        <a href="{{ docsroot }}">{% translate 'Documentation' %}</a>
+        /
+    {% endif %}
+    {% translate 'Change password' %} /
+    <a href="{% url 'admin:logout' %}">
+        {% translate 'Log out' %}
+    </a>
+{% endblock %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+        &rsaquo; {% translate 'Password change' %}
+    </div>
+{% endblock %}
+{% block content %}
+    <p>
+        {% translate 'Your password was changed.' %}
+    </p>
+{% endblock %}
diff --git a/tests/django_admin/registration/password_change_form.html b/tests/django_admin/registration/password_change_form.html
new file mode 100644
index 0000000..e445528
--- /dev/null
+++ b/tests/django_admin/registration/password_change_form.html
@@ -0,0 +1,71 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static %}
+{% block extrastyle %}
+    {{ block.super }}
+    <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}">
+{% endblock %}
+{% block userlinks %}
+    {% url 'django-admindocs-docroot' as docsroot %}
+    {% if docsroot %}
+        <a href="{{ docsroot }}">{% translate 'Documentation' %}</a>
+        /
+    {% endif %}
+    {% translate 'Change password' %} /
+    <a href="{% url 'admin:logout' %}">
+        {% translate 'Log out' %}
+    </a>
+{% endblock %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+        &rsaquo; {% translate 'Password change' %}
+    </div>
+{% endblock %}
+{% block content %}
+    <div id="content-main">
+        <form method="post">
+            {% csrf_token %}
+            <div>
+                {% if form.errors %}
+                    <p class="errornote">
+                        {% if form.errors.items|length == 1 %}
+                            {% translate "Please correct the error below." %}
+                        {% else %}
+                            {% translate "Please correct the errors below." %}
+                        {% endif %}
+                    </p>
+                {% endif %}
+                <p>
+                    {% translate 'Please enter your old password, for security’s sake, and then enter your new password twice so we can verify you typed it in correctly.' %}
+                </p>
+                <fieldset class="module aligned wide">
+                    <div class="form-row">
+                        {{ form.old_password.errors }}
+                        {{ form.old_password.label_tag }} {{ form.old_password }}
+                    </div>
+                    <div class="form-row">
+                        {{ form.new_password1.errors }}
+                        {{ form.new_password1.label_tag }} {{ form.new_password1 }}
+                        {% if form.new_password1.help_text %}
+                            <div class="help">
+                                {{ form.new_password1.help_text|safe }}
+                            </div>
+                        {% endif %}
+                    </div>
+                    <div class="form-row">
+                        {{ form.new_password2.errors }}
+                        {{ form.new_password2.label_tag }} {{ form.new_password2 }}
+                        {% if form.new_password2.help_text %}
+                            <div class="help">
+                                {{ form.new_password2.help_text|safe }}
+                            </div>
+                        {% endif %}
+                    </div>
+                </fieldset>
+                <div class="submit-row">
+                    <input type="submit" value="{% translate 'Change my password' %}" class="default">
+                </div>
+            </div>
+        </form>
+    </div>
+{% endblock %}
diff --git a/tests/django_admin/registration/password_reset_complete.html b/tests/django_admin/registration/password_reset_complete.html
new file mode 100644
index 0000000..2ed2b87
--- /dev/null
+++ b/tests/django_admin/registration/password_reset_complete.html
@@ -0,0 +1,16 @@
+{% extends "admin/base_site.html" %}
+{% load i18n %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+        &rsaquo; {% translate 'Password reset' %}
+    </div>
+{% endblock %}
+{% block content %}
+    <p>
+        {% translate "Your password has been set. You may go ahead and log in now." %}
+    </p>
+    <p>
+        <a href="{{ login_url }}">{% translate 'Log in' %}</a>
+    </p>
+{% endblock %}
diff --git a/tests/django_admin/registration/password_reset_confirm.html b/tests/django_admin/registration/password_reset_confirm.html
new file mode 100644
index 0000000..1f8c454
--- /dev/null
+++ b/tests/django_admin/registration/password_reset_confirm.html
@@ -0,0 +1,44 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static %}
+{% block extrastyle %}
+    {{ block.super }}
+    <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}">
+{% endblock %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+        &rsaquo; {% translate 'Password reset confirmation' %}
+    </div>
+{% endblock %}
+{% block content %}
+    {% if validlink %}
+        <p>
+            {% translate "Please enter your new password twice so we can verify you typed it in correctly." %}
+        </p>
+        <form method="post">
+            {% csrf_token %}
+            <fieldset class="module aligned">
+                <input class="hidden" autocomplete="username" value="{{ form.user.get_username }}">
+                <div class="form-row field-password1">
+                    {{ form.new_password1.errors }}
+                    <label for="id_new_password1">
+                        {% translate 'New password:' %}
+                    </label>
+                    {{ form.new_password1 }}
+                </div>
+                <div class="form-row field-password2">
+                    {{ form.new_password2.errors }}
+                    <label for="id_new_password2">
+                        {% translate 'Confirm password:' %}
+                    </label>
+                    {{ form.new_password2 }}
+                </div>
+                <input type="submit" value="{% translate 'Change my password' %}">
+            </fieldset>
+        </form>
+    {% else %}
+        <p>
+            {% translate "The password reset link was invalid, possibly because it has already been used. Please request a new password reset." %}
+        </p>
+    {% endif %}
+{% endblock %}
diff --git a/tests/django_admin/registration/password_reset_done.html b/tests/django_admin/registration/password_reset_done.html
new file mode 100644
index 0000000..c4dfd5f
--- /dev/null
+++ b/tests/django_admin/registration/password_reset_done.html
@@ -0,0 +1,16 @@
+{% extends "admin/base_site.html" %}
+{% load i18n %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+        &rsaquo; {% translate 'Password reset' %}
+    </div>
+{% endblock %}
+{% block content %}
+    <p>
+        {% translate 'We’ve emailed you instructions for setting your password, if an account exists with the email you entered. You should receive them shortly.' %}
+    </p>
+    <p>
+        {% translate 'If you don’t receive an email, please make sure you’ve entered the address you registered with, and check your spam folder.' %}
+    </p>
+{% endblock %}
diff --git a/tests/django_admin/registration/password_reset_email.html b/tests/django_admin/registration/password_reset_email.html
new file mode 100644
index 0000000..da66e81
--- /dev/null
+++ b/tests/django_admin/registration/password_reset_email.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+{% autoescape off %}
+{% blocktranslate %}
+    You're receiving this email because you requested a password reset for your user account at {{ site_name }}.
+{% endblocktranslate %}
+{% translate "Please go to the following page and choose a new password:" %}
+{% block reset_link %}
+    {{ protocol }}://{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
+{% endblock %}
+{% translate 'Your username, in case you’ve forgotten:' %} {{ user.get_username }}
+{% translate "Thanks for using our site!" %}
+{% blocktranslate %}
+    The {{ site_name }} team
+{% endblocktranslate %}
+{% endautoescape %}
diff --git a/tests/django_admin/registration/password_reset_form.html b/tests/django_admin/registration/password_reset_form.html
new file mode 100644
index 0000000..82a204d
--- /dev/null
+++ b/tests/django_admin/registration/password_reset_form.html
@@ -0,0 +1,30 @@
+{% extends "admin/base_site.html" %}
+{% load i18n static %}
+{% block extrastyle %}
+    {{ block.super }}
+    <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}">
+{% endblock %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
+        &rsaquo; {% translate 'Password reset' %}
+    </div>
+{% endblock %}
+{% block content %}
+    <p>
+        {% translate 'Forgotten your password? Enter your email address below, and we’ll email instructions for setting a new one.' %}
+    </p>
+    <form method="post">
+        {% csrf_token %}
+        <fieldset class="module aligned">
+            <div class="form-row field-email">
+                {{ form.email.errors }}
+                <label for="id_email">
+                    {% translate 'Email address:' %}
+                </label>
+                {{ form.email }}
+            </div>
+            <input type="submit" value="{% translate 'Reset my password' %}">
+        </fieldset>
+    </form>
+{% endblock %}
diff --git a/tests/django_cms/admin/cms/extensions/change_form.html b/tests/django_cms/admin/cms/extensions/change_form.html
new file mode 100644
index 0000000..13c2e7d
--- /dev/null
+++ b/tests/django_cms/admin/cms/extensions/change_form.html
@@ -0,0 +1,17 @@
+{% extends "admin/change_form.html" %}
+{% load i18n admin_urls %}
+{% block submit_buttons_bottom %}
+    <div class="submit-row"
+        {% if is_popup %}style="overflow: auto;" {% endif %}
+        >
+        <input type="submit" name="_save" class="default" value="{% trans 'Save' %}"/>
+        {% if not add %}
+            <p class="deletelink-box">
+                {% url opts|admin_urlname:'delete' original.pk|admin_urlquote as delete_url %}
+                <a href="{% add_preserved_filters delete_url %}" class="deletelink">
+                    {% trans "Delete" %}
+                </a>
+            </p>
+        {% endif %}
+    </div>
+{% endblock %}
diff --git a/tests/django_cms/admin/cms/mail/base.html b/tests/django_cms/admin/cms/mail/base.html
new file mode 100644
index 0000000..d1ce925
--- /dev/null
+++ b/tests/django_cms/admin/cms/mail/base.html
@@ -0,0 +1,73 @@
+{% load i18n %}
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head height="100%">
+        <title>{{ title }}</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta http-equiv="Content-Language" content="en-us" />
+        <style type="text/css">
+    html,
+    body,
+    .grid {
+        height: 100%;
+    }
+
+    .header {
+        margin-bottom: 40px;
+    }
+
+    .content {
+        padding: 28px;
+        font-family: Lucida Grande;
+        font-size: 12px;
+    }
+
+    .content h1 {
+        font-size: 20px;
+        font-weight: normal;
+    }
+
+    .content a,
+    .content a:active,
+    .content a:visited,
+    .content a:hover {
+        text-decoration: underline;
+    }
+
+    .data {
+        line-height: 24px;
+    }
+        </style>
+    </head>
+    <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" height="100%">
+        <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" class="grid">
+            <tr>
+                <td width="100%" class="content" valign="top">
+                    <div class="header">
+                        <h1>{{ title }}</h1>
+                        {% block header %}{% endblock %}
+                    </div>
+                    {% block content %}{% endblock %}
+                </td>
+            </tr>
+            <tr>
+                <td class="content">
+                    <p>
+                        {% blocktrans %}
+                            Log in to administration
+                            <a href="{{ login_url }}">here</a>
+                            .
+                        {% endblocktrans %}
+                    </p>
+                    <p>
+                        Generated by
+                        <a href="https://www.django-cms.org">
+                            django cms
+                        </a>
+                        {% now "d.m.Y H:i:s" %}.
+                    </p>
+                </td>
+            </tr>
+        </table>
+    </body>
+</html>
diff --git a/tests/django_cms/admin/cms/mail/base.txt b/tests/django_cms/admin/cms/mail/base.txt
new file mode 100644
index 0000000..9e7d387
--- /dev/null
+++ b/tests/django_cms/admin/cms/mail/base.txt
@@ -0,0 +1,10 @@
+{% load i18n %}
+
+{{ title }}
+--------------
+{% block header %}{% endblock %}
+{% block content %}{% endblock %}
+
+{% blocktrans %}Login url: {{ login_url }}{% endblocktrans %}
+
+[Generated by: http://www.django-cms.org {% now "d.m.Y H:i:s" %}.]
diff --git a/tests/django_cms/admin/cms/mail/page_user_change.html b/tests/django_cms/admin/cms/mail/page_user_change.html
new file mode 100644
index 0000000..571e384
--- /dev/null
+++ b/tests/django_cms/admin/cms/mail/page_user_change.html
@@ -0,0 +1,14 @@
+{% extends 'admin/cms/mail/base.html' %}
+{% load i18n %}
+{% block content %}
+    <table>
+        <tr>
+            <td>{% trans 'Username:' %}</td>
+            <td>{{ user.username }}</td>
+        </tr>
+        <tr>
+            <td>{% trans 'Password:' %}</td>
+            <td>{{ password }}</td>
+        </tr>
+    </table>
+{% endblock %}
diff --git a/tests/django_cms/admin/cms/mail/page_user_change.txt b/tests/django_cms/admin/cms/mail/page_user_change.txt
new file mode 100644
index 0000000..e901847
--- /dev/null
+++ b/tests/django_cms/admin/cms/mail/page_user_change.txt
@@ -0,0 +1,7 @@
+{% extends 'admin/cms/mail/base.txt' %}
+{% load i18n %}
+
+{% block content %}
+    {% trans 'Username:' %} {{ user.username }}
+    {% trans 'Password:' %} {{ password }}
+{% endblock %}
diff --git a/tests/django_cms/admin/cms/page/change_form.html b/tests/django_cms/admin/cms/page/change_form.html
new file mode 100644
index 0000000..53a51ad
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/change_form.html
@@ -0,0 +1,130 @@
+{% extends "admin/change_form.html" %}
+{% load i18n admin_urls static admin_modify admin_urls cms_admin cms_static %}
+{% block title %}
+    {% if add %}
+        {% trans 'Add a page' %}
+    {% else %}
+        {% trans "Change a page" %}
+    {% endif %}
+{% endblock %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
+        &rsaquo;
+        <a href="{% url 'admin:app_list' app_label=opts.app_label %}">
+            {{ opts.app_config.verbose_name }}
+        </a>
+        &rsaquo;
+        {% if has_change_permission %}
+            <a href="{% url opts|admin_urlname:'changelist' %}">
+                {{ opts.verbose_name_plural|capfirst }}
+            </a>
+        {% else %}
+            {{ opts.verbose_name_plural|capfirst }}
+        {% endif %}
+        &rsaquo;
+        {% if add %}
+            {% trans 'Add' %} {{ opts.verbose_name }}
+        {% else %}
+            {{ original|truncatewords:"18" }}
+        {% endif %}
+    </div>
+{% endblock %}
+{% block extrahead %}
+    <script src="{% static "admin/js/urlify.js" %}" type="text/javascript"></script>
+    <script src="{% static_with_version "cms/js/dist/bundle.admin.base.min.js" %}" type="text/javascript"></script>
+    <script src="{% static_with_version "cms/js/dist/bundle.admin.changeform.min.js" %}" type="text/javascript"></script>
+    <script type="text/javascript">
+    if (!window.jQuery) {
+        window.jQuery = CMS.$;
+        window.$ = window.jQuery;
+    }
+    </script>
+    {{ block.super }}
+{% endblock %}
+{% block content_title %}
+    {% if title %}<h1>{{ title }}</h1>{% endif %}
+    {% if not popup and not add %}
+        <ul class="object-tools hide-in-modal">
+            <li>
+                {% url opts|admin_urlname:'preview_page' page.id language as admin_url %}
+                <a href="{{ admin_url }}" target="_parent">{% trans "View on site" %}</a>
+            </li>
+        </ul>
+    {% endif %}
+{% endblock %}
+{% block content %}
+    <div id="content-main">
+        {% block object-tools %}{% endblock %}
+        <form {% if has_file_field %}enctype="multipart/form-data"
+              {% endif %}action="?language={{ language }}{% if request.GET.parent_node %}&amp;parent_node={{ request.GET.parent_node }}{% endif %}{% if request.GET.source %}&amp;source={{ request.GET.source }}{% endif %}"
+              method="post"
+              id="page_form">
+        {% csrf_token %}
+        {% block form_top %}{% endblock %}
+        <div style="display: none;"><input type="hidden"
+       name="language"
+       value="{{ language }}"
+       id="id_language"/></div>
+        {% if show_language_tabs and not show_permissions %}
+            <div id="page_form_lang_tabs">
+                {% for lang_code, lang_name in language_tabs %}
+                    <input type="button"
+                           onclick="CMS.API.changeLanguage('./?language={{ lang_code }}');"
+                           class="language_button {% if lang_code == language %}selected{% else %}{% if not lang_code in filled_languages %} notfilled{% endif %}{% endif %}"
+                           id="{{ lang_code }}button"
+                           name="{{ lang_code }}"
+                           value="{{ lang_name }}"/>
+                {% endfor %}
+                <div class="lang_tabs_line"></div>
+            </div>
+        {% endif %}
+        <div id="lang_tab_content">
+            {% if is_popup %}<input type="hidden" name="_popup" value="1" />{% endif %}
+            {% if save_on_top %}{% submit_row %}{% endif %}
+            {% if errors %}
+                <p class="errornote">
+                    {% blocktrans count errors|length as counter %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktrans %}
+                    </p>
+                    <ul class="errorlist">{% for error in adminform.form.non_field_errors %}<li>{{ error }}</li>{% endfor %}</ul>
+                {% endif %}
+                {% for fieldset in adminform %}
+                    {% include "admin/cms/page/includes/fieldset.html" %}{% endfor %}
+                    {% for inline_admin_formset in inline_admin_formsets %}
+                        {% include inline_admin_formset.opts.template %}{% endfor %}
+                        {% if show_permissions %}
+                            {% if CMS_PERMISSION and can_change_permissions %}
+                                <div class="inline-group">
+                                    <div class="tabular inline-related">
+                                        <fieldset id="inherited_permissions" class="module aligned collapse">
+                                            <h2>{% trans 'All permissions' %}</h2>
+                                            <div class="loading" rel="../permissions/">{% trans 'Loading...' %}</div>
+                                        </fieldset>
+                                    </div>
+                                </div>
+                            {% endif %}
+                        {% endif %}
+                        {% block after_related_objects %}{% endblock %}
+                        {% if add %}
+                            <div class="submit-row" {% if is_popup %} style="overflow: auto;">
+                                <input type="submit" name="_save" class="default" value="{% trans 'Save' %}"/>
+                                <input type="submit" name="_continue" value="{% trans 'Save and continue editing' %}"/>
+                            </div>
+                        {% else %}
+                            {% page_submit_row %}
+                        {% endif %}
+                    </div>
+                </form>
+            </div>
+            {% block admin_change_form_document_ready %}
+                {{ block.super }}
+            {% endblock %}
+            {% for url in unihandecode_urls %}<script src="{{ url }}" type="text/javascript"></script>{% endfor %}
+            {% if unihandecode_urls %}
+                <script>
+    var UNIHANDECODER = unihandecode.Unihan('{{ unihandecode_lang }}');
+                </script>
+            {% endif %}
+            {# JavaScript for prepopulated fields #}
+            {% prepopulated_fields_js %}
+        {% endblock %}
diff --git a/tests/django_cms/admin/cms/page/close_frame.html b/tests/django_cms/admin/cms/page/close_frame.html
new file mode 100644
index 0000000..dd8df67
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/close_frame.html
@@ -0,0 +1,37 @@
+{% extends "admin/change_form.html" %}
+{% load i18n l10n static cms_static %}
+{% block title %}
+    {% trans "Change a page" %}
+{% endblock %}
+{% block content %}
+    {# trick for cms to understand that the plugin was actually correctly saved #}
+    <div class="messagelist">
+        <div class="success"></div>
+    </div>
+    <script>
+window.CMS || window.parent.CMS || document.write(
+'<script src="{% static_with_version "cms/js/dist/bundle.admin.base.min.js" %}" type="text/javascript"><\/script>'
+);
+    </script>
+    <script>
+    // we have a special case here cause the CMS namespace
+    // can be either inside the current window or the parent
+    (function(Window) {
+        // the dataBridge is used to access plugin information from different resources
+        // Do NOT move this!!!
+        Window.CMS.API.Helpers.dataBridge = {{ plugin_data|safe }};
+
+        {% if plugin_structure %}
+            Window.CMS.API.Helpers.dataBridge.structure = {{ plugin_structure|safe }};
+        {% endif %}
+
+        Window.CMS.$(document).ready(function () {
+            // make sure we're doing after the "modal" mechanism kicked in
+            setTimeout(function () {
+                // save current plugin
+                Window.CMS.API.Helpers.onPluginSave();
+            }, 100);
+        });
+    })(window.parent || window);
+    </script>
+{% endblock %}
diff --git a/tests/django_cms/admin/cms/page/includes/fieldset.html b/tests/django_cms/admin/cms/page/includes/fieldset.html
new file mode 100644
index 0000000..e95a550
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/includes/fieldset.html
@@ -0,0 +1 @@
+{% extends "admin/includes/fieldset.html" %}
diff --git a/tests/django_cms/admin/cms/page/permissions.html b/tests/django_cms/admin/cms/page/permissions.html
new file mode 100644
index 0000000..50034e2
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/permissions.html
@@ -0,0 +1,75 @@
+{% load i18n cms_admin cms_tags admin_urls %}
+{% if rows %}
+    <table>
+        <thead>
+            <tr>
+                <th>{% trans "Page" %}</th>
+                <th>{% trans "User" %}</th>
+                <th>{% trans "Group" %}</th>
+                <th>{% trans "Can edit" %}</th>
+                <th>{% trans "Can add" %}</th>
+                <th>{% trans "Can delete" %}</th>
+                <th>{% trans "Can publish" %}</th>
+                <th>{% trans "Can change permissions" %}</th>
+                <th>{% trans "Can move" %}</th>
+                <th>{% trans "Can view" %}</th>
+                <th>
+                    {% trans "Grant on" %}
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for row in rows %}
+                {% with permission=row.permission %}
+                <tr class="{% cycle 'row1' 'row2' %}">
+                    <td class="page">
+                        {% if row.is_global %}
+                            {% if row.can_change %}
+                                <a href="{% cms_admin_url 'cms_globalpagepermission_change' permission.id %}">
+                                    {% trans "(global)" %}
+                                </a>
+                            {% else %}
+                                {% trans "(global)" %}
+                            {% endif %}
+                        {% else %}
+                            {% if permission.page_id == page.id %}
+                                {% trans "(current)" %}
+                            {% else %}
+                                {% if row.can_change %}
+                                    <a href="{% url opts|admin_urlname:'change' permission.page_id %}">
+                                        {{ permission.page }}
+                                    </a>
+                                {% else %}
+                                    {{ permission.page }}
+                                {% endif %}
+                            {% endif %}
+                        {% endif %}
+                    </td>
+                    <td class="user">{{ permission.user|default_if_none:"-" }}</td>
+                    <td class="group">{{ permission.group|default_if_none:"-" }}</td>
+                    <td class="can_change">{{ permission.can_change|boolean_icon }}</td>
+                    <td class="can_add">{{ permission.can_add|boolean_icon }}</td>
+                    <td class="can_delete">{{ permission.can_delete|boolean_icon }}</td>
+                    <td class="can_publish">{{ permission.can_publish|boolean_icon }}</td>
+                    <td class="can_change_permissions">
+                        {{ permission.can_change_permissions|boolean_icon }}
+                    </td>
+                    <td class="can_move_page">{{ permission.can_move_page|boolean_icon }}</td>
+                    <td class="can_view">{{ permission.can_view|boolean_icon }}</td>
+                    <td class="grant_on">
+                        {% if row.is_global %}
+                            {% trans "All" %}
+                        {% else %}
+                            {{ permission.get_grant_on_display }}
+                        {% endif %}
+                    </td>
+                </tr>
+            {% endwith %}
+        {% endfor %}
+    </tbody>
+</table>
+{% else %}
+<p>
+    {% trans "Page doesn't inherit any permissions." %}
+</p>
+{% endif %}
diff --git a/tests/django_cms/admin/cms/page/plugin/change_form.html b/tests/django_cms/admin/cms/page/plugin/change_form.html
new file mode 100644
index 0000000..7ee17e1
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/plugin/change_form.html
@@ -0,0 +1,16 @@
+{% extends "admin/change_form.html" %}
+{% load cms_admin cms_static %}
+{% block extrahead %}
+    {# in case plugins require widgets, they need to have bundle here #}
+    <script src="{% static_with_version "cms/js/dist/bundle.admin.base.min.js" %}" type="text/javascript"></script>
+    <script type="text/javascript">
+        if (!window.jQuery) {
+            window.jQuery = CMS.$;
+            window.$ = window.jQuery;
+        }
+    </script>
+    {{ block.super }}
+{% endblock %}
+{% block submit_buttons_bottom %}
+    {% submit_row_plugin %}
+{% endblock %}
diff --git a/tests/django_cms/admin/cms/page/plugin/confirm_form.html b/tests/django_cms/admin/cms/page/plugin/confirm_form.html
new file mode 100644
index 0000000..abf89d7
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/plugin/confirm_form.html
@@ -0,0 +1 @@
+{% extends "admin/cms/page/close_frame.html" %}
diff --git a/tests/django_cms/admin/cms/page/plugin/delete_confirmation.html b/tests/django_cms/admin/cms/page/plugin/delete_confirmation.html
new file mode 100644
index 0000000..e99f71e
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/plugin/delete_confirmation.html
@@ -0,0 +1,3 @@
+{% extends "admin/delete_confirmation.html" %}
+{% load i18n admin_urls cms_tags %}
+{% block breadcrumbs %}{% endblock %}
diff --git a/tests/django_cms/admin/cms/page/plugin/error_form.html b/tests/django_cms/admin/cms/page/plugin/error_form.html
new file mode 100644
index 0000000..e9fee09
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/plugin/error_form.html
@@ -0,0 +1,17 @@
+{% extends "admin/change_form.html" %}
+{% load i18n l10n static %}
+{% block title %}
+    {% trans "Edit model" %}
+{% endblock %}
+{% block content %}
+    <form action="." method="post" id="cmsplugin_form">
+        {% csrf_token %}
+        <div>
+            <fieldset class="module aligned ">
+                <div class="description">
+                    {{ message }}
+                </div>
+            </fieldset>
+        </div>
+    </form>
+{% endblock %}
diff --git a/tests/django_cms/admin/cms/page/plugin/submit_line.html b/tests/django_cms/admin/cms/page/plugin/submit_line.html
new file mode 100644
index 0000000..852a398
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/plugin/submit_line.html
@@ -0,0 +1,22 @@
+{% load i18n admin_urls cms_tags %}
+<div class="submit-row">
+    {% if show_save %}
+        <input type="submit" value="{% trans 'Save' %}" class="default" name="_save" />
+    {% endif %}
+    {% if show_delete_link %}
+        <p class="deletelink-box">
+            <a href="{% cms_admin_url "cms_page_delete_plugin" original.pk %}" class="deletelink">
+                {% trans "Delete" %}
+            </a>
+        </p>
+    {% endif %}
+    {% if show_save_as_new %}
+        <input type="submit" value="{% trans 'Save as new' %}" name="_saveasnew" />
+    {% endif %}
+    {% if show_save_and_add_another %}
+        <input type="submit" value="{% trans 'Save and add another' %}" name="_addanother" />
+    {% endif %}
+    {% if show_save_and_continue %}
+        <input type="submit" value="{% trans 'Save and continue editing' %}" name="_continue" />
+    {% endif %}
+</div>
diff --git a/tests/django_cms/admin/cms/page/submit_row.html b/tests/django_cms/admin/cms/page/submit_row.html
new file mode 100644
index 0000000..91199e8
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/submit_row.html
@@ -0,0 +1,34 @@
+{% load i18n cms_tags admin_urls %}
+<div class="submit-row"
+    {% if is_popup %}style="overflow: auto;" {% endif %}
+    >
+    {% if show_save %}
+        <input type="submit" value="{% trans 'Save' %}" class="default" name="_save" />
+    {% endif %}
+    <p class="deletelink-box">
+        {% if show_delete_link %}
+            <a href="delete/" class="deletelink">
+                {% trans "Delete" %}
+            </a>
+        {% endif %}
+        {% if show_buttons %}
+            <a href="{% url opts|admin_urlname:'change' object_id %}?language={{ language }}"
+               class="cms-btn-group{% if basic_info_active %}cms-btn-active{% endif %}">
+            {% trans "Basic Settings" %}
+        </a>
+        <a href="{% url opts|admin_urlname:'advanced' object_id %}?language={{ language }}"
+           class="cms-btn-group{% if advanced_settings_active %}cms-btn-active{% endif %}">
+        {% trans "Advanced Settings" %}
+    </a>
+{% endif %}
+</p>
+{% if show_save_as_new %}
+<input type="submit" value="{% trans 'Save as new' %}" name="_saveasnew" />
+{% endif %}
+{% if show_save_and_add_another %}
+<input type="submit" value="{% trans 'Save and add another' %}" name="_addanother" />
+{% endif %}
+{% if show_save_and_continue %}
+<input type="submit" value="{% trans 'Save and continue editing' %}" name="_continue" />
+{% endif %}
+</div>
diff --git a/tests/django_cms/admin/cms/page/tree/actions_dropdown.html b/tests/django_cms/admin/cms/page/tree/actions_dropdown.html
new file mode 100644
index 0000000..8f4fa55
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/tree/actions_dropdown.html
@@ -0,0 +1,162 @@
+{% load i18n admin_urls %}
+{% spaceless %}
+    <ul class="cms-pagetree-dropdown-menu-inner">
+        {% block actions %}
+            <li
+                {% if has_copy_page_permission %}
+                    class="js-cms-tree-item-copy" data-id="{{ page.pk }}" data-node-id="{{ node.pk }}" data-apphook="{{ page.application_urls|default_if_none:"" }}"
+                {% endif %}
+                >
+                <a
+                    {% if not has_copy_page_permission %}class="cms-pagetree-dropdown-item-disabled" {% endif %}
+                    href="#" title="{% filter escapejs %}{% trans "Copy" %}
+                {% endfilter %}
+                ">
+                <span class="cms-icon cms-icon-copy"></span>
+                <span>
+                    {% filter escapejs %}{% trans "Copy" %}
+                {% endfilter %}
+                <span>
+                </a>
+            </li>
+            <li
+                {% if has_move_page_permission %}
+                    class="js-cms-tree-item-cut" data-id="{{ page.pk }}" data-node-id="{{ node.pk }}"
+                {% endif %}
+                >
+                <a
+                    {% if not has_move_page_permission %}class="cms-pagetree-dropdown-item-disabled" {% endif %}
+                    href="#" title="{% filter escapejs %}{% trans "Cut" %}{% endfilter %}
+                    ">
+                    <span class="cms-icon cms-icon-scissors"></span>
+                    <span>
+                        {% filter escapejs %}{% trans "Cut" %}{% endfilter %}
+                        <span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#"
+                           data-id="{{ page.pk }}"
+                           data-node-id="{{ node.pk }}"
+                           class="{% if has_add_permission %}js-cms-tree-item-paste{% endif %} {% if not has_add_permission or not paste_enabled %} cms-pagetree-dropdown-item-disabled{% endif %}">
+                        <span class="cms-icon cms-icon-alias"></span>
+                        <span>{% filter escapejs %}{% trans "Paste" %}{% endfilter %}</span>
+                    </a>
+                </li>
+                <li>
+                    {% if has_delete_permission %}
+                        <a href="{% url opts|admin_urlname:'delete' page.id %}?language={{ preview_language }}"
+                           title="{% filter escapejs %}{% trans ">
+                        {% else %}
+                            <a href="#" class="cms-pagetree-dropdown-item-disabled">
+                            {% endif %}
+                            <span class="cms-icon cms-icon-bin"></span>
+                            <span>{% filter escapejs %}{% trans "Delete" %}...{% endfilter %}</span>
+                        </a>
+                    </li>
+                    {% if has_change_permission and page.is_potential_home %}
+                        <li class="js-cms-tree-item-set-home">
+                            <a href="{% url opts|admin_urlname:'set_home' page.id %}"
+                               title="{% filter escapejs %}{% trans ">
+                                <span class="cms-icon cms-icon-home"></span>
+                                <span>{% filter escapejs %}{% trans "Set as home" %}{% endfilter %}</span>
+                            </a>
+                        </li>
+                    {% else %}
+                        <li class="js-cms-tree-item-set-home">
+                            <a href="#" class="cms-pagetree-dropdown-item-disabled">
+                                <span class="cms-icon cms-icon-home"></span>
+                                <span>{% filter escapejs %}{% trans "Set as home" %}{% endfilter %}</span>
+                            </a>
+                        </li>
+                    {% endif %}
+                    <li>
+                        {% if has_change_advanced_settings_permission %}
+                            <a href="{% url opts|admin_urlname:'advanced' page.id %}"
+                               title="{% filter escapejs %}{% trans ">
+                            {% else %}
+                                <a href="#" class="cms-pagetree-dropdown-item-disabled">
+                                {% endif %}
+                                <span class="cms-icon cms-icon-cogs"></span>
+                                <span>{% filter escapejs %}{% trans "Advanced settings" %}{% endfilter %}</span>
+                            </a>
+                        </li>
+                        {% if CMS_PERMISSION %}
+                            <li>
+                                {% if has_change_permissions_permission %}
+                                    <a href="{% url opts|admin_urlname:'permissions' page.id %}"
+                                       title="{% filter escapejs %}{% trans ">
+                                    {% else %}
+                                        <a href="#" class="cms-pagetree-dropdown-item-disabled">
+                                        {% endif %}
+                                        <span class="cms-icon cms-icon-lock"></span>
+                                        <span>{% filter escapejs %}{% trans "Permissions" %}{% endfilter %}</span>
+                                    </a>
+                                </li>
+                            {% endif %}
+                        {% endblock actions %}
+                        <li class="cms-pagetree-dropdown-separator">
+                            &nbsp;
+                        </li>
+                        <li>
+                            {% if page.publication_date %}
+                                <p title="{% filter escapejs %}{% trans ">
+                                    <strong>{% filter escapejs %}{% trans "publication date" %}{% endfilter %}:</strong>
+                                    {{ page.publication_date|date:"Y-m-d" }}
+                                </p>
+                            {% endif %}
+                            {% if page.publication_end_date %}
+                                <p title="{% filter escapejs %}{% trans ">
+                                    <strong>{% filter escapejs %}{% trans "publication end date" %}{% endfilter %}:</strong>
+                                    {{ page.publication_end_date|date:"Y-m-d" }}
+                                </p>
+                            {% endif %}
+                            <p title="{% filter escapejs %}{% trans ">
+                                <strong>{% filter escapejs %}{% trans "is restricted" %}{% endfilter %}:</strong>
+                                {% if page_is_restricted %}
+                                    {% filter escapejs %}{% trans "Yes" %}{% endfilter %}
+                                {% else %}
+                                    {% filter escapejs %}{% trans "No" %}{% endfilter %}
+                                {% endif %}
+                            </p>
+                            {% if page.changed_by %}
+                                <p title="{% filter escapejs %}{% trans ">
+                                    <strong>{% filter escapejs %}{% trans "last change by" %}{% endfilter %}:</strong>
+                                    {{ page.changed_by }}
+                                </p>
+                            {% endif %}
+                            {% if page.changed_date %}
+                                <p title="{% filter escapejs %}{% trans ">
+                                    <strong>
+                                    {% filter escapejs %}{% trans "last change on" %}{% endfilter %}:
+                                    </strong>
+                                    {{ page.changed_date|date:"Y-m-d H:i:s" }}
+                                </p>
+                            {% endif %}
+                            {% if page.get_template_display %}
+                                <p title="{% filter escapejs %}{% trans ">
+                                    <strong>
+                                    {% filter escapejs %}{% trans "template" %}{% endfilter %}:
+                                    </strong>
+                                    {{ page.get_template_display }}
+                                </p>
+                            {% endif %}
+                            {% if metadata %}
+                                <p title="{% filter escapejs %}{% trans ">
+                                    <strong>
+                                    {% filter escapejs %}{% trans "meta" %}{% endfilter %}:
+                                    </strong>
+                                    {{ metadata }}
+                                </p>
+                            {% endif %}
+                            {% if page.site %}
+                                <p title="{% filter escapejs %}{% trans ">
+                                    <strong>
+                                    {% filter escapejs %}{% trans "site" %}{% endfilter %}:
+                                    </strong>
+                                    {{ page.site }}
+                                </p>
+                            {% endif %}
+                        </li>
+                    </ul>
+                {% endspaceless %}
diff --git a/tests/django_cms/admin/cms/page/tree/base.html.broken b/tests/django_cms/admin/cms/page/tree/base.html.broken
new file mode 100644
index 0000000..891ca49
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/tree/base.html.broken
@@ -0,0 +1,182 @@
+{% extends "admin/change_list.html" %}
+{% load i18n admin_list static admin_urls cms_admin cms_js_tags cms_static cms_tags %}
+
+{# TODO might not need that #}
+{% block title %}{% trans "List of pages" %}{% endblock %}
+{% block bodyclass %}{{ block.super }} change-list cms-pagetree-wrapper{% endblock %}
+{% block coltype %}flex{% endblock %}
+{% block date_hierarchy %}{% endblock %}
+{% block pagination %}{% endblock %}
+
+{% block extrahead %}
+    {{ block.super }}
+    {# INFO: we need to add styles here instead of "extrastyle" to avoid conflicts with adminstyle #}
+    <link rel="stylesheet" href="{% static_with_version 'cms/css/cms.base.css' %}">
+    <link rel="stylesheet" href="{% static_with_version 'cms/css/cms.pagetree.css' %}">
+    <script src="{% static_with_version 'cms/js/dist/bundle.admin.base.min.js' %}"></script>
+    <script src="{% static_with_version 'cms/js/dist/bundle.admin.pagetree.min.js' %}"></script>
+{% endblock extrahead %}
+
+{% if not is_popup %}
+    {% block breadcrumbs %}
+        <div class="breadcrumbs cms-pagetree-breadcrumbs">
+            <a href="{% url 'admin:index' %}">{% trans "Home" %}</a> &rsaquo;
+            <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a> &rsaquo;
+            {{ opts.verbose_name_plural|capfirst|escape }}
+            {# TODO might remove this or add reset #}
+            {% if request.GET.q or request.POST.q %}
+            &rsaquo; {% trans "Search" %}
+            {% endif %}
+        </div>
+    {% endblock %}
+{% endif %}
+
+{% block content_title %}{% endblock %}
+
+{% block content %}
+    {% spaceless %}
+    <div id="content-main">
+        <div class="cms-pagetree-root module{% if tree.is_filtered %} filtered{% endif %}" id="changelist">
+            <div class="cms-pagetree cms-pagetree-header">
+                <div class="cms-pagetree-header-cell cms-pagetree-header-cell-fluid">
+                    <div class="cms-pagetree-header-row cms-pagetree-search-container">
+                        <div class="cms-pagetree-header-cell">
+                            <div class="cms-pagetree-header-title">
+                                <h1>
+                                    {% trans "Page Tree" %} <span>({{ tree.site.name }})</span>
+                                </h1>
+                            </div>
+
+                            {% if tree.is_filtered or request.GET.q %}
+                                {# INFO: show reset button when filtering is active #}
+                                <a href="{% url opts|admin_urlname:'changelist' %}" class="cms-pagetree-header-cell cms-pagetree-header-search-reset">{% trans "Reset filter"|lower %}</a>
+                            {% endif %}
+                        </div>
+                        <div class="cms-pagetree-header-cell cms-pagetree-header-cell-search">
+                            {# INFO: visible search field with filtering #}
+                            <form method="get" class="cms-pagetree-header-search js-cms-pagetree-header-search">
+                                <label for="field-searchbar" class="cms-hidden">{% trans "Search" %}</label>
+                                <div class="cms-pagetree-header-filter">
+                                    <input type="text" size="40" name="q" id="field-searchbar" value="{{ tree.query }}" placeholder="{% trans "Search" %}">
+                                    <div class="cms-pagetree-header-filter-trigger js-cms-pagetree-header-filter-trigger">
+                                        <a href="#"><span class="cms-icon cms-icon-arrow"></span></a>
+                                    </div>
+                                    <div class="cms-pagetree-header-filter-container js-cms-pagetree-header-filter-container">
+                                        {% for field in changelist_form.visible_fields %}
+                                            {% render_filter_field request field %}
+                                        {% endfor %}
+                                        <a href="#" class="cms-pagetree-header-search-close js-cms-pagetree-header-search-close">
+                                            <span class="cms-icon cms-icon-close"></span>
+                                        </a>
+                                    </div>
+                                </div>
+                                <button type="submit" class="cms-pagetree-header-search-btn">
+                                    <span class="cms-icon cms-icon-search"></span>
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="cms-pagetree-header-cell cms-pagetree-header-body">
+                    {# INFO: hidden search field with dynamic content #}
+                    <div class="js-cms-pagetree-header-search-copy cms-hidden">
+                        <div id="toolbar">
+                            <form id="changelist-search" method="get">
+                                <div><!-- DIV needed for valid HTML -->
+                                    <label for="searchbar"><img src="{% static "admin/img/search.svg" %}" alt="Search" /></label>
+                                    <input type="text" size="40" name="{{ search_var }}" value="{{ tree.query }}" id="searchbar" autofocus />
+                                    <input type="submit" value="{% trans 'Search' %}" />
+                                    {% for pair in changelist_form.get_filter_items %}
+                                        {% if pair.0 != search_var %}<input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}"/>{% endif %}
+                                    {% endfor %}
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                    <div class="cms-clear-mobile"></div>
+
+                    {# INFO: dropdown for changing sites and recover deleted pages #}
+                    <div class="cms-pagetree-sites-list cms-pagetree-dropdown js-cms-pagetree-dropdown">
+                        <a href="#" class="cms-pagetree-dropdown-trigger js-cms-pagetree-dropdown-trigger">
+                            <span class="cms-icon cms-icon-squares"></span>
+                        </a>
+                        <div class="cms-pagetree-dropdown-menu cms-pagetree-dropdown-menu-condensed cms-pagetree-dropdown-menu-arrow-top-right js-cms-pagetree-dropdown-menu">
+                            <ul class="cms-pagetree-dropdown-menu-inner">
+                                <li>
+                                    <span class="label">{% trans "Sites" %}</span>
+                                </li>
+                                {% for site in tree.sites %}
+                                    <li{% if site.pk == tree.site.pk %} class="active"{% endif %}>
+                                        <a href="#{{ site.pk }}" class="js-cms-pagetree-site-trigger" data-id="{{ site.pk }}">{{ site.name }}</a>
+                                    </li>
+                                {% endfor %}
+                                {% if has_recover_permission %}
+                                    <li class="cms-pagetree-dropdown-separator">&nbsp;</li>
+                                    <li>
+                                        <a href="{% url opts|admin_urlname:'recoverlist' %}" class="recoverlink">
+                                            {% blocktrans with opts.verbose_name_plural|escape as name %}
+                                                Restore deleted {{ name }}
+                                            {% endblocktrans %}
+                                        </a>
+                                    </li>
+                                {% endif %}
+                            </ul>
+                        </div>
+                        {# INFO: hidden site form when using the dropdown site switcher #}
+                        <form method="post" class="js-cms-pagetree-site-form cms-hidden">
+                            <select name="site">
+                                {% for site in tree.sites %}
+                                    <option value="{{ site.pk }}">{{ site.name }}</option>
+                                {% endfor %}
+                            </select>
+                            {% csrf_token %}
+                        </form>
+                    </div>
+
+                    {# INFO: "new page" button #}
+                    {% if has_add_permission %}
+                        <a href="{% url opts|admin_urlname:'add' %}" class="cms-pagetree-header-create cms-btn cms-btn-toolbar cms-btn-action">
+                            {% blocktrans with opts.verbose_name|title as name %}
+                                New {{ name }}
+                            {% endblocktrans %}
+                        </a>
+                    {% endif %}
+                </div>
+            </div>
+
+            <form id="changelist-form" action="" method="post" novalidate>{% csrf_token %}
+                <div class="cms-pagetree cms-pagetree-section">
+                    <h2>{% trans "Main Navigation" %}</h2>
+                    <div class="cms-pagetree-section-nav">
+                        {% if has_add_permission %}
+                            <div class="cms-pagetree-dropdown js-cms-pagetree-dropdown">
+                                <a href="#root" data-node-id="#root" data-id="#root" class="js-cms-pagetree-dropdown-trigger js-cms-pagetree-options cms-pagetree-dropdown-trigger cms-btn cms-btn-default cms-btn-no-border cms-icon cms-icon-menu">
+                                    <span class="sr-only">{% trans "Options" %}</span>
+                                </a>
+
+                                <div class="js-cms-pagetree-dropdown-menu cms-pagetree-dropdown-menu cms-pagetree-dropdown-menu-arrow-right-top">
+                                    <ul class="cms-pagetree-dropdown-menu-inner">
+                                        <li>
+                                            <a href="#" data-node-id="#root" data-id="#root" class="js-cms-tree-item-paste cms-pagetree-dropdown-item-disabled">
+                                                <span class="cms-icon cms-icon-alias"></span>
+                                                <span>{% trans "Paste" %}</span>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
+
+                {# INFO: javascript is loaded from cms.pagetree.js #}
+
+            </form>
+
+            {# INFO: used when copying nodes #}
+            <div class="cms-tree-dialog js-cms-tree-dialog"></div>
+        </div>
+    </div>
+    {% endspaceless %}
+{% endblock content %}
diff --git a/tests/django_cms/admin/cms/page/tree/copy_premissions.html b/tests/django_cms/admin/cms/page/tree/copy_premissions.html
new file mode 100644
index 0000000..357da2f
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/tree/copy_premissions.html
@@ -0,0 +1,16 @@
+{% load i18n %}
+<div class="cms-dialog js-cms-dialog js-cms-dialog-{{ dialog_id }}">
+    <h1>{% trans "Copy options" %}</h1>
+    <p>
+        {% trans "Choose copy options" %}
+    </p>
+    <form method="post">
+        {% csrf_token %}
+        {{ form.as_p }}
+        <div class="submit-row">
+            <input type="submit" value="{% trans 'Save' %}" class="default submit">
+            <input type="submit" value="{% trans 'Close' %}" class="cancel">
+        </div>
+    </form>
+</div>
+<div class="cms-dialog-dimmer js-cms-dialog-dimmer"></div>
diff --git a/tests/django_cms/admin/cms/page/tree/filter.html b/tests/django_cms/admin/cms/page/tree/filter.html
new file mode 100644
index 0000000..fdb9299
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/tree/filter.html
@@ -0,0 +1,13 @@
+{% load i18n %}
+<h3>{{ field.label }}</h3>
+<ul>
+    {% for choice in choices %}
+        <li
+            {% if choice.selected %}class="selected" {% endif %}
+            >
+            <a href="{{ choice.query_string|iriencode }}">
+                {{ choice.display }}
+            </a>
+        </li>
+    {% endfor %}
+</ul>
diff --git a/tests/django_cms/admin/cms/page/tree/legend.html b/tests/django_cms/admin/cms/page/tree/legend.html
new file mode 100644
index 0000000..e098e66
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/tree/legend.html
@@ -0,0 +1,77 @@
+{% load i18n %}
+{% spaceless %}
+    <div class="cms-pagetree cms-pagetree-section cms-pagetree-section-condensed cms-pagetree-legend">
+        <span class="cms-pagetree-dropdown js-cms-pagetree-dropdown">
+            <div class="js-cms-pagetree-dropdown-trigger cms-pagetree-legend-title-wrap">
+                <span class="cms-icon cms-icon-info"></span>
+                <span class="cms-pagetree-legend-title">
+                    {% trans "Legend" %}
+                </span>
+            </div>
+            <div class="cms-pagetree-dropdown-menu cms-pagetree-dropdown-menu-condensed cms-pagetree-dropdown-menu-arrow-right-bottom js-cms-pagetree-dropdown-menu">
+                <ul class="cms-pagetree-dropdown-menu-inner">
+                    <li>
+                        <span class="cms-pagetree-dropdown-item">
+                            <span class="cms-pagetree-node-state cms-pagetree-node-state-published"></span>
+                            <span>{% trans "Published" %}</span>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="cms-pagetree-dropdown-item">
+                            <span class="cms-pagetree-node-state cms-pagetree-node-state-dirty"></span>
+                            <span>{% trans "Changed" %}</span>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="cms-pagetree-dropdown-item">
+                            <span class="cms-pagetree-node-state cms-pagetree-node-state-unpublished"></span>
+                            <span>{% trans "Unpublished" %}</span>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="cms-pagetree-dropdown-item">
+                            <span class="cms-pagetree-node-state cms-pagetree-node-state-empty"></span>
+                            <span>{% trans "Empty" %}</span>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="cms-pagetree-dropdown-item">
+                            <span class="cms-icon cms-icon-check-square"></span>
+                            <span>{% trans "In menu" %}</span>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="cms-pagetree-dropdown-item">
+                            <span class="cms-icon cms-icon-minus-square"></span>
+                            <span>{% trans "Not in menu" %}</span>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="cms-pagetree-dropdown-item">
+                            <span class="cms-icon cms-icon-eye"></span>
+                            <span>{% trans "View page" %}</span>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="cms-pagetree-dropdown-item">
+                            <span class="cms-icon cms-icon-home"></span>
+                            <span>{% trans "Home" %}</span>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="cms-pagetree-dropdown-item">
+                            <span class="cms-icon cms-icon-sitemap"></span>
+                            <span>{% trans "Softroot" %}</span>
+                        </span>
+                    </li>
+                    <li>
+                        <span class="cms-pagetree-dropdown-item">
+                            <span class="cms-icon cms-icon-puzzle"></span>
+                            <span>{% trans "Apphook" %}</span>
+                        </span>
+                    </li>
+                </ul>
+            </div>
+        </span>
+    </div>
+{% endspaceless %}
diff --git a/tests/django_cms/admin/cms/page/tree/menu.html.brocken b/tests/django_cms/admin/cms/page/tree/menu.html.brocken
new file mode 100644
index 0000000..b2be5f5
--- /dev/null
+++ b/tests/django_cms/admin/cms/page/tree/menu.html.brocken
@@ -0,0 +1,282 @@
+{% load i18n cms_admin admin_urls %}
+
+{# INFO: columns are defined in base.html options #}
+{% spaceless %}
+<li class="cms-tree-node {{ css_class }}
+    {% if follow_descendants %}{% if descendants %} jstree-open{% elif node.is_branch %} jstree-closed{% endif %}{% endif %}
+    {% if page.reverse_id == 'page_types' %} cms-tree-node-pagetype{% endif %}
+    {% if node.depth == 0 %} cms-tree-node-top{% endif %}
+    {% if filtered %} cms-tree-node-filtered{% endif %}
+    {% if has_add_permission %} cms-tree-node-root-allow-children{% endif %}
+    {% block extra_class %}
+        {% if is_shared_page %}
+            cms-tree-node-shared-true
+        {% else %}
+            cms-tree-node-shared-false
+        {% endif %}
+    {% endblock %}
+    "
+    {% if is_popup %}onclick="opener.dismissRelatedLookupPopup(window, {{ page.id }}); return false;"{% endif %}
+    data-id="{{ page.pk }}"
+    data-node-id="{{ node.pk }}"
+    data-slug="{{ page.get_slug }}"
+    data-is-home="{{ page.is_home|yesno:"true,false" }}"
+    data-move-permission="{{ has_move_page_permission|yesno:"true,false" }}"
+    data-add-permission="{{ has_add_page_permission|yesno:"true,false" }}"
+    {% block extra_data %}
+        {% if is_shared_page %}
+            data-shared-page="-true"
+        {% else %}
+            data-shared-page="-false"
+        {% endif %}
+    {% endblock %}
+    data-colview='
+        <div class="cms-tree-col">
+            <div class="cms-tree-item-wrapper">
+                {% block row_icon %}
+                    {% if page.is_home %}
+                        <div class="cms-tree-item cms-tree-item-icons">
+                            <div class="cms-tree-item-inner">
+                                <div class="cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+                                    data-cms-tooltip="{% autoescape on %}{% trans 'Home' %}{% endautoescape %}">
+                                    <span class="cms-icon cms-icon-home"></span>
+                                </div>
+                            </div>
+                        </div>
+                    {% endif %}
+                    {% if page.soft_root %}
+                        <div class="cms-tree-item cms-tree-item-icons">
+                            <div class="cms-tree-item-inner">
+                                <div class="cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+                                    data-cms-tooltip="{% autoescape on %}{% trans 'Softroot' %}{% endautoescape %}">
+                                    <a href="{% url opts|admin_urlname:'advanced' page.id %}">
+                                        <span class="cms-icon cms-icon-sitemap"></span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    {% endif %}
+                    {% if page.application_urls %}
+                        <div class="cms-tree-item cms-tree-item-icons">
+                            <div class="cms-tree-item-inner">
+                                <div class="cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+                                    data-cms-tooltip="{% autoescape on %}{% blocktrans with page.application_urls as apphook%}Application: {{ apphook }}{% endblocktrans %}{% endautoescape %}">
+                                    <a href="{% url opts|admin_urlname:'advanced' page.id %}">
+                                        <span class="cms-icon cms-icon-puzzle"></span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    {% endif %}
+                {% endblock %}
+            </div>
+        </div>
+    '
+    data-colpreview='
+        <div class="cms-tree-col">
+            <div class="cms-tree-item cms-tree-item-preview
+                {# INFO: highlight active icon when in sidebar mode #}
+                {% if page.id|slugify == request.GET.page_id|slugify %} cms-tree-preview-active{% endif %}">
+                <div class="cms-tree-item-inner cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay" data-cms-tooltip="{% autoescape on %}{% trans "View on site" %}{% endautoescape %}">
+                    <a class="js-cms-pagetree-page-view" href="{% url opts|admin_urlname:'preview_page' page.id lang %}"{% if lang in page_languages %} target="_top"{% endif %}">
+                        <span class="sr-only">{% autoescape on %}{% trans "View on site" %}{% endautoescape %}</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    '
+    {% for lang in site_languages %}
+    data-col{{ lang|lower|cut:'-' }}='
+        <div class="cms-tree-col">
+            <div class="cms-tree-item {% if is_shared_page or not has_publish_permission %} cms-tree-item-disabled{% endif %} cms-tree-item-lang">
+                <div class="cms-tree-item-inner cms-pagetree-dropdown{% if has_publish_permission %} js-cms-pagetree-dropdown{% endif %}">
+                    {% if has_publish_permission %}
+                        <a href="{% url opts|admin_urlname:'preview_page' page.id lang %}"
+                            class="cms-pagetree-dropdown-trigger js-cms-pagetree-dropdown-trigger"
+                            {# INFO: delegate click event to parent window when in sideframe #}
+                            {% if lang in page_languages %} target="_top"{% endif %}>
+                            {# INFO: renders <span class="{cls}" title="{title}"></span> #}
+                            {% tree_publish_row page lang %}
+                        </a>
+
+                        <div class="cms-pagetree-dropdown-menu cms-pagetree-dropdown-menu-arrow-right-top js-cms-pagetree-dropdown-menu">
+                            <ul class="cms-pagetree-dropdown-menu-inner">
+                                <li>
+                                    <a href="{% url opts|admin_urlname:'preview_page' page.id lang %}" class="js-cms-pagetree-page-view" target="_top">
+                                        <span class="cms-icon cms-icon-eye" title="{% autoescape on %}{% blocktrans with lang|upper as language %}Preview this page in {{ language }} {% endblocktrans %}{% endautoescape %}"></span>
+                                        <span>{% autoescape on %}{% trans "Preview" %}{% endautoescape %}</span>
+                                    </a>
+                                </li>
+                                {# hide if page is empty #}
+                                {% if lang in page_languages %}
+                                    {% if ancestors|items_are_published:lang %}
+                                        {% if page|is_dirty:lang or not page|is_published:lang %}
+                                            <li>
+                                                <a href="{% url opts|admin_urlname:'publish_page' page.id lang %}?redirect_language={{ preview_language }}{% if request.GET.page_id %}&amp;redirect_page_id={{ request.GET.page_id }}{% endif %}" class="js-cms-tree-lang-trigger">
+                                                    <span class="cms-icon cms-icon-check-o"></span>
+                                                    <span>{% autoescape on %}{% trans "Publish" %}{% endautoescape %}</span>
+                                                </a>
+                                            </li>
+                                        {% endif %}
+                                        {% if page|is_published:lang %}
+                                            <li>
+                                                <a href="{% url opts|admin_urlname:'unpublish' page.id lang %}?redirect_language={{ preview_language }}{% if request.GET.page_id %}&amp;redirect_page_id={{ request.GET.page_id }}{% endif %}" class="js-cms-tree-lang-trigger">
+                                                    <span class="cms-icon cms-icon-forbidden"></span>
+                                                    <span>{% autoescape on %}{% trans "Unpublish" %}{% endautoescape %}</span>
+                                                </a>
+                                            </li>
+                                        {% endif %}
+                                    {% endif %}
+                                {% else %}
+                                    <li>
+                                        <a href="{% url opts|admin_urlname:'change' page.id %}?language={{ lang }}">
+                                            <span class="cms-icon cms-icon-cogs"></span>
+                                            <span>{% autoescape on %}{% trans "Configure" %}{% endautoescape %}</span>
+                                        </a>
+                                    </li>
+                                {% endif %}
+                            </ul>
+                        </div>
+                    {% else %}
+                        <span class="cms-tree-lang-container">
+                            {% tree_publish_row page lang %}
+                        </span>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    '
+    {% endfor %}
+    data-colmenu='
+        <div class="cms-tree-col">
+            <div class="cms-tree-item cms-tree-item-menu{% if not has_change_permission %} cms-tree-item-disabled{% endif %} js-cms-tree-item-menu">
+                <div class="cms-tree-item-inner">
+                    {% if has_change_permission %}
+                        <a href="{% url opts|admin_urlname:'change_innavigation' page.id %}?language={{ preview_language }}&amp;{{ page.id }}={{ page.in_navigation|yesno:"1,0" }}">
+                    {% endif %}
+                        {% if page.in_navigation %}
+                            <div class="cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+                                data-cms-tooltip="{% autoescape on %}{% trans "in menu" %}{% endautoescape %}">
+                                <span class="cms-icon cms-icon-check-square"></span>
+                            </div>
+                        {% else %}
+                            <div class="cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+                                data-cms-tooltip="{% autoescape on %}{% trans "not in menu" %}{% endautoescape %}">
+                                <span class="cms-icon cms-icon-minus-square"></span>
+                            </div>
+                        {% endif %}
+                    {% if has_change_permission %}
+                        </a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    '
+    data-coloptions='
+        <div class="cms-tree-col cms-tree-col-padding-sm">
+            <div class="cms-tree-item-wrapper">
+                <div class="cms-tree-item cms-tree-item-button">
+                    <div{% if has_change_permission and has_change_advanced_settings_permission %} class="cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+                        data-cms-tooltip="{% autoescape on %}{% trans "Page settings (SHIFT click for advanced settings)" %}{% endautoescape %}"{% endif %}>
+                        {% if has_change_permission or has_change_advanced_settings_permission %}
+                        <a {% if has_change_permission %}href="{% url opts|admin_urlname:'change' page.id %}?language={{ preview_language }}" {% endif %}
+                            class="cms-btn cms-btn-default js-cms-tree-advanced-settings cms-icon cms-icon-pencil"
+                            {% if has_change_advanced_settings_permission %}
+                            data-url="{% url opts|admin_urlname:'advanced' page.id %}"
+                            {% endif %}
+                            >
+                        {% else %}
+                            <span class="cms-btn cms-btn-default cms-btn-disabled js-cms-tree-advanced-settings cms-icon cms-icon-pencil">
+                        {% endif %}
+                            <span class="sr-only">{% autoescape on %}{% trans "Page settings (SHIFT click for advanced settings)" %}{% endautoescape %}</span>
+                        {% if has_change_permission or has_change_advanced_settings_permission %}
+                        </a>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="cms-tree-item cms-tree-item-button">
+                    <div{% if has_add_page_permission %} class="cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+                        data-cms-tooltip="{% autoescape on %}{% trans 'New sub page' %}{% endautoescape %}"{% endif %}>
+                        {% if has_add_page_permission %}
+                            <a href="{% url opts|admin_urlname:'add' %}?parent_node={{ node.pk }}"
+                                class="js-cms-pagetree-add-page cms-btn cms-btn-default cms-icon cms-icon-plus">
+                        {% else %}
+                            <span class="cms-btn cms-btn-default cms-btn-disabled cms-icon cms-icon-plus">
+                        {% endif %}
+                                <span class="sr-only">{% autoescape on %}{% trans 'New sub page' %}{% endautoescape %}</span>
+                        {% if has_add_page_permission %}
+                            </a>
+                        {% else %}
+                            </span>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="js-cms-pagetree-actions-dropdown cms-tree-item cms-tree-item-button cms-pagetree-dropdown js-cms-pagetree-dropdown" data-lazy-url="{% url opts|admin_urlname:'actions_menu' page.id %}">
+                    <a data-node-id="{{ node.pk }}" data-id="{{ page.pk }}" href="#" class="js-cms-pagetree-dropdown-trigger js-cms-pagetree-options cms-pagetree-dropdown-trigger cms-btn cms-btn-default cms-btn-no-border cms-icon cms-icon-menu">
+                        <span class="sr-only">{% autoescape on %}{% trans "Options" %}{% endautoescape %}</span>
+                    </a>
+
+                    <div class="js-cms-pagetree-dropdown-menu cms-pagetree-dropdown-menu cms-pagetree-dropdown-menu-arrow-right-top">
+                        <div class="js-cms-pagetree-dropdown-loader cms-pagetree-dropdown-loader">
+                        </div>
+                        {# dummy structure #}
+                        <ul class="cms-pagetree-dropdown-menu-inner">
+                            <li>
+                                <a class="cms-pagetree-dropdown-item-disabled" href="#" title="{% autoescape on %}{% trans 'Copy' %}{% endautoescape %}">
+                                    <span class="cms-icon cms-icon-copy"></span>
+                                    <span>{% autoescape on %}{% trans 'Copy' %}{% endautoescape %}<span>
+                                </a>
+                            </li>
+                            <li class="">
+                                <a href="#" class="cms-pagetree-dropdown-item-disabled" title="{% autoescape on %}{% trans 'Cut' %}{% endautoescape %}">
+                                    <span class="cms-icon cms-icon-scissors"></span>
+                                    <span>{% autoescape on %}{% trans 'Cut' %}{% endautoescape %}<span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#" data-node-id="{{ node.pk }}" data-id="{{ page.pk }}" class="cms-pagetree-dropdown-item-disabled">
+                                    <span class="cms-icon cms-icon-alias"></span>
+                                    <span>{% autoescape on %}{% trans "Paste" %}{% endautoescape %}</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a class="cms-pagetree-dropdown-item-disabled" href="#" title="{% autoescape on %}{% trans 'Delete' %}{% endautoescape %}">
+                                    <span class="cms-icon cms-icon-bin"></span>
+                                    <span>{% autoescape on %}{% trans 'Delete' %}...{% endautoescape %}</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a class="cms-pagetree-dropdown-item-disabled" href="#" title="{% autoescape on %}{% trans "Advanced settings" %}{% endautoescape %}">
+                                    <span class="cms-icon cms-icon-cogs"></span>
+                                    <span>{% autoescape on %}{% trans "Advanced settings" %}{% endautoescape %}</span>
+                                </a>
+                            </li>
+                            {% if CMS_PERMISSION %}
+                                <li>
+                                    <a href="#" class="cms-pagetree-dropdown-item-disabled">
+                                        <span class="cms-icon cms-icon-lock"></span>
+                                        <span>{% autoescape on %}{% trans "Permissions" %}{% endautoescape %}</span>
+                                    </a>
+                                </li>
+                            {% endif %}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    '
+    {% block extra_cols %}{% endblock %}
+    >
+
+    {% language LANGUAGE_CODE %}
+        {{ page.get_admin_tree_title }}
+    {% endlanguage %}
+
+    {# INFO render children #}
+    {% if descendants %}
+        <ul>
+            {% show_admin_menu_for_pages descendants depth=node.depth|add:1 %}
+        </ul>
+    {% endif %}
+</li>
+{% endspaceless %}
diff --git a/tests/django_cms/admin/cms/usersettings/change_form.html b/tests/django_cms/admin/cms/usersettings/change_form.html
new file mode 100644
index 0000000..9874df8
--- /dev/null
+++ b/tests/django_cms/admin/cms/usersettings/change_form.html
@@ -0,0 +1,50 @@
+{% extends "admin/change_form.html" %}
+{% load i18n cms_tags %}
+{% block extrahead %}
+    {{ block.super }}
+    <script>
+    // we have to wait till the window is loaded, otherwise
+    // the sideframe code will override the url, because every time
+    // the iframe is loaded, it's current url is saved in the settings
+    window.onload = function () {
+        // we have to setTimeout here because the cms.sideframe load event
+        // fires after this one :(
+        setTimeout(function () {
+            var CMS = window.parent.CMS;
+            // we need to reload the parent window once "?reload_window" is defined and
+            // set the new url for the sideframe with the correct language specification
+            if (location.href.indexOf('reload_window') > -1 && CMS) {
+                // save url in settings
+                CMS.settings.sideframe.url = window.location.href.replace(/[?&]reload_window/, '');
+                CMS.settings = CMS.API.Helpers.setSettings(CMS.settings);
+                // reload everything
+                CMS.API.Helpers.reloadBrowser();
+            }
+        }, 0);
+    }
+    </script>
+{% endblock %}
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% cms_admin_url 'index' %}">
+            {% trans 'Home' %}
+        </a>
+        &rsaquo;
+        <a href="{% cms_admin_url 'app_list' app_label=opts.app_label %}">
+            {{ app_label|capfirst|escape }}
+        </a>
+        &rsaquo; {{ opts.verbose_name_plural|capfirst }}
+        &rsaquo;
+        {% if add %}
+            {% trans 'Add' %} {{ opts.verbose_name }}
+        {% else %}
+            {{ original|truncatewords:"18" }}
+        {% endif %}
+    </div>
+{% endblock %}
+{% block object-tools %}{% endblock %}
+{% block submit_buttons_bottom %}
+    <div class="submit-row">
+        <input type="submit" value="{% trans 'Save' %}" class="default" name="_save" {{ onclick_attrib }}/>
+    </div>
+{% endblock %}
diff --git a/tests/django_cms/cms/content.html b/tests/django_cms/cms/content.html
new file mode 100644
index 0000000..cddd070
--- /dev/null
+++ b/tests/django_cms/cms/content.html
@@ -0,0 +1 @@
+{{ content }}
diff --git a/tests/django_cms/cms/dummy.html b/tests/django_cms/cms/dummy.html
new file mode 100644
index 0000000..f04fcf5
--- /dev/null
+++ b/tests/django_cms/cms/dummy.html
@@ -0,0 +1 @@
+{% extends template %}
diff --git a/tests/django_cms/cms/plugins/alias.html b/tests/django_cms/cms/plugins/alias.html
new file mode 100644
index 0000000..2982692
--- /dev/null
+++ b/tests/django_cms/cms/plugins/alias.html
@@ -0,0 +1,4 @@
+{% load cms_alias_tags %}
+{% if request and not instance.is_recursive %}
+    {% render_alias_plugin instance %}
+{% endif %}
diff --git a/tests/django_cms/cms/toolbar/clipboard.html b/tests/django_cms/cms/toolbar/clipboard.html
new file mode 100644
index 0000000..c923c45
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/clipboard.html
@@ -0,0 +1,8 @@
+{% load i18n cms_admin %}
+<div class="cms-clipboard" data-title="{% trans 'Clipboard' %}">
+    <div class="cms-plugins"></div>
+    <div class="cms-clipboard-containers cms-dragarea cms-draggables">
+        {% if clipboard_plugin %}
+            {% include cms_toolbar.templates.drag_item_template with clipboard="true" plugin=clipboard_plugin %}{% endif %}
+        </div>
+    </div>
diff --git a/tests/django_cms/cms/toolbar/content.html b/tests/django_cms/cms/toolbar/content.html
new file mode 100644
index 0000000..4a428d2
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/content.html
@@ -0,0 +1,2 @@
+{% if edit and placeholder %}{{ placeholder }}{% endif %}
+{{ content }}
diff --git a/tests/django_cms/cms/toolbar/dragbar.html b/tests/django_cms/cms/toolbar/dragbar.html
new file mode 100644
index 0000000..841b57f
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/dragbar.html
@@ -0,0 +1,66 @@
+{% load i18n l10n cms_tags %}
+<div class="cms-dragbar cms-dragbar-{{ placeholder.pk|unlocalize }}">
+    <div class="cms-submenu-btn cms-submenu-add cms-btn">
+        <span class="cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+              data-cms-tooltip="{% trans "></span>
+    </div>
+    <div class="cms-submenu-settings cms-submenu-btn cms-btn"></div>
+    <div class="cms-submenu-dropdown cms-submenu-dropdown-settings" data-touch-action="pan-y">
+        <div class="cms-dropdown-inner">
+            <div class="cms-submenu-item">
+                <a data-cms-icon="copy" data-rel="copy" href="#">
+                    {% trans "Copy all" %}
+                </a>
+            </div>
+            {% for language in placeholder.get_filled_languages %}
+                {% if language.code != LANGUAGE_CODE %}
+                    <div class="cms-submenu-item">
+                        <a data-cms-icon="copy" data-rel="copy-lang" data-language="{{ language.code }}" href="#">
+                            {% trans "Copy from" %} {% trans language.name %}
+                        </a>
+                    </div>
+                {% endif %}
+            {% endfor %}
+            <div class="cms-submenu-item">
+                <a data-cms-icon="paste" data-rel="paste" href="#">
+                    {% trans "Paste" %}
+                </a>
+            </div>
+            <div class="cms-submenu-item">
+                <a data-cms-icon="bin"
+                   data-rel="modal"
+                   href="{{ placeholder.get_clear_url }}?language={{ LANGUAGE_CODE }}"
+                   data-name="{{ placeholder.get_label }}">
+                    {% trans "Empty all" %}
+                </a>
+            </div>
+            {% render_extra_menu_items placeholder %}
+        </div>
+    </div>
+    <div class="cms-plugin-picker" data-touch-action="pan-y">
+        <div class="cms-quicksearch">
+            <label>
+                <input type="text" placeholder="{% trans 'Filter plugins...' %}" />
+            </label>
+        </div>
+        {# plugin child classes here #}
+    </div>
+    <div class="cms-dragbar-title" title="{{ placeholder.get_label }}">
+        {{ placeholder.get_label }}
+        {% if placeholder.is_static %}
+            <span class="cms-hover-tooltip cms-hover-tooltip-right"
+                  tabindex="-1"
+                  data-cms-tooltip="{% trans 'This is a static placeholder' %}">
+                <span class="cms-icon cms-icon-pin cms-dragarea-static-icon"></span>
+            </span>
+        {% endif %}
+        <span class="cms-dragbar-toggler">
+            <a href="#" class="cms-dragbar-expand-all" tabindex="-1">
+                {% trans "Expand all" %}
+            </a>
+            <a href="#" class="cms-dragbar-collapse-all" tabindex="-1">
+                {% trans "Collapse all" %}
+            </a>
+        </span>
+    </div>
+</div>
diff --git a/tests/django_cms/cms/toolbar/dragitem.html b/tests/django_cms/cms/toolbar/dragitem.html
new file mode 100644
index 0000000..ef49b78
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/dragitem.html
@@ -0,0 +1,77 @@
+{% load i18n l10n cms_tags %}
+{% with allow_children=plugin.get_plugin_class.allow_children disable_child_plugins=plugin.get_plugin_class.disable_child_plugins %}
+<div class="cms-draggable cms-draggable-{{ plugin.pk|unlocalize }} {% if not allow_children %}cms-draggable-disabled{% endif %} {% if clipboard %}cms-draggable-from-clipboard{% endif %}">
+<div class="cms-dragitem cms-dragitem-handler {% if plugin.child_plugin_instances %}cms-dragitem-collapsable{% endif %}">
+{% if not disabled_child %}
+    <div class="cms-submenu-btn cms-submenu-edit cms-btn" data-rel="edit">
+        <span class="cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+              data-cms-tooltip="{% trans "></span>
+    </div>
+    <div class="cms-submenu-btn cms-submenu-add cms-btn {% if not allow_children %}cms-btn-disabled{% endif %}">
+    {% if not allow_children %}
+        <span class="cms-hover-tooltip" data-cms-tooltip="{% trans "></span>
+    {% else %}
+        <span class="cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+              data-cms-tooltip="{% trans "></span>
+    {% endif %}
+</div>
+<div class="cms-submenu cms-submenu-settings cms-submenu-btn cms-btn"></div>
+{% else %}
+<div class="cms-hover-tooltip cms-hover-tooltip-left cms-plugin-disabled" tabindex="-1" data-cms-tooltip="{% trans ">
+    <span class="cms-icon cms-icon-lock"></span>
+</div>
+{% endif %}
+<div class="cms-submenu-dropdown cms-submenu-dropdown-settings">
+<div class="cms-dropdown-inner">
+    <div class="cms-submenu-item">
+        <a data-cms-icon="scissors" data-rel="cut" href="#">
+            {% trans "Cut" %}
+        </a>
+    </div>
+    <div class="cms-submenu-item">
+        <a data-cms-icon="copy" data-rel="copy" href="#">
+            {% trans "Copy" %}
+        </a>
+    </div>
+    <div class="cms-submenu-item">
+        <a data-cms-icon="paste" data-rel="paste" href="#">
+            {% trans "Paste" %}
+        </a>
+        <span class="cms-submenu-item-paste-tooltip cms-submenu-item-paste-tooltip-empty cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+              data-cms-tooltip="{% trans "></span>
+        <span class="cms-submenu-item-paste-tooltip cms-submenu-item-paste-tooltip-restricted cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+              data-cms-tooltip="{% trans "></span>
+        <span class="cms-submenu-item-paste-tooltip cms-submenu-item-paste-tooltip-disabled cms-hover-tooltip cms-hover-tooltip-left cms-hover-tooltip-delay"
+              data-cms-tooltip="{% trans "></span>
+    </div>
+    <div class="cms-submenu-item">
+        <a data-cms-icon="bin" data-rel="delete" href="#">
+            {% trans "Delete" %}
+        </a>
+    </div>
+    {% render_extra_menu_items plugin %}
+</div>
+</div>
+{% if not clipboard %}
+<div class="cms-plugin-picker" data-touch-action="pan-y">
+    <div class="cms-quicksearch">
+        <label>
+            <input type="text" placeholder="{% trans 'Filter plugins...' %}" />
+        </label>
+    </div>
+    {# plugin child classes here #}
+</div>
+{% endif %}
+<span class="cms-dragitem-text" title="{{ plugin.plugin_type }} ID: {{ plugin.pk }}">
+<strong>{{ plugin.get_plugin_name }}</strong>
+{{ plugin.get_short_description }}
+</span>
+</div>
+<div class="cms-collapsable-container cms-hidden {% if allow_children %}cms-draggables{% endif %}">
+{% if plugin.child_plugin_instances %}
+{% for child in plugin.child_plugin_instances %}
+{% include cms_toolbar.templates.drag_item_template with plugin=child disabled_child=disable_child_plugins %}{% endfor %}
+{% endif %}
+</div>
+</div>
+{% endwith %}
diff --git a/tests/django_cms/cms/toolbar/dragitem_extra_menu.html b/tests/django_cms/cms/toolbar/dragitem_extra_menu.html
new file mode 100644
index 0000000..623feec
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/dragitem_extra_menu.html
@@ -0,0 +1,20 @@
+{% load i18n %}
+<div class="cms-submenu-item cms-submenu-item-highlight">
+    <a href="#" data-rel="highlight" data-cms-icon="highlight">
+        {{ plugin }}{% trans "Highlight" %}
+    </a>
+</div>
+{% for item in items %}
+    <div class="cms-submenu-item">
+        <a href="{{ item.url }}" data-rel="{{ item.action }}"
+            {% if item.data %}data-post="{{ item.data }}" {% endif %}
+            {% if question %}data-text="{{ question }}" {% endif %}
+            data-on-success="REFRESH_PAGE"
+            {% for key, attr in item.attributes.items %}
+                data-{{ key }}="{{ attr }}"
+            {% endfor %}
+            >
+            {{ item.name }}
+        </a>
+    </div>
+{% endfor %}
diff --git a/tests/django_cms/cms/toolbar/dragitem_menu.html b/tests/django_cms/cms/toolbar/dragitem_menu.html
new file mode 100644
index 0000000..d25c4ef
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/dragitem_menu.html
@@ -0,0 +1,22 @@
+{% load i18n %}
+{% regroup plugin_menu by module as module_list %}
+{% for module in module_list %}
+    <div class="cms-submenu-item cms-submenu-item-title">
+        <span>
+            {% if module.grouper %}
+                {{ module.grouper|capfirst }}
+            {% else %}
+                {% trans "Available plugins" %}
+            {% endif %}
+        </span>
+    </div>
+    {% for p in module.list %}
+        {% if p.value != 'AliasPlugin' and p.value != 'PlaceholderPlugin' %}
+            <div class="cms-submenu-item">
+                <a data-rel="add" href="{{ p.value }}">
+                    {{ p.name }}
+                </a>
+            </div>
+        {% endif %}
+    {% endfor %}
+{% endfor %}
diff --git a/tests/django_cms/cms/toolbar/items/break.html b/tests/django_cms/cms/toolbar/items/break.html
new file mode 100644
index 0000000..b457173
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/break.html
@@ -0,0 +1,3 @@
+<li class="cms-toolbar-item-navigation-break">
+    -----
+</li>
diff --git a/tests/django_cms/cms/toolbar/items/button.html b/tests/django_cms/cms/toolbar/items/button.html
new file mode 100644
index 0000000..edf5d49
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/button.html
@@ -0,0 +1,4 @@
+<a href="{{ url }}"
+   class="cms-btn{% if active %}cms-btn-active{% endif %}{% if disabled %}cms-btn-disabled{% endif %}{% if extra_classes %}{{ extra_classes|join:' ' }}{% endif %}">
+{{ name }}
+</a>
diff --git a/tests/django_cms/cms/toolbar/items/button_list.html b/tests/django_cms/cms/toolbar/items/button_list.html
new file mode 100644
index 0000000..bd11efb
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/button_list.html
@@ -0,0 +1,16 @@
+{% load i18n %}
+{% if 'cms-toolbar-item-cms-mode-switcher' in extra_classes %}
+    <div class="{{ extra_classes|join:' ' }}">
+        <a href="?{{ cms_structure_on }}" class="cms-btn cms-btn-disabled" title="{% trans 'Toggle structure' %}"
+            {% for button in buttons %}
+                data-{{ button.extra_classes }}='{ "url": "{{ button.url }}", "name": "{{ button.name }}" }'
+            {% endfor %}
+            >
+            <span class="cms-icon cms-icon-plugins"></span>
+        </a>
+    </div>
+{% else %}
+    <div class="cms-toolbar-item cms-toolbar-item-buttons {{ extra_classes|join:' ' }}">
+        {% for button in buttons %}{{ button.render }}{% endfor %}
+    </div>
+{% endif %}
diff --git a/tests/django_cms/cms/toolbar/items/button_modal.html b/tests/django_cms/cms/toolbar/items/button_modal.html
new file mode 100644
index 0000000..bf4c3c5
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/button_modal.html
@@ -0,0 +1,5 @@
+<a href="{{ url }}" class="cms-btn{% if active %}cms-btn-active{% endif %}{% if disabled %}cms-btn-disabled{% endif %} {{ extra_classes|join:' ' }}" data-rel="modal"
+{% if on_close %}data-on-close="{{ on_close }}" {% endif %}
+>
+{{ name }}
+</a>
diff --git a/tests/django_cms/cms/toolbar/items/button_sideframe.html b/tests/django_cms/cms/toolbar/items/button_sideframe.html
new file mode 100644
index 0000000..f92d38a
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/button_sideframe.html
@@ -0,0 +1,5 @@
+<a href="{{ url }}" class="cms-btn{% if active %}cms-btn-active{% endif %}{% if disabled %}cms-btn-disabled{% endif %} {{ extra_classes|join:' ' }}" data-rel="sideframe"
+{% if on_close %}data-on-close="{{ on_close }}" {% endif %}
+>
+{{ name }}
+</a>
diff --git a/tests/django_cms/cms/toolbar/items/dropdown.html b/tests/django_cms/cms/toolbar/items/dropdown.html
new file mode 100644
index 0000000..2cea9cb
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/dropdown.html
@@ -0,0 +1,20 @@
+<div class="cms-toolbar-item cms-toolbar-item-dropdown cms-dropdown cms-toolbar-item-buttons {{ extra_classes|join:' ' }}">
+    {% if primary_button.has_no_action %}
+        {{ primary_button.render }}
+    {% else %}
+        <div class="cms-btn-group">
+            {{ primary_button.render }}
+            <a href="javascript: void 0"
+               class="cms-btn cms-dropdown-toggle {{ primary_button.extra_classes|join:' ' }} cms-dropdown-toggle-thin">
+                <span class="cms-dropdown-caret"></span>
+            </a>
+        </div>
+    {% endif %}
+    <ul class="cms-dropdown-menu">
+        {% for button in buttons %}
+            <li>
+                {{ button.render }}
+            </li>
+        {% endfor %}
+    </ul>
+</div>
diff --git a/tests/django_cms/cms/toolbar/items/dropdown_button.html b/tests/django_cms/cms/toolbar/items/dropdown_button.html
new file mode 100644
index 0000000..a593b1e
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/dropdown_button.html
@@ -0,0 +1,5 @@
+<a href="javascript: void 0"
+   class="cms-btn cms-dropdown-toggle {% if active %}cms-btn-active{% endif %}{% if disabled %}cms-btn-disabled{% endif %} {{ extra_classes|join:' ' }}">
+{{ name }}
+<span class="cms-dropdown-caret"></span>
+</a>
diff --git a/tests/django_cms/cms/toolbar/items/item_ajax.html b/tests/django_cms/cms/toolbar/items/item_ajax.html
new file mode 100644
index 0000000..264d07c
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/item_ajax.html
@@ -0,0 +1,13 @@
+<li class="{% if active %}cms-toolbar-item-navigation-active{% endif %}{% if disabled %}cms-toolbar-item-navigation-disabled{% endif %} {{ extra_classes|join:' ' }}">
+<a
+    {% if disabled %}tabindex="-1" {% endif %}
+    href="{{ action }}" data-rel="ajax" data-method="{{ method }}" data-post="{{ data }}"
+    {% if question %}data-text="{{ question }}" {% endif %}
+    {% if on_success %}data-on-success="{{ on_success }}" {% endif %}
+    >
+    <span>
+        {{ name }}
+        <span class="cms-icon cms-icon-arrow"></span>
+    </span>
+</a>
+</li>
diff --git a/tests/django_cms/cms/toolbar/items/item_link.html b/tests/django_cms/cms/toolbar/items/item_link.html
new file mode 100644
index 0000000..31f85ee
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/item_link.html
@@ -0,0 +1,10 @@
+<li class="{% if active %}cms-toolbar-item-navigation-active{% endif %}{% if disabled %}cms-toolbar-item-navigation-disabled{% endif %} {{ extra_classes|join:' ' }}">
+<a
+    {% if disabled %}tabindex="-1" {% endif %}
+    href="{{ url }}">
+    <span>
+        {{ name }}
+        <span class="cms-icon cms-icon-arrow"></span>
+    </span>
+</a>
+</li>
diff --git a/tests/django_cms/cms/toolbar/items/item_modal.html b/tests/django_cms/cms/toolbar/items/item_modal.html
new file mode 100644
index 0000000..bb50b80
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/item_modal.html
@@ -0,0 +1,12 @@
+<li class="{% if active %}cms-toolbar-item-navigation-active{% endif %}{% if disabled %}cms-toolbar-item-navigation-disabled{% endif %} {{ extra_classes|join:' ' }}">
+<a
+    {% if disabled %}tabindex="-1" {% endif %}
+    href="{{ url }}" data-rel="modal"
+    {% if on_close %}data-on-close="{{ on_close }}" {% endif %}
+    >
+    <span>
+        {{ name }}
+        <span class="cms-icon cms-icon-arrow"></span>
+    </span>
+</a>
+</li>
diff --git a/tests/django_cms/cms/toolbar/items/item_sideframe.html b/tests/django_cms/cms/toolbar/items/item_sideframe.html
new file mode 100644
index 0000000..918a904
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/item_sideframe.html
@@ -0,0 +1,12 @@
+<li class="{% if active %}cms-toolbar-item-navigation-active{% endif %}{% if disabled %}cms-toolbar-item-navigation-disabled{% endif %} {{ extra_classes|join:' ' }}">
+<a
+    {% if disabled %}tabindex="-1" {% endif %}
+    href="{{ url }}" data-rel="sideframe"
+    {% if on_close %}data-on-close="{{ on_close }}" {% endif %}
+    >
+    <span>
+        {{ name }}
+        <span class="cms-icon cms-icon-arrow"></span>
+    </span>
+</a>
+</li>
diff --git a/tests/django_cms/cms/toolbar/items/live_draft.html b/tests/django_cms/cms/toolbar/items/live_draft.html
new file mode 100644
index 0000000..81c448b
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/live_draft.html
@@ -0,0 +1,16 @@
+{% load i18n %}
+{% spaceless %}
+    <div class="cms-toolbar-item cms-toolbar-item-buttons cms-toolbar-item-switch-save-edit">
+        {% if cms_toolbar.edit_mode_active %}
+            <a class="cms-btn cms-btn-switch-save"
+               href="{% firstof cms_toolbar.get_object_public_url cms_toolbar.request_path %}?preview&amp;{{ cms_toolbar.edit_mode_url_off }}">
+                <span>{% trans "View published" %}</span>
+            </a>
+        {% else %}
+            <a class="cms-btn cms-btn-action cms-btn-switch-edit"
+               href="{% firstof cms_toolbar.get_object_draft_url cms_toolbar.request_path %}?{{ cms_toolbar.edit_mode_url_on }}">
+                {% trans "Edit" %}
+            </a>
+        {% endif %}
+    </div>
+{% endspaceless %}
diff --git a/tests/django_cms/cms/toolbar/items/login.html b/tests/django_cms/cms/toolbar/items/login.html
new file mode 100644
index 0000000..fb0f3a6
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/login.html
@@ -0,0 +1,26 @@
+{% load i18n sekizai_tags cms_tags %}
+{% url 'logout' as logout_url %}
+<form action="{% url 'cms_login' %}?next={{ request.path }}&amp;{{ cms_edit_on }}"
+      class="cms-toolbar-item cms-form-login"
+      method="post">
+    {% csrf_token %}
+    <label
+        {% if request.GET.cms_toolbar_login_error %}
+            class="cms-error"
+        {% endif %}
+        >
+        <span>{% trans login_form.username.label %}</span>
+        {{ login_form.username }}
+    </label>
+    <label
+        {% if request.GET.cms_toolbar_login_error %}
+            class="cms-error"
+        {% endif %}
+        >
+        <span>{% trans login_form.password.label %}</span>
+        {{ login_form.password }}
+    </label>
+    <label>
+        <input class="cms-btn cms-btn-action" type="submit" value="{% trans 'Login' %}">
+    </label>
+</form>
diff --git a/tests/django_cms/cms/toolbar/items/logo.html b/tests/django_cms/cms/toolbar/items/logo.html
new file mode 100644
index 0000000..0001196
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/logo.html
@@ -0,0 +1,6 @@
+{% load i18n %}
+<div class="cms-toolbar-item cms-toolbar-item-logo">
+    <a href="/" title="{{ cms_version }}">
+        <span>{% trans "django CMS" %}</span>
+    </a>
+</div>
diff --git a/tests/django_cms/cms/toolbar/items/menu.html b/tests/django_cms/cms/toolbar/items/menu.html
new file mode 100644
index 0000000..c213ca2
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/items/menu.html
@@ -0,0 +1,15 @@
+<li class="{% if sub_level %}cms-toolbar-item-navigation-children {% endif %}{% if active %}cms-toolbar-item-navigation-active {% endif %}{% if disabled %}cms-toolbar-item-navigation-disabled {% endif %}">
+<a
+    {% if disabled %}tabindex="-1" {% endif %}
+    href="{{ url }}">
+    <span>
+        {{ title }}
+        <span class="cms-icon cms-icon-arrow"></span>
+    </span>
+</a>
+{% if items %}
+    <ul>
+        {% for item in items %}{{ item.render }}{% endfor %}
+    </ul>
+{% endif %}
+</li>
diff --git a/tests/django_cms/cms/toolbar/plugin.html b/tests/django_cms/cms/toolbar/plugin.html
new file mode 100644
index 0000000..0592900
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/plugin.html
@@ -0,0 +1,44 @@
+{% spaceless %}
+    {% load i18n l10n sekizai_tags static cms_tags %}
+    <template class="cms-plugin cms-plugin-start cms-plugin-{% if generic %}{{ generic.app_label }}-{{ generic.model_name }}-{% if attribute_name %}{{ attribute_name|slugify }}-{% endif %}{% endif %}{{ instance.pk|unlocalize }}{% if render_model_icon %} cms-render-model-icon{% elif render_model %} cms-render-model{% elif render_model_block %} cms-render-model cms-render-model-block{% elif render_model_add %} cms-render-model-add{% endif %}"></template>
+{% endspaceless %}
+{% if content %}
+    {{ content }}{% elif render_model_icon %}
+    <img src="{% static 'cms/img/toolbar/render_model_placeholder.png' %}">
+    {% elif render_model_add %}
+        <img src="{% static 'cms/img/toolbar/render_model_placeholder.png' %}">
+        {% else %}
+            {{ rendered_content }}
+        {% endif %}
+        {% spaceless %}
+            <template class="cms-plugin cms-plugin-end cms-plugin-{% if generic %}{{ generic.app_label }}-{{ generic.model_name }}-{% if attribute_name %}{{ attribute_name|slugify }}-{% endif %}{% endif %}{{ instance.pk|unlocalize }}{% if render_model_icon %} cms-render-model-icon{% elif render_model %} cms-render-model{% elif render_model_block %} cms-render-model cms-render-model-block{% elif render_model_add %} cms-render-model-add{% endif %}"></template>
+            {% addtoblock "js" %}
+                <script{% if generic %}data-cms-generic{% endif %} data-cms>
+CMS._plugins.push(['cms-plugin-{% if generic %}{{ generic.app_label }}-{{ generic.model_name }}-{% if attribute_name %}{{ attribute_name|slugify }}-{% endif %}{% endif %}{{ instance.pk|unlocalize }}', {
+    type: {% if generic %}'generic'{% else %}'plugin'{% endif %},
+    placeholder_id: '{{ instance.placeholder_id|unlocalize }}',
+    plugin_name: '{{ instance.get_plugin_name|default:"" }}',
+    plugin_type: '{{ instance.plugin_type }}',
+    plugin_id: '{{ instance.pk|unlocalize }}',
+    plugin_language: '{{ instance.language|default:"" }}',
+    {% if instance.node_id %}
+        plugin_parent: '{{ instance.parent_page.pk|unlocalize }}',
+    {% else %}
+        plugin_parent: '{{ instance.parent_id|unlocalize }}',
+    {% endif %}
+    plugin_order: '{{ instance.plugin_order }}',{% language request.toolbar.toolbar_language %}
+    plugin_restriction: [{% for cls in allowed_child_classes %}"{{ cls }}"{% if not forloop.last %},{% endif %}{% endfor %}],
+    plugin_parent_restriction: [{% for cls in allowed_parent_classes %}"{{ cls }}"{% if not forloop.last %},{% endif %}{% endfor %}],
+    onClose: {% if refresh_page %}'REFRESH_PAGE'{% else %}{% if redirect_on_close %}'{{ redirect_on_close }}'{% else %}false{% endif %}{% endif %},
+    addPluginHelpTitle: '{% trans "Add plugin to" %} {{ instance.get_plugin_name|escapejs }}',
+    urls: {
+        add_plugin: '{% if add_url %}{{ add_url }}{% else %}{% cms_admin_url "cms_page_add_plugin" %}{% endif %}',
+        edit_plugin: '{% if edit_url %}{{ edit_url }}{% elif instance %}{% cms_admin_url "cms_page_edit_plugin" instance.pk %}{% endif %}',
+        move_plugin: '{% if move_url %}{{ move_url }}{% else %}{% cms_admin_url "cms_page_move_plugin" %}{% endif %}',
+        delete_plugin: '{% if delete_url %}{{ delete_url }}{% elif instance %}{% cms_admin_url "cms_page_delete_plugin" instance.pk %}{% endif %}',
+        copy_plugin: '{% if copy_url %}{{ copy_url }}{% else %}{% cms_admin_url "cms_page_copy_plugins" %}{% endif %}'
+    } {% endlanguage %}
+}]);
+            </script>
+        {% endaddtoblock %}
+    {% endspaceless %}
diff --git a/tests/django_cms/cms/toolbar/structure.html b/tests/django_cms/cms/toolbar/structure.html
new file mode 100644
index 0000000..031284d
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/structure.html
@@ -0,0 +1,16 @@
+{% load cms_tags cms_js_tags i18n sekizai_tags %}
+<!DOCTYPE html>
+<html class="cms-overflow">
+    <head>
+        <meta charset="UTF-8">
+        <title>{{ object.get_page_title }}</title>
+        {% render_block "css" %}
+    </head>
+    <body>
+        {% cms_toolbar %}
+        {% render_block "js" %}
+        {% language cms_toolbar.toolbar_language %}
+            {% render_cms_structure_js cms_toolbar.structure_renderer object %}
+        {% endlanguage %}
+    </body>
+</html>
diff --git a/tests/django_cms/cms/toolbar/toolbar.html b/tests/django_cms/cms/toolbar/toolbar.html
new file mode 100644
index 0000000..c14909c
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/toolbar.html
@@ -0,0 +1,39 @@
+{% load i18n l10n cms_tags cms_js_tags %}
+<div id="cms-top"
+     class="cms cms-reset {% if not user.is_authenticated %}cms-toolbar-auth{% endif %} {% if debug %}cms-toolbar-debug{% endif %}"
+     dir="ltr"
+     data-touch-action="none">
+{% block toolbar_top %}{% endblock toolbar_top %}
+    {# start: toolbar #}
+    <div class="cms-toolbar">
+        <div class="cms-debug-bar"></div>
+        <div class="cms-toolbar-left">
+            {% include "cms/toolbar/items/logo.html" %}
+            {% if not user.is_authenticated %}
+                {% include "cms/toolbar/items/login.html" %}
+            {% else %}
+                <ul class="cms-toolbar-item cms-toolbar-item-navigation">
+                    {% for item in cms_toolbar.get_left_items %}
+                        {{ item.render }}
+                    {% endfor %}
+                    <li class="cms-toolbar-more">
+                        <a href="#">
+                            <span>
+                                {% trans "More" %}...
+                                <span class="cms-icon cms-icon-arrow"></span>
+                            </span>
+                        </a>
+                        <ul data-touch-action="pan-y"></ul>
+                    </li>
+                </ul>
+            {% endif %}
+        </div>
+        <div class="cms-toolbar-right">
+            {% for item in cms_toolbar.get_right_items %}
+                {{ item.render }}
+            {% endfor %}
+        </div>
+    </div>
+    {# end: toolbar #}
+    {% block toolbar_bottom %}{% endblock toolbar_bottom %}
+    </div>
diff --git a/tests/django_cms/cms/toolbar/toolbar_javascript.html b/tests/django_cms/cms/toolbar/toolbar_javascript.html
new file mode 100644
index 0000000..aebe60f
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/toolbar_javascript.html
@@ -0,0 +1,150 @@
+{% load i18n l10n sekizai_tags static cms_tags cms_js_tags cms_static %}
+{% addtoblock "css" %}
+    <link rel="stylesheet" href="{% static_with_version "cms/css/cms.base.css" %}" />
+{% endaddtoblock %}
+{% for css in cms_toolbar.media.render_css %}
+    {% addtoblock "css" %}
+        {{ css }}
+    {% endaddtoblock %}
+{% endfor %}
+{% addtoblock "js" %}
+    <script data-cms src="{% static_with_version "cms/js/dist/bundle.toolbar.min.js" %}" type="text/javascript"></script>
+    <script data-cms>
+CMS._plugins = CMS._plugins || [];
+// this is a global shared configuration
+CMS.config = {
+    'mode': {% if cms_toolbar.edit_mode_active %}'draft'{% else %}'live'{% endif %},
+    'auth': {% if user.is_authenticated %}true{% else %}false{% endif %},
+    'debug': {% if debug %}true{% else %}false{% endif %},
+    'csrf': '{{ csrf_token }}',
+    'request': {
+        'language': '{{ cms_toolbar.request_language }}',
+        'model': '{{ cms_toolbar.get_object_model }}',
+        'page_id': '{% if request.current_page.publisher_is_draft %}{{ request.current_page.pk|unlocalize }}{% else %}{{ request.current_page.publisher_public_id|unlocalize }}{% endif %}',
+        'pk': '{{ cms_toolbar.get_object_pk|unlocalize }}',
+        'url': '{% language cms_toolbar.request_language %}{% cms_admin_url "cms_page_resolve" %}{% endlanguage %}',
+        'toolbar': '{% language cms_toolbar.request_language %}{% cms_admin_url "cms_usersettings_get_toolbar" %}{% endlanguage %}'
+    },
+    'lang': {
+        {% if user.is_authenticated %}
+        'debug': '{% filter escapejs %}{% blocktrans %}Development version using django CMS {{ cms_version }}, Django {{ django_version }}, Python {{ python_version }}{% endblocktrans %}{% endfilter %}',
+        {% endif %}
+        'cancel': '{% filter escapejs %}{% trans "Cancel" %}{% endfilter %}',
+        'error': '<strong>{% filter escapejs %}{% trans "The following error occured:" %}{% endfilter %}</strong> ',
+        'success': '{% filter escapejs %}{% trans "Action successful." %}{% endfilter %}',
+        'confirm': '{% filter escapejs %}{% trans "Are you sure you want to delete this plugin?" %}{% endfilter %}',
+        'publish': '{% filter escapejs %}{% trans "Are you sure you want to publish this page?" %}{% endfilter %}',
+        'addPluginPlaceholder': '{% filter escapejs %}{% trans "Plugin will be added here" %}{% endfilter %}',
+        'confirmDirty': '{% filter escapejs %}{% trans "You have unsaved changes." %}{% endfilter %}',
+        'loading': '{% filter escapejs %}{% trans "Loading" %}{% endfilter %}',
+        'confirmDirtyESC': '{% filter escapejs %}{% trans "Are you sure you want to abandon these changes?" %}{% endfilter %}',
+        'errorLoadingEditForm': '{% filter escapejs %}{% trans "The form could not be loaded. Please check that the server is running correctly." %}{% endfilter %}',
+        'mostUsed': '{% filter escapejs %}{% trans "Most used" %}{% endfilter %}',
+        'shortcuts': '{% filter escapejs %}{% trans "Shortcuts" %}{% endfilter %}',
+        'unhandledPageChange': '{% filter escapejs %}{% trans "The page was changed in the meantime, reloading..." %}{% endfilter %}',
+        'shortcutAreas': [
+            {
+                'title': '{% filter escapejs %}{% trans "CMS-wide Shortcuts" %}{% endfilter %}',
+                'shortcuts': {
+                    'help': {
+                        'shortcut': '?',
+                        'desc': '{% filter escapejs %}{% trans "Bring up this help dialog" %}{% endfilter %}'
+                    },
+                    'esc': {
+                        'shortcut': 'ESC',
+                        'desc': '{% filter escapejs %}{% trans "Close/cancel" %}{% endfilter %}'
+                    },
+                    'toggle-structure-board': {
+                        'shortcut': 'space',
+                        'desc': '{% filter escapejs %}{% trans "Toggle structure mode" %}{% endfilter %}'
+                    },
+                    'toggle-structure-board-using-hovered-plugin': {
+                        'shortcut': 'shift+space',
+                        'desc': '{% filter escapejs %}{% trans "Toggle structure mode and highlight hovered-over plugin" %}{% endfilter %}'
+                    },
+                    'create-dialog': {
+                        'shortcut': 'alt+c',
+                        'desc': '{% filter escapejs %}{% trans 'Open "Create" dialog' %}{% endfilter %}'
+                    },
+                    'toolbar': {
+                        'shortcut': 'f > t / alt+t',
+                        'desc': '{% filter escapejs %}{% trans "Focus on Toolbar" %}{% endfilter %}'
+                    },
+                }
+            },
+            {
+                'title': '{% filter escapejs %}{% trans "Structureboard" %}{% endfilter %}',
+                'shortcuts': {
+                    'placeholders': {
+                        'shortcut': 'f > p / alt+p',
+                        'desc': '{% filter escapejs %}{% trans "Focus on placeholders" %}{% endfilter %}'
+                    },
+                    'traversing': {
+                        'shortcut': 'tab / shift+tab',
+                        'desc': '{% filter escapejs %}{% trans "Move to next/previous element" %}{% endfilter %}'
+                    },
+                    'enter': {
+                        'shortcut': 'enter',
+                        'desc': '{% filter escapejs %}{% trans "Focus on plugins of placeholder" %}{% endfilter %}'
+                    },
+                    'edit': {
+                        'shortcut': 'e',
+                        'desc': '{% filter escapejs %}{% trans "Edit plugin" %}{% endfilter %}'
+                    },
+                    'add': {
+                        'shortcut': '+ / a',
+                        'desc': '{% filter escapejs %}{% trans "Add plugin" %}{% endfilter %}'
+                    },
+                    'settings': {
+                        'shortcut': '! / s',
+                        'desc': '{% filter escapejs %}{% trans "Open actions menu" %}{% endfilter %}'
+                    },
+                    'collapse': {
+                        'shortcut': 'x',
+                        'desc': '{% filter escapejs %}{% trans "Expand/collapse" %}{% endfilter %}'
+                    }
+                }
+            }
+        ]
+    },
+    'urls': {
+        'settings': '{% cms_admin_url "cms_usersettings_session_store" %}', // url to save settings
+        'static': '{{ STATIC_URL }}'
+    },
+    'settings': {
+        'version': '{{ cms_version }}',
+        'toolbar': 'expanded',
+        'mode': {% if cms_toolbar.structure_mode_active %}'structure'{% else %}'edit'{% endif %},
+        'sideframe': { 'url': '' },
+        'states': [],
+        'edit': '{{ cms_edit_on }}',
+        'edit_off': '{{ cms_edit_off }}',
+        'structure': '{{ cms_structure_on }}',
+        'legacy_mode': {{ cms_toolbar.uses_legacy_structure_mode|yesno:'true,false' }}
+    },
+    'clipboard': {
+        'id': '{{ cms_toolbar.clipboard.pk|unlocalize }}',
+        'url': '{% if cms_toolbar.clipboard.pk %}{% cms_admin_url "cms_page_clear_placeholder" cms_toolbar.clipboard.pk %}{% endif %}'
+    },
+    'messages': '{% filter escapejs %}{% if messages %}{% for message in messages %}{{ message }}{% endfor %}{% endif %}{% endfilter %}',
+    'error': '{% filter escapejs %}{% if cms_toolbar.login_form.errors or cms_toolbar_login_error %}{% blocktrans %}<strong>Login failed.</strong> Please check your credentials and try again.{% endblocktrans %}{% endif %}{% endfilter %}',
+    'publisher': '{% filter escapejs %}{% if not request.current_page.publisher_is_draft and request.current_page.publisher_draft.is_dirty and user.is_authenticated %}{% trans "This page has unpublished changes." %}{% endif %}{% endfilter %}'
+};
+CMS.$(function () {
+    CMS.settings = CMS.API.Helpers.getSettings();
+
+    // extends API
+    CMS.API.Clipboard = new CMS.Clipboard();
+    CMS.API.StructureBoard = new CMS.StructureBoard();
+    CMS.API.Messages = new CMS.Messages();
+    CMS.API.Tooltip = new CMS.Tooltip();
+    CMS.API.Toolbar = new CMS.Toolbar();
+
+    CMS.Plugin._initializeTree();
+});
+    </script>
+{% endaddtoblock %}
+{% if cms_toolbar.clipboard_plugin %}{% render_plugin_init_js cms_toolbar.clipboard_plugin %}{% endif %}
+{% for js in cms_toolbar.media.render_js %}
+    {% addtoblock "js" %}{{ js }}{% endaddtoblock %}
+    {% endfor %}
diff --git a/tests/django_cms/cms/toolbar/toolbar_with_structure.html b/tests/django_cms/cms/toolbar/toolbar_with_structure.html
new file mode 100644
index 0000000..a6e9f35
--- /dev/null
+++ b/tests/django_cms/cms/toolbar/toolbar_with_structure.html
@@ -0,0 +1,106 @@
+{% extends "cms/toolbar/toolbar.html" %}
+{% load i18n l10n %}
+{% block toolbar_top %}
+    <div class="cms-tooltip">
+        {% trans "Double-click to edit" %}
+        <span></span>
+    </div>
+    <div class="cms-tooltip-touch">
+        {% trans "Tap to edit" %}
+        <span></span>
+    </div>
+{% endblock %}
+{% block toolbar_bottom %}
+    {# start: messages #}
+    <div class="cms-messages">
+        <div class="cms-messages-close" title="{% trans 'Close' %}">
+            <span class="cms-icon cms-icon-close"></span>
+        </div>
+        <div class="cms-messages-inner"></div>
+    </div>
+    {# end: messages #}
+    <div class="cms-sideframe">
+        <div class="cms-sideframe-frame"></div>
+        <div class="cms-sideframe-shim"></div>
+        <div class="cms-sideframe-dimmer"></div>
+        <div class="cms-sideframe-copy"></div>
+        {% spaceless %}
+            <div class="cms-sideframe-controls">
+                <div class="cms-sideframe-history">
+                    <span class="cms-icon cms-icon-arrow cms-icon-arrow-back cms-icon-disabled"
+                          title="{% trans 'Click to go back' %}"></span>
+                    <span class="cms-icon cms-icon-arrow cms-icon-arrow-forward cms-icon-disabled"
+                          title="{% trans 'Click to go forward' %}"></span>
+                </div>
+                <div class="cms-sideframe-close">
+                    <span class="cms-icon cms-icon-close"></span>
+                </div>
+            </div>
+        {% endspaceless %}
+    </div>
+    {% if cms_toolbar.edit_mode_active %}
+        {% include 'cms/toolbar/clipboard.html' with clipboard_plugin=cms_toolbar.clipboard_plugin %}{% endif %}
+        <div class="cms-modal" tabindex="-1" data-touch-action="none">
+            <div class="cms-modal-head" data-touch-action="none">
+                <span class="cms-modal-title" data-touch-action="none">
+                    <span class="cms-modal-title-prefix"></span>
+                    <span class="cms-modal-title-suffix"></span>
+                </span>
+                <span tabindex="0"
+                      class="cms-modal-minimize cms-icon cms-icon-minus"
+                      title="{% trans 'Minimize' %}"></span>
+                <span tabindex="0"
+                      class="cms-modal-maximize cms-icon cms-icon-window"
+                      title="{% trans 'Maximize' %}"></span>
+                <span tabindex="0" class="cms-modal-close cms-icon cms-icon-close" title="{% trans 'Close' %}"></span>
+            </div>
+            <div class="cms-modal-breadcrumb" data-touch-action="pan-x"></div>
+            <div class="cms-modal-body">
+                <div class="cms-modal-shim"></div>
+                <div class="cms-modal-frame"></div>
+            </div>
+            <div class="cms-modal-foot">
+                <div class="cms-modal-buttons"></div>
+                <div class="cms-modal-resize">
+                    <span class="cms-icon cms-icon-handler"></span>
+                </div>
+            </div>
+        </div>
+        {# start: structure #}
+        <div class="cms-structure">
+            <div class="cms-structure-content" data-touch-action="pan-y">
+                {% if cms_renderer.load_structure %}
+                    {% for placeholder in cms_renderer.get_rendered_editable_placeholders %}
+                        <div class="cms-dragarea cms-dragarea-{{ placeholder.pk|unlocalize }}{% if placeholder.is_static %}cms-dragarea-static{% endif %}">
+                        {% include cms_toolbar.templates.dragbar_template with placeholder=placeholder %}
+                        <div class="cms-draggables cms-draggables-root">
+                            <div class="cms-draggables-empty">
+                                {% trans "Drop a plugin here" %}
+                            </div>
+                            {% for plugin in placeholder.get_cached_plugins %}
+                                {% include cms_toolbar.templates.drag_item_template with plugin=plugin %}{% endfor %}
+                            </div>
+                        </div>
+                    {% endfor %}
+                {% endif %}
+            </div>
+        </div>
+        {# end: structure #}
+        {% if cms_toolbar.redirect_url %}
+            <div class="cms-screenblock">
+                <div class="cms-screenblock-inner">
+                    <h1>{% trans "This page has no preview!" %}</h1>
+                    <p>
+                        {% trans "It is being redirected to:" %}
+                        <a href="{{ cms_toolbar.redirect_url }}">
+                            {{ cms_toolbar.redirect_url }}
+                        </a>
+                    </p>
+                </div>
+            </div>
+        {% endif %}
+        <script type="text/javascript" data-cms>
+        var CMS = CMS || {};
+        CMS._plugins = CMS._plugins || [];
+        </script>
+    {% endblock toolbar_bottom %}
diff --git a/tests/django_cms/cms/welcome.html b/tests/django_cms/cms/welcome.html
new file mode 100644
index 0000000..f7ca4b9
--- /dev/null
+++ b/tests/django_cms/cms/welcome.html
@@ -0,0 +1,127 @@
+<!doctype html>
+{% load i18n static cms_tags cms_static sekizai_tags %}
+<html lang="{{ LANGUAGE_CODE }}">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>{% trans "django CMS" %}</title>
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <link rel="icon" type="image/png" href="{% static 'cms/img/favicon.png' %}">
+        {% render_block "css" %}
+        <link rel="stylesheet" href="{% static_with_version 'cms/css/cms.base.css' %}">
+        <link rel="stylesheet" href="{% static_with_version 'cms/css/cms.welcome.css' %}">
+    </head>
+    <body class="cms-welcome-bg">
+        {% cms_toolbar %}
+        {% language request.toolbar.toolbar_language %}
+            <div class="cms-reset cms-welcome">
+                <header class="cms-welcome-header">
+                    <h1 class="cms-welcome-heading">
+                        <span class="cms-icon cms-icon-check"></span>
+                        {% trans "Installation successful!" %}
+                    </h1>
+                    <a href="/" class="cms-welcome-logo">
+                        <span class="cms-hidden">{% trans "django CMS" %}</span>
+                    </a>
+                </header>
+                {{ request.version }}
+                <section class="cms-welcome-section">
+                    <h2>
+                        {% if user.is_authenticated %}
+                            {% trans "Add your first page" %}
+                        {% else %}
+                            {% trans "Please log in" %}
+                        {% endif %}
+                    </h2>
+                    <p>
+                        {% blocktrans %}
+                            Welcome to django CMS version
+                            <strong>{{ cms_version }}</strong>
+                            .
+                        {% endblocktrans %}
+                    </p>
+                    <p>
+                        {% url "admin:cms_page_add" as admin_add_page %}
+                        {% if user.is_authenticated %}
+                            {% blocktrans %}
+                                <a href="{{ admin_add_page }}" class="js-welcome-add">
+                                    Add the first page
+                                </a>
+                                to the system to continue.
+                            {% endblocktrans %}
+                        {% else %}
+                            {% blocktrans %}
+                                JavaScript seems to be disabled so please
+                                <a href="{{ admin_add_page }}" class="js-welcome-add">
+                                    add a page
+                                </a>
+                                manually.
+                            {% endblocktrans %}
+                        {% endif %}
+                    </p>
+                </section>
+                <footer class="cms-welcome-footer">
+                    <h2 class="cms-hidden">{% trans "Installation Notes" %}</h2>
+                    <p class="cms-welcome-links">
+                        <a href="//django-cms.org/" target="_blank">
+                            {% trans "django CMS" %}
+                        </a>
+                        <a href="//django-cms.org/en/support" target="_blank">
+                            {% trans "Support" %}
+                        </a>
+                        <a href="//docs.django-cms.org/" target="_blank">
+                            {% trans "Documentation" %}
+                        </a>
+                    </p>
+                    {% blocktrans %}
+                        <p class="cms-welcome-notes">
+                            If you don't see the django CMS logo at the top, make sure
+                            you linked the
+                            <code>
+                            static/cms
+                            </code>
+                            folder to your
+                            static files.
+                        </p>
+                    {% endblocktrans %}
+                    {% if django_debug %}
+                        {% blocktrans %}
+                            <p class="cms-welcome-notes">
+                                You're seeing this message because you have
+                                <code>
+                                DEBUG = True
+                                </code>
+                                in your django settings file and
+                                haven't added any pages yet.
+                            </p>
+                        {% endblocktrans %}
+                    {% endif %}
+                </footer>
+            </div>
+        {% endlanguage %}
+        {% render_block "js" %}
+        {% language request.toolbar.toolbar_language %}
+            <script>
+        {% if user.is_authenticated %}
+            CMS.$(function () {
+                var btn = CMS.$('.js-welcome-add');
+                btn.on('click', function (e) {
+                    e.preventDefault();
+                    var modal = new CMS.Modal();
+                    modal.open({
+                        url: '{% url "cms_wizard_create" %}?language={{ LANGUAGE_CODE }}',
+                        title: '{% trans "Welcome to django CMS" %}'
+                    });
+                });
+                // automatically trigger the modal if sideframe isn't open
+                if (!CMS.settings.sideframe.url) {
+                    btn.trigger('click');
+                }
+            });
+        {% else %}
+            window.location.href = '{% url "admin:login" %}?next={{ next_url }}?{{ cms_edit_on }}';
+        {% endif %}
+            </script>
+        {% endlanguage %}
+    </body>
+</html>
diff --git a/tests/django_cms/cms/widgets/applicationconfigselect.html b/tests/django_cms/cms/widgets/applicationconfigselect.html
new file mode 100644
index 0000000..f46061e
--- /dev/null
+++ b/tests/django_cms/cms/widgets/applicationconfigselect.html
@@ -0,0 +1,8 @@
+{% load i18n static %}
+{% include 'django/forms/widgets/select.html' %}
+{{ widget.script_init|safe }}
+<a href=""
+   class="add-another"
+   id="add_{{ widget.name }}"
+   onclick="return showAddAnotherPopup(this);"
+   title="{% trans 'Add Another' %}"></a>
diff --git a/tests/django_cms/cms/widgets/pageselectwidget.html b/tests/django_cms/cms/widgets/pageselectwidget.html
new file mode 100644
index 0000000..db16509
--- /dev/null
+++ b/tests/django_cms/cms/widgets/pageselectwidget.html
@@ -0,0 +1,2 @@
+{% include 'django/forms/widgets/multiwidget.html' %}
+{{ widget.script_init|safe }}
diff --git a/tests/django_cms/cms/widgets/pagesmartlinkwidget.html b/tests/django_cms/cms/widgets/pagesmartlinkwidget.html
new file mode 100644
index 0000000..81514a1
--- /dev/null
+++ b/tests/django_cms/cms/widgets/pagesmartlinkwidget.html
@@ -0,0 +1,2 @@
+{% include 'django/forms/widgets/text.html' %}
+{{ widget.script_init|safe }}
diff --git a/tests/django_cms/cms/wizards/base.html b/tests/django_cms/cms/wizards/base.html
new file mode 100755
index 0000000..26d901c
--- /dev/null
+++ b/tests/django_cms/cms/wizards/base.html
@@ -0,0 +1,18 @@
+{% extends "admin/base_site.html" %}
+{% load static cms_static %}
+{% block extrastyle %}{{ block.super }}{% endblock %}
+{% block bodyclass %}cms-admin cms-admin-modal{% endblock %}
+{% block content %}
+    <div class="cms-content-wizard">
+        {% block wizard %}{% endblock %}</div>{% endblock %}
+        {% block extrahead %}
+            {{ block.super }}
+            <script src="{% static_with_version "cms/js/dist/bundle.admin.base.min.js" %}" type="text/javascript"></script>
+            <script type="text/javascript">
+        if (!window.jQuery) {
+            window.jQuery = CMS.$;
+            window.$ = window.jQuery;
+        }
+            </script>
+            {{ form.media }}
+        {% endblock %}
diff --git a/tests/django_cms/cms/wizards/create.html b/tests/django_cms/cms/wizards/create.html
new file mode 100755
index 0000000..8b5f654
--- /dev/null
+++ b/tests/django_cms/cms/wizards/create.html
@@ -0,0 +1,28 @@
+{% extends "cms/wizards/base.html" %}
+{% load i18n admin_urls %}
+{% block wizard %}
+    <h1>{% trans "Create" %} {{ wizard_entry.title }}</h1>
+    <form action="{% url 'cms_wizard_create' %}" method="post" enctype="multipart/form-data" novalidate>
+        {% csrf_token %}
+        {{ wizard.management_form }}
+        {% if form.errors %}
+            <p class="errornote">
+                {% blocktrans count form.errors|length as counter %}
+                    Please correct the error below.{% plural %}Please correct the errors below.
+                {% endblocktrans %}
+            </p>
+        {% endif %}
+        <div>
+            {% include "cms/wizards/includes/form_fields.html" %}
+        </div>
+        <div class="submit-row">
+            <input type="submit" class="default cms-btn cms-btn-action" value="{% trans "Create" %}">
+            <button type="submit"
+                    name="wizard_goto_step"
+                    class="cms-btn cms-btn-secondary cms-btn-group"
+                    value="{{ wizard.steps.prev }}">
+                {% trans "Back" %}
+            </button>
+        </div>
+    </form>
+{% endblock %}
diff --git a/tests/django_cms/cms/wizards/done.html b/tests/django_cms/cms/wizards/done.html
new file mode 100644
index 0000000..56215f7
--- /dev/null
+++ b/tests/django_cms/cms/wizards/done.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script>
+        window.top.location = '{{ url }}';
+        </script>
+    </head>
+    <body></body>
+</html>
diff --git a/tests/django_cms/cms/wizards/includes/form_fields.html b/tests/django_cms/cms/wizards/includes/form_fields.html
new file mode 100755
index 0000000..f2c075d
--- /dev/null
+++ b/tests/django_cms/cms/wizards/includes/form_fields.html
@@ -0,0 +1,32 @@
+{% load i18n %}
+{% csrf_token %}
+{{ inlineformset.management_form }}
+{% for hidden in form.hidden_fields %}{{ hidden }}{% endfor %}
+<fieldset class="module aligned">
+    {% for field in form.visible_fields %}
+        <div class="form-row {{ field.name }}{% if field.errors %}errors{% endif %}">
+        {% if field.errors %}
+            <ul class="errorlist">
+                {% for error in field.errors %}
+                    <li>
+                        {{ error }}
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+        <div>
+            <label
+                {% if field.field.required %}class="required" {% endif %}
+                for="{{ field.id_for_label }}">
+                {{ field.label }}
+            </label>
+            {{ field }}
+            {% if field.help_text %}
+                <p class="help">
+                    {{ field.help_text }}
+                </p>
+            {% endif %}
+        </div>
+    </div>
+{% endfor %}
+</fieldset>
diff --git a/tests/django_cms/cms/wizards/start.html b/tests/django_cms/cms/wizards/start.html
new file mode 100755
index 0000000..eb8bd61
--- /dev/null
+++ b/tests/django_cms/cms/wizards/start.html
@@ -0,0 +1,22 @@
+{% extends "cms/wizards/base.html" %}
+{% load i18n %}
+{% block wizard %}
+    <h1>{% trans "Create" %}</h1>
+    <form action="{% url 'cms_wizard_create' %}" method="post" class="modal-body">
+        {% csrf_token %}
+        {{ wizard.management_form }}
+        {{ form.page }}
+        {{ form.language }}
+        {% if form.errors %}
+            <p class="errornote">
+                {% trans "Please choose an option from below to proceed to the next step." %}
+            </p>
+        {% endif %}
+        <div class="choice-wrapper">
+            {{ form.entry }}
+        </div>
+        <div class="submit-row">
+            <input type="submit" value="{% trans 'Next' %}" class="default cms-btn cms-btn-action" name="_continue">
+        </div>
+    </form>
+{% endblock %}
diff --git a/tests/django_cms/cms/wizards/wizardoptionwidget.html b/tests/django_cms/cms/wizards/wizardoptionwidget.html
new file mode 100644
index 0000000..a9164da
--- /dev/null
+++ b/tests/django_cms/cms/wizards/wizardoptionwidget.html
@@ -0,0 +1,11 @@
+{% for group, entries, index in widget.optgroups %}
+    {% for entry in entries %}
+        <label tabindex="0" class="choice{% if forloop.parentloop.first %}active{% endif %}">
+        <input type="radio" name="{{ entry.name }}" value="{{ entry.value }}"
+        {% if forloop.parentloop.first %}checked {% endif %}
+        >
+        <strong>{{ entry.label }}</strong>
+        <span class="info">{{ entry.attrs.description }}</span>
+    </label>
+{% endfor %}
+{% endfor %}
diff --git a/tests/django_ledger/account_create.html b/tests/django_ledger/account_create.html
new file mode 100644
index 0000000..82ebda5
--- /dev/null
+++ b/tests/django_ledger/account_create.html
@@ -0,0 +1,24 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-8-tablet is-6-desktop">
+            <div class="box">
+                <form action="{% url 'django_ledger:account-create' entity_slug=view.kwargs.entity_slug %}"
+                      method="post">
+                    {% csrf_token %}
+                    {{ form.as_p }}
+                    <button type="submit" class="button is-primary is-fullwidth djetler_my_1">
+                        Submit
+                    </button>
+                    <a class="button is-dark is-small is-fullwidth"
+                       href="{% url 'django_ledger:account-list' entity_slug=view.kwargs.entity_slug %}">
+                        Back
+                    </a>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/account_create_child.html b/tests/django_ledger/account_create_child.html
new file mode 100644
index 0000000..d29a58f
--- /dev/null
+++ b/tests/django_ledger/account_create_child.html
@@ -0,0 +1,30 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-8-tablet is-6-desktop">
+            <div class="box">
+                <h3 class="is-size-3 has-text-centered">
+                    {{ page_title }}
+                </h3>
+                <p class="has-text-weight-bold has-text-centered">
+                    {{ account }}
+                </p>
+                <form action="{% url 'django_ledger:account-create-child' entity_slug=view.kwargs.entity_slug parent_account_pk=view.kwargs.parent_account_pk %}"
+                      method="post">
+                    {% csrf_token %}
+                    {{ form.as_p }}
+                    <button type="submit" class="button is-primary is-fullwidth djetler_my_1">
+                        Submit
+                    </button>
+                    <a class="button is-dark is-small is-fullwidth djetler_my_1"
+                       href="{% url 'django_ledger:account-list' entity_slug=view.kwargs.entity_slug %}">
+                        Back
+                    </a>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/account_detail.html b/tests/django_ledger/account_detail.html
new file mode 100644
index 0000000..f4d0472
--- /dev/null
+++ b/tests/django_ledger/account_detail.html
@@ -0,0 +1,29 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block aux_menu %}
+    {% period_navigation 'account-detail' %}
+{% endblock %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content has-text-centered">
+            <h1 class="is-size-1 has-text-weight-bold">
+                {{ account.code }}: {{ account.name }}
+            </h1>
+            <h2 class="is-size-2 has-text-weight-light">
+                {% trans 'Account Transaction List Report' %}
+            </h2>
+            <h3 class="is-size-4 is-italic has-font-weight-light">
+                {% if view_date %}
+                    {{ from_date | date:'m/d/Y' }}
+                {% else %}
+                    {{ from_date | date:'m/d/Y' }} - {{ to_date | date:'m/d/Y' }}
+                {% endif %}
+            </h3>
+        </div>
+        <div class="card-content">
+            {% account_txs_table transactions %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/account_list.html b/tests/django_ledger/account_list.html
new file mode 100644
index 0000000..aa126eb
--- /dev/null
+++ b/tests/django_ledger/account_list.html
@@ -0,0 +1,19 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="box">
+        <a href="{% url 'django_ledger:account-create' entity_slug=view.kwargs.entity_slug %}"
+           class="button is-primary is-outlined">
+            {% trans 'Create Account' %}
+        </a>
+        <a href="{% url 'django_ledger:entity-dashboard' entity_slug=view.kwargs.entity_slug %}"
+           class="button is-dark">
+            {% trans 'Back' %}
+        </a>
+        {% accounts_table asset_accounts 'Asset Accounts' %}
+        {% accounts_table liability_accounts 'Liability Accounts' %}
+        {% accounts_table equity_accounts 'Equity Accounts' %}
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/account_update.html b/tests/django_ledger/account_update.html
new file mode 100644
index 0000000..64508ba
--- /dev/null
+++ b/tests/django_ledger/account_update.html
@@ -0,0 +1,23 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-8-tablet is-6-desktop">
+            <div class="box">
+                <form action="{{ account.get_update_url }}" method="post">
+                    {% csrf_token %}
+                    {{ form.as_p }}
+                    <button class="button is-fullwidth is-primary my-3">
+                        {% trans 'Submit' %}
+                    </button>
+                    <a class="button is-fullwidth is-dark is-small my-3"
+                       href="{% url 'django_ledger:account-list' entity_slug=view.kwargs.entity_slug %}">
+                        {% trans 'Back' %}
+                    </a>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/auth/login.html b/tests/django_ledger/auth/login.html
new file mode 100644
index 0000000..e10579f
--- /dev/null
+++ b/tests/django_ledger/auth/login.html
@@ -0,0 +1,52 @@
+{% extends 'django_ledger/base.html' %}
+{% load static %}
+{% block nav %}{% endblock %}
+{% block header %}{% endblock %}
+{% block content %}
+    <section class="hero is-fullheight"
+             style="background-image: url({% static 'django_ledger/img/daniel-weiss-aj2Os9mYgJU-unsplash.jpg' %})">
+        <div class="hero-body">
+            <div class="container is-fluid">
+                <div class="columns is-centered">
+                    <div class="column is-6-tablet is-4-desktop">
+                        <div class="box">
+                            <div class="container" style="padding: 20px;">
+                                <div class="figure">
+                                    <img src="{% static 'django_ledger/logo/django-ledger-logo.png' %}" alt=""/>
+                                </div>
+                            </div>
+{#
+<h1 class="title">
+                        #}
+                        {# Hero title#}
+{#
+</h1>
+                    #}
+{#
+<h2 class="subtitle">
+                #}
+                {# Hero subtitle#}
+{#
+</h2>
+            #}
+            <form action="{% url 'django_ledger:login' %}" method="post">
+                {% csrf_token %}
+                <div class="columns is-multiline">
+                    <div class="column is-12">
+                        {{ form }}
+                    </div>
+                    <div class="column is-12">
+                        <button type="submit" class="button is-primary is-fullwidth">
+                            Login
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+</div>
+</div>
+</section>
+{% endblock %}
+{% block footer %}{% endblock %}
diff --git a/tests/django_ledger/balance_sheet.html b/tests/django_ledger/balance_sheet.html
new file mode 100644
index 0000000..8514cb6
--- /dev/null
+++ b/tests/django_ledger/balance_sheet.html
@@ -0,0 +1,78 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block aux_menu %}
+    {% if entity %}
+        <div class="column is-12">
+            {% period_navigation 'entity-bs' %}
+        </div>
+    {% elif ledger %}
+        <div class="column is-12">
+            {% period_navigation 'ledger-bs' %}
+        </div>
+    {% elif unit_model %}
+        <div class="column is-12">
+            {% period_navigation 'unit-bs' %}
+        </div>
+    {% endif %}
+{% endblock %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content has-text-centered">
+            <div class="container mb-4">
+                <div class="columns">
+                    <div class="column">
+                        {% if entity %}
+                            <h1 class="is-size-2 has-text-weight-light">
+                                {% session_entity_name %}
+                            </h1>
+                        {% elif ledger %}
+                            <h1 class="is-size-2 has-text-weight-light">
+                                {{ ledger.name }}
+                            </h1>
+                        {% elif unit_model %}
+                            <h1 class="is-size-2 has-text-weight-light">
+                                {{ ledger.name }}
+                            </h1>
+                        {% endif %}
+                        <h1 class="is-size-2 has-text-weight-bold">
+                            {% trans 'Balance Sheet' %}
+                        </h1>
+                        {% if unit_model %}
+                            <h3 class="is-size-4 has-text-weight-medium is-italic">
+                                {{ unit_model.name }} {% trans 'Unit' %}
+                            </h3>
+                        {% endif %}
+                        <h2 class="is-size-2 has-text-weight-light">
+                            {% if quarter %}
+                                {{ year }} | Q{{ quarter }}
+                            {% elif month %}{{ from_date | date:'F, Y' }}
+                            {% else %}
+                                {% trans 'Fiscal Year' %} {{ year }}
+                            {% endif %}
+                        </h2>
+                        <h3 class="is-size-4 is-italic has-font-weight-light">
+                            As Of {{ to_date | date:'m/d/Y' }}
+                        </h3>
+                    </div>
+                </div>
+            </div>
+            {% balance_sheet_table io_model=object to_date=to_date %}
+            {% if entity %}
+                <a class="button is-fullwidth is-dark is-small mb-1"
+                   href="{% url 'django_ledger:ledger-list' entity_slug=view.kwargs.entity_slug %}">
+                    {% trans 'Go Back' %}
+                </a>
+            {% elif ledger %}
+                <a class="button is-fullwidth is-dark is-small my-2"
+                   href="{% url 'django_ledger:entity-dashboard' entity_slug=view.kwargs.entity_slug %}">
+                    {% trans 'Go Back' %}
+                </a>
+            {% endif %}
+            <a class="button is-fullwidth is-light is-small my-2" href="?by_unit=1">
+                {% trans 'By Unit' %}
+            </a>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/bank_account_create.html b/tests/django_ledger/bank_account_create.html
new file mode 100644
index 0000000..e720948
--- /dev/null
+++ b/tests/django_ledger/bank_account_create.html
@@ -0,0 +1,24 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-6-desktop">
+            <div class="box">
+                <form action="{% url 'django_ledger:bank-account-create' entity_slug=view.kwargs.entity_slug %}"
+                      method="post">
+                    {% csrf_token %}
+                    {{ form.as_p }}
+                    <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                        {% trans 'Create' %}
+                    </button>
+                    <a href="{% url 'django_ledger:bank-account-list' entity_slug=view.kwargs.entity_slug %}"
+                       class="button is-small is-dark is-fullwidth">
+                        {% trans 'Back' %}
+                    </a>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/bank_account_list.html b/tests/django_ledger/bank_account_list.html
new file mode 100644
index 0000000..128fc39
--- /dev/null
+++ b/tests/django_ledger/bank_account_list.html
@@ -0,0 +1,20 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="box">
+        <div class="columns">
+            <div class="column">
+                <a class="button is-primary is-outlined is-small"
+                   href="{% url 'django_ledger:bank-account-create' entity_slug=view.kwargs.entity_slug %}">
+                    <span class="icon is-large has-text-success">
+                        {% icon 'carbon:add-alt' 24 %}
+                    </span>
+                    <span>{% trans 'New Bank Account' %}</span>
+                </a>
+            </div>
+        </div>
+        {% bank_account_table bank_accounts %}
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/bank_account_update.html b/tests/django_ledger/bank_account_update.html
new file mode 100644
index 0000000..709d44f
--- /dev/null
+++ b/tests/django_ledger/bank_account_update.html
@@ -0,0 +1,36 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-6-desktop">
+            <div class="box">
+                <div class="columns">
+                    <div class="column has-text-centered">
+                        <h2 class="is-size-2">{{ bank_account.name }}</h2>
+                        <h2 class="is-size-3">
+                            {% trans 'Account' %}: {{ bank_account.account_number }}
+                        </h2>
+                        <h2 class="is-size-3">
+                            {% trans 'Routing' %}: {{ bank_account.routing_number }}
+                        </h2>
+                        <h2 class="is-size-4">{% trans 'ABA' %}: {{ bank_account.aba_number }}</h2>
+                    </div>
+                </div>
+                <form action="{% url 'django_ledger:bank-account-update' entity_slug=view.kwargs.entity_slug bank_account_pk=bank_account.uuid %}"
+                      method="post">
+                    {% csrf_token %}
+                    {{ form.as_p }}
+                    <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                        {% trans 'Update' %}
+                    </button>
+                    <a href="{% url 'django_ledger:bank-account-list' entity_slug=view.kwargs.entity_slug %}"
+                       class="button is-small is-dark is-fullwidth">
+                        {% trans 'Back' %}
+                    </a>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/base.html b/tests/django_ledger/base.html
new file mode 100644
index 0000000..11822ea
--- /dev/null
+++ b/tests/django_ledger/base.html
@@ -0,0 +1,40 @@
+{% load static %}
+{% load django_ledger %}
+{% load cache %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>{% session_entity_name %} | {{ page_title }}</title>
+        <script src="{% static 'django_ledger/bundle/styles.bundle.js' %}"></script>
+        <link rel="shortcut icon" type="image/jpg" href="{% static 'django_ledger/logo/favicon.png' %}">
+    </head>
+    <body>
+        {% block nav %}
+            {% include 'django_ledger/includes/nav.html' %}{% endblock %}
+            {% block header %}
+                {% include 'django_ledger/includes/page_header.html' with header_title=header_title %}{% endblock %}
+                {% block breadcrumbs %}{% endblock %}
+                {% block messages %}
+                    {% include 'django_ledger/includes/messages.html' with messages=messages %}{% endblock %}
+                    {% block content %}{% endblock %}
+                    {% block footer %}
+                        {% include 'django_ledger/includes/footer.html' %}{% endblock %}
+                        {% block script_bottom %}
+                            <script src="{% static 'django_ledger/bundle/djetler.bundle.js' %}"></script>
+                            <script>
+        {% if entity_slug %}let entitySlug = "{{ view.kwargs.entity_slug }}"{% endif %}
+        {% if from_date and to_date %}
+            let fromDate = "{{ from_date | date:'Y-m-d' }}";
+            let toDate = "{{ to_date | date:'Y-m-d' }}";
+        {% endif %}
+        {% if date_navigation_url %}
+            let dateNavigationUrl = "{{ date_navigation_url }}"
+            let datePickers = document.querySelectorAll("[id^='djl-datepicker']")
+            datePickers.forEach(dp => djLedger.getCalendar(dp.attributes.id.value, dateNavigationUrl))
+        {% endif %}
+                            </script>
+                        {% endblock %}
+                    </body>
+                </html>
diff --git a/tests/django_ledger/bill_create.html b/tests/django_ledger/bill_create.html
new file mode 100644
index 0000000..6c1b696
--- /dev/null
+++ b/tests/django_ledger/bill_create.html
@@ -0,0 +1,117 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <form action="{{ form_action_url }}" method="post">
+        <div class="columns is-multiline is-centered">
+            {% csrf_token %}
+            {% if po_model %}
+                <div class="column is-12 has-text-centered">
+                    <h2 class="title">{% trans 'Bill for' %} {{ po_model.po_number }}</h2>
+                    <h3 class="subtitle has-text-weight-light">
+                        {% trans 'Bill for' %} {{ po_model.po_title }}
+                    </h3>
+                    {% for po_item in po_items %}
+                        <p>
+                            {{ po_item }}
+                        </p>
+                    {% endfor %}
+                </div>
+            {% endif %}
+            <div class="column is-6">
+                <div class="columns is-multiline">
+                    <div class="column is-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <p class="card-header-title">
+                                    {% trans 'Vendor Information' %}
+                                </p>
+                            </div>
+                            <div class="card-content">
+                                <div class="field">
+                                    <div class="control">
+                                        {{ form.vendor }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column is-6">
+                <div class="card">
+                    <div class="card-header">
+                        <p class="card-header-title">
+                            {% trans 'Bill Amount & Terms' %}
+                        </p>
+                    </div>
+                    <div class="card-content">
+                        <div class="field">
+                            <div class="control">
+                                {{ form.xref }}
+                            </div>
+                        </div>
+                        <div class="field">
+                            <div class="control">
+                                {{ form.date }}
+                            </div>
+                        </div>
+                        <div class="field">
+                            <label for="{{ form.terms.id_for_label }}" class="label is-small">
+                                {{ form.terms.label }}
+                            </label>
+                            <div class="control">
+                                {{ form.terms }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column is-12">
+                <div class="card">
+                    <div class="card-header">
+                        <p class="card-header-title">
+                            {% trans 'Connected Accounts' %}
+                        </p>
+                    </div>
+                    <div class="card-content">
+                        <div class="field">
+                            <label for="{{ form.terms.cash_account }}" class="label is-small">
+                                {{ form.cash_account.label }}
+                            </label>
+                            <div class="control">
+                                {{ form.cash_account }}
+                            </div>
+                        </div>
+                        <div class="field">
+                            <label for="{{ form.terms.prepaid_account }}" class="label is-small">
+                                {{ form.prepaid_account.label }}
+                            </label>
+                            <div class="control">
+                                {{ form.prepaid_account }}
+                            </div>
+                        </div>
+                        <div class="field">
+                            <label for="{{ form.terms.unearned_account }}" class="label is-small">
+                                {{ form.unearned_account.label }}
+                            </label>
+                            <div class="control">
+                                {{ form.unearned_account }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column is-4">
+                <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                    Create
+                </button>
+                <a href="{% url 'django_ledger:invoice-list' entity_slug=view.kwargs.entity_slug %}"
+                   class="button is-small is-dark is-fullwidth">
+                    Back
+                </a>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/tests/django_ledger/bill_delete.html b/tests/django_ledger/bill_delete.html
new file mode 100644
index 0000000..08b0aef
--- /dev/null
+++ b/tests/django_ledger/bill_delete.html
@@ -0,0 +1,39 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <form action="{{ form_action_url }}" method="post">
+                {% csrf_token %}
+                <div class="card">
+                    <div class="card-content has-text-centered">
+                        <p class="title has-text-weight-light">
+                            Are you sure you want to delete
+                            Bill {{ bill.bill_number }}
+                        </p>
+                    </div>
+                    <div class="card-content has-text-centered">
+                        <p class="subtitle">
+                            All transactions associated with this Bill will be deleted.
+                            If you want to void the bill instead, click
+                            <a href="{% url 'django_ledger:bill-void' entity_slug=view.kwargs.entity_slug bill_pk=bill.uuid %}">
+                                here
+                            </a>
+                        </p>
+                    </div>
+                    <div class="card-content has-text-centered">
+                        <a href="{% url 'django_ledger:bill-detail' entity_slug=view.kwargs.entity_slug bill_pk=bill.uuid %}"
+                           class="button is-primary">
+                            {% trans 'Go Back' %}
+                        </a>
+                        <button type="submit" class="button is-danger">
+                            {% trans 'Delete' %}
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/bill_detail.html b/tests/django_ledger/bill_detail.html
new file mode 100644
index 0000000..e715783
--- /dev/null
+++ b/tests/django_ledger/bill_detail.html
@@ -0,0 +1,172 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns">
+        <div class="column is-4">
+            <div class="columns is-multiline">
+                <div class="column is-12">
+                    {% include 'django_ledger/includes/card_bill.html' with bill=bill entity_slug=view.kwargs.entity_slug style='bill-detail' %}
+                </div>
+                <div class="column is-12">
+                    {% include 'django_ledger/includes/card_vendor.html' with vendor=bill.vendor %}
+                </div>
+                <div class="column is-12">
+                    <a class="button is-info is-fullwidth is-outlined"
+                       href="{% url 'django_ledger:bill-list' entity_slug=view.kwargs.entity_slug %}">
+                        {% trans 'Bill List' %}
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="column is-8">
+            <div class="columns is-multiline">
+                {% if bill.is_configured %}
+                    <div class="column is-12">
+                        <nav class="level">
+                            <div class="level-item has-text-centered">
+                                <div>
+                                    <p class="heading">
+                                        Cash Account:
+                                        <a href="{% url 'django_ledger:account-detail' account_pk=bill.cash_account.uuid entity_slug=view.kwargs.entity_slug %}"
+                                           class="has-text-danger">
+                                            {{ bill.cash_account.code }}
+                                        </a>
+                                        <p class="title">
+                                            {% currency_symbol %}{{ bill.get_amount_cash | absolute | currency_format }}
+                                        </p>
+                                    </div>
+                                </div>
+                                {% if bill.accrue %}
+                                    <div class="level-item has-text-centered">
+                                        <div>
+                                            <p class="heading">
+                                                Prepaid Account:
+                                                <a href="{% url 'django_ledger:account-detail' account_pk=bill.prepaid_account.uuid entity_slug=view.kwargs.entity_slug %}"
+                                                   class="has-text-danger">
+                                                    {{ bill.prepaid_account.code }}
+                                                </a>
+                                            </p>
+                                            <p class="title has-text-success">
+                                                {% currency_symbol %}{{ bill.get_amount_prepaid | currency_format }}
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div class="level-item has-text-centered">
+                                        <div>
+                                            <p class="heading">
+                                                Unearned Account:
+                                                <a href="{% url 'django_ledger:account-detail' account_pk=bill.unearned_account.uuid entity_slug=view.kwargs.entity_slug %}"
+                                                   class="has-text-danger">
+                                                    {{ bill.unearned_account.code }}
+                                                </a>
+                                            </p>
+                                            <p class="title has-text-danger">
+                                                {% currency_symbol %}{{ bill.get_amount_unearned | currency_format }}
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div class="level-item has-text-centered">
+                                        <div>
+                                            <p class="heading">
+                                                Accrued {{ bill.get_progress | percentage }}
+                                            </p>
+                                            <p class="title">
+                                                {% currency_symbol %}{{ bill.get_amount_earned | currency_format }}
+                                            </p>
+                                        </div>
+                                    </div>
+                                {% else %}
+                                    <div class="level-item has-text-centered">
+                                        <div>
+                                            <p class="heading">
+                                                You Still Owe
+                                            </p>
+                                            <p class="title has-text-danger">
+                                                {% currency_symbol %}{{ bill.get_amount_open | currency_format }}
+                                            </p>
+                                        </div>
+                                    </div>
+                                {% endif %}
+                            </nav>
+                        </div>
+                    {% endif %}
+                    <div class="column is-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h2 class="card-header-title has-text-weight-light is-size-3">
+                                    <span class="icon is-large">{% icon 'grommet-icons:transaction' 36 %}</span>
+                                    {% trans 'Bill Items' %}
+                                </h2>
+                            </div>
+                            <div class="card-content">
+                                <div class="table-container">
+                                    <table class="table is-fullwidth is-narrow is-striped is-bordered">
+                                        <thead>
+                                            <tr>
+                                                <th>{% trans 'Item' %}</th>
+                                                <th>{% trans 'Entity Unit' %}</th>
+                                                <th>{% trans 'Unit Cost' %}</th>
+                                                <th>{% trans 'Quantity' %}</th>
+                                                <th>{% trans 'Total' %}</th>
+                                                <th>{% trans 'PO' %}</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {% for bill_item in bill_items %}
+                                                <tr>
+                                                    <td>{{ bill_item.item_model }}</td>
+                                                    <td>
+                                                        {% if bill_item.entity_unit %}{{ bill_item.entity_unit }}{% endif %}
+                                                    </td>
+                                                    <td>{% currency_symbol %}{{ bill_item.unit_cost | currency_format }}</td>
+                                                    <td>{{ bill_item.quantity }}</td>
+                                                    <td>{% currency_symbol %}{{ bill_item.total_amount | currency_format }}</td>
+                                                    <td>
+                                                        {% if bill_item.po_model_id %}
+                                                            <a class="button is-small is-light"
+                                                               href="{% url 'django_ledger:po-detail' entity_slug=view.kwargs.entity_slug po_pk=bill_item.po_model_id %}">
+                                                                {% trans 'View PO' %}
+                                                            </a>
+                                                        {% endif %}
+                                                    </td>
+                                                </tr>
+                                            {% endfor %}
+                                        </tbody>
+                                        <tfoot>
+                                        <tr>
+                                            <th></th>
+                                            <th></th>
+                                            <th></th>
+                                            <th>
+                                                {% trans 'Total' %}
+                                            </th>
+                                            <th>
+                                                {% currency_symbol %}{{ total_amount_due | currency_format }}
+                                            </th>
+                                            <th></th>
+                                        </tr>
+                                        </tfoot>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column is-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h2 class="card-header-title has-text-weight-light is-size-3">
+                                    <span class="icon is-large">{% icon 'grommet-icons:transaction' 36 %}</span>
+                                    {% trans 'Bill Transactions' %}
+                                </h2>
+                            </div>
+                            <div class="card-content">
+                                {% bill_txs_table bill %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endblock %}
diff --git a/tests/django_ledger/bill_list.html b/tests/django_ledger/bill_list.html
new file mode 100644
index 0000000..0ecf282
--- /dev/null
+++ b/tests/django_ledger/bill_list.html
@@ -0,0 +1,127 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        {% if month %}
+                            <h1 class="is-size-1 has-text-weight-thin">
+                                {{ month | date:'F Y' }}
+                            </h1>
+                        {% elif year %}
+                            <h1 class="is-size-1 has-text-weight-thin">
+                                Year {{ year | date:'Y' }}
+                                Bills
+                            </h1>
+                        {% else %}
+                            <h1 class="is-size-1 has-text-weight-thin">
+                                {% trans 'Latest Bills' %}
+                            </h1>
+                        {% endif %}
+                    </div>
+                    <div class="level-item">
+                        <a href="{% url 'django_ledger:bill-create' entity_slug=view.kwargs.entity_slug %}">
+                            <span class="icon is-large has-text-success">
+                                {% icon 'carbon:add-alt' 60 %}
+                            </span>
+                        </a>
+                    </div>
+                </div>
+                <div class="level-right">
+                    {% if previous_month %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:bill-list-month' year=previous_month.year month=previous_month.month entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:left-circle-outlined' 16 %}</span>
+                                <span>{{ previous_month | date:'F Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if next_month %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:bill-list-month' year=next_month.year month=next_month.month entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:right-circle-outlined' 16 %}</span>
+                                <span>{{ next_month | date:'F Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if previous_year %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:bill-list-year' year=previous_year.year entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:left-circle-outlined' 16 %}</span>
+                                <span>{{ previous_year | date:'Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if next_year %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:bill-list-year' year=next_year.year entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:right-circle-outlined' 16 %}</span>
+                                <span>{{ next_year | date:'Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if page_obj %}
+                        {% if page_obj.has_previous %}
+                            <div class="level-item">
+                                <a href="?page={{ page_obj.previous_page_number }}"
+                                   class="button is-small is-dark is-outlined">
+                                    <span class="icon is-small">{% icon 'ant-design:left-circle-outlined' 24 %}</span>
+                                </a>
+                            </div>
+                        {% endif %}
+                        <div class="level-item">
+                            <p class="is-italic">
+                                page {{ page_obj.number }}
+                                of {{ page_obj.paginator.num_pages }}
+                            </p>
+                        </div>
+                        {% if page_obj.has_next %}
+                            <div class="level-item">
+                                <a href="?page={{ page_obj.next_page_number }}"
+                                   class="button is-small is-dark is-outlined">
+                                    <span class="icon is-small">{% icon 'ant-design:right-circle-outlined' 24 %}</span>
+                                </a>
+                            </div>
+                        {% endif %}
+                    {% endif %}
+                </div>
+            </div>
+            {% bill_table bills %}
+            {% if year %}
+                <h5 class="is-size-5">{% trans 'Go to month:' %}</h5>
+                <p>
+                    <a href="{% url 'django_ledger:bill-list' entity_slug=view.kwargs.entity_slug %}">
+                        {% trans 'All' %} |
+                    </a>
+                    {% for date in date_list %}
+                        <a href="{% url 'django_ledger:bill-list-month' entity_slug=view.kwargs.entity_slug year=date.year month=date.month %}">
+                            {{ date | date:'F' }}
+                            {% if not forloop.last %}>{% endif %}
+                        </a>
+                    {% endfor %}
+                </p>
+            {% else %}
+                <h5 class="is-size-5">{% trans 'Go to year:' %}</h5>
+                <p>
+                    <a href="{% url 'django_ledger:bill-list' entity_slug=view.kwargs.entity_slug %}">
+                        {% trans 'All' %} |
+                    </a>
+                    {% for date in date_list %}
+                        <a href="{% url 'django_ledger:bill-list-year' entity_slug=view.kwargs.entity_slug year=date.year %}">
+                            {{ date.year }}
+                            {% if not forloop.last %}>{% endif %}
+                        </a>
+                    {% endfor %}
+                </p>
+            {% endif %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/bill_update.html b/tests/django_ledger/bill_update.html
new file mode 100644
index 0000000..c98bcb2
--- /dev/null
+++ b/tests/django_ledger/bill_update.html
@@ -0,0 +1,234 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <form action="{% url 'django_ledger:bill-update' entity_slug=view.kwargs.entity_slug bill_pk=bill.uuid %}"
+          method="post">
+        {% if form.errors %}{{ form.errors }}{% endif %}
+        {% csrf_token %}
+        <div class="columns is-multiline">
+            <div class="column is-6">
+                {% include 'django_ledger/includes/card_vendor.html' with vendor=bill.vendor %}
+            </div>
+            <div class="column is-6">
+                <div class="card">
+                    <div class="card-header">
+                        <p class="card-header-title">
+                            {% trans 'Bill Amount & Terms' %}
+                        </p>
+                    </div>
+                    <div class="card-content">
+                        <div class="content">
+                            <h3 class="has-text-weight-light">
+                                Bill Amount:
+                                <strong>${{ bill.amount_due | currency_format }}</strong>
+                                <button type="button"
+                                        onclick="document.getElementById('django-ledger-bill-amount-field').classList.remove('is-hidden')"
+                                        class="button is-small is-info is-outlined">
+                                    {% trans 'Edit' %}
+                                </button>
+                            </h3>
+                            <div class="field is-hidden" id="django-ledger-bill-amount-field">
+                                <div class="control">
+                                    {{ form.amount_due }}
+                                </div>
+                            </div>
+                            <h4 class="has-text-weight-light">Bill Date: {{ bill.date }}</h4>
+                            <h4 class="has-text-weight-light">Terms: {{ bill.get_terms_display }}</h4>
+                            <h4 class="has-text-weight-light">
+                                External Reference: {{ bill.xref }}
+                                <button type="button"
+                                        onclick="document.getElementById('django-ledger-bill-xref-field').classList.remove('is-hidden')"
+                                        class="button is-small is-info is-outlined">
+                                    {% trans 'Edit' %}
+                                </button>
+                            </h4>
+                            <h4 class="has-text-weight-light">Accrue Bill: {{ form.accrue }}</h4>
+                            <div class="field is-hidden" id="django-ledger-bill-xref-field">
+                                <div class="control">
+                                    {{ form.xref }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column is-6">
+                <div class="card">
+                    <div class="card-header">
+                        <p class="card-header-title">
+                            {% trans 'Bill State' %}
+                        </p>
+                    </div>
+                    <div class="card-body">
+                        <div class="card-content">
+                            <form action="{% url 'django_ledger:bill-update' entity_slug=view.kwargs.entity_slug bill_pk=bill.uuid %}"
+                                  method="post">
+                                {% csrf_token %}
+                                <div class="field">
+                                    <label for="{{ form.paid.id_for_amount_paid }}" class="label is-small">
+                                        {{ form.amount_paid.label }}
+                                    </label>
+                                    <div class="control">
+                                        {{ form.amount_paid }}
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <label for="{{ form.paid.id_for_label }}" class="label is-small">
+                                        {{ form.paid }}
+                                        {{ form.paid.label }}
+                                    </label>
+                                </div>
+                                <div class="field">
+                                    <label class="label is-small" for="{{ form.paid_date.id_for_label }}">
+                                        {{ form.paid_date.label }}
+                                    </label>
+                                    <div class="control">
+                                        {{ form.paid_date }}
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <label class="label is-small" for="{{ form.progress.id_for_label }}">
+                                        {{ form.progress.label }}
+                                    </label>
+                                    <div class="control">
+                                        {{ form.progress }}
+                                    </div>
+                                </div>
+                                <button type="submit" class="button is-primary is-fullwidth djetler_my_1">
+                                    {% trans 'Save' %}
+                                </button>
+                                <a href="{% url 'django_ledger:bill-list' entity_slug=view.kwargs.entity_slug %}"
+                                   class="button is-small is-info is-fullwidth">
+                                    {% trans 'Bill List' %}
+                                </a>
+                                <a href="{% url 'django_ledger:entity-dashboard' entity_slug=view.kwargs.entity_slug %}"
+                                   class="button is-small is-info is-outlined is-fullwidth mt-2">
+                                    {% trans 'Dashboard' %}
+                                </a>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% if bill.is_configured %}
+                <div class="column is-6">
+                    <div class="card">
+                        <div class="card-header">
+                            <p class="card-header-title">
+                                {% trans 'Bill State' %}
+                            </p>
+                        </div>
+                        <div class="card-body">
+                            <div class="card-content">
+                                <div class="columns is-multiline">
+                                    <div class="column is-12">
+                                        <h3 class="is-size-3">{% trans 'Bill State' %}</h3>
+                                        <p>
+                                            {{ bill.cash_account }}:
+                                            ${{ bill.get_amount_cash | currency_format }}
+                                        </p>
+                                        <p>
+                                            {{ bill.prepaid_account }}:
+                                            ${{ bill.get_amount_receivable | currency_format }}
+                                        </p>
+                                        <p>
+                                            {{ bill.unearned_account }}:
+                                            ${{ bill.get_amount_payable | currency_format }}
+                                        </p>
+                                        <p>
+                                            {{ bill.earnings_account }}:
+                                            ${{ bill.get_amount_earned | currency_format }}
+                                        </p>
+                                    </div>
+                                    <div class="column is-12">
+                                        <h3 class="is-size-3">{% trans 'Ledger State' %}</h3>
+                                        <p>
+                                            {{ bill.cash_account }}: ${{ bill.amount_paid | currency_format }}
+                                        </p>
+                                        <p>
+                                            {{ bill.prepaid_account }}:
+                                            ${{ bill.amount_receivable | currency_format }}
+                                        </p>
+                                        <p>
+                                            {{ bill.unearned_account }}:
+                                            ${{ bill.amount_unearned | currency_format }}
+                                        </p>
+                                        <p>
+                                            {{ bill.earnings_account }}:
+                                            ${{ bill.amount_earned | currency_format }}
+                                        </p>
+                                    </div>
+                                    {% now "Y" as current_year %}
+                                    {% now "m" as current_month %}
+                                    <div class="column is-6">
+                                        <a class="button is-outlined is-small is-primary is-fullwidth"
+                                           href="{% url 'django_ledger:ledger-bs-month' ledger_pk=bill.ledger.uuid entity_slug=view.kwargs.entity_slug year=current_year month=current_month %}">
+                                            {% trans 'Balance Sheet' %}
+                                        </a>
+                                    </div>
+                                    <div class="column is-6">
+                                        <a class="button is-outlined is-small is-info is-fullwidth"
+                                           href="{% url 'django_ledger:ledger-ic-month' ledger_pk=bill.ledger.uuid entity_slug=view.kwargs.entity_slug year=current_year month=current_month %}">
+                                            {% trans 'Income Statement' %}
+                                        </a>
+                                    </div>
+                                    <div class="column is-12">
+                                        <a class="button is-small is-warning is-fullwidth"
+                                           href="{% url 'django_ledger:ledger-update' ledger_pk=bill.ledger.uuid entity_slug=view.kwargs.entity_slug %}">
+                                            {% trans 'Bill Ledger' %}
+                                        </a>
+                                        <a class="button is-small is-info is-fullwidth mt-2"
+                                           href="{% url 'django_ledger:je-list' ledger_pk=bill.ledger.uuid entity_slug=view.kwargs.entity_slug %}">
+                                            {% trans 'Ledger Journal Entries' %}
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {% else %}
+                <div class="column is-6">
+                    <div class="card animate__animated animate__tada">
+                        <div class="card-header">
+                            <p class="card-header-title">
+                                {% trans 'Bill Configuration' %}
+                            </p>
+                        </div>
+                        <div class="card-body">
+                            <div class="card-content">
+                                <div class="field">
+                                    <div class="control">
+                                        <label for="{{ form.cash_account.id_for_label }}" class="label">
+                                            {{ form.cash_account.label }}
+                                        </label>
+                                        {{ form.cash_account }}
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <div class="control">
+                                        <label for="{{ form.prepaid_account.id_for_label }}" class="label">
+                                            {{ form.prepaid_account.label }}
+                                        </label>
+                                        {{ form.prepaid_account }}
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <div class="control">
+                                        <label for="{{ form.unearned_account.id_for_label }}" class="label">
+                                            {{ form.unearned_account.label }}
+                                        </label>
+                                        {{ form.unearned_account }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    </form>
+    {% bill_item_formset_table item_formset %}
+{% endblock %}
diff --git a/tests/django_ledger/bill_void.html b/tests/django_ledger/bill_void.html
new file mode 100644
index 0000000..2c9b678
--- /dev/null
+++ b/tests/django_ledger/bill_void.html
@@ -0,0 +1,36 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <form action="{{ form_action_url }}" method="post">
+                {% csrf_token %}
+                <div class="card">
+                    <div class="card-content has-text-centered">
+                        <p class="title has-text-weight-light">
+                            Are you sure you want to void
+                            Bill {{ bill.bill_number }}?
+                        </p>
+                    </div>
+                    <div class="card-content has-text-centered">
+                        <p class="subtitle">
+                            All transactions associated with this Bill will be reversed as of today
+                            {% now "jS F Y" %}.
+                        </p>
+                    </div>
+                    <div class="card-content has-text-centered">
+                        <a href="{% url 'django_ledger:bill-detail' entity_slug=view.kwargs.entity_slug bill_pk=bill.uuid %}"
+                           class="button is-primary">
+                            {% trans 'Go Back' %}
+                        </a>
+                        <button type="submit" class="button is-warning">
+                            {% trans 'Void' %}
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/coa_update.html b/tests/django_ledger/coa_update.html
new file mode 100644
index 0000000..e77e146
--- /dev/null
+++ b/tests/django_ledger/coa_update.html
@@ -0,0 +1,23 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-8-tablet is-6-desktop">
+            <div class="box">
+                <form action="{{ coa.get_update_url }}" method="post">
+                    {% csrf_token %}
+                    {{ form.as_p }}
+                    <button class="button is-primary is-outlined is-fullwidth djetler_my_1" type="submit">
+                        Update
+                    </button>
+                    <a class="button is-small is-dark is-fullwidth"
+                       href="{% url 'django_ledger:entity-dashboard' entity_slug=view.kwargs.entity_slug %}"
+                       type="submit">
+                        Back
+                    </a>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/customer_create.html b/tests/django_ledger/customer_create.html
new file mode 100644
index 0000000..1d5e617
--- /dev/null
+++ b/tests/django_ledger/customer_create.html
@@ -0,0 +1,22 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="box">
+        <form method="post" action="{% url 'django_ledger:customer-create' entity_slug=view.kwargs.entity_slug %}">
+            <div class="field">
+                {{ form.as_p }}
+                {% csrf_token %}
+            </div>
+            <div class="field">
+                <button class="button is-primary is-small is-fullwidth">
+                    {% trans 'Create Customer' %}
+                </button>
+                <a href="{% url 'django_ledger:customer-list' entity_slug=view.kwargs.entity_slug %}"
+                   class="button is-dark is-small is-fullwidth mt-2">
+                    {% trans 'Go Back' %}
+                </a>
+            </div>
+        </form>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/customer_list.html b/tests/django_ledger/customer_list.html
new file mode 100644
index 0000000..8b45b3c
--- /dev/null
+++ b/tests/django_ledger/customer_list.html
@@ -0,0 +1,21 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="box">
+        <div class="columns">
+            <div class="column">
+                <a class="button is-primary is-outlined is-small"
+                   href="{% url 'django_ledger:customer-create' entity_slug=view.kwargs.entity_slug %}">
+                    <span class="icon is-large has-text-success">
+                        {% icon 'carbon:add-alt' 24 %}
+                    </span>
+                    <span>{% trans 'New Customer' %}</span>
+                </a>
+            </div>
+        </div>
+        {% customer_table %}
+    </div>
+</div>
+{% endblock %}
diff --git a/tests/django_ledger/customer_update.html b/tests/django_ledger/customer_update.html
new file mode 100644
index 0000000..d7eb630
--- /dev/null
+++ b/tests/django_ledger/customer_update.html
@@ -0,0 +1,23 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="box">
+        <form method="post"
+              action="{% url 'django_ledger:customer-update' entity_slug=view.kwargs.entity_slug customer_pk=customer.uuid %}">
+            <div class="field">
+                {{ form.as_p }}
+                {% csrf_token %}
+            </div>
+            <div class="field">
+                <button class="button is-primary is-small is-fullwidth">
+                    {% trans 'Update Customer' %}
+                </button>
+                <a href="{% url 'django_ledger:customer-list' entity_slug=view.kwargs.entity_slug %}"
+                   class="button is-dark is-small is-fullwidth mt-2">
+                    {% trans 'Go Back' %}
+                </a>
+            </div>
+        </form>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/data_import_job_list.html b/tests/django_ledger/data_import_job_list.html
new file mode 100644
index 0000000..7ed07cf
--- /dev/null
+++ b/tests/django_ledger/data_import_job_list.html
@@ -0,0 +1,17 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="box">
+        <a class="button is-primary is-outlined"
+           href="{% url 'django_ledger:data-import-ofx' entity_slug=view.kwargs.entity_slug %}">
+            {% trans 'Import OFX File' %}
+        </a>
+        <a class="button is-dark"
+           href="{% url 'django_ledger:entity-dashboard' entity_slug=view.kwargs.entity_slug %}">
+            {% trans 'Back' %}
+        </a>
+        {% data_import_job_list_table %}
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/data_import_job_txs.html b/tests/django_ledger/data_import_job_txs.html
new file mode 100644
index 0000000..366bfa3
--- /dev/null
+++ b/tests/django_ledger/data_import_job_txs.html
@@ -0,0 +1,23 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="box">
+        <div class="columns is-multiline">
+            <div class="column is-12">
+                <h1 class="is-size-2">Pending Transactions</h1>
+                {% data_import_job_txs_pending %}
+            </div>
+            <div class="column is-12">
+                <h2 class="is-size-2">Imported Transactions</h2>
+                {% data_import_job_txs_imported %}
+            </div>
+            <div class="column is-12 has-text-centered">
+                <a class="button is-dark" href="{% url ">
+                    Back
+                </a>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/data_import_ofx.html b/tests/django_ledger/data_import_ofx.html
new file mode 100644
index 0000000..3bae24a
--- /dev/null
+++ b/tests/django_ledger/data_import_ofx.html
@@ -0,0 +1,54 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-8-tablet">
+            <div class="box">
+                <div class="columns is-centered">
+                    <div class="column is-8-tablet ">
+                        <form action="{% url 'django_ledger:data-import-ofx' entity_slug=view.kwargs.entity_slug %}"
+                              enctype="multipart/form-data"
+                              method="post">
+                            {% csrf_token %}
+                            <div class="field">
+                                <div class="control">
+                                    <div id="file-js-django-ledger" class="file has-name">
+                                        <label class="file-label">
+                                            {{ form.ofx_file }}
+                                            <span class="file-cta">
+                                                <span class="icon is-medium">{% icon 'bi:cloud-upload-fill' 24 %}</span>
+                                                <span class="file-label">{{ form.ofx_file.label }}</span>
+                                            </span>
+                                            <span class="file-name">No file uploaded</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="field">
+                                <div class="control">
+                                    <button class="button is-dark is-fullwidth is-outlined" type="submit">
+                                        {% trans 'Upload' %}
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+{% block script_bottom %}
+    {{ block.super }}
+    <script>
+        const fileInput = document.querySelector('#file-js-django-ledger input[type=file]');
+        fileInput.onchange = () => {
+            if (fileInput.files.length > 0) {
+                const fileName = document.querySelector('#file-js-django-ledger .file-name');
+                fileName.textContent = fileInput.files[0].name;
+            }
+        }
+    </script>
+{% endblock %}
diff --git a/tests/django_ledger/entitiy_list.html b/tests/django_ledger/entitiy_list.html
new file mode 100644
index 0000000..85c08f9
--- /dev/null
+++ b/tests/django_ledger/entitiy_list.html
@@ -0,0 +1,40 @@
+{% extends 'django_ledger/base.html' %}
+{% load i18n %}
+{% load static %}
+{% block content %}
+    <section class="section">
+        <div class="container">
+            <div class="columns is-centered">
+                <div class="column is-6">
+                    <div class="card">
+                        <div class="card-header">
+                            <div class="card-header-title">
+                                {% trans 'My Entities' %}
+                            </div>
+                        </div>
+                        <div class="card-content content">
+                            <ul>
+                                {% for entity in entities %}
+                                    <li>
+                                        {{ entity.name }}
+                                        <a href="{{ entity.get_absolute_url }}"
+                                           class="button is-small is-primary is-outlined">
+                                            {% trans 'View' %}
+                                        </a>
+                                        <a href="{{ entity.get_manage_url }}" class="button is-small is-dark">
+                                            {% trans 'Settings' %}
+                                        </a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                            <a href="{% url 'django_ledger:entity-create' %}"
+                               class="button is-fullwidth is-primary is-outlined djetler_my_1">
+                                {% trans 'New Entity' %}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+{% endblock %}
diff --git a/tests/django_ledger/entity_create.html b/tests/django_ledger/entity_create.html
new file mode 100644
index 0000000..f71c84c
--- /dev/null
+++ b/tests/django_ledger/entity_create.html
@@ -0,0 +1,34 @@
+{% extends 'django_ledger/layouts/content_layout_2.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <form action="{% url 'django_ledger:entity-create' %}" method="post">
+        <div class="columns is-multiline is-centered">
+            {% csrf_token %}
+            <div class="column is-6">
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-header-title">
+                            <span class="icon">
+                                <i class="iconify djl-icon-36"
+                                   data-icon="ic:baseline-business"
+                                   data-inline="false"></i>
+                            </span>
+                            {% trans 'New Entity Information' %}
+                        </h2>
+                    </div>
+                    <div class="card-content">
+                        {{ form.as_p }}
+                        <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                            Create
+                        </button>
+                        <a href="{% url 'django_ledger:home' %}" class="button is-small is-dark is-fullwidth">
+                            Back
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/tests/django_ledger/entity_dashboard.html b/tests/django_ledger/entity_dashboard.html
new file mode 100644
index 0000000..62b89a5
--- /dev/null
+++ b/tests/django_ledger/entity_dashboard.html
@@ -0,0 +1,120 @@
+{% extends 'django_ledger/base.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block content %}
+    <section class="section">
+        <div class="container is-fluid p-0">
+            <div class="columns">
+                <div class="column is-3 is-hidden-mobile is-hidden-tablet-only">
+                    <div class="columns is-multiline">
+                        <div class="column is-12">
+                            {% if view.kwargs.unit_slug or request.GET.unit %}
+                                {% period_navigation 'unit-dashboard' %}
+                            {% else %}
+                                {% period_navigation 'entity-dashboard' %}
+                            {% endif %}
+                        </div>
+                        <div class="column is-12">
+                            {% navigation_menu 'desktop' %}
+                        </div>
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="columns is-multiline is-centered">
+                        <div class="column is-half">
+                            {% include 'django_ledger/includes/widget_bs.html' with tx_digest=tx_digest %}
+                        </div>
+                        <div class="column is-half">
+                            {% include 'django_ledger/includes/widget_ic.html' with tx_digest=equity_digest %}
+                        </div>
+                        <div class="column is-three-fifths">
+                            <div class="box">
+                                {% chart_container pnl_chart_id pnl_chart_endpoint %}
+                            </div>
+                        </div>
+                        <div class="column is-two-fifths">
+                            {% include 'django_ledger/includes/widget_ratios.html' with tx_digest=tx_digest %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    {# RECEIVABLES SECTION START #}
+    <section class="hero is-light is-bold is-small">
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title">{% trans 'Receivables' %}</h1>
+                <h2 class="subtitle">
+                    <span class="icon">{% icon "ic:baseline-business" 16 %}</span>
+                    {{ entity.name }}
+                </h2>
+            </div>
+        </div>
+    </section>
+    <section class="section">
+        <div class="container">
+            <div class="columns is-multiline is-centered">
+                {% if invoices %}
+                    <div class="column is-6-tablet is-4-desktop">
+                        <div class="box">
+                            {% chart_container receivables_chart_id receivables_chart_endpoint %}
+                        </div>
+                    </div>
+                {% endif %}
+                {% for invoice in invoices %}
+                    <div class="column is-6-tablet is-4-desktop">
+                        {% include 'django_ledger/includes/card_invoice.html' with invoice=invoice entity_slug=entity.slug style='dashboard' %}
+                    </div>
+                {% endfor %}
+                <div class="column is-6-tablet is-4-desktop">
+                    {% include 'django_ledger/includes/card_invoice.html' with create_invoice=True entity_slug=entity.slug %}
+                </div>
+            </div>
+        </div>
+    </section>
+    {# RECEIVABLES SECTION END #}
+    {# PAYABLES SECTION START #}
+    <section class="hero is-light is-bold is-small">
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title">{% trans 'Payables' %}</h1>
+                <h2 class="subtitle">
+                    <span class="icon">{% icon "ic:baseline-business" 16 %}</span>
+                    {{ entity.name }}
+                </h2>
+            </div>
+        </div>
+    </section>
+    <section class="section">
+        <div class="container">
+            <div class="columns is-multiline is-centered">
+                {% if bills %}
+                    <div class="column is-6-tablet is-4-desktop">
+                        <div class="box">
+                            {% chart_container payables_chart_id payables_chart_endpoint %}
+                        </div>
+                    </div>
+                {% endif %}
+                {% for bill in bills %}
+                    <div class="column is-6-tablet is-4-desktop">
+                        {% include 'django_ledger/includes/card_bill.html' with bill=bill entity_slug=entity.slug style='dashboard' %}
+                    </div>
+                {% endfor %}
+                <div class="column is-6-tablet is-4-desktop">
+                    {% include 'django_ledger/includes/card_bill.html' with create_bill=True entity_slug=entity.slug style='dashboard' %}
+                </div>
+            </div>
+        </div>
+    </section>
+    {# PAYABLES SECTION END #}
+{% endblock %}
+{% block script_bottom %}
+    {{ block.super }}
+    <script>
+        djLedger.renderPnLChart("{{ pnl_chart_id }}", "{{ view.kwargs.entity_slug }}", fromDate, toDate)
+        djLedger.renderNetReceivablesChart("{{ receivables_chart_id }}", "{{ view.kwargs.entity_slug }}", fromDate, toDate)
+        djLedger.renderNetPayablesChart("{{ payables_chart_id }}", "{{ view.kwargs.entity_slug }}", fromDate, toDate)
+    </script>
+{% endblock %}
diff --git a/tests/django_ledger/entity_delete.html b/tests/django_ledger/entity_delete.html
new file mode 100644
index 0000000..829e054
--- /dev/null
+++ b/tests/django_ledger/entity_delete.html
@@ -0,0 +1,34 @@
+{% extends 'django_ledger/layouts/content_layout_2.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <form action="{{ entity.get_delete_url }}" method="post">
+                {% csrf_token %}
+                <div class="card">
+                    <div class="card-content has-text-centered">
+                        <p class="title has-text-weight-light">
+                            Are you sure you want to delete
+                            Entity {{ entity.name }}?
+                        </p>
+                    </div>
+                    <div class="card-content has-text-centered">
+                        <p class="subtitle">
+                            All data associated with this entity will be deleted.
+                        </p>
+                    </div>
+                    <div class="card-content has-text-centered">
+                        <a href="{{ entity.get_absolute_url }}" class="button is-primary">
+                            {% trans 'Go Back' %}
+                        </a>
+                        <button type="submit" class="button is-danger">
+                            {% trans 'Delete' %}
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/entity_update.html b/tests/django_ledger/entity_update.html
new file mode 100644
index 0000000..26e5cf5
--- /dev/null
+++ b/tests/django_ledger/entity_update.html
@@ -0,0 +1,24 @@
+{% extends 'django_ledger/base.html' %}
+{% load i18n %}
+{% load static %}
+{% block content %}
+    <section class="section">
+        <div class="container">
+            <div class="columns is-centered">
+                <div class="column is-4">
+                    <form method="post" action="{{ entity.get_update_url }}">
+                        {% csrf_token %}
+                        {{ form.as_p }}
+                        <button class="button is-fullwidth is-primary is-outlined is-dark djetler_my_1" type="submit">
+                            {% trans 'Update' %}
+                        </button>
+                        <a class="button is-small is-fullwidth is-dark"
+                           href="{% url 'django_ledger:entity-dashboard' entity_slug=view.kwargs.entity_slug %}">
+                            {% trans 'Back' %}
+                        </a>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+{% endblock %}
diff --git a/tests/django_ledger/expense_create.html b/tests/django_ledger/expense_create.html
new file mode 100644
index 0000000..36dd25d
--- /dev/null
+++ b/tests/django_ledger/expense_create.html
@@ -0,0 +1,34 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-multiline is-centered">
+        <div class="column is-6">
+            <div class="card">
+                <form action="{% url 'django_ledger:expense-create' entity_slug=view.kwargs.entity_slug %}"
+                      method="post">
+                    {% csrf_token %}
+                    <div class="card-header">
+                        <h2 class="card-header-title">
+                            <span class="icon is-medium">
+                                {% icon 'ic:baseline-production-quantity-limits' 36 %}
+                            </span>
+                            {{ page_title }}
+                        </h2>
+                    </div>
+                    <div class="card-content">
+                        {{ form.as_p }}
+                        <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                            {% trans 'Create' %}
+                        </button>
+                        <a href="{% url 'django_ledger:expense-list' entity_slug=view.kwargs.entity_slug %}"
+                           class="button is-small is-dark is-fullwidth">
+                            {% trans 'Back' %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/expense_list.html b/tests/django_ledger/expense_list.html
new file mode 100644
index 0000000..b465560
--- /dev/null
+++ b/tests/django_ledger/expense_list.html
@@ -0,0 +1,27 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <h1 class="is-size-1 has-text-weight-thin">
+                            {% trans 'The Things I Pay For' %}
+                        </h1>
+                    </div>
+                    <div class="level-item">
+                        <a href="{% url 'django_ledger:expense-create' entity_slug=view.kwargs.entity_slug %}">
+                            <span class="icon is-large has-text-success">
+                                {% icon 'carbon:add-alt' 60 %}
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% expense_item_table expense_list %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/expense_update.html b/tests/django_ledger/expense_update.html
new file mode 100644
index 0000000..cfcbd76
--- /dev/null
+++ b/tests/django_ledger/expense_update.html
@@ -0,0 +1,34 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-multiline is-centered">
+        <div class="column is-6">
+            <div class="card">
+                <form action="{% url 'django_ledger:expense-update' entity_slug=view.kwargs.entity_slug item_pk=item.uuid %}"
+                      method="post">
+                    {% csrf_token %}
+                    <div class="card-header">
+                        <h2 class="card-header-title">
+                            <span class="icon is-medium">
+                                {% icon 'ic:baseline-production-quantity-limits' 36 %}
+                            </span>
+                            {{ page_title }}
+                        </h2>
+                    </div>
+                    <div class="card-content">
+                        {{ form }}
+                        <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                            {% trans 'Update' %}
+                        </button>
+                        <a href="{% url 'django_ledger:expense-list' entity_slug=view.kwargs.entity_slug %}"
+                           class="button is-small is-dark is-fullwidth">
+                            {% trans 'Back' %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/home.html b/tests/django_ledger/home.html
new file mode 100644
index 0000000..6ef2d21
--- /dev/null
+++ b/tests/django_ledger/home.html
@@ -0,0 +1,27 @@
+{% extends 'django_ledger/base.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block content %}
+    <section class="section">
+        <div class="container">
+            <div class="columns is-multiline">
+                {% for entity in entities %}
+                    <div class="column is-6-tablet">
+                        {% include 'django_ledger/includes/card_entity.html' with entity=entity %}
+                    </div>
+                {% endfor %}
+                <div class="column is-6-tablet has-text-centered">
+                    <div class="box">
+                        <a href="{% url 'django_ledger:entity-create' %}">
+                            <span class="icon is-large has-text-grey">
+                                {% icon "ic:baseline-add-circle-outline" 48 %}
+                            </span>
+                        </a>
+                        <h2 class="is-size-3">{% trans 'New Entity' %}</h2>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+{% endblock %}
diff --git a/tests/django_ledger/includes/breadcrumbs.html b/tests/django_ledger/includes/breadcrumbs.html
new file mode 100644
index 0000000..72ec318
--- /dev/null
+++ b/tests/django_ledger/includes/breadcrumbs.html
@@ -0,0 +1,8 @@
+{% load django_ledger %}
+<div class="container djetler_mt_1">
+    <div class="columns">
+        <div class="column">
+            {% nav_breadcrumbs %}
+        </div>
+    </div>
+</div>
diff --git a/tests/django_ledger/includes/card_bill.html b/tests/django_ledger/includes/card_bill.html
new file mode 100644
index 0000000..cd1b24e
--- /dev/null
+++ b/tests/django_ledger/includes/card_bill.html
@@ -0,0 +1,189 @@
+{% load django_ledger %}
+{% load i18n %}
+{% if not create_bill %}
+    {% if style == 'dashboard' %}
+        <div class="card">
+            <div class="card-content">
+                <p class="subtitle has-text-grey has-text-right">
+                    <span class="icon">{% icon "ri:bill-line" 16 %}</span>
+                    {% trans 'Bill' %}
+                </p>
+                <p class="title">
+                    {{ bill.vendor.vendor_name }}
+                </p>
+                <p class="subtitle has-text-weight-light">
+                    {{ bill.vendor.address_1 }}
+                </p>
+                {% if not bill.is_past_due %}
+                    <p class="is-size-5 has-text-info">
+                        Due in: {{ bill.due_date | timeuntil }}
+                    </p>
+                {% else %}
+                    <p class="has-text-danger has-text-weight-bold is-size-5">
+                        Past Due: {{ bill.due_date | timesince }} ago
+                    </p>
+                {% endif %}
+                {% if bill.progressible %}
+                    <p>
+                        Is Accrued:
+                        <span class="icon has-text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
+                    {% else %}
+                        <p>
+                            Is Progressible:
+                            <span class="icon is-small has-text-danger">
+                                {% icon 'maki:roadblock-11' 24 %}
+                            </span>
+                        {% endif %}
+                        <p class="is-size-5 has-text-danger">
+                            You Still Owe:
+                            {% currency_symbol %}{{ bill.get_amount_open | currency_format }}
+                        </p>
+                        <p>
+                            Amount Paid: {% currency_symbol %}{{ bill.amount_paid | currency_format }}
+                        </p>
+                        <p>
+                            Progressed: {{ bill.get_progress | percentage }}
+                        </p>
+                        <br>
+                        <progress class="progress is-medium is-success"
+                                  value="{{ bill.get_progress_percent }}"
+                                  max="100">
+                            {{ bill.get_progress | percentage }}
+                        </progress>
+                        {# MARK AS PAID MODAL #}
+                        {% mark_as_paid bill %}
+                    </div>
+                    <footer class="card-footer">
+                        <a href="{% url 'django_ledger:bill-detail' entity_slug=entity_slug bill_pk=bill.uuid %}"
+                           class="card-footer-item has-text-primary has-text-centered">
+                            {% trans 'View' %}
+                        </a>
+                        <a href="{% url 'django_ledger:bill-update' entity_slug=entity_slug bill_pk=bill.uuid %}"
+                           class="card-footer-item has-text-warning-dark has-text-centered">
+                            {% trans 'Update' %}
+                        </a>
+                        <a onclick="djLedger.toggleModal('{{ bill.get_html_id }}')"
+                           class="card-footer-item has-text-info has-text-centered">
+                            {% trans 'Mark as Paid' %}
+                        </a>
+                    </footer>
+                </div>
+            {% elif style == 'bill-detail' %}
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-header-title has-text-weight-light is-size-3">
+                            <span class="icon is-large">{% icon 'uil:bill' 36 %}</span>
+                            {% trans 'Bill Info' %}
+                        </h2>
+                    </div>
+                    <div class="card-content">
+                        {% if bill.paid %}
+                            <p class="is-size-3 has-text-dark">
+                                Is Paid
+                                <span class="icon is-large has-text-success-dark">
+                                    {% icon 'ant-design:check-circle-filled' 48 %}
+                                </span>
+                            </p>
+                            <p class="is-size-4">
+                                Amount Paid:
+                                <span class="has-text-weight-bold">
+                                    {% currency_symbol %}{{ bill.amount_paid | currency_format }}
+                                </span>
+                            </p>
+                        {% else %}
+                            {% if not bill.void %}
+                                <p class="is-size-3 has-text-dark">
+                                    Bill Amount:
+                                    <span class="has-text-weight-bold">
+                                        {% currency_symbol %}{{ bill.amount_due | currency_format }}
+                                    </span>
+                                </p>
+                                {% if not bill.is_past_due %}
+                                    <p class="is-size-4 has-text-info">
+                                        Due in: {{ bill.due_date | timeuntil }}
+                                    </p>
+                                {% else %}
+                                    <p class="is-size-4 has-text-info">
+                                        Due in: {{ bill.due_date | date }}
+                                    </p>
+                                    <p class="has-text-danger has-text-weight-bold is-size-3">
+                                        Past
+                                        Due: {{ bill.due_date | timesince }} ago
+                                    </p>
+                                {% endif %}
+                                <p class="is-size-5 has-text-danger">
+                                    You Still Owe:
+                                    {% currency_symbol %}{{ bill.get_amount_open | currency_format }}
+                                </p>
+                                {% if bill.accrue %}
+                                    <p>
+                                        Is Accrued:
+                                        <span class="icon has-text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
+                                    </p>
+                                {% else %}
+                                    <p>
+                                        Is Accrued:
+                                        <span class="icon is-small has-text-danger">
+                                            {% icon 'maki:roadblock-11' 24 %}
+                                        </span>
+                                    </p>
+                                {% endif %}
+                                <p>
+                                    Amount Paid: {% currency_symbol %}{{ bill.amount_paid | currency_format }}
+                                </p>
+                                <p>
+                                    Progressed: {{ bill.get_progress | percentage }}
+                                </p>
+                                <br>
+                                <progress class="progress is-medium is-success"
+                                          value="{{ bill.get_progress_percent }}"
+                                          max="100">
+                                    {{ bill.get_progress | percentage }}
+                                </progress>
+                                <footer class="card-footer">
+                                    <a href="{% url 'django_ledger:bill-update' entity_slug=entity_slug bill_pk=bill.uuid %}"
+                                       class="card-footer-item has-text-primary has-text-centered">
+                                        {% trans 'Update' %}
+                                    </a>
+                                    <a onclick="djLedger.toggleModal('{{ bill.get_html_id }}')"
+                                       class="card-footer-item has-text-info has-text-centered">
+                                        {% trans 'Mark as Paid' %}
+                                    </a>
+                                    <a href="{% url 'django_ledger:bill-delete' entity_slug=entity_slug bill_pk=bill.uuid %}"
+                                       class="card-footer-item has-text-danger has-text-centered">
+                                        {% trans 'Delete' %}
+                                    </a>
+                                    <a href="{% url 'django_ledger:bill-void' entity_slug=entity_slug bill_pk=bill.uuid %}"
+                                       class="card-footer-item has-text-warning has-text-centered">
+                                        {% trans 'Void' %}
+                                    </a>
+                                </footer>
+                                {# MARK AS PAID MODAL #}
+                                {% mark_as_paid bill %}
+                            {% else %}
+                                <p class="is-size-3 has-text-dark">
+                                    Bill Amount:
+                                    <span class="has-text-weight-bold">
+                                        {% currency_symbol %}{{ bill.amount_due | currency_format }}
+                                    </span>
+                                </p>
+                                <p class="is-size-3 has-text-warning-dark">
+                                    VOIDED {{ bill.void_date | date }}
+                                </p>
+                            {% endif %}
+                        {% endif %}
+                    </div>
+                </div>
+            {% endif %}
+        {% else %}
+            <div class="box has-text-centered">
+                <a href="{% url 'django_ledger:bill-create' entity_slug=entity_slug %}">
+                    <span class="icon is-large has-text-grey">
+                        {% icon "ic:baseline-add-circle-outline" 48 %}
+                    </span>
+                </a>
+                <h2 class="is-size-3 has-text-grey">
+                    {% trans 'New Bill' %}
+                </h2>
+            </div>
+        {% endif %}
diff --git a/tests/django_ledger/includes/card_customer.html b/tests/django_ledger/includes/card_customer.html
new file mode 100644
index 0000000..7c4cc69
--- /dev/null
+++ b/tests/django_ledger/includes/card_customer.html
@@ -0,0 +1,47 @@
+{% load i18n %}
+{% load django_ledger %}
+<div class="card">
+    <div class="card-header">
+        <h2 class="card-header-title has-text-weight-light is-size-3">
+            <span class="icon is-large">{% icon 'bi:person-lines-fill' 36 %}</span>
+            {% trans 'Customer Information' %}
+        </h2>
+    </div>
+    <div class="card-content">
+        <div class="content">
+            <h1 class="has-text-weight-bold">{{ customer.customer_name }}</h1>
+            <p>
+                {% if customer.address_1 %}
+                    {{ customer.address_1 }}
+                    <br>
+                {% endif %}
+                {% if customer.address_2 %}
+                    {{ customer.address_2 }}
+                    <br>
+                {% endif %}
+                {% if customer.get_cszc %}
+                    {{ customer.get_cszc }}
+                    <br>
+                {% endif %}
+                {% if customer.phone %}
+                    {{ customer.phone }}
+                    <br>
+                {% endif %}
+                {% if customer.email %}
+                    {{ customer.email }}
+                    <br>
+                {% endif %}
+                {% if customer.website %}
+                    {{ customer.website }}
+                    <br>
+                {% endif %}
+            </p>
+        </div>
+    </div>
+    <footer class="card-footer">
+        <a href="{% url 'django_ledger:customer-update' customer_pk=customer.uuid entity_slug=view.kwargs.entity_slug %}"
+           class="card-footer-item has-text-primary has-text-centered">
+            {% trans 'Edit' %}
+        </a>
+    </footer>
+</div>
diff --git a/tests/django_ledger/includes/card_entity.html b/tests/django_ledger/includes/card_entity.html
new file mode 100644
index 0000000..9be7184
--- /dev/null
+++ b/tests/django_ledger/includes/card_entity.html
@@ -0,0 +1,27 @@
+{% load django_ledger %}
+{% now "Y" as current_year %}
+<div class="card">
+    <div class="card-content">
+        <p class="title has-text-weight-light">
+            <span class="icon is-medium">{% icon "ic:baseline-business" 36 %}</span>
+            {{ entity.name }}
+        </p>
+        <p class="subtitle">
+            {{ entity.address_1 }}
+        </p>
+        <p>
+            Created: {{ entity.created | timesince }} ago
+        </p>
+    </div>
+    <footer class="card-footer">
+        <a href="{{ entity.get_dashboard_url }}" class="card-footer-item">
+            Dashboard
+        </a>
+        <a href="{{ entity.get_manage_url }}" class="card-footer-item has-text-info">
+            Manage
+        </a>
+        <a href="{{ entity.get_delete_url }}" class="card-footer-item has-text-danger">
+            Delete
+        </a>
+    </footer>
+</div>
diff --git a/tests/django_ledger/includes/card_invoice.html b/tests/django_ledger/includes/card_invoice.html
new file mode 100644
index 0000000..71aa559
--- /dev/null
+++ b/tests/django_ledger/includes/card_invoice.html
@@ -0,0 +1,169 @@
+{% load django_ledger %}
+{% load i18n %}
+{% if not create_invoice %}
+    {% if style == 'dashboard' %}
+        <div class="card">
+            <div class="card-content">
+                <p class="subtitle has-text-grey has-text-right">
+                    <span class="icon">{% icon "bi:cash-stack" 16 %}</span>
+                    {% trans 'Invoice' %}
+                </p>
+                <p class="title">
+                    {{ invoice.customer.customer_name }}
+                </p>
+                <p class="subtitle has-text-weight-light">
+                    {{ invoice.customer.address_1 }}
+                </p>
+                {% if not invoice.is_past_due %}
+                    <p class="is-size-5 has-text-info">
+                        Due in: {{ invoice.due_date | timeuntil }}
+                    </p>
+                {% else %}
+                    <p class="has-text-danger has-text-weight-bold is-size-5">
+                        Past
+                        Due: {{ invoice.due_date | timesince }} ago
+                    </p>
+                {% endif %}
+                {% if invoice.progressible %}
+                    <p>
+                        Is Progressible:
+                        <span class="icon has-text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
+                    {% else %}
+                        <p>
+                            Is Progressible:
+                            <span class="icon is-small has-text-danger">
+                                {% icon 'maki:roadblock-11' 24 %}
+                            </span>
+                        {% endif %}
+                        <p class="is-size-5 has-text-success">
+                            Owed to You: {% currency_symbol %}{{ invoice.get_amount_open | currency_format }}
+                        </p>
+                        <p>
+                            Amount Paid: {% currency_symbol %}{{ invoice.amount_paid | currency_format }}
+                        </p>
+                        <p>
+                            Progressed: {{ invoice.get_progress | percentage }}
+                        </p>
+                        <br>
+                        <progress class="progress is-medium is-success"
+                                  value="{{ invoice.get_progress_percent }}"
+                                  max="100">
+                            {{ invoice.get_progress | percentage }}
+                        </progress>
+                        {# MARK AS PAID MODAL #}
+                        {% mark_as_paid invoice %}
+                    </div>
+                    <footer class="card-footer">
+                        <a href="{% url 'django_ledger:invoice-detail' entity_slug=entity_slug invoice_pk=invoice.uuid %}"
+                           class="card-footer-item has-text-primary has-text-centered">
+                            {% trans 'View' %}
+                        </a>
+                        <a href="{% url 'django_ledger:invoice-update' entity_slug=entity_slug invoice_pk=invoice.uuid %}"
+                           class="card-footer-item has-text-warning-dark has-text-centered">
+                            {% trans 'Update' %}
+                        </a>
+                        <a onclick="djLedger.toggleModal('{{ invoice.get_html_id }}')"
+                           class="card-footer-item has-text-info has-text-centered">
+                            {% trans 'Mark as Paid' %}
+                        </a>
+                    </footer>
+                </div>
+            {% elif style == 'invoice-detail' %}
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-header-title has-text-weight-light is-size-3">
+                            <span class="icon is-large">{% icon 'uil:bill' 36 %}</span>
+                            {% trans 'Invoice Info' %}
+                        </h2>
+                    </div>
+                    <div class="card-content">
+                        {% if invoice.paid %}
+                            <p class="is-size-3 has-text-dark">
+                                Is Paid
+                                <span class="icon is-large has-text-success-dark">
+                                    {% icon 'ant-design:check-circle-filled' 48 %}
+                                </span>
+                            </p>
+                            <p class="is-size-4">
+                                Amount Paid:
+                                <span class="has-text-weight-bold">
+                                    {% currency_symbol %}{{ invoice.amount_paid | currency_format }}
+                                </span>
+                            </p>
+                        {% else %}
+                            <p class="is-size-3 has-text-dark">
+                                Invoice Amount:
+                                <span class="has-text-weight-bold">
+                                    {% currency_symbol %}{{ invoice.amount_due | currency_format }}
+                                </span>
+                            </p>
+                            {% if not invoice.is_past_due %}
+                                <p class="is-size-4 has-text-info">
+                                    Due in: {{ invoice.due_date | timeuntil }}
+                                </p>
+                            {% else %}
+                                <p class="has-text-danger has-text-weight-bold is-size-3">
+                                    Past
+                                    Due: {{ invoice.due_date | timesince }} ago
+                                </p>
+                            {% endif %}
+                            <p class="is-size-5 has-text-success">
+                                Owed to You: {% currency_symbol %}{{ invoice.get_amount_open | currency_format }}
+                            </p>
+                            {% if invoice.progressible %}
+                                <p>
+                                    Is Progressible:
+                                    <span class="icon has-text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
+                                </p>
+                            {% else %}
+                                <p>
+                                    Is Progressible:
+                                    <span class="icon is-small has-text-danger">
+                                        {% icon 'maki:roadblock-11' 24 %}
+                                    </span>
+                                </p>
+                            {% endif %}
+                            <p>
+                                Amount Paid: {% currency_symbol %}{{ invoice.amount_paid | currency_format }}
+                            </p>
+                            <p>
+                                Progressed: {{ invoice.get_progress_percent }}%
+                            </p>
+                            <br>
+                            <progress class="progress is-medium is-success"
+                                      value="{{ invoice.get_progress_percent }}"
+                                      max="100">
+                                {{ invoice.get_progress | percentage }}
+                            </progress>
+                        {% endif %}
+                        {# MARK AS PAID MODAL #}
+                        {% mark_as_paid invoice %}
+                    </div>
+                    <footer class="card-footer">
+                        <a href="{% url 'django_ledger:invoice-update' entity_slug=entity_slug invoice_pk=invoice.uuid %}"
+                           class="card-footer-item has-text-primary has-text-centered">
+                            {% trans 'Update' %}
+                        </a>
+                        <a onclick="djLedger.toggleModal('{{ invoice.get_html_id }}')"
+                           class="card-footer-item has-text-info has-text-centered">
+                            {% trans 'Mark as Paid' %}
+                        </a>
+                        <a href="{% url 'django_ledger:invoice-delete' entity_slug=entity_slug invoice_pk=invoice.uuid %}"
+                           class="card-footer-item has-text-danger has-text-centered">
+                            {% trans 'Delete' %}
+                        </a>
+                    </footer>
+                </div>
+            {% endif %}
+        {% else %}
+            <div class="box has-text-centered">
+                <a href="{% url 'django_ledger:invoice-create' entity_slug=entity_slug %}">
+                    <span class="icon is-large has-text-grey">
+                        {% icon "ic:baseline-add-circle-outline" 48 %}
+                    </span>
+                </a>
+                <h2 class="is-size-3 has-text-grey">
+                    {% trans 'New Invoice' %}
+                </h2>
+            </div>
+        {% endif %}
diff --git a/tests/django_ledger/includes/card_markdown.html b/tests/django_ledger/includes/card_markdown.html
new file mode 100644
index 0000000..8095004
--- /dev/null
+++ b/tests/django_ledger/includes/card_markdown.html
@@ -0,0 +1,30 @@
+{% load trans from i18n %}
+{% load django_ledger %}
+{% if style == 'card_1' %}
+    <div class="card">
+        <div class="card-header">
+            <div class="card-header-title">
+                <h1 class="is-size-3 has-text-weight-light">
+                    {% if title %}
+                        {{ title }}
+                    {% else %}
+                        {% trans 'Notes' %}
+                    {% endif %}
+                </h1>
+            </div>
+        </div>
+        <div class="card-content">
+            <div class="content">
+                {% if notes_html %}
+                    {% autoescape off %}
+                    {{ notes_html | safe }}
+                {% endautoescape %}
+            {% else %}
+                <p>
+                    {% trans 'No available notes to display...' %}
+                </p>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endif %}
diff --git a/tests/django_ledger/includes/card_po.html b/tests/django_ledger/includes/card_po.html
new file mode 100644
index 0000000..cb4f0d5
--- /dev/null
+++ b/tests/django_ledger/includes/card_po.html
@@ -0,0 +1,69 @@
+{% load i18n %}
+{% load django_ledger %}
+{% if not create_po %}
+    {% if style == 'po-detail' %}
+        <div class="card">
+            <div class="card-header">
+                <h2 class="card-header-title has-text-weight-light is-size-3">
+                    <span class="icon is-large">{% icon 'uil:bill' 36 %}</span>
+                    {% trans 'Purchase Order Info' %}
+                </h2>
+            </div>
+            <div class="card-content">
+                <h2 class="is-size-3">{{ po_model.po_number }}</h2>
+                <h3 class="is-size-4 has-text-weight-light">
+                    Status:
+                    <span class="{% if po_model.po_status == 'draft' %}has-text-danger{% elif po_model.po_status == 'approved' %}has-text-success{% endif %}">
+                    {{ po_model.get_po_status_display }}
+                </span>
+            </h3>
+            <h3 class="is-size-4 has-text-weight-light">
+                Inventory Purchase:
+                {% if po_model.for_inventory %}
+                    <span class="icon has-text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
+                {% else %}
+                    <span class="icon is-small has-text-danger">
+                        {% icon 'maki:roadblock-11' 24 %}
+                    </span>
+                {% endif %}
+            </h3>
+            <h3 class="is-size-4 has-text-weight-light">
+                Fulfilled:
+                {% if po_model.fulfilled %}
+                    <span class="icon has-text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
+                    {{ po_model.fulfillment_date | date }}
+                {% else %}
+                    <span class="icon is-small has-text-danger">
+                        {% icon 'maki:roadblock-11' 24 %}
+                    </span>
+                {% endif %}
+            </h3>
+        </div>
+        <footer class="card-footer">
+            <a href="{% url 'django_ledger:po-update' entity_slug=entity_slug po_pk=po_model.uuid %}"
+               class="card-footer-item has-text-primary has-text-centered">
+                {% trans 'Update' %}
+            </a>
+            <a onclick="djLedger.toggleModal('{{ po_model.get_html_id }}')"
+               class="card-footer-item has-text-info has-text-centered">
+                {% trans 'Mark as Fulfilled' %}
+            </a>
+            <a href="{% url 'django_ledger:po-delete' entity_slug=entity_slug po_pk=po_model.uuid %}"
+               class="card-footer-item has-text-danger has-text-centered">
+                {% trans 'Delete' %}
+            </a>
+        </footer>
+    </div>
+{% endif %}
+{% else %}
+<div class="box has-text-centered">
+    <a href="{% url 'django_ledger:po-create' entity_slug=entity_slug %}">
+        <span class="icon is-large has-text-grey">
+            {% icon "ic:baseline-add-circle-outline" 48 %}
+        </span>
+    </a>
+    <h2 class="is-size-3 has-text-grey">
+        {% trans 'New PO' %}
+    </h2>
+</div>
+{% endif %}
diff --git a/tests/django_ledger/includes/card_vendor.html b/tests/django_ledger/includes/card_vendor.html
new file mode 100644
index 0000000..db5e206
--- /dev/null
+++ b/tests/django_ledger/includes/card_vendor.html
@@ -0,0 +1,47 @@
+{% load i18n %}
+{% load django_ledger %}
+<div class="card">
+    <div class="card-header">
+        <h2 class="card-header-title has-text-weight-light is-size-3">
+            <span class="icon is-large">{% icon 'bi:person-lines-fill' 36 %}</span>
+            {% trans 'Vendor Info' %}
+        </h2>
+    </div>
+    <div class="card-content">
+        <div class="content">
+            <h1 class="has-text-weight-bold">{{ vendor.vendor_name }}</h1>
+            <p>
+                {% if vendor.address_1 %}
+                    {{ vendor.address_1 }}
+                    <br>
+                {% endif %}
+                {% if vendor.address_2 %}
+                    {{ vendor.address_2 }}
+                    <br>
+                {% endif %}
+                {% if vendor.get_cszc %}
+                    {{ vendor.get_cszc }}
+                    <br>
+                {% endif %}
+                {% if vendor.phone %}
+                    {{ vendor.phone }}
+                    <br>
+                {% endif %}
+                {% if vendor.email %}
+                    {{ vendor.email }}
+                    <br>
+                {% endif %}
+                {% if vendor.website %}
+                    {{ vendor.website }}
+                    <br>
+                {% endif %}
+            </p>
+        </div>
+    </div>
+    <footer class="card-footer">
+        <a href="{% url 'django_ledger:vendor-update' vendor_pk=vendor.uuid entity_slug=view.kwargs.entity_slug %}"
+           class="card-footer-item has-text-primary has-text-centered">
+            {% trans 'Edit' %}
+        </a>
+    </footer>
+</div>
diff --git a/tests/django_ledger/includes/footer.html b/tests/django_ledger/includes/footer.html
new file mode 100644
index 0000000..a526f4f
--- /dev/null
+++ b/tests/django_ledger/includes/footer.html
@@ -0,0 +1,20 @@
+<footer class="footer">
+    <div class="content has-text-centered">
+        <p>
+            <strong>Django Ledger</strong>
+            by
+            <a href="https://miguelsanda.com" target="_blank">
+                Miguel Sanda
+            </a>
+            and
+            <a href="https://arrobalytics.com" target="_blank">
+                Arrobalytics
+            </a>
+            . The source code is licensed
+            <a href="https://opensource.org/licenses/GPL-3.0" target="_blank">
+                GPL 3.0
+            </a>
+        </p>
+        {% if user.is_superuser %}<a href="/admin">Admin</a>{% endif %}
+    </div>
+</footer>
diff --git a/tests/django_ledger/includes/messages.html b/tests/django_ledger/includes/messages.html
new file mode 100644
index 0000000..2c3fa2a
--- /dev/null
+++ b/tests/django_ledger/includes/messages.html
@@ -0,0 +1,11 @@
+{% if messages %}
+    {# Messages Container #}
+    <div class="container">
+        {% for msg in messages %}
+            <div class="notification {{ msg.tags }} mt-3 mb-2">
+                <button class="delete"></button>
+                {{ msg | safe }}
+            </div>
+        {% endfor %}
+    </div>
+{% endif %}
diff --git a/tests/django_ledger/includes/nav.html b/tests/django_ledger/includes/nav.html
new file mode 100644
index 0000000..77269b6
--- /dev/null
+++ b/tests/django_ledger/includes/nav.html
@@ -0,0 +1,39 @@
+{% load static %}
+{% load django_ledger %}
+{% load cache %}
+{% load i18n %}
+{% now "Y" as current_year %}
+<nav class="navbar is-light" role="navigation" aria-label="main navigation">
+    <div class="container">
+        <div class="navbar-brand">
+            <a class="navbar-item" href="{% url 'django_ledger:home' %}">
+                <img src="{% static 'django_ledger/logo/django-ledger-logo_1.png' %}" height="28">
+                </a>
+                <a role="button"
+                   class="navbar-burger burger"
+                   aria-label="menu"
+                   aria-expanded="false"
+                   data-target="djl-navbar-menu">
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                </a>
+            </div>
+            <div id="djl-navbar-menu" class="navbar-menu">
+                {% navigation_menu 'mobile' %}
+                <div class="navbar-end">
+                    <div class="navbar-item">
+                        <a href="{% url 'django_ledger:logout' %}" class="button is-small is-danger is-outlined">
+                            {% trans 'Logout' %}
+                        </a>
+                    </div>
+                    <div class="navbar-item">
+                        {% feedback_button %}
+                    </div>
+                    <div class="navbar-item">
+                        v{% current_version %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
diff --git a/tests/django_ledger/includes/page_header.html b/tests/django_ledger/includes/page_header.html
new file mode 100644
index 0000000..abf81a8
--- /dev/null
+++ b/tests/django_ledger/includes/page_header.html
@@ -0,0 +1,54 @@
+{% load static %}
+{% load i18n %}
+{% load django_ledger %}
+{% if not header_style %}
+    <section class="hero is-primary is-bold is-small">
+        <div class="hero-body">
+            <div class="container">
+                <div class="columns is-mobile">
+                    {% if header_subtitle_icon %}
+                        <div class="column is-3 has-text-centered is-hidden-tablet">
+                            {% icon header_subtitle_icon 36 %}
+                        </div>
+                        <div class="column is-3 has-text-centered is-hidden-mobile is-hidden-desktop">
+                            {% icon header_subtitle_icon 48 %}
+                        </div>
+                        <div class="column is-3 has-text-centered is-hidden-mobile is-hidden-tablet-only">
+                            {% icon header_subtitle_icon 60 %}
+                        </div>
+                    {% endif %}
+                    <div class="column is-9">
+                        <h1 class="title has-text-weight-light">
+                            {{ header_title }}
+                        </h1>
+                        {% if header_subtitle %}<h2 class="subtitle">{{ header_subtitle }}</h2>{% endif %}
+                    </div>
+                </div>
+            </div>
+        </section>
+    {% else %}
+        <section class="hero is-light is-bold is-hidden-mobile is-hidden-tablet">
+            <div class="hero-body">
+                <div class="container">
+                    <div class="columns is-centered">
+                        <div class="column is-4">
+                            <figure class="image">
+                                <a target="_blank" href="https://arrobalytics.com">
+                                    <img src="{% static 'django_ledger/logo/django-ledger-logo.png' %}" alt="" />
+                                </a>
+                            </figure>
+                        </div>
+                    </div>
+                    {% if header_title %}
+                        <div class="columns is-centered">
+                            <div class="column is-12 has-text-centered">
+                                <h1 class="title is-size-1 has-text-weight-light">
+                                    {{ header_title }}
+                                </h1>
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </section>
+    {% endif %}
diff --git a/tests/django_ledger/includes/widget_bs.html b/tests/django_ledger/includes/widget_bs.html
new file mode 100644
index 0000000..ea64d64
--- /dev/null
+++ b/tests/django_ledger/includes/widget_bs.html
@@ -0,0 +1,28 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="box content djetler-box-green">
+    <h2 class="has-text-centered has-text-weight-light">
+        {% trans 'Assets' %}
+    </h2>
+    <h1 class="has-text-centered">
+        {% currency_symbol %}{{ tx_digest.group_balance.GROUP_ASSETS | currency_format }}
+    </h1>
+    <h2 class="has-text-centered has-text-weight-light">
+        {% trans 'Liabilities' %}
+    </h2>
+    <h1 class="has-text-centered">
+        {% currency_symbol %}{{ tx_digest.group_balance.GROUP_LIABILITIES | currency_format }}
+    </h1>
+    <h2 class="has-text-centered has-text-weight-light">
+        {% trans 'Equity' %}
+    </h2>
+    <h1 class="has-text-centered">
+        {% currency_symbol %}{{ tx_digest.group_balance.GROUP_EQUITY | currency_format }}
+    </h1>
+    <h4 class="has-text-centered has-text-weight-light">
+        {% trans 'Cash' %}
+    </h4>
+    <h3 class="has-text-centered">
+        {% currency_symbol %}{{ tx_digest.role_balance.ASSET_CA_CASH | currency_format }}
+    </h3>
+</div>
diff --git a/tests/django_ledger/includes/widget_ic.html b/tests/django_ledger/includes/widget_ic.html
new file mode 100644
index 0000000..aa03c25
--- /dev/null
+++ b/tests/django_ledger/includes/widget_ic.html
@@ -0,0 +1,34 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="box content djetler-box-yellow">
+    <h2 class="has-text-centered has-text-weight-light">
+        {% trans 'Revenue' %}
+    </h2>
+    <h1 class="has-text-centered">
+        {% currency_symbol %}{{ tx_digest.group_balance.GROUP_INCOME | currency_format }}
+    </h1>
+    <h2 class="has-text-centered has-text-weight-light">
+        {% trans 'Expenses' %}
+    </h2>
+    <h1 class="has-text-centered">
+        {% currency_symbol %}{{ tx_digest.group_balance.GROUP_EXPENSES | reverse_sing | currency_format }}
+    </h1>
+    <h2 class="has-text-centered has-text-weight-light">
+        {% trans 'Earnings (Loss)' %}
+    </h2>
+    <h1 class="has-text-centered">
+        {% currency_symbol %}{{ tx_digest.group_balance.GROUP_EARNINGS | currency_format }}
+    </h1>
+    <h4 class="has-text-centered has-text-weight-light">
+        {% trans 'Accounting Period' %}
+    </h4>
+    {% if not has_date %}
+        <h3 class="has-text-centered">
+            {{ from_date | date }}
+            <span class="is-italic">{% trans 'thru' %}</span>
+            {{ to_date | date }}
+        </h3>
+    {% else %}
+        <h3 class="has-text-centered">{{ from_date | date }}</h3>
+    {% endif %}
+</div>
diff --git a/tests/django_ledger/includes/widget_ratios.html b/tests/django_ledger/includes/widget_ratios.html
new file mode 100644
index 0000000..8159e55
--- /dev/null
+++ b/tests/django_ledger/includes/widget_ratios.html
@@ -0,0 +1,72 @@
+{% load django_ledger %}
+<div class="box content">
+    <h2 class="has-text-weight-light has-text-centered">
+        Financial Analysis
+    </h2>
+    <h4>Solvency:</h4>
+    <h5 class="has-text-weight-light">
+        Current
+        Ratio: {{ tx_digest.ratios.current_ratio | currency_format }}
+    </h5>
+    <progress class="progress {{ tx_digest.ratios.current_ratio | fin_ratio_threshold_class:'current_ratio' }}"
+              value="{{ tx_digest.ratios.current_ratio }}"
+              max="{% fin_ratio_max_value ratio='current_ratio' %}">
+        {{ tx_digest.ratios.current_ratio }}
+    </progress>
+    <h5 class="has-text-weight-light">
+        Quick
+        Ratio: {{ tx_digest.ratios.quick_ratio | currency_format }}
+    </h5>
+    <progress class="progress {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
+              value="{{ tx_digest.ratios.quick_ratio }}"
+              max="{% fin_ratio_max_value ratio='quick_ratio' %}">
+        {{ tx_digest.ratios.current_ratio }}
+    </progress>
+    <h4>Leverage:</h4>
+    <h5 class="has-text-weight-light">
+        Debt to
+        Equity: {{ tx_digest.ratios.debt_to_equity | currency_format }}
+    </h5>
+    <progress class="progress {{ tx_digest.ratios.debt_to_equity | fin_ratio_threshold_class:'debt_to_equity' }}"
+              value="{{ tx_digest.ratios.debt_to_equity }}"
+              max="{% fin_ratio_max_value ratio='debt_to_equity' %}">
+        {{ tx_digest.ratios.debt_to_equity }}
+    </progress>
+    <h4>Profitability:</h4>
+    <h5 class="has-text-weight-light">
+        Return on
+        Equity: {{ tx_digest.ratios.return_on_equity | percentage }}
+    </h5>
+    <progress class="progress {{ tx_digest.ratios.quick_ratio | fin_ratio_threshold_class:'quick_ratio' }}"
+              value="{{ tx_digest.ratios.return_on_equity }}"
+              max="{% fin_ratio_max_value ratio='return_on_equity' %}">
+        {{ tx_digest.ratios.return_on_equity }}
+    </progress>
+    <h5 class="has-text-weight-light">
+        Return on
+        Assets: {{ tx_digest.ratios.return_on_assets | percentage }}
+    </h5>
+    <progress class="progress {{ tx_digest.ratios.return_on_assets | fin_ratio_threshold_class:'return_on_assets' }}"
+              value="{{ tx_digest.ratios.return_on_assets }}"
+              max="{% fin_ratio_max_value ratio='return_on_assets' %}">
+        {{ tx_digest.ratios.return_on_assets }}
+    </progress>
+    <h5 class="has-text-weight-light">
+        Net Profit
+        Margin: {{ tx_digest.ratios.net_profit_margin | percentage }}
+    </h5>
+    <progress class="progress {{ tx_digest.ratios.net_profit_margin | fin_ratio_threshold_class:'net_profit_margin' }}"
+              value="{{ tx_digest.ratios.net_profit_margin }}"
+              max="{% fin_ratio_max_value ratio='net_profit_margin' %}">
+        {{ tx_digest.ratios.net_profit_margin }}
+    </progress>
+    <h5 class="has-text-weight-light">
+        Gross Profit
+        Margin: {{ tx_digest.ratios.gross_profit_margin | percentage }}
+    </h5>
+    <progress class="progress {{ tx_digest.ratios.gross_profit_margin | fin_ratio_threshold_class:'gross_profit_margin' }}"
+              value="{{ tx_digest.ratios.gross_profit_margin }}"
+              max="{% fin_ratio_max_value ratio='gross_profit_margin' %}">
+        {{ tx_digest.ratios.gross_profit_margin }}
+    </progress>
+</div>
diff --git a/tests/django_ledger/income_statement.html b/tests/django_ledger/income_statement.html
new file mode 100644
index 0000000..93db5f3
--- /dev/null
+++ b/tests/django_ledger/income_statement.html
@@ -0,0 +1,76 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block aux_menu %}
+    {% if unit_model %}
+        <div class="column is-12">
+            {% period_navigation 'unit-ic' %}
+        </div>
+    {% elif entity %}
+        <div class="column is-12">
+            {% period_navigation 'entity-ic' %}
+        </div>
+    {% elif ledger %}
+        <div class="column is-12">
+            {% period_navigation 'ledger-ic' %}
+        </div>
+    {% endif %}
+{% endblock %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content has-text-centered">
+            <div class="container mb-4">
+                <div class="columns">
+                    <div class="column">
+                        {% if entity %}
+                            <h1 class="is-size-2 has-text-weight-light">
+                                {% session_entity_name %}
+                            </h1>
+                        {% elif ledger %}
+                            <h1 class="is-size-2 has-text-weight-light">
+                                {{ ledger.name }}
+                            </h1>
+                        {% endif %}
+                        {% if unit_model %}
+                            <h3 class="is-size-4 has-text-weight-medium is-italic">
+                                {{ unit_model.name }} {% trans 'Unit' %}
+                            </h3>
+                        {% endif %}
+                        <h1 class="is-size-2 has-text-weight-bold">
+                            {% trans 'Income Statement' %}
+                        </h1>
+                        <h2 class="is-size-2 has-text-weight-light">
+                            {% if quarter %}
+                                {{ year }} | Q{{ quarter }}
+                            {% elif month %}{{ start_date | date:'F, Y' }}
+                            {% else %}
+                                Fiscal Year {{ year }}
+                            {% endif %}
+                        </h2>
+                        <h3 class="is-size-4 is-italic has-font-weight-light">
+                            {{ from_date | date:'m/d/Y' }} - {{ to_date | date:'m/d/Y' }}
+                        </h3>
+                    </div>
+                </div>
+            </div>
+            {% income_statement_table io_model=object from_date=from_date to_date=to_date %}
+            {% if ledger %}
+                <a class="button is-fullwidth is-dark is-small my-2"
+                   href="{% url 'django_ledger:ledger-list' entity_slug=view.kwargs.entity_slug %}">
+                    Go
+                    Back
+                </a>
+            {% elif entity %}
+                <a class="button is-fullwidth is-dark is-small my-2"
+                   href="{% url 'django_ledger:entity-dashboard' entity_slug=view.kwargs.entity_slug %}">
+                    Go
+                    Back
+                </a>
+            {% endif %}
+            <a class="button is-fullwidth is-light is-small my-2" href="?by_unit=1">
+                {% trans 'By Unit' %}
+            </a>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/inventory_item_create.html b/tests/django_ledger/inventory_item_create.html
new file mode 100644
index 0000000..8911619
--- /dev/null
+++ b/tests/django_ledger/inventory_item_create.html
@@ -0,0 +1,34 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-multiline is-centered">
+        <div class="column is-6">
+            <div class="card">
+                <form action="{% url 'django_ledger:inventory-item-create' entity_slug=view.kwargs.entity_slug %}"
+                      method="post">
+                    {% csrf_token %}
+                    <div class="card-header">
+                        <h2 class="card-header-title">
+                            <span class="icon is-medium">
+                                {% icon 'ic:baseline-production-quantity-limits' 36 %}
+                            </span>
+                            {{ page_title }}
+                        </h2>
+                    </div>
+                    <div class="card-content">
+                        {{ form.as_p }}
+                        <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                            {% trans 'Create' %}
+                        </button>
+                        <a href="{% url 'django_ledger:inventory-item-list' entity_slug=view.kwargs.entity_slug %}"
+                           class="button is-small is-dark is-fullwidth">
+                            {% trans 'Back' %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/inventory_item_list.html b/tests/django_ledger/inventory_item_list.html
new file mode 100644
index 0000000..500e2b9
--- /dev/null
+++ b/tests/django_ledger/inventory_item_list.html
@@ -0,0 +1,27 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <h1 class="is-size-1 has-text-weight-thin">
+                            {% trans 'My Inventory Items' %}
+                        </h1>
+                    </div>
+                    <div class="level-item">
+                        <a href="{% url 'django_ledger:inventory-item-create' entity_slug=view.kwargs.entity_slug %}">
+                            <span class="icon is-large has-text-success">
+                                {% icon 'carbon:add-alt' 60 %}
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% inventory_item_table inventory_item_list %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/inventory_item_update.html b/tests/django_ledger/inventory_item_update.html
new file mode 100644
index 0000000..add90ae
--- /dev/null
+++ b/tests/django_ledger/inventory_item_update.html
@@ -0,0 +1,34 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-multiline is-centered">
+        <div class="column is-6">
+            <div class="card">
+                <form action="{% url 'django_ledger:inventory-item-update' entity_slug=view.kwargs.entity_slug item_pk=item.uuid %}"
+                      method="post">
+                    {% csrf_token %}
+                    <div class="card-header">
+                        <h2 class="card-header-title">
+                            <span class="icon is-medium">
+                                {% icon 'ic:baseline-production-quantity-limits' 36 %}
+                            </span>
+                            {{ page_title }}
+                        </h2>
+                    </div>
+                    <div class="card-content">
+                        {{ form.as_p }}
+                        <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                            {% trans 'Update' %}
+                        </button>
+                        <a href="{% url 'django_ledger:inventory-item-list' entity_slug=view.kwargs.entity_slug %}"
+                           class="button is-small is-dark is-fullwidth">
+                            {% trans 'Back' %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/invoice_create.html b/tests/django_ledger/invoice_create.html
new file mode 100644
index 0000000..4341f2c
--- /dev/null
+++ b/tests/django_ledger/invoice_create.html
@@ -0,0 +1,104 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <form action="{% url 'django_ledger:invoice-create' entity_slug=view.kwargs.entity_slug %}" method="post">
+        <div class="columns is-multiline is-centered">
+            {% csrf_token %}
+            <div class="column is-6">
+                <div class="columns is-multiline">
+                    <div class="column is-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <p class="card-header-title">
+                                    {% trans 'Customer Information' %}
+                                </p>
+                            </div>
+                            <div class="card-content">
+                                <div class="field">
+                                    <div class="control">
+                                        {{ form.customer }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column is-6">
+                <div class="card">
+                    <div class="card-header">
+                        <p class="card-header-title">
+                            {% trans 'Invoice Amount & Terms' %}
+                        </p>
+                    </div>
+                    <div class="card-content">
+                        <div class="field">
+                            <div class="control">
+                                {{ form.date }}
+                            </div>
+                        </div>
+                        <div class="field">
+                            <div class="control">
+                                {{ form.amount_due }}
+                            </div>
+                        </div>
+                        <div class="field">
+                            <label for="{{ form.terms.id_for_label }}" class="label is-small">
+                                {{ form.terms.label }}
+                            </label>
+                            <div class="control">
+                                {{ form.terms }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column is-12">
+                <div class="card">
+                    <div class="card-header">
+                        <p class="card-header-title">
+                            {% trans 'Connected Accounts' %}
+                        </p>
+                    </div>
+                    <div class="card-content">
+                        <div class="field">
+                            <label for="{{ form.terms.cash_account }}" class="label is-small">
+                                {{ form.cash_account.label }}
+                            </label>
+                            <div class="control">
+                                {{ form.cash_account }}
+                            </div>
+                        </div>
+                        <div class="field">
+                            <label for="{{ form.terms.prepaid_account }}" class="label is-small">
+                                {{ form.prepaid_account.label }}
+                            </label>
+                            <div class="control">
+                                {{ form.prepaid_account }}
+                            </div>
+                        </div>
+                        <div class="field">
+                            <label for="{{ form.terms.unearned_account }}" class="label is-small">
+                                {{ form.unearned_account.label }}
+                            </label>
+                            <div class="control">
+                                {{ form.unearned_account }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column is-4">
+                <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                    Create
+                </button>
+                <a href="{% url 'django_ledger:invoice-list' entity_slug=view.kwargs.entity_slug %}"
+                   class="button is-small is-dark is-fullwidth">
+                    Back
+                </a>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/tests/django_ledger/invoice_delete.html b/tests/django_ledger/invoice_delete.html
new file mode 100644
index 0000000..c2c7dee
--- /dev/null
+++ b/tests/django_ledger/invoice_delete.html
@@ -0,0 +1,37 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <form action="{% url 'django_ledger:invoice-delete' entity_slug=view.kwargs.entity_slug invoice_pk=invoice.uuid %}"
+                  method="post">
+                {% csrf_token %}
+                <div class="card">
+                    <div class="card-content has-text-centered">
+                        <p class="title has-text-weight-light">
+                            Are you sure you want to delete
+                            Invoice {{ invoice.invoice_number }}
+                        </p>
+                    </div>
+                    <div class="card-content has-text-centered">
+                        <p class="subtitle">
+                            All transactions associated with this invoice will be deleted.
+                            If you want to void the invoice instead, click here
+                        </p>
+                    </div>
+                    <div class="card-content has-text-centered">
+                        <a href="{% url 'django_ledger:invoice-detail' entity_slug=view.kwargs.entity_slug invoice_pk=invoice.uuid %}"
+                           class="button is-primary">
+                            {% trans 'Go Back' %}
+                        </a>
+                        <button type="submit" class="button is-danger">
+                            {% trans 'Delete' %}
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/invoice_detail.html b/tests/django_ledger/invoice_detail.html
new file mode 100644
index 0000000..2b5d02d
--- /dev/null
+++ b/tests/django_ledger/invoice_detail.html
@@ -0,0 +1,156 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns">
+        <div class="column is-4">
+            <div class="columns is-multiline">
+                <div class="column is-12">
+                    {% include 'django_ledger/includes/card_invoice.html' with invoice=invoice entity_slug=view.kwargs.entity_slug style='invoice-detail' %}
+                </div>
+                <div class="column is-12">
+                    {% include 'django_ledger/includes/card_customer.html' with customer=invoice.customer %}
+                </div>
+                <div class="column is-12">
+                    <a class="button is-info is-fullwidth is-outlined"
+                       href="{% url 'django_ledger:invoice-list' entity_slug=view.kwargs.entity_slug %}">
+                        {% trans 'Invoice List' %}
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="column is-8">
+            <div class="columns is-multiline">
+                <div class="column is-12">
+                    <nav class="level">
+                        <div class="level-item has-text-centered">
+                            <div>
+                                <p class="heading">
+                                    Cash Account:
+                                    <a href="{% url 'django_ledger:account-detail' account_pk=invoice.cash_account.uuid entity_slug=view.kwargs.entity_slug %}"
+                                       class="has-text-danger">
+                                        {{ invoice.cash_account.code }}
+                                    </a>
+                                    <p class="title">
+                                        {% currency_symbol %}{{ invoice.get_amount_cash | absolute | currency_format }}
+                                    </p>
+                                </div>
+                            </div>
+                            {% if invoice.accrue %}
+                                <div class="level-item has-text-centered">
+                                    <div>
+                                        <p class="heading">
+                                            Prepaid Account:
+                                            <a href="{% url 'django_ledger:account-detail' account_pk=invoice.prepaid_account.uuid entity_slug=view.kwargs.entity_slug %}"
+                                               class="has-text-danger">
+                                                {{ invoice.prepaid_account.code }}
+                                            </a>
+                                        </p>
+                                        <p class="title has-text-success">
+                                            {% currency_symbol %}{{ invoice.get_amount_prepaid | currency_format }}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="level-item has-text-centered">
+                                    <div>
+                                        <p class="heading">
+                                            Unearned Account:
+                                            <a href="{% url 'django_ledger:account-detail' account_pk=invoice.unearned_account.uuid entity_slug=view.kwargs.entity_slug %}"
+                                               class="has-text-danger">
+                                                {{ invoice.unearned_account.code }}
+                                            </a>
+                                        </p>
+                                        <p class="title has-text-danger">
+                                            {% currency_symbol %}{{ invoice.get_amount_unearned | currency_format }}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="level-item has-text-centered">
+                                    <div>
+                                        <p class="heading">
+                                            Accrued {{ invoice.get_progress_percent }}%
+                                        </p>
+                                        <p class="title">
+                                            {% currency_symbol %}{{ invoice.get_amount_earned | currency_format }}
+                                        </p>
+                                    </div>
+                                </div>
+                            {% else %}
+                                <div class="level-item has-text-centered">
+                                    <div>
+                                        <p class="heading">
+                                            You Still Owe
+                                        </p>
+                                        <p class="title has-text-danger">
+                                            {% currency_symbol %}{{ invoice.get_amount_open | currency_format }}
+                                        </p>
+                                    </div>
+                                </div>
+                            {% endif %}
+                        </nav>
+                    </div>
+                    <div class="column is-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h2 class="card-header-title has-text-weight-light is-size-3">
+                                    <span class="icon is-large">{% icon 'grommet-icons:transaction' 36 %}</span>
+                                    {% trans 'Invoice Items' %}
+                                </h2>
+                            </div>
+                            {# todo: make this table a template... #}
+                            <div class="card-content">
+                                <div class="table-container">
+                                    <table class="table is-fullwidth is-narrow is-stripped is-bordered">
+                                        <thead>
+                                            <tr>
+                                                <th>{% trans 'Item' %}</th>
+                                                <th>{% trans 'Unit Cost' %}</th>
+                                                <th>{% trans 'Quantity' %}</th>
+                                                <th>{% trans 'Total' %}</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {% for invoice_item in invoice_items %}
+                                                <tr>
+                                                    <td>{{ invoice_item.item_model }}</td>
+                                                    <td>{% currency_symbol %}{{ invoice_item.unit_cost | currency_format }}</td>
+                                                    <td>{{ invoice_item.quantity }}</td>
+                                                    <td>{% currency_symbol %}{{ invoice_item.total_amount | currency_format }}</td>
+                                                </tr>
+                                            {% endfor %}
+                                        </tbody>
+                                        <tfoot>
+                                        <tr>
+                                            <th></th>
+                                            <th></th>
+                                            <th>
+                                                {% trans 'Total' %}
+                                            </th>
+                                            <th>
+                                                {% currency_symbol %}{{ total_amount_due | currency_format }}
+                                            </th>
+                                        </tr>
+                                        </tfoot>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column is-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h2 class="card-header-title has-text-weight-light is-size-3">
+                                    <span class="icon is-large">{% icon 'grommet-icons:transaction' 36 %}</span>
+                                    {% trans 'Invoice Transactions' %}
+                                </h2>
+                            </div>
+                            <div class="card-content">
+                                {% invoice_txs_table invoice %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endblock %}
diff --git a/tests/django_ledger/invoice_list.html b/tests/django_ledger/invoice_list.html
new file mode 100644
index 0000000..8027bd2
--- /dev/null
+++ b/tests/django_ledger/invoice_list.html
@@ -0,0 +1,127 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        {% if month %}
+                            <h1 class="is-size-1 has-text-weight-thin">
+                                {{ month | date:'F Y' }}
+                            </h1>
+                        {% elif year %}
+                            <h1 class="is-size-1 has-text-weight-thin">
+                                Year {{ year | date:'Y' }}
+                                {% trans 'Invoices' %}
+                            </h1>
+                        {% else %}
+                            <h1 class="is-size-1 has-text-weight-thin">
+                                {% trans 'Latest Invoices' %}
+                            </h1>
+                        {% endif %}
+                    </div>
+                    <div class="level-item">
+                        <a href="{% url 'django_ledger:invoice-create' entity_slug=view.kwargs.entity_slug %}">
+                            <span class="icon is-large has-text-success">
+                                {% icon 'carbon:add-alt' 60 %}
+                            </span>
+                        </a>
+                    </div>
+                </div>
+                <div class="level-right">
+                    {% if previous_month %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:bill-list-month' year=previous_month.year month=previous_month.month entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:left-circle-outlined' 16 %}</span>
+                                <span>{{ previous_month | date:'F Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if next_month %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:bill-list-month' year=next_month.year month=next_month.month entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:right-circle-outlined' 16 %}</span>
+                                <span>{{ next_month | date:'F Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if previous_year %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:invoice-list-year' year=previous_year.year entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:left-circle-outlined' 16 %}</span>
+                                <span>{{ previous_year | date:'Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if next_year %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:invoice-list-year' year=next_year.year entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:right-circle-outlined' 16 %}</span>
+                                <span>{{ next_year | date:'Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if page_obj %}
+                        {% if page_obj.has_previous %}
+                            <div class="level-item">
+                                <a href="?page={{ page_obj.previous_page_number }}"
+                                   class="button is-small is-dark is-outlined">
+                                    <span class="icon is-small">{% icon 'ant-design:left-circle-outlined' 24 %}</span>
+                                </a>
+                            </div>
+                        {% endif %}
+                        <div class="level-item">
+                            <p class="is-italic">
+                                page {{ page_obj.number }}
+                                of {{ page_obj.paginator.num_pages }}
+                            </p>
+                        </div>
+                        {% if page_obj.has_next %}
+                            <div class="level-item">
+                                <a href="?page={{ page_obj.next_page_number }}"
+                                   class="button is-small is-dark is-outlined">
+                                    <span class="icon is-small">{% icon 'ant-design:right-circle-outlined' 24 %}</span>
+                                </a>
+                            </div>
+                        {% endif %}
+                    {% endif %}
+                </div>
+            </div>
+            {% invoice_table %}
+            {% if year %}
+                <h5 class="is-size-5">Go to month:</h5>
+                <p>
+                    <a href="{% url 'django_ledger:invoice-list' entity_slug=view.kwargs.entity_slug %}">
+                        {% trans 'All' %} |
+                    </a>
+                    {% for date in date_list %}
+                        <a href="{% url 'django_ledger:invoice-list-month' entity_slug=view.kwargs.entity_slug year=date.year month=date.month %}">
+                            {{ date | date:'F' }}
+                            {% if not forloop.last %}>{% endif %}
+                        </a>
+                    {% endfor %}
+                </p>
+            {% else %}
+                <h5 class="is-size-5">Go to year:</h5>
+                <p>
+                    <a href="{% url 'django_ledger:invoice-list' entity_slug=view.kwargs.entity_slug %}">
+                        {% trans 'All' %} |
+                    </a>
+                    {% for date in date_list %}
+                        <a href="{% url 'django_ledger:invoice-list-year' entity_slug=view.kwargs.entity_slug year=date.year %}">
+                            {{ date.year }}
+                            {% if not forloop.last %}>{% endif %}
+                        </a>
+                    {% endfor %}
+                </p>
+            {% endif %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/invoice_update.html b/tests/django_ledger/invoice_update.html
new file mode 100644
index 0000000..311eb87
--- /dev/null
+++ b/tests/django_ledger/invoice_update.html
@@ -0,0 +1,202 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <form action="{% url 'django_ledger:invoice-update' entity_slug=view.kwargs.entity_slug invoice_pk=invoice.uuid %}"
+          method="post">
+        {% if form.errors %}{{ form.errors }}{% endif %}
+        {% csrf_token %}
+        <div class="columns is-multiline">
+            <div class="column is-6">
+                {% include 'django_ledger/includes/card_customer.html' with customer=invoice.customer %}
+            </div>
+            <div class="column is-6">
+                <div class="card">
+                    <div class="card-header">
+                        <p class="card-header-title">
+                            {% trans 'Invoice Amount & Terms' %}
+                        </p>
+                    </div>
+                    <div class="card-content">
+                        <div class="content">
+                            <h3 class="has-text-weight-light">
+                                {% trans 'Invoice Amount:' %}
+                                <strong>${{ invoice.amount_due | currency_format }}</strong>
+                                <button type="button"
+                                        onclick="document.getElementById('django-ledger-invoice-amount-field').classList.remove('is-hidden')"
+                                        class="button is-small is-info is-outlined">
+                                    {% trans 'Edit' %}
+                                </button>
+                            </h3>
+                            <div class="field is-hidden" id="django-ledger-invoice-amount-field">
+                                <div class="control">
+                                    {{ form.amount_due }}
+                                </div>
+                            </div>
+                            <h4 class="has-text-weight-light">Invoice Date: {{ object.date }}</h4>
+                            <h4 class="has-text-weight-light">Terms: {{ object.get_terms_display }}</h4>
+                            <h4 class="has-text-weight-light">Accrue Invoice: {{ form.accrue }}</h4>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column is-6">
+                <div class="card">
+                    <div class="card-header">
+                        <p class="card-header-title">
+                            {% trans 'Invoice State' %}
+                        </p>
+                    </div>
+                    <div class="card-body">
+                        <div class="card-content">
+                            <form action="{% url 'django_ledger:invoice-update' entity_slug=view.kwargs.entity_slug invoice_pk=invoice.uuid %}"
+                                  method="post">
+                                {% csrf_token %}
+                                <div class="field">
+                                    <label for="{{ form.paid.id_for_amount_paid }}" class="label is-small">
+                                        {{ form.amount_paid.label }}
+                                    </label>
+                                    <div class="control">
+                                        {{ form.amount_paid }}
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <label for="{{ form.paid.id_for_label }}" class="label is-small">
+                                        {{ form.paid }}
+                                        {{ form.paid.label }}
+                                    </label>
+                                </div>
+                                <div class="field">
+                                    <label class="label is-small" for="{{ form.paid_date.id_for_label }}">
+                                        {{ form.paid_date.label }}
+                                    </label>
+                                    <div class="control">
+                                        {{ form.paid_date }}
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <label class="label is-small" for="{{ form.progress.id_for_label }}">
+                                        {{ form.progress.label }}
+                                    </label>
+                                    <div class="control">
+                                        {{ form.progress }}
+                                    </div>
+                                </div>
+                                <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                                    Save
+                                </button>
+                                <a href="{% url 'django_ledger:invoice-list' entity_slug=view.kwargs.entity_slug %}"
+                                   class="button is-small is-info is-fullwidth">
+                                    {% trans 'Invoice List' %}
+                                </a>
+                                <a href="{% url 'django_ledger:entity-dashboard' entity_slug=view.kwargs.entity_slug %}"
+                                   class="button is-small is-info is-outlined is-fullwidth mt-2">
+                                    {% trans 'Dashboard' %}
+                                </a>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column is-6">
+                {# todo: change the format of the state... show only account balances, move to detail view? #}
+                <div class="card">
+                    <div class="card-header">
+                        <p class="card-header-title">
+                            {% trans 'Invoice State' %}
+                        </p>
+                    </div>
+                    <div class="card-body">
+                        <div class="card-content">
+                            <div class="columns is-multiline">
+                                <div class="column is-12">
+                                    <h3 class="is-size-3">{% trans 'Ledger State' %}</h3>
+                                    <p>
+                                        {{ invoice.cash_account }}:
+                                        ${{ invoice.get_amount_cash | currency_format }}
+                                    </p>
+                                    <p>
+                                        {{ invoice.prepaid_account }}:
+                                        ${{ invoice.get_amount_receivable | currency_format }}
+                                    </p>
+                                    <p>
+                                        {{ invoice.unearned_account }}:
+                                        ${{ invoice.get_amount_payable | currency_format }}
+                                    </p>
+                                    <p>
+                                        {{ invoice.earnings_account }}:
+                                        ${{ invoice.get_amount_earned | currency_format }}
+                                    </p>
+                                </div>
+                                <div class="column is-12">
+                                    <h3 class="is-size-3">{% trans 'Invoice State' %}</h3>
+                                    <p>
+                                        {{ invoice.cash_account }}: ${{ invoice.amount_paid | currency_format }}
+                                    </p>
+                                    <p>
+                                        {{ invoice.prepaid_account }}:
+                                        ${{ invoice.amount_receivable | currency_format }}
+                                    </p>
+                                    <p>
+                                        {{ invoice.unearned_account }}:
+                                        ${{ invoice.amount_unearned | currency_format }}
+                                    </p>
+                                    <p>
+                                        {{ invoice.earnings_account }}:
+                                        ${{ invoice.amount_earned | currency_format }}
+                                    </p>
+                                </div>
+                                <div class="column is-12">
+                                    <p>
+                                        Ledger is Posted:
+                                        {% if invoice.ledger.posted %}
+                                            <span class="icon has-text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
+                                        {% else %}
+                                            <span class="icon is-small has-text-danger">
+                                                {% icon 'maki:roadblock-11' 24 %}
+                                            </span>
+                                        {% endif %}
+                                    </p>
+                                    <p>
+                                        Ledger Locked:
+                                        {% if invoice.ledger.locked %}
+                                            <span class="icon has-text-success">{% icon 'bi:lock-fill' 24 %}</span>
+                                        {% else %}
+                                            <span class="icon has-text-danger">{% icon 'bx:bx-lock-open-alt' 24 %}</span>
+                                        {% endif %}
+                                    </p>
+                                </div>
+                                {% now "Y" as current_year %}
+                                {% now "m" as current_month %}
+                                <div class="column is-6">
+                                    <a class="button is-outlined is-small is-primary is-fullwidth"
+                                       href="{% url 'django_ledger:ledger-bs-month' ledger_pk=invoice.ledger.uuid entity_slug=view.kwargs.entity_slug year=current_year month=current_month %}">
+                                        {% trans 'Balance Sheet' %}
+                                    </a>
+                                </div>
+                                <div class="column is-6">
+                                    <a class="button is-outlined is-small is-info is-fullwidth"
+                                       href="{% url 'django_ledger:ledger-ic-month' ledger_pk=invoice.ledger.uuid entity_slug=view.kwargs.entity_slug year=current_year month=current_month %}">
+                                        {% trans 'Income Statement' %}
+                                    </a>
+                                </div>
+                                <div class="column is-12">
+                                    <a class="button is-small is-warning is-fullwidth"
+                                       href="{% url 'django_ledger:ledger-update' ledger_pk=invoice.ledger.uuid entity_slug=view.kwargs.entity_slug %}">
+                                        {% trans 'Invoice Ledger' %}
+                                    </a>
+                                    <a class="button is-small is-info is-fullwidth mt-2"
+                                       href="{% url 'django_ledger:je-list' ledger_pk=invoice.ledger.uuid entity_slug=view.kwargs.entity_slug %}">
+                                        {% trans 'Ledger Journal Entries' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+    {% invoice_item_formset_table item_formset %}
+{% endblock %}
diff --git a/tests/django_ledger/je_create.html b/tests/django_ledger/je_create.html
new file mode 100644
index 0000000..03c1496
--- /dev/null
+++ b/tests/django_ledger/je_create.html
@@ -0,0 +1,23 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-4">
+            <div class="box">
+                <form method="post"
+                      action="{% url 'django_ledger:je-create' entity_slug=view.kwargs.entity_slug ledger_pk=view.kwargs.ledger_pk %}">
+                    {% csrf_token %}
+                    {{ form.as_p }}
+                    <button class="button is-outlined is-primary is-fullwidth djetler_my_1" type="submit">
+                        Create
+                    </button>
+                    <a class="button is-small is-dark is-fullwidth"
+                       href="{% url 'django_ledger:je-list' entity_slug=view.kwargs.entity_slug ledger_pk=view.kwargs.ledger_pk %}">
+                        Back
+                    </a>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/je_detail.html b/tests/django_ledger/je_detail.html
new file mode 100644
index 0000000..67f2195
--- /dev/null
+++ b/tests/django_ledger/je_detail.html
@@ -0,0 +1,22 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column">
+            <div class="box">
+                {% journal_entry_txs_table journal_entry %}
+                <a class="button is-primary is-outlined"
+                   href="{% url 'django_ledger:txs-journal-entry' entity_slug=view.kwargs.entity_slug ledger_pk=view.kwargs.ledger_pk je_pk=journal_entry.uuid %}">
+                    Edit
+                    Txs
+                </a>
+                <a class="button is-dark"
+                   href="{% url 'django_ledger:je-list' entity_slug=view.kwargs.entity_slug ledger_pk=view.kwargs.ledger_pk %}">
+                    Back
+                </a>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/je_list.html b/tests/django_ledger/je_list.html
new file mode 100644
index 0000000..26792aa
--- /dev/null
+++ b/tests/django_ledger/je_list.html
@@ -0,0 +1,21 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns">
+        <div class="column">
+            <div class="box">
+                <a class="button is-primary is-outlined"
+                   href="{% url 'django_ledger:je-create' entity_slug=view.kwargs.entity_slug ledger_pk=view.kwargs.ledger_pk %}">
+                    Add
+                </a>
+                <a class="button is-dark"
+                   href="{% url 'django_ledger:ledger-list' entity_slug=view.kwargs.entity_slug %}">
+                    Back
+                </a>
+                {% jes_table %}
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/je_update.html b/tests/django_ledger/je_update.html
new file mode 100644
index 0000000..6161f69
--- /dev/null
+++ b/tests/django_ledger/je_update.html
@@ -0,0 +1,23 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <div class="box">
+                <form method="post"
+                      action="{% url 'django_ledger:je-update' entity_slug=view.kwargs.entity_slug ledger_pk=view.kwargs.ledger_pk je_pk=journal_entry.uuid %}">
+                    {% csrf_token %}
+                    {{ form.as_p }}
+                    <button class="button is-fullwidth is-primary is-outlined djetler_my_1" type="submit">
+                        Update
+                    </button>
+                    <a href="{% url 'django_ledger:je-list' entity_slug=view.kwargs.entity_slug ledger_pk=view.kwargs.ledger_pk %}"
+                       class="button is-small is-dark is-fullwidth">
+                        Back
+                    </a>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/layouts/content_layout_1.html b/tests/django_ledger/layouts/content_layout_1.html
new file mode 100644
index 0000000..d256ce0
--- /dev/null
+++ b/tests/django_ledger/layouts/content_layout_1.html
@@ -0,0 +1,24 @@
+{% extends 'django_ledger/base.html' %}
+{% load navigation_menu from django_ledger %}
+{% block content %}
+    <section class="section">
+        <div class="container is-fluid px-1">
+            <div class="columns">
+                {# SIDE MENU #}
+                {% if not hide_menu %}
+                    <div class="column is-3 is-hidden-mobile is-hidden-tablet-only">
+                        <div class="columns is-multiline">
+                            {% block aux_menu %}{% endblock %}
+                            <div class="column is-12">
+                                {% navigation_menu 'desktop' %}
+                            </div>
+                        </div>
+                    </div>
+                {% endif %}
+                <div class="column">
+                    {% block view_content %}{% endblock %}
+                </div>
+            </div>
+        </div>
+    </section>
+{% endblock content %}
diff --git a/tests/django_ledger/layouts/content_layout_2.html b/tests/django_ledger/layouts/content_layout_2.html
new file mode 100644
index 0000000..6f8cb99
--- /dev/null
+++ b/tests/django_ledger/layouts/content_layout_2.html
@@ -0,0 +1,12 @@
+{% extends 'django_ledger/base.html' %}
+{% block content %}
+    <section class="section">
+        <div class="container">
+            <div class="columns">
+                <div class="column">
+                    {% block view_content %}{% endblock %}
+                </div>
+            </div>
+        </div>
+    </section>
+{% endblock content %}
diff --git a/tests/django_ledger/ledger_create.html b/tests/django_ledger/ledger_create.html
new file mode 100644
index 0000000..c3a8bc5
--- /dev/null
+++ b/tests/django_ledger/ledger_create.html
@@ -0,0 +1,24 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-8-tablet is-6-desktop">
+            <div class="box">
+                <form action="{% url 'django_ledger:ledger-create' entity_slug=view.kwargs.entity_slug %}"
+                      method="post">
+                    {% csrf_token %}
+                    {{ form.as_p }}
+                    <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                        Create
+                    </button>
+                    <a href="{% url 'django_ledger:ledger-list' entity_slug=view.kwargs.entity_slug %}"
+                       class="button is-small is-dark is-fullwidth">
+                        Back
+                    </a>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/ledger_list.html b/tests/django_ledger/ledger_list.html
new file mode 100644
index 0000000..158c482
--- /dev/null
+++ b/tests/django_ledger/ledger_list.html
@@ -0,0 +1,16 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="box">
+        <a class="button is-primary is-outlined"
+           href="{% url 'django_ledger:ledger-create' entity_slug=view.kwargs.entity_slug %}">
+            Add
+        </a>
+        <a class="button is-dark"
+           href="{% url 'django_ledger:entity-dashboard' entity_slug=view.kwargs.entity_slug %}">
+            Back
+        </a>
+        {% ledgers_table %}
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/ledger_update.html b/tests/django_ledger/ledger_update.html
new file mode 100644
index 0000000..4f6d842
--- /dev/null
+++ b/tests/django_ledger/ledger_update.html
@@ -0,0 +1,24 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-4">
+            <div class="box">
+                <form action="{% url 'django_ledger:ledger-update' entity_slug=view.kwargs.entity_slug ledger_pk=ledger.uuid %}"
+                      method="post">
+                    {% csrf_token %}
+                    {{ form.as_p }}
+                    <button type="submit" class="button is-primary is-fullwidth is-outlined djetler_my_1">
+                        Update
+                    </button>
+                    <a class="button is-dark is-small is-fullwidth"
+                       href="{% url 'django_ledger:ledger-list' entity_slug=view.kwargs.entity_slug %}">
+                        Back
+                    </a>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/pns_list.html b/tests/django_ledger/pns_list.html
new file mode 100644
index 0000000..6c2e053
--- /dev/null
+++ b/tests/django_ledger/pns_list.html
@@ -0,0 +1,27 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <h1 class="is-size-1 has-text-weight-thin">
+                            {% trans 'Products & Services List' %}
+                        </h1>
+                    </div>
+                    <div class="level-item">
+                        <a href="{% url 'django_ledger:product-create' entity_slug=view.kwargs.entity_slug %}">
+                            <span class="icon is-large has-text-success">
+                                {% icon 'carbon:add-alt' 60 %}
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% items_table pns_list %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/po_create.html b/tests/django_ledger/po_create.html
new file mode 100644
index 0000000..ddff223
--- /dev/null
+++ b/tests/django_ledger/po_create.html
@@ -0,0 +1,17 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <form action="{% url 'django_ledger:po-create' entity_slug=view.kwargs.entity_slug %}" method="post">
+        <div class="columns is-multiline is-centered">
+            {% csrf_token %}
+            <div class="column is-6">
+                {{ form }}
+                <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                    Create
+                </button>
+            </div>
+        </div>
+    </form>
+{% endblock %}
diff --git a/tests/django_ledger/po_delete.html b/tests/django_ledger/po_delete.html
new file mode 100644
index 0000000..f64ee0b
--- /dev/null
+++ b/tests/django_ledger/po_delete.html
@@ -0,0 +1,37 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-centered">
+        <div class="column is-6">
+            <form action="{% url 'django_ledger:po-delete' entity_slug=view.kwargs.entity_slug po_pk=po_model.uuid %}"
+                  method="post">
+                {% csrf_token %}
+                <div class="card">
+                    <div class="card-content has-text-centered">
+                        <p class="title has-text-weight-light">
+                            Are you sure you want to delete
+                            Purchase Order {{ po_model.po_number }}
+                        </p>
+                    </div>
+                    <div class="card-content has-text-centered">
+                        <p class="subtitle">
+                            All transactions associated with this Purchase Order will be deleted.
+                            If you want to void the PO instead, click here
+                        </p>
+                    </div>
+                    <div class="card-content has-text-centered">
+                        <a href="{% url 'django_ledger:po-detail' entity_slug=view.kwargs.entity_slug po_pk=po_model.uuid %}"
+                           class="button is-primary">
+                            {% trans 'Go Back' %}
+                        </a>
+                        <button type="submit" class="button is-danger">
+                            {% trans 'Delete' %}
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/po_detail.html b/tests/django_ledger/po_detail.html
new file mode 100644
index 0000000..2e99aaf
--- /dev/null
+++ b/tests/django_ledger/po_detail.html
@@ -0,0 +1,111 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load trans from i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns">
+        <div class="column is-4">
+            <div class="columns is-multiline">
+                <div class="column is-12">
+                    {% include 'django_ledger/includes/card_po.html' with po_model=po_model entity_slug=view.kwargs.entity_slug style='po-detail' %}
+                </div>
+                <div class="column is-12">
+                    <a class="button is-info is-fullwidth is-outlined"
+                       href="{% url 'django_ledger:po-list' entity_slug=view.kwargs.entity_slug %}">
+                        {% trans 'PO List' %}
+                    </a>
+                    <a class="button is-primary is-fullwidth is-outlined mt-2"
+                       href="{% url 'django_ledger:entity-dashboard' entity_slug=view.kwargs.entity_slug %}">
+                        {% trans 'Go To Dashboard' %}
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="column is-8">
+            <nav class="level">
+                <div class="level-item has-text-centered">
+                    <div>
+                        <p class="heading">
+                            {% trans 'PO Amount' %}:
+                            <p class="title">
+                                {% currency_symbol %}{{ po_model.po_amount | absolute | currency_format }}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="level-item has-text-centered">
+                        <div>
+                            <p class="heading">
+                                {% trans 'Amount Received' %}:
+                            </p>
+                            <p class="title has-text-success">
+                                {% currency_symbol %}{{ po_model.po_amount_received | currency_format }}
+                            </p>
+                        </div>
+                    </div>
+                </nav>
+                <div class="columns is-multiline">
+                    <div class="column is-12">
+                        <h3 class="is-size-3 has-text-weight-light">
+                            {{ po_model.po_title }}
+                        </h3>
+                    </div>
+                    <div class="column is-12">
+                        <div class="table-container">
+                            <table class="table is-fullwidth is-tripped is-narrow">
+                                <thead>
+                                    <tr>
+                                        <th>{% trans 'Item' %}</th>
+                                        <th>{% trans 'Quantity' %}</th>
+                                        <th>{% trans 'Unit Cost' %}</th>
+                                        <th>{% trans 'Total Cost' %}</th>
+                                        <th>{% trans 'Status' %}</th>
+                                        <th>{% trans 'Billed' %}</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {% for item in po_items %}
+                                        <tr>
+                                            <td>{{ item.item_model }}</td>
+                                            <td>{{ item.quantity }}</td>
+                                            <td>{{ item.unit_cost }}</td>
+                                            <td class="{% if item.is_cancelled %}djl-is-strikethrough{% endif %}">
+                                            {% currency_symbol %}{{ item.total_amount | currency_format }}
+                                        </td>
+                                        <td class="has-text-weight-bold {% if item.is_cancelled %}has-text-danger{% endif %}">
+                                        {% if item.po_item_status %}{{ item.get_po_item_status_display }}{% endif %}
+                                    </td>
+                                    <td>
+                                        {% if item.bill_model_id %}
+                                            <a class="is-small is-light button"
+                                               href="{% url 'django_ledger:bill-detail' entity_slug=view.kwargs.entity_slug bill_pk=item.bill_model_id %}">
+                                                View Bill
+                                            </a>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                        </tbody>
+                        <tfoot>
+                        <tr>
+                            <td></td>
+                            <td></td>
+                            <td>
+                                Total PO Amount
+                            </td>
+                            <td class="has-text-weight-bold">
+                                {% currency_symbol %}{{ total_amount_due | currency_format }}
+                            </td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                        </tfoot>
+                    </table>
+                </div>
+            </div>
+            <div class=" column is-12">
+                {% include 'django_ledger/includes/card_markdown.html' with style='card_1' title='PO Notes' notes_html=po_model.notes_html %}
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/tests/django_ledger/po_list.html b/tests/django_ledger/po_list.html
new file mode 100644
index 0000000..b536cfd
--- /dev/null
+++ b/tests/django_ledger/po_list.html
@@ -0,0 +1,127 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        {% if month %}
+                            <h1 class="is-size-1 has-text-weight-thin">
+                                {{ month | date:'F Y' }}
+                            </h1>
+                        {% elif year %}
+                            <h1 class="is-size-1 has-text-weight-thin">
+                                Year {{ year | date:'Y' }}
+                                Bills
+                            </h1>
+                        {% else %}
+                            <h1 class="is-size-1 has-text-weight-thin">
+                                {% trans 'Latest Purchase Orders' %}
+                            </h1>
+                        {% endif %}
+                    </div>
+                    <div class="level-item">
+                        <a href="{% url 'django_ledger:po-create' entity_slug=view.kwargs.entity_slug %}">
+                            <span class="icon is-large has-text-success">
+                                {% icon 'carbon:add-alt' 60 %}
+                            </span>
+                        </a>
+                    </div>
+                </div>
+                <div class="level-right">
+                    {% if previous_month %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:po-list-month' year=previous_month.year month=previous_month.month entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:left-circle-outlined' 16 %}</span>
+                                <span>{{ previous_month | date:'F Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if next_month %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:po-list-month' year=next_month.year month=next_month.month entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:right-circle-outlined' 16 %}</span>
+                                <span>{{ next_month | date:'F Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if previous_year %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:po-list-year' year=previous_year.year entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:left-circle-outlined' 16 %}</span>
+                                <span>{{ previous_year | date:'Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if next_year %}
+                        <div class="level-item">
+                            <a class="button is-small is-dark is-outlined"
+                               href="{% url 'django_ledger:po-list-year' year=next_year.year entity_slug=view.kwargs.entity_slug %}">
+                                <span class="icon is-small">{% icon 'ant-design:right-circle-outlined' 16 %}</span>
+                                <span>{{ next_year | date:'Y' }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if page_obj %}
+                        {% if page_obj.has_previous %}
+                            <div class="level-item">
+                                <a href="?page={{ page_obj.previous_page_number }}"
+                                   class="button is-small is-dark is-outlined">
+                                    <span class="icon is-small">{% icon 'ant-design:left-circle-outlined' 24 %}</span>
+                                </a>
+                            </div>
+                        {% endif %}
+                        <div class="level-item">
+                            <p class="is-italic">
+                                page {{ page_obj.number }}
+                                of {{ page_obj.paginator.num_pages }}
+                            </p>
+                        </div>
+                        {% if page_obj.has_next %}
+                            <div class="level-item">
+                                <a href="?page={{ page_obj.next_page_number }}"
+                                   class="button is-small is-dark is-outlined">
+                                    <span class="icon is-small">{% icon 'ant-design:right-circle-outlined' 24 %}</span>
+                                </a>
+                            </div>
+                        {% endif %}
+                    {% endif %}
+                </div>
+            </div>
+            {% po_table po_list %}
+            {% if year %}
+                <h5 class="is-size-5">{% trans 'Go to month:' %}</h5>
+                <p>
+                    <a href="{% url 'django_ledger:po-list' entity_slug=view.kwargs.entity_slug %}">
+                        {% trans 'All' %} |
+                    </a>
+                    {% for date in date_list %}
+                        <a href="{% url 'django_ledger:po-list-month' entity_slug=view.kwargs.entity_slug year=date.year month=date.month %}">
+                            {{ date | date:'F' }}
+                            {% if not forloop.last %}>{% endif %}
+                        </a>
+                    {% endfor %}
+                </p>
+            {% else %}
+                <h5 class="is-size-5">{% trans 'Go to year:' %}</h5>
+                <p>
+                    <a href="{% url 'django_ledger:po-list' entity_slug=view.kwargs.entity_slug %}">
+                        {% trans 'All' %} |
+                    </a>
+                    {% for date in date_list %}
+                        <a href="{% url 'django_ledger:po-list-year' entity_slug=view.kwargs.entity_slug year=date.year %}">
+                            {{ date.year }}
+                            {% if not forloop.last %}>{% endif %}
+                        </a>
+                    {% endfor %}
+                </p>
+            {% endif %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/po_update.html b/tests/django_ledger/po_update.html
new file mode 100644
index 0000000..a0fb82f
--- /dev/null
+++ b/tests/django_ledger/po_update.html
@@ -0,0 +1,99 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns">
+        <div class="column has-text-centered is-12">
+            <h1 class="is-size-1 has-text-weight-light">
+                {% trans 'Update Purchase Order' %}
+            </h1>
+            <h2 class="title">{{ po_model.po_number }}</h2>
+        </div>
+    </div>
+    <form action="{% url 'django_ledger:po-update' entity_slug=view.kwargs.entity_slug po_pk=po_model.uuid %}"
+          method="post">
+        {% csrf_token %}
+        {% if form.errors %}{{ form.errors }}{% endif %}
+        <div class="columns is-multiline">
+            <div class="column is-6">
+                <div class="field">
+                    <label for="{{ form.po_title.id_for_label }}" class="label">
+                        {{ form.po_title.label }}
+                    </label>
+                    <div class="control">
+                        {{ form.po_title }}
+                    </div>
+                </div>
+                <div class="field">
+                    <label for="{{ form.po_date.id_for_label }}" class="label">
+                        {{ form.po_date.label }}
+                    </label>
+                    <div class="control">
+                        {{ form.po_date }}
+                    </div>
+                </div>
+                <div class="field">
+                    <label for="{{ form.po_status.id_for_label }}" class="label">
+                        {{ form.po_status.label }}
+                    </label>
+                    <div class="control">
+                        {{ form.po_status }}
+                    </div>
+                </div>
+                <div class="field">
+                    <label for="{{ form.fulfillment_date.id_for_label }}" class="label">
+                        {{ form.fulfillment_date.label }}
+                    </label>
+                    <div class="control">
+                        {{ form.fulfillment_date }}
+                    </div>
+                </div>
+                <div class="field">
+                    <label for="{{ form.fulfilled.id_for_label }}" class="label">
+                        {{ form.fulfilled.label }}
+                    </label>
+                    <div class="control">
+                        {{ form.fulfilled }}
+                    </div>
+                </div>
+            </div>
+            <div class="column is-6">
+                <div class="field">
+                    <label for="{{ form.markdown_notes.id_for_label }}" class="label">
+                        {{ form.markdown_notes.label }}
+                        <span class="icon is-medium has-text-grey">
+                            {% icon 'logos:markdown' 16 %}
+                        </span>
+                    </label>
+                    {{ form.markdown_notes }}
+                </div>
+            </div>
+            <div class="column is-12 has-text-centered">
+                <button type="submit" class="button is-medium is-primary">
+                    {% trans 'Update PO' %}
+                </button>
+                <a href="{% url 'django_ledger:po-detail' entity_slug=view.kwargs.entity_slug po_pk=po_model.uuid %}"
+                   class="button is-medium is-info">
+                    {% trans 'Back to PO' %}
+                </a>
+                <a href="{% url 'django_ledger:po-delete' entity_slug=view.kwargs.entity_slug po_pk=po_model.uuid %}"
+                   class="button is-medium is-danger">
+                    {% trans 'Delete PO' %}
+                </a>
+            </div>
+            <div class="column is-12 has-text-centered">
+                <h3 class="is-size-3 has-text-weight-light">
+                    {% trans 'Purchase Order Amount' %}:
+                    {% currency_symbol %}{{ po_model.po_amount | currency_format }}
+                </h3>
+                <h3 class="is-size-3 has-text-weight-light">
+                    {% trans 'Received Amount' %}:
+                    {% currency_symbol %}{{ po_model.po_amount_received | currency_format }}
+                </h3>
+            </div>
+        </div>
+    </form>
+    <hr>
+    {% po_item_formset_table item_formset %}
+{% endblock %}
diff --git a/tests/django_ledger/product_create.html b/tests/django_ledger/product_create.html
new file mode 100644
index 0000000..947dcff
--- /dev/null
+++ b/tests/django_ledger/product_create.html
@@ -0,0 +1,34 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-multiline is-centered">
+        <div class="column is-6">
+            <div class="card">
+                <form action="{% url 'django_ledger:product-create' entity_slug=view.kwargs.entity_slug %}"
+                      method="post">
+                    {% csrf_token %}
+                    <div class="card-header">
+                        <h2 class="card-header-title">
+                            <span class="icon is-medium">
+                                {% icon 'ic:baseline-production-quantity-limits' 36 %}
+                            </span>
+                            {{ page_title }}
+                        </h2>
+                    </div>
+                    <div class="card-content">
+                        {{ form.as_p }}
+                        <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                            {% trans 'Create' %}
+                        </button>
+                        <a href="{% url 'django_ledger:product-list' entity_slug=view.kwargs.entity_slug %}"
+                           class="button is-small is-dark is-fullwidth">
+                            {% trans 'Back' %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/product_list.html b/tests/django_ledger/product_list.html
new file mode 100644
index 0000000..b418a8e
--- /dev/null
+++ b/tests/django_ledger/product_list.html
@@ -0,0 +1,27 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <h1 class="is-size-1 has-text-weight-thin">
+                            {% trans 'Products & Services List' %}
+                        </h1>
+                    </div>
+                    <div class="level-item">
+                        <a href="{% url 'django_ledger:product-create' entity_slug=view.kwargs.entity_slug %}">
+                            <span class="icon is-large has-text-success">
+                                {% icon 'carbon:add-alt' 60 %}
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% pns_table pns_list %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/product_update.html b/tests/django_ledger/product_update.html
new file mode 100644
index 0000000..f5677c1
--- /dev/null
+++ b/tests/django_ledger/product_update.html
@@ -0,0 +1,34 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-multiline is-centered">
+        <div class="column is-6">
+            <div class="card">
+                <form action="{% url 'django_ledger:product-update' entity_slug=view.kwargs.entity_slug item_pk=item.uuid %}"
+                      method="post">
+                    {% csrf_token %}
+                    <div class="card-header">
+                        <h2 class="card-header-title">
+                            <span class="icon is-medium">
+                                {% icon 'ic:baseline-production-quantity-limits' 36 %}
+                            </span>
+                            {{ page_title }}
+                        </h2>
+                    </div>
+                    <div class="card-content">
+                        {{ form }}
+                        <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                            {% trans 'Update' %}
+                        </button>
+                        <a href="{% url 'django_ledger:product-list' entity_slug=view.kwargs.entity_slug %}"
+                           class="button is-small is-dark is-fullwidth">
+                            {% trans 'Back' %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/tags/account_txs_table.html b/tests/django_ledger/tags/account_txs_table.html
new file mode 100644
index 0000000..c443b66
--- /dev/null
+++ b/tests/django_ledger/tags/account_txs_table.html
@@ -0,0 +1,63 @@
+{% load django_ledger %}
+{% load trans from i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
+        <tr>
+            <th class="has-text-centered">Date</th>
+            <th class="has-text-centered">Credit</th>
+            <th class="has-text-centered">Debit</th>
+            <th class="has-text-centered">Description</th>
+            <th class="has-text-centered">Actions</th>
+        </tr>
+        {% for tx in transactions %}
+            <tr class="has-text-centered">
+                <td>{{ tx.journal_entry.date }}</td>
+                <td>
+                    {% if tx.tx_type == 'credit' %}${{ tx.amount | currency_format }}{% endif %}
+                </td>
+                <td>
+                    {% if tx.tx_type == 'debit' %}${{ tx.amount | currency_format }}{% endif %}
+                </td>
+                <td>{{ tx.description }}</td>
+                <td>
+                    <div class="dropdown is-right is-hoverable" id="tx-action-{{ tx.uuid }}">
+                        <div class="dropdown-trigger">
+                            <button class="button is-small is-rounded is-outlined"
+                                    aria-haspopup="true"
+                                    aria-controls="dropdown-menu">
+                                <span>{% trans 'Actions' %}</span>
+                                <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                            </button>
+                        </div>
+                        <div class="dropdown-menu" id="dropdown-menu-{{ tx.uuid }}" role="menu">
+                            <div class="dropdown-content">
+                                <a href="{% url 'django_ledger:je-detail' entity_slug=entity_slug ledger_pk=tx.journal_entry.ledger.uuid je_pk=tx.journal_entry.uuid %}"
+                                   class="dropdown-item has-text-success">
+                                    View JE
+                                </a>
+                                {% if tx.journal_entry.ledger.billmodel %}
+                                    <a href="{% url 'django_ledger:bill-detail' entity_slug=entity_slug bill_pk=tx.journal_entry.ledger.billmodel.uuid %}"
+                                       class="dropdown-item has-text-primary">
+                                        View Bill
+                                    </a>
+                                {% elif tx.journal_entry.ledger.invoicemodel %}
+                                    <a href="{% url 'django_ledger:invoice-detail' entity_slug=entity_slug invoice_pk=tx.journal_entry.ledger.invoicemodel.uuid %}"
+                                       class="dropdown-item has-text-info">
+                                        View Invoice
+                                    </a>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        {% endfor %}
+        <tr class="has-text-weight-bold">
+            <td class="has-text-right">Total</td>
+            <td class="has-text-centered">${{ total_credits | currency_format }}</td>
+            <td class="has-text-centered">${{ total_debits | currency_format }}</td>
+            <td></td>
+            <td></td>
+        </tr>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/accounts_table.html b/tests/django_ledger/tags/accounts_table.html
new file mode 100644
index 0000000..ea528cf
--- /dev/null
+++ b/tests/django_ledger/tags/accounts_table.html
@@ -0,0 +1,120 @@
+{% load i18n %}
+{% load django_ledger %}
+<div class="table-container">
+    <table class="table is-fullwidth is-striped is-narrow django-ledger-table-bottom-margin-75">
+        <thead>
+            {% if title %}
+                <tr>
+                    <td>
+                        <h2 class="is-size-3 has-text-weight-light">
+                            {{ title }}
+                        </h2>
+                    </td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                </tr>
+            {% endif %}
+            <tr>
+                <th>{% trans 'Role' %}</th>
+                <th>{% trans 'Parent' %}</th>
+                <th>{% trans 'Code' %}</th>
+                <th>
+                    {% trans 'Account Name' %}
+                </th>
+                <th>
+                    {% trans 'Balance Type' %}
+                </th>
+                <th>
+                    {% trans 'Active' %}
+                </th>
+                <th>
+                    {% trans 'Locked' %}
+                </th>
+                <th>
+                    {% trans 'Actions' %}
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for account in accounts %}
+                <tr>
+                    <td>
+                        {{ account.get_role_display }}
+                    </td>
+                    <td>
+                        {{ account.parent.code }}
+                    </td>
+                    <td>
+                        {{ account.code }}
+                    </td>
+                    <td>
+                        {{ account.name }}
+                    </td>
+                    <td class="has-text-centered">
+                        {% if account.is_debit %}
+                            <span class="icon has-text-info-dark">
+                                {% icon 'bi:arrow-bar-down' 24 %}
+                            </span>
+                        {% elif account.is_credit %}
+                            <span class="icon has-text-warning-dark">
+                                {% icon 'bi:arrow-bar-up' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td class="has-text-centered">
+                        {% if account.active %}
+                            <span class="icon has-text-success-dark">
+                                {% icon 'ant-design:check-circle-filled' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td class="has-text-centered">
+                        {% if account.locked %}
+                            <span class="icon has-text-success-dark">
+                                {% icon 'bi:lock-fill' 24 %}
+                            </span>
+                        {% elif not account.locked %}
+                            <span class="icon has-text-danger-dark">
+                                {% icon 'bx:bx-lock-open-alt' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        <div class="dropdown is-right is-hoverable" id="account-action-{{ account.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>
+                                        Actions
+                                    </span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ account.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a href="{% url 'django_ledger:account-detail' entity_slug=entity_slug account_pk=account.uuid %}"
+                                       class="dropdown-item has-text-success">
+                                        {% trans 'Detail' %}
+                                    </a>
+                                    <a href="{% url 'django_ledger:account-update' entity_slug=entity_slug account_pk=account.uuid %}"
+                                       class="dropdown-item has-text-warning">
+                                        {% trans 'Update' %}
+                                    </a>
+                                    <a href="{% url 'django_ledger:account-create-child' entity_slug=entity_slug parent_account_pk=account.uuid %}"
+                                       class="dropdown-item has-text-info">
+                                        {% trans 'Create Child Account' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </table>
+    </div>
diff --git a/tests/django_ledger/tags/activity_form.html b/tests/django_ledger/tags/activity_form.html
new file mode 100644
index 0000000..9fa937b
--- /dev/null
+++ b/tests/django_ledger/tags/activity_form.html
@@ -0,0 +1,24 @@
+{% load i18n %}
+<form action="{{ form_path }}" method="get">
+    <div class="field is-horizontal">
+        <div class="field-label is-small">
+            <label for="{{ activity_form.activity.id_for_label }}" class="label">
+                {{ activity_form.activity.label }}
+            </label>
+        </div>
+        <div class="field-body">
+            <div class="field has-addons">
+                <div class="control is-expanded">
+                    <div class="select is-small is-fullwidth">
+                        {{ activity_form.activity }}
+                    </div>
+                </div>
+                <div class="control">
+                    <button type="submit" class="button is-primary is-small">
+                        Choose
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
diff --git a/tests/django_ledger/tags/balance_sheet.html b/tests/django_ledger/tags/balance_sheet.html
new file mode 100644
index 0000000..36efb8b
--- /dev/null
+++ b/tests/django_ledger/tags/balance_sheet.html
@@ -0,0 +1,192 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped">
+        <thead>
+            <tr>
+                <th>{% trans 'Account Number' %}</th>
+                <th>{% trans 'Account Name' %}</th>
+                {% if by_unit %}
+                    <th>{% trans 'Unit' %}</th>
+                {% endif %}
+                <th>{% trans 'Balance Type' %}</th>
+                <th>{% trans 'Balance' %}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>
+                    <h2 class="is-size-3">{% trans 'Assets' %}</h2>
+                </td>
+                <td></td>
+                {% if by_unit %}<td></td>{% endif %}
+                <td></td>
+                <td></td>
+            </tr>
+            {# ASSETS #}
+            {% for acc in tx_digest.group_account.GROUP_ASSETS %}
+                <tr>
+                    <td>{{ acc.code }}</td>
+                    <td>
+                        {{ acc.name }}
+                    </td>
+                    {% if by_unit %}
+                        <td>
+                            {% if acc.unit_name %}{{ acc.unit_name }}{% endif %}
+                        </td>
+                    {% endif %}
+                    <td class="has-text-centered">
+                        {% if acc.balance_type == 'debit' %}
+                            <span class="icon">{% icon 'bi:arrow-bar-down' 24 %}</span>
+                        {% elif acc.balance_type == 'credit' %}
+                            <span class="icon">{% icon 'bi:arrow-bar-up' 24 %}</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% currency_symbol %}{{ acc.balance | currency_format }}
+                    </td>
+                </tr>
+            {% endfor %}
+            <tr class="has-text-weight-bold">
+                <td>
+                    {% trans 'Total Assets' %}
+                </td>
+                <td></td>
+                {% if by_unit %}<td></td>{% endif %}
+                <td></td>
+                <td>
+                    {% currency_symbol %}{{ tx_digest.group_balance.GROUP_ASSETS | currency_format }}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <h2 class="is-size-3">{% trans 'Liabilities' %}</h2>
+                </td>
+                <td></td>
+                {% if by_unit %}<td></td>{% endif %}
+                <td></td>
+                <td></td>
+            </tr>
+            {# LIABILITIES #}
+            {% for acc in tx_digest.group_account.GROUP_LIABILITIES %}
+                <tr>
+                    <td>
+                        {{ acc.code }}
+                    </td>
+                    <td>
+                        {{ acc.name }}
+                    </td>
+                    {% if by_unit %}
+                        <td>
+                            {% if acc.unit_name %}{{ acc.unit_name }}{% endif %}
+                        </td>
+                    {% endif %}
+                    <td class="has-text-centered">
+                        {% if acc.balance_type == 'debit' %}
+                            <span class="icon">{% icon 'bi:arrow-bar-down' 24 %}</span>
+                        {% elif acc.balance_type == 'credit' %}
+                            <span class="icon">{% icon 'bi:arrow-bar-up' 24 %}</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% currency_symbol %}{{ acc.balance | currency_format }}
+                    </td>
+                </tr>
+            {% endfor %}
+            <tr class="has-text-weight-bold">
+                <td>
+                    {% trans 'Total Liabilities' %}
+                </td>
+                <td></td>
+                {% if by_unit %}<td></td>{% endif %}
+                <td></td>
+                <td>
+                    {% currency_symbol %}{{ tx_digest.group_balance.GROUP_LIABILITIES | currency_format }}
+                </td>
+            </tr>
+            <tr class="is-primary">
+                <td>
+                    <h2 class="is-size-3">{% trans 'Equity' %}</h2>
+                </td>
+                <td></td>
+                {% if by_unit %}<td></td>{% endif %}
+                <td></td>
+                <td></td>
+            </tr>
+            {# CAPITAL #}
+            {% for acc in tx_digest.group_account.GROUP_CAPITAL %}
+                <tr>
+                    <td>
+                        {{ acc.code }}
+                    </td>
+                    <td>
+                        {{ acc.name }}
+                    </td>
+                    {% if by_unit %}
+                        <td>
+                            {% if acc.unit_name %}{{ acc.unit_name }}{% endif %}
+                        </td>
+                    {% endif %}
+                    <td class="has-text-centered">
+                        {% if acc.balance_type == 'debit' %}
+                            <span class="icon">{% icon 'bi:arrow-bar-down' 24 %}</span>
+                        {% elif acc.balance_type == 'credit' %}
+                            <span class="icon">{% icon 'bi:arrow-bar-up' 24 %}</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% currency_symbol %}{{ acc.balance | currency_format }}
+                    </td>
+                </tr>
+            {% endfor %}
+            <tr class="has-text-weight-bold">
+                <td>
+                    {% trans 'Total Capital' %}
+                </td>
+                <td></td>
+                {% if by_unit %}<td></td>{% endif %}
+                <td></td>
+                <td>
+                    {% currency_symbol %}{{ tx_digest.group_balance.GROUP_CAPITAL | currency_format }}
+                </td>
+            </tr>
+            <tr class="has-text-weight-bold">
+                <td>
+                    {% trans 'Retained Earnings' %}
+                </td>
+                <td></td>
+                {% if by_unit %}<td></td>{% endif %}
+                <td></td>
+                <td>
+                    {% currency_symbol %}{{ tx_digest.group_balance.GROUP_EARNINGS | currency_format }}
+                </td>
+            </tr>
+            <tr class="has-text-weight-bold">
+                <td>
+                    {% trans 'Total Equity' %}
+                </td>
+                <td></td>
+                {% if by_unit %}
+                    <td></td>
+                {% endif %}
+                <td></td>
+                <td>
+                    {% currency_symbol %}{{ tx_digest.group_balance.GROUP_EQUITY | currency_format }}
+                </td>
+            </tr>
+            <tr class="has-text-weight-bold">
+                <td>
+                    {% trans 'Total Equity + Liabilities' %}
+                </td>
+                <td></td>
+                {% if by_unit %}
+                    <td></td>
+                {% endif %}
+                <td></td>
+                <td>
+                    {% currency_symbol %}{{ tx_digest.group_balance.GROUP_LIABILITIES_EQUITY | currency_format }}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/bank_accounts_table.html b/tests/django_ledger/tags/bank_accounts_table.html
new file mode 100644
index 0000000..37c5050
--- /dev/null
+++ b/tests/django_ledger/tags/bank_accounts_table.html
@@ -0,0 +1,57 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr>
+                <th class="has-text-centered">Name</th>
+                <th class="has-text-centered">Account Number</th>
+                <th class="has-text-centered">Routing Number</th>
+                <th class="has-text-centered">Type</th>
+                <th class="has-text-centered">Cash Account</th>
+                <th class="has-text-centered">Active</th>
+                <th class="has-text-centered">Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for bank_acc in bank_account_qs %}
+                <tr class="has-text-centered">
+                    <td>{{ bank_acc.name }}</td>
+                    <td>{{ bank_acc.account_number | last_four }}</td>
+                    <td>{{ bank_acc.routing_number | last_four }}</td>
+                    <td>{{ bank_acc.get_account_type_display }}</td>
+                    <td>{{ bank_acc.cash_account }}</td>
+                    <td>
+                        {% if bank_acc.active %}
+                            <span class="icon has-text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
+                        {% else %}
+                            <span class="icon is-small has-text-danger">
+                                {% icon 'maki:roadblock-11' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        <div class="dropdown is-right is-hoverable" id="bank-action-{{ bank_acc.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>{% trans 'Actions' %}</span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ bank_acc.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a href="{% url 'django_ledger:bank-account-update' entity_slug=entity_slug bank_account_pk=bank_acc.uuid %}"
+                                       class="dropdown-item has-text-weight-bold has-text-info">
+                                        {% trans 'Update' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/bill_item_formset.html b/tests/django_ledger/tags/bill_item_formset.html
new file mode 100644
index 0000000..494884a
--- /dev/null
+++ b/tests/django_ledger/tags/bill_item_formset.html
@@ -0,0 +1,71 @@
+{% load trans from i18n %}
+{% load django_ledger %}
+<form action="{% url 'django_ledger:bill-update-items' entity_slug=entity_slug bill_pk=bill_pk %}" method="post">
+    <div class="columns is-multiline">
+        <div class="column is-12">
+            <h1 class="is-size-1">{% trans 'Bill Items' %}</h1>
+        </div>
+        <div class="column is-12">
+            <div class="table-container">
+                {% csrf_token %}
+                {{ item_formset.non_form_errors }}
+                {{ item_formset.management_form }}
+                <table class="table is-fullwidth is-narrow is-striped is-bordered">
+                    <thead>
+                        <tr>
+                            <th>{% trans 'Item' %}</th>
+                            <th>{% trans 'Unit Cost' %}</th>
+                            <th>{% trans 'Quantity' %}</th>
+                            <th>{% trans 'Unit' %}</th>
+                            <th>{% trans 'Total' %}</th>
+                            <th>{% trans 'Delete' %}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for f in item_formset %}
+                            <tr>
+                                <td>
+                                    {% for hidden_field in f.hidden_fields %}
+                                        {{ hidden_field }}
+                                    {% endfor %}
+                                    {{ f.item_model }}
+                                </td>
+                                <td id="{{ f.instance.html_id_unit_cost }}">
+                                    {{ f.unit_cost }}
+                                </td>
+                                <td id="{{ f.instance.html_id_quantity }}">
+                                    {{ f.quantity }}
+                                </td>
+                                <td>{{ f.entity_unit }}</td>
+                                <td class="has-text-right" id="{{ f.instance.html_id_total_amount }}">
+                                    {% currency_symbol %}{{ f.instance.total_amount | currency_format }}
+                                </td>
+                                <td class="has-text-centered">
+                                    {% if item_formset.can_delete %}{{ f.DELETE }}{% endif %}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th class="has-text-right">{% trans 'Total' %}</th>
+                        <th class="has-text-right">
+                            {% currency_symbol %}{{ total_amount_due | currency_format }}
+                        </th>
+                        <th></th>
+                    </tr>
+                    </tfoot>
+                </table>
+            </div>
+        </div>
+        <div class="column is-12">
+            <a href="{% url 'django_ledger:product-create' entity_slug=entity_slug %}" class="button is-primary">
+                {% trans 'New Item' %}
+            </a>
+            <button class="button is-primary">{% trans 'Save' %}</button>
+        </div>
+    </div>
+</form>
diff --git a/tests/django_ledger/tags/bill_table.html b/tests/django_ledger/tags/bill_table.html
new file mode 100644
index 0000000..38a386c
--- /dev/null
+++ b/tests/django_ledger/tags/bill_table.html
@@ -0,0 +1,94 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr>
+                <th>Bill Number</th>
+                <th>Bill Date</th>
+                <th>Bill From</th>
+                <th>Amount</th>
+                <th>Payments</th>
+                <th>Is Paid?</th>
+                <th>Past Due?</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for bill in bills %}
+                <tr>
+                    <td>{{ bill.bill_number }}</td>
+                    <td>{{ bill.date }}</td>
+                    <td>
+                        {{ bill.vendor.vendor_name }}
+                    </td>
+                    <td>
+                        ${{ bill.amount_due | currency_format }}
+                    </td>
+                    <td>
+                        ${{ bill.amount_paid | currency_format }}
+                    </td>
+                    <td class="has-text-centered">
+                        {% if bill.paid %}
+                            <span class="icon is-small has-text-success">
+                                {% icon 'bi:check-circle-fill' 24 %}
+                            </span>
+                        {% else %}
+                            <span class="icon is-small has-text-danger">
+                                {% icon 'clarity:no-access-solid' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td class="has-text-centered">
+                        {% if bill.is_past_due %}
+                            <span class="icon is-small has-text-success">
+                                {% icon 'bi:check-circle-fill' 24 %}
+                            </span>
+                        {% else %}
+                            <span class="icon is-small has-text-danger">
+                                {% icon 'clarity:no-access-solid' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td class="has-text-centered">
+                        <div class="dropdown is-right is-hoverable" id="bill-action-{{ bill.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>
+                                        Actions
+                                    </span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ bill.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a href="{% url 'django_ledger:bill-detail' entity_slug=entity_slug bill_pk=bill.uuid %}"
+                                       class="dropdown-item has-text-success">
+                                        Details
+                                    </a>
+                                    <a href="{% url 'django_ledger:bill-update' entity_slug=entity_slug bill_pk=bill.uuid %}"
+                                       class="dropdown-item has-text-warning-dark">
+                                        Update
+                                    </a>
+                                    {% if not bill.paid %}
+                                        {% mark_as_paid bill entity_slug %}
+                                        <a onclick="djLedger.showModal('{{ bill.get_html_id }}')"
+                                           class="dropdown-item has-text-weight-bold has-text-info">
+                                            {% trans 'Mark as Paid' %}
+                                        </a>
+                                    {% endif %}
+                                    <a href="{% url 'django_ledger:bill-delete' entity_slug=entity_slug bill_pk=bill.uuid %}"
+                                       class="dropdown-item has-text-weight-bold has-text-danger">
+                                        {% trans ' Delete' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/breadcrumbs.html b/tests/django_ledger/tags/breadcrumbs.html
new file mode 100644
index 0000000..d1e1b82
--- /dev/null
+++ b/tests/django_ledger/tags/breadcrumbs.html
@@ -0,0 +1,38 @@
+<nav class="breadcrumb" aria-label="breadcrumbs">
+    <ul>
+        <li>
+            <a href="{% url 'django_ledger:dashboard' %}">
+                <span class="icon is-small">
+                    <i class="mdi mdi-view-dashboard-variant" aria-hidden="true"></i>
+                </span>
+                <span>Dashboard</span>
+            </a>
+        </li>
+        {% if entity_slug %}
+            <li>
+                <a href="#">
+                    <span class="icon is-small">
+                        <i class="fas fa-book" aria-hidden="true"></i>
+                    </span>
+                    <span>Documentation</span>
+                </a>
+            </li>
+            <li>
+                <a href="#">
+                    <span class="icon is-small">
+                        <i class="fas fa-puzzle-piece" aria-hidden="true"></i>
+                    </span>
+                    <span>Components</span>
+                </a>
+            </li>
+            <li class="is-active">
+                <a href="#">
+                    <span class="icon is-small">
+                        <i class="fas fa-thumbs-up" aria-hidden="true"></i>
+                    </span>
+                    <span>Breadcrumb</span>
+                </a>
+            </li>
+        {% endif %}
+    </ul>
+</nav>
diff --git a/tests/django_ledger/tags/chart_container.html b/tests/django_ledger/tags/chart_container.html
new file mode 100644
index 0000000..2d66ad2
--- /dev/null
+++ b/tests/django_ledger/tags/chart_container.html
@@ -0,0 +1,3 @@
+<div class="container">
+    <canvas id="{{ chart_id }}" data-endpoint="{{ endpoint }}"></canvas>
+</div>
diff --git a/tests/django_ledger/tags/customer_table.html b/tests/django_ledger/tags/customer_table.html
new file mode 100644
index 0000000..245c19a
--- /dev/null
+++ b/tests/django_ledger/tags/customer_table.html
@@ -0,0 +1,41 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr>
+                <th class="has-text-centered">Customer</th>
+                <th class="has-text-centered">Address</th>
+                <th class="has-text-centered">Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for customer in customers %}
+                <tr class="has-text-centered">
+                    <td>{{ customer.customer_name }}</td>
+                    <td>{{ customer.address_1 }}</td>
+                    <td>
+                        <div class="dropdown is-right is-hoverable" id="customer-action-{{ customer.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>Actions</span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ customer.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a href="{% url 'django_ledger:customer-update' entity_slug=view.kwargs.entity_slug customer_pk=customer.uuid %}"
+                                       class="dropdown-item has-text-weight-bold has-text-info">
+                                        {% trans 'Update' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/data_import_job_list_table.html b/tests/django_ledger/tags/data_import_job_list_table.html
new file mode 100644
index 0000000..ff004d4
--- /dev/null
+++ b/tests/django_ledger/tags/data_import_job_list_table.html
@@ -0,0 +1,60 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped mb-3 django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr>
+                <th>Status</th>
+                <th>Description</th>
+                <th>Ledger</th>
+                <th>Created</th>
+                <th>Completed</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for job in import_jobs %}
+                <tr>
+                    <td>{{ job.status }}</td>
+                    <td>{{ job.description }}</td>
+                    <td>{{ job.ledger }}</td>
+                    <td>{{ job.created }}</td>
+                    <td>
+                        {% if job.completed %}
+                            <span class="icon is-small has-text-success">
+                                <i class="icon mdi mdi-check-bold"></i>
+                            </span>
+                        {% else %}
+                            <span class="icon is-small has-text-danger">
+                                <i class="icon mdi mdi-minus-circle"></i>
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        <div class="dropdown is-right" id="customer-action-{{ job.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        onclick="djLedger.toggleDropdown('customer-action-{{ job.uuid }}')"
+                                        aria-controls="dropdown-menu">
+                                    <span>
+                                        Actions
+                                    </span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ customer.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a href="{% url 'django_ledger:data-import-job-txs' entity_slug=view.kwargs.entity_slug job_pk=job.uuid %}"
+                                       class="dropdown-item has-text-weight-bold has-text-info">
+                                        {% trans 'Manage' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/data_import_job_txs_imported.html b/tests/django_ledger/tags/data_import_job_txs_imported.html
new file mode 100644
index 0000000..38cf19e
--- /dev/null
+++ b/tests/django_ledger/tags/data_import_job_txs_imported.html
@@ -0,0 +1,32 @@
+<div class="table-container">
+    <table class="table is-narrow is-fullwidth is-bordered django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr class="has-text-centered is-error">
+                <th>Dated Posted</th>
+                <th>Description</th>
+                <th>Amount</th>
+                <th>Map To</th>
+                <th>TX</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for imported_tx in imported_txs %}
+                <tr>
+                    <td>{{ imported_tx.date_posted }}</td>
+                    <td>{{ imported_tx.name }}</td>
+                    <td class="{% if imported_tx.amount < 0 %}has-text-danger{% endif %} has-text-centered">
+                    ${{ imported_tx.amount }}
+                </td>
+                <td>{{ imported_tx.earnings_account }}</td>
+                <td>{{ imported_tx.tx }}</td>
+                <td class="has-text-centered">
+                    <a href="" class="button is-small is-primary">
+                        View
+                    </a>
+                </td>
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
+</div>
diff --git a/tests/django_ledger/tags/data_import_job_txs_table.html b/tests/django_ledger/tags/data_import_job_txs_table.html
new file mode 100644
index 0000000..83a36a8
--- /dev/null
+++ b/tests/django_ledger/tags/data_import_job_txs_table.html
@@ -0,0 +1,53 @@
+{% load i18n %}
+<form action="{% url 'django_ledger:data-import-job-txs' entity_slug=view.kwargs.entity_slug job_pk=view.kwargs.job_pk %}"
+      method="post">
+    {{ staged_txs_formset.non_form_errors }}
+    {% if staged_txs_formset.errors %}{{ staged_txs_formset.errors }}{% endif %}
+    {{ staged_txs_formset.management_form }}
+    {% csrf_token %}
+    <div class="table-container">
+        <table class="table is-narrow is-fullwidth is-bordered is-striped django-ledger-table-bottom-margin-75">
+            <thead>
+                <tr class="has-text-centered is-error">
+                    <th>Dated Posted</th>
+                    <th>Description</th>
+                    <th>Amount</th>
+                    <th>Map To</th>
+                    <th>Commit TX</th>
+                {#
+<th>TX</th>
+                #}
+            </tr>
+        </thead>
+        <tbody>
+            {% for txf in staged_txs_formset %}
+                <tr>
+                    {% for hidden_field in txf.hidden_fields %}
+                        {{ hidden_field }}
+                    {% endfor %}
+                    <td>{{ txf.date_posted.value }}</td>
+                    <td>{{ txf.name.value }}</td>
+                    <td class="{% if txf.amount.value < 0 %}has-text-danger{% endif %}">
+                    ${{ txf.amount.value }}
+                </td>
+                <td>{{ txf.earnings_account }}</td>
+                <td>{{ txf.tx_import }}</td>
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
+</div>
+<div class="columns is-centered">
+<div class="column is-4 has-text-centered">
+    <button class="button is-primary is-small is-fullwidth">
+        {% trans 'Save/Import' %}
+    </button>
+</div>
+<div class="column is-4 has-text-centered">
+    <a class="button is-info is-small is-fullwidth"
+       href="{% url 'django_ledger:bank-account-update' entity_slug=view.kwargs.entity_slug bank_account_pk=bank_account_model.uuid %}">
+        {% trans 'Bank Account' %}
+    </a>
+</div>
+</div>
+</form>
diff --git a/tests/django_ledger/tags/date_picker.html b/tests/django_ledger/tags/date_picker.html
new file mode 100644
index 0000000..cbe5666
--- /dev/null
+++ b/tests/django_ledger/tags/date_picker.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+{% if date_navigation_url %}
+    <button id="{{ date_picker_id }}"
+            data-baseurl="{{ date_navigation_url }}"
+            class="button is-small is-rounded is-dark is-outlined">
+        {% trans 'Select Date' %}
+    </button>
+{% endif %}
diff --git a/tests/django_ledger/tags/default_entity.html b/tests/django_ledger/tags/default_entity.html
new file mode 100644
index 0000000..1a61d95
--- /dev/null
+++ b/tests/django_ledger/tags/default_entity.html
@@ -0,0 +1,10 @@
+<form id="djetler-set-entity-form-{{ form_id }}" action="{% url 'django_ledger:entity-set-default' %}" method="post">
+    {% csrf_token %}
+    <div class="field">
+        <div class="control">
+            <div class="select is-inf is-small">
+                {{ default_entity_form.entity_model }}
+            </div>
+        </div>
+    </div>
+</form>
diff --git a/tests/django_ledger/tags/expense_item_table.html b/tests/django_ledger/tags/expense_item_table.html
new file mode 100644
index 0000000..1e7c423
--- /dev/null
+++ b/tests/django_ledger/tags/expense_item_table.html
@@ -0,0 +1,43 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr>
+                <th>Item</th>
+                <th>UOM</th>
+                <th>Expense Account</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for expense_item in expense_list %}
+                <tr>
+                    <td>{{ expense_item.name }}</td>
+                    <td>{{ expense_item.uom }}</td>
+                    <td>{{ expense_item.expense_account }}</td>
+                    <td>
+                        <div class="dropdown is-right is-hoverable" id="invoice-action-{{ invoice.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>Actions</span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ expense_item.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a href="{% url 'django_ledger:expense-update' entity_slug=entity_slug item_pk=expense_item.uuid %}"
+                                       class="dropdown-item has-text-success">
+                                        {% trans 'Update' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/feedback_button.html b/tests/django_ledger/tags/feedback_button.html
new file mode 100644
index 0000000..7a91393
--- /dev/null
+++ b/tests/django_ledger/tags/feedback_button.html
@@ -0,0 +1,87 @@
+{% load i18n %}
+{% load icon from django_ledger %}
+<div class="navbar-item has-dropdown is-hoverable">
+    <a class="navbar-link">{% trans 'Feedback' %}</a>
+    <div class="navbar-dropdown">
+        <a href="javascript:djLedger.toggleDropdown('{{ bug_modal_html_id }}')" class="navbar-item">
+            {% trans 'Report a Bug' %}
+        </a>
+        <a href="javascript:djLedger.toggleDropdown('{{ feature_modal_html_id }}')" class="navbar-item">
+            {% trans 'Request a Feature' %}
+        </a>
+    </div>
+</div>
+{# BUG MODAL #}
+<div class="modal" id="{{ bug_modal_html_id }}">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <form action="{% url 'django_ledger:bug-report' %}?next={{ next_url }}" method="post">
+            {% csrf_token %}
+            <header class="modal-card-head">
+                <p class="modal-card-title">
+                    {% trans 'Report a Bug' %}
+                </p>
+                <button class="delete"
+                        aria-label="close"
+                        onclick="djLedger.toggleModal('{{ bug_modal_html_id }}')"></button>
+            </header>
+            <section class="modal-card-body">
+                <div class="container">
+                    <div class="columns is-multiline">
+                        <div class="column is-12">
+                            <h2>Thank you for helping make Django Ledger better...</h2>
+                        </div>
+                        <div class="column is-12">
+                            {{ bug_form }}
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <footer class="modal-card-foot">
+                <button type="submit" class="button is-success">
+                    Submit
+                </button>
+                <button class="button" onclick="djLedger.toggleModal('{{ bug_modal_html_id }}')">
+                    Cancel
+                </button>
+            </footer>
+        </form>
+    </div>
+</div>
+{# FEATURE MODAL #}
+<div class="modal" id="{{ feature_modal_html_id }}">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <form action="{% url 'django_ledger:new-feature' %}?next={{ next_url }}" method="post">
+            {% csrf_token %}
+            <header class="modal-card-head">
+                <p class="modal-card-title">
+                    {% trans 'Request a New Feature' %}
+                </p>
+                <button class="delete"
+                        aria-label="close"
+                        onclick="djLedger.toggleModal('{{ feature_modal_html_id }}')"></button>
+            </header>
+            <section class="modal-card-body">
+                <div class="container">
+                    <div class="columns is-multiline">
+                        <div class="column is-12">
+                            <h2>Thank you for helping make Django Ledger better...</h2>
+                        </div>
+                        <div class="column is-12">
+                            {{ feature_form }}
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <footer class="modal-card-foot">
+                <button type="submit" class="button is-success">
+                    Send
+                </button>
+                <button class="button" onclick="djLedger.toggleModal('{{ feature_modal_html_id }}')">
+                    Cancel
+                </button>
+            </footer>
+        </form>
+    </div>
+</div>
diff --git a/tests/django_ledger/tags/filters.html b/tests/django_ledger/tags/filters.html
new file mode 100644
index 0000000..8c5d44d
--- /dev/null
+++ b/tests/django_ledger/tags/filters.html
@@ -0,0 +1,11 @@
+{% load django_ledger %}
+<div class="card">
+    <header class="card-header">
+        <p class="card-header-title">
+            Filters
+        </p>
+    </header>
+    <div class="card-content">
+        {% activity_filter %}
+    </div>
+</div>
diff --git a/tests/django_ledger/tags/icon.html b/tests/django_ledger/tags/icon.html
new file mode 100644
index 0000000..0e7d770
--- /dev/null
+++ b/tests/django_ledger/tags/icon.html
@@ -0,0 +1 @@
+<i class="iconify djl-icon-{{ size }}" data-icon="{{ icon }}" data-toggle="true"></i>
diff --git a/tests/django_ledger/tags/income_statement.html b/tests/django_ledger/tags/income_statement.html
new file mode 100644
index 0000000..fdcc6d7
--- /dev/null
+++ b/tests/django_ledger/tags/income_statement.html
@@ -0,0 +1,112 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped">
+        <tr>
+            <th>Account Number</th>
+            <th>Description</th>
+            {% if by_unit %}<th>Unit</th>{% endif %}
+            <th>Balance Type</th>
+            <th>Balance</th>
+        </tr>
+        <tr>
+            <td>
+                <h2 class="is-size-3">{% trans 'Income' %}</h2>
+            </td>
+            <td></td>
+            {% if by_unit %}<td></td>{% endif %}
+            <td></td>
+            <td></td>
+        </tr>
+        {% for acc in tx_digest.group_account.GROUP_INCOME %}
+            <tr>
+                <td>{{ acc.code }}</td>
+                <td>
+                    {{ acc.name }}
+                </td>
+                {% if by_unit %}
+                    <td>
+                        {% if acc.unit_name %}{{ acc.unit_name }}{% endif %}
+                    </td>
+                {% endif %}
+                <td class="has-text-centered">
+                    {% if acc.balance_type == 'debit' %}
+                        <span class="icon">{% icon 'bi:arrow-bar-down' 24 %}</span>
+                    {% elif acc.balance_type == 'credit' %}
+                        <span class="icon">{% icon 'bi:arrow-bar-up' 24 %}</span>
+                    {% endif %}
+                </td>
+                <td>
+                    {% currency_symbol %}{{ acc.balance | currency_format }}
+                </td>
+            </tr>
+        {% endfor %}
+        <tr class="has-text-weight-bold">
+            <td>
+                Total Income
+            </td>
+            <td></td>
+            {% if by_unit %}<td></td>{% endif %}
+            <td></td>
+            <td>
+                {% currency_symbol %}{{ tx_digest.group_balance.GROUP_INCOME | currency_format }}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <h2 class="is-size-3">{% trans 'Expenses' %}</h2>
+            </td>
+            <td></td>
+            <td></td>
+            {% if by_unit %}<td></td>{% endif %}
+            <td></td>
+        </tr>
+        {% for acc in tx_digest.group_account.GROUP_EXPENSES %}
+            <tr>
+                <td>
+                    {{ acc.code }}
+                </td>
+                <td>
+                    {{ acc.name }}
+                </td>
+                {% if by_unit %}
+                    <td>
+                        {% if acc.unit_name %}{{ acc.unit_name }}{% endif %}
+                    </td>
+                {% endif %}
+                <td class="has-text-centered">
+                    {% if acc.balance_type == 'debit' %}
+                        <span class="icon">{% icon 'bi:arrow-bar-down' 24 %}</span>
+                    {% elif acc.balance_type == 'credit' %}
+                        <span class="icon">{% icon 'bi:arrow-bar-up' 24 %}</span>
+                    {% endif %}
+                </td>
+                <td>
+                    {% currency_symbol %}{{ acc.balance | reverse_sing | currency_format }}
+                </td>
+            </tr>
+        {% endfor %}
+        <tr class="has-text-weight-bold">
+            <td>
+                Total Expenses
+            </td>
+            <td></td>
+            {% if by_unit %}<td></td>{% endif %}
+            <td></td>
+            <td>
+                {% currency_symbol %}{{ tx_digest.group_balance.GROUP_EXPENSES | reverse_sing | currency_format }}
+            </td>
+        </tr>
+        <tr class="has-text-weight-bold">
+            <td>
+                Total Income (Loss)
+            </td>
+            <td></td>
+            {% if by_unit %}<td></td>{% endif %}
+            <td></td>
+            <td>
+                {% currency_symbol %}{{ tx_digest.group_balance.GROUP_EARNINGS | currency_format }}
+            </td>
+        </tr>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/inventory_item_table.html b/tests/django_ledger/tags/inventory_item_table.html
new file mode 100644
index 0000000..8a1dc40
--- /dev/null
+++ b/tests/django_ledger/tags/inventory_item_table.html
@@ -0,0 +1,45 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr>
+                <th>Item</th>
+                <th>UOM</th>
+                <th>Inventory Account</th>
+                <th>COGS Account</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for inv_item in inventory_item_list %}
+                <tr>
+                    <td>{{ inv_item.name }}</td>
+                    <td>{{ inv_item.uom }}</td>
+                    <td>{{ inv_item.inventory_account }}</td>
+                    <td>{{ inv_item.cogs_account }}</td>
+                    <td>
+                        <div class="dropdown is-right is-hoverable" id="inv-item-action-{{ inv_item.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>Actions</span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ inv_item.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a href="{% url 'django_ledger:inventory-item-update' entity_slug=entity_slug item_pk=inv_item.uuid %}"
+                                       class="dropdown-item has-text-success">
+                                        {% trans 'Update' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/invoice_item_formset.html b/tests/django_ledger/tags/invoice_item_formset.html
new file mode 100644
index 0000000..9140c47
--- /dev/null
+++ b/tests/django_ledger/tags/invoice_item_formset.html
@@ -0,0 +1,69 @@
+{% load trans from i18n %}
+{% load django_ledger %}
+<form action="{% url 'django_ledger:invoice-update-items' entity_slug=entity_slug invoice_pk=invoice_pk %}"
+      method="post">
+    <div class="columns is-multiline">
+        <div class="column is-12">
+            <h1 class="is-size-1">{% trans 'Invoice Items' %}</h1>
+        </div>
+        <div class="column is-12">
+            <div class="table-container">
+                {% csrf_token %}
+                {{ item_formset.non_form_errors }}
+                {{ item_formset.management_form }}
+                <table class="table is-fullwidth is-narrow is-striped is-bordered">
+                    <thead>
+                        <tr>
+                            <th>{% trans 'Item' %}</th>
+                            <th>{% trans 'Unit Cost' %}</th>
+                            <th>{% trans 'Quantity' %}</th>
+                            <th>{% trans 'Total' %}</th>
+                            <th>{% trans 'Delete' %}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for f in item_formset %}
+                            <tr>
+                                <td>
+                                    {% for hidden_field in f.hidden_fields %}
+                                        {{ hidden_field }}
+                                    {% endfor %}
+                                    {{ f.item_model }}
+                                </td>
+                                <td id="{{ f.instance.html_id_unit_cost }}">
+                                    {{ f.unit_cost }}
+                                </td>
+                                <td id="{{ f.instance.html_id_quantity }}">
+                                    {{ f.quantity }}
+                                </td>
+                                <td class="has-text-right" id="{{ f.instance.html_id_total_amount }}">
+                                    {% currency_symbol %}{{ f.instance.total_amount | currency_format }}
+                                </td>
+                                <td class="has-text-centered">
+                                    {% if item_formset.can_delete %}{{ f.DELETE }}{% endif %}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <th></th>
+                        <th></th>
+                        <th class="has-text-right">{% trans 'Total' %}</th>
+                        <th class="has-text-right">
+                            {% currency_symbol %}{{ total_amount_due | currency_format }}
+                        </th>
+                        <th></th>
+                    </tr>
+                    </tfoot>
+                </table>
+            </div>
+        </div>
+        <div class="column is-12">
+            <a href="{% url 'django_ledger:product-create' entity_slug=entity_slug %}" class="button is-primary">
+                {% trans 'New Item' %}
+            </a>
+            <button class="button is-primary">{% trans 'Save' %}</button>
+        </div>
+    </div>
+</form>
diff --git a/tests/django_ledger/tags/invoice_table.html b/tests/django_ledger/tags/invoice_table.html
new file mode 100644
index 0000000..1c00ede
--- /dev/null
+++ b/tests/django_ledger/tags/invoice_table.html
@@ -0,0 +1,94 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr>
+                <th>Invoice Number</th>
+                <th>Invoice Date</th>
+                <th>Invoiced To</th>
+                <th>Amount</th>
+                <th>Payments</th>
+                <th>Is Paid?</th>
+                <th>Past Due?</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for invoice in invoices %}
+                <tr>
+                    <td>{{ invoice.invoice_number }}</td>
+                    <td>{{ invoice.date }}</td>
+                    <td>
+                        {{ invoice.customer.customer_name }}
+                    </td>
+                    <td>
+                        ${{ invoice.amount_due | currency_format }}
+                    </td>
+                    <td>
+                        ${{ invoice.amount_paid | currency_format }}
+                    </td>
+                    <td>
+                        {% if invoice.paid %}
+                            <span class="icon is-small has-text-success">
+                                {% icon 'bi:check-circle-fill' 24 %}
+                            </span>
+                        {% else %}
+                            <span class="icon is-small has-text-danger">
+                                {% icon 'clarity:no-access-solid' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if invoice.is_past_due %}
+                            <span class="icon is-small has-text-success">
+                                {% icon 'bi:check-circle-fill' 24 %}
+                            </span>
+                        {% else %}
+                            <span class="icon is-small has-text-danger">
+                                {% icon 'clarity:no-access-solid' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        <div class="dropdown is-right is-hoverable" id="invoice-action-{{ invoice.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>
+                                        {% trans 'Actions' %}
+                                    </span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ invoice.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a href="{% url 'django_ledger:invoice-detail' entity_slug=entity_slug invoice_pk=invoice.uuid %}"
+                                       class="dropdown-item has-text-success">
+                                        Details
+                                    </a>
+                                    <a href="{% url 'django_ledger:invoice-update' entity_slug=entity_slug invoice_pk=invoice.uuid %}"
+                                       class="dropdown-item has-text-success">
+                                        Update
+                                    </a>
+                                    {% if not invoice.paid %}
+                                        <a onclick="djLedger.showModal('{{ invoice.get_html_id }}')"
+                                           class="dropdown-item has-text-weight-bold has-text-info">
+                                            {% trans 'Mark as Paid' %}
+                                        </a>
+                                        {% mark_as_paid invoice entity_slug %}
+                                    {% endif %}
+                                    <a href="{% url 'django_ledger:invoice-delete' entity_slug=entity_slug invoice_pk=invoice.uuid %}"
+                                       class="dropdown-item has-text-weight-bold has-text-danger">
+                                        {% trans ' Delete' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/jes_table.html b/tests/django_ledger/tags/jes_table.html
new file mode 100644
index 0000000..4eaac25
--- /dev/null
+++ b/tests/django_ledger/tags/jes_table.html
@@ -0,0 +1,78 @@
+{% load django_ledger %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped django-ledger-table-bottom-margin-150">
+        <thead>
+            <tr class="has-text-centered">
+                <th>Description</th>
+                <th>Activity</th>
+                <th>JE Date</th>
+                <th>Posted</th>
+                <th>Locked</th>
+                <th>Created</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for je in jes %}
+                <tr class="has-text-centered">
+                    <td>{{ je.description }}</td>
+                    <td>{{ je.get_activity_display }}</td>
+                    <td>{{ je.date }}</td>
+                    <td>
+                        {% if je.posted %}
+                            <span class="icon has-text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
+                        {% else %}
+                            <span class="icon is-small has-text-danger">
+                                {% icon 'maki:roadblock-11' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if je.locked %}
+                            <span class="icon has-text-success-dark">
+                                {% icon 'bi:lock-fill' 24 %}
+                            </span>
+                        {% else %}
+                            <span class="icon has-text-danger-dark">
+                                {% icon 'bx:bx-lock-open-alt' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {{ je.created | timesince }}
+                    </td>
+                    <td>
+                        <div class="dropdown is-right is-hoverable" id="je-action-{{ je.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>
+                                        Actions
+                                    </span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ je.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a class="dropdown-item"
+                                       href="{% url 'django_ledger:je-update' entity_slug=entity_slug ledger_pk=ledger_pk je_pk=je.uuid %}">
+                                        Edit
+                                    </a>
+                                    <a class="dropdown-item"
+                                       href="{% url 'django_ledger:je-detail' entity_slug=entity_slug ledger_pk=ledger_pk je_pk=je.uuid %}">
+                                        View
+                                    </a>
+                                    <a class="dropdown-item"
+                                       href="{% url 'django_ledger:txs-journal-entry' entity_slug=entity_slug ledger_pk=ledger_pk je_pk=je.uuid %}">
+                                        Txs
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/ledgers_table.html b/tests/django_ledger/tags/ledgers_table.html
new file mode 100644
index 0000000..890ef6d
--- /dev/null
+++ b/tests/django_ledger/tags/ledgers_table.html
@@ -0,0 +1,67 @@
+{% now "Y" as current_year %}
+{% load icon from django_ledger %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Detail</th>
+                <th>Balance Sheet</th>
+                <th>Income Statement</th>
+                <th>Posted</th>
+                <th>Locked</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for ledger in ledgers %}
+                <tr>
+                    <td>{{ ledger.name }}</td>
+                    <td>
+                        <a class="button is-info is-small is-outlined"
+                           href="{% url 'django_ledger:je-list' entity_slug=entity_slug ledger_pk=ledger.uuid %}">
+                            Journal
+                            Entries
+                        </a>
+                    </td>
+                    <td>
+                        <a class="button is-info is-small is-outlined"
+                           href="{% url 'django_ledger:ledger-bs-year' entity_slug=entity_slug ledger_pk=ledger.uuid year=current_year %}">
+                            Balance
+                            Sheet
+                        </a>
+                    </td>
+                    <td>
+                        <a class="button is-info is-small is-outlined"
+                           href="{% url 'django_ledger:ledger-ic-year' entity_slug=entity_slug ledger_pk=ledger.uuid year=current_year %}">
+                            Income
+                            Statement
+                        </a>
+                    </td>
+                    <td>
+                        {% if ledger.posted %}
+                            <span class="icon has-text-success">{% icon 'ant-design:check-circle-filled' 24 %}</span>
+                        {% else %}
+                            <span class="icon is-small has-text-danger">
+                                {% icon 'maki:roadblock-11' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if ledger.locked %}
+                            <span class="icon has-text-success">{% icon 'bi:lock-fill' 24 %}</span>
+                        {% else %}
+                            <span class="icon has-text-danger">{% icon 'bx:bx-lock-open-alt' 24 %}</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        <a class="button is-info is-small"
+                           href="{% url 'django_ledger:ledger-update' entity_slug=entity_slug ledger_pk=ledger.uuid %}">
+                            Edit
+                        </a>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/menu.html b/tests/django_ledger/tags/menu.html
new file mode 100644
index 0000000..cb777a4
--- /dev/null
+++ b/tests/django_ledger/tags/menu.html
@@ -0,0 +1,56 @@
+{% load django_ledger %}
+{% load trans from i18n %}
+{% if style == 'desktop' %}
+    <div class="box">
+        <aside class="menu">
+            <p class="menu-label">
+                {% session_entity_name request %}
+            </p>
+            <ul class="menu-list">
+                {% for link in links %}
+                    {% if link.type == 'link' %}
+                        <li>
+                            <a href="{{ link.url }}">{{ link.title }}</a>
+                        </li>
+                    {% elif link.type == 'links' %}
+                        <li>
+                            <a>{{ link.title }}</a>
+                            <ul>
+                                {% for l in link.links %}
+                                    <li>
+                                        <a href="{{ l.url }}">{{ l.title }}</a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+            </ul>
+        </aside>
+    </div>
+    {# A menu that renders only on mobile devices when the burger menu is opened #}
+{% elif style == 'mobile' %}
+    <div class="navbar-start">
+        <div class="navbar-item has-text-weight-bold is-hidden-desktop">
+            {{ entity.name | upper }}
+        </div>
+        {% for link in links %}
+            {% if link.type == 'link' %}
+                <a class="navbar-item is-hidden-desktop" href="{{ link.url }}">
+                    {{ link.title }}
+                </a>
+            {% elif link.type == 'links' %}
+                <div class="navbar-item has-dropdown is-hoverable is-hidden-desktop">
+                    <a class="navbar-link">{{ link.title }}</a>
+                    <div class="navbar-dropdown">
+                        {% for l in link.links %}
+                            <a class="navbar-item" href="{{ l.url }}">
+                                {{ l.title }}
+                            </a>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+        {% endfor %}
+    </div>
+{% endif %}
diff --git a/tests/django_ledger/tags/modals.html b/tests/django_ledger/tags/modals.html
new file mode 100644
index 0000000..05f2e0f
--- /dev/null
+++ b/tests/django_ledger/tags/modals.html
@@ -0,0 +1,29 @@
+{% load i18n %}
+<div id="{{ object.get_html_id }}" class="modal">
+    <form name="{{ object.get_html_form_name }}" method="post" action="{{ action_url }}">
+        {% csrf_token %}
+    </form>
+    <div class="modal-background"></div>
+    <div class="modal-content">
+        <div class="card">
+            <div class="card-content">
+                <p class="is-size-4 has-font-weight-light">
+                    {{ message }}
+                </p>
+            </div>
+            <div class="card-footer">
+                <a onclick="djLedger.toggleModal('{{ object.get_html_id }}')"
+                   class="card-footer-item has-background-success-light">
+                    {% trans 'Cancel' %}
+                </a>
+                <a onclick="djLedger.submitForm( '{{ object.get_html_form_name }}', '{{ object.get_html_id }}')"
+                   class="card-footer-item has-background-info-light">
+                    {% trans 'Mark As Paid' %}
+                </a>
+            </div>
+        </div>
+    </div>
+    <button class="modal-close is-large"
+            aria-label="close"
+            onclick="djLedger.toggleModal('djl-modal-{{ object_name }}-{{ uuid }}')"></button>
+</div>
diff --git a/tests/django_ledger/tags/period_navigator.html b/tests/django_ledger/tags/period_navigator.html
new file mode 100644
index 0000000..849408f
--- /dev/null
+++ b/tests/django_ledger/tags/period_navigator.html
@@ -0,0 +1,54 @@
+{% load django_ledger %}
+{% load trans from i18n %}
+<div class="card">
+    <div class="card-content">
+        <div class="has-text-centered">
+            <h2 class="is-size-2 has-font-weight-medium">
+                {% if has_month %}{{ to_date | date:"F Y" }}{% endif %}
+                {% if has_quarter %}Q{{ quarter }} {{ year }}{% endif %}
+                {% if has_date %}{{ to_date | date }}{% endif %}
+            </h2>
+        </div>
+        <p>
+            Year:
+            <a href="{{ previous_year_url }}">
+                << {{ previous_year }}
+            </a>
+            |
+            <a href="{{ current_year_url }}">{{ year }}</a>
+            |
+            <a href="{{ next_year_url }}">{{ next_year }} >></a>
+        </p>
+        <p>
+            Quarter:
+            {% for q_url in quarter_urls %}
+                <a href="{{ q_url.url }}">{{ q_url.quarter_name }}</a>
+                {% if not forloop.last %}|{% endif %}
+            {% endfor %}
+        </p>
+        <p>
+            Month:
+            {% for m_url in month_urls %}
+                <a href="{{ m_url.url }}">{{ m_url.month_abbr }}</a>
+                {% if not forloop.last %}|{% endif %}
+            {% endfor %}
+        </p>
+        <div class="has-text-centered">
+            {% if has_date %}
+                <p class="has-text-weight-bold is-italic mt-2">
+                    {{ from_date | date:"m/d/Y" }}
+                </p>
+            {% else %}
+                <p class="has-text-weight-bold is-italic mt-2">
+                    {{ from_date | date:"m/d/Y" }}
+                    {% trans 'thru' %}
+                    {{ to_date | date:"m/d/Y" }}
+                </p>
+            {% endif %}
+            <a href="{{ current_month_url }}">{% trans 'Go To Current Month' %}</a>
+        </div>
+        <div class="has-text-centered">
+            {% date_picker date_navigation_url %}
+        </div>
+    </div>
+</div>
diff --git a/tests/django_ledger/tags/pns_table.html b/tests/django_ledger/tags/pns_table.html
new file mode 100644
index 0000000..dc8b602
--- /dev/null
+++ b/tests/django_ledger/tags/pns_table.html
@@ -0,0 +1,51 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr>
+                <th>Item</th>
+                <th>UOM</th>
+                <th>SKU</th>
+                <th>UPC</th>
+                <th>Earnings Account</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for pns in pns_list %}
+                <tr>
+                    <td>{{ pns.name }}</td>
+                    <td>{{ pns.uom }}</td>
+                    <td>{{ pns.sku }}</td>
+                    <td>{{ pns.upc }}</td>
+                    <td>
+                        {{ pns.earnings_account }}
+                    </td>
+                    <td>
+                        <div class="dropdown is-right is-hoverable" id="invoice-action-{{ invoice.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>
+                                        Actions
+                                    </span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ pns.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a href="{% url 'django_ledger:product-update' entity_slug=entity_slug item_pk=pns.uuid %}"
+                                       class="dropdown-item has-text-success">
+                                        {% trans 'Update' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/po_item_formset.html b/tests/django_ledger/tags/po_item_formset.html
new file mode 100644
index 0000000..d002cb4
--- /dev/null
+++ b/tests/django_ledger/tags/po_item_formset.html
@@ -0,0 +1,91 @@
+{% load trans from i18n %}
+{% load django_ledger %}
+<form action="{% url 'django_ledger:po-update-items' entity_slug=entity_slug po_pk=po_pk %}" method="post">
+    <div class="columns is-multiline">
+        <div class="column is-12">
+            <h1 class="is-size-1">{% trans 'Purchase Order Items' %}</h1>
+        </div>
+        <div class="column is-12">
+            <div class="table-container">
+                {% csrf_token %}
+                {{ item_formset.non_form_errors }}
+                {{ item_formset.management_form }}
+                <table class="table is-fullwidth is-narrow is-striped1 is-bordered">
+                    <thead>
+                        <tr>
+                            <th>{% trans 'Item' %}</th>
+                            <th>{% trans 'Unit Cost' %}</th>
+                            <th>{% trans 'Quantity' %}</th>
+                            <th>{% trans 'Unit' %}</th>
+                            <th>{% trans 'Total' %}</th>
+                            <th>{% trans 'Status' %}</th>
+                            {% if item_formset.can_delete %}
+                                <th>{% trans 'Delete' %}</th>
+                            {% endif %}
+                            <th>{% trans 'Create Bill' %}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for f in item_formset %}
+                            <tr>
+                                <td>
+                                    {% for hidden_field in f.hidden_fields %}
+                                        {{ hidden_field }}
+                                    {% endfor %}
+                                    {{ f.item_model }}
+                                    {% if f.errors %}{{ f.errors }}{% endif %}
+                                </td>
+                                <td id="{{ f.instance.html_id_unit_cost }}">
+                                    {{ f.unit_cost }}
+                                </td>
+                                <td id="{{ f.instance.html_id_quantity }}">
+                                    {{ f.quantity }}
+                                </td>
+                                <td>{{ f.entity_unit }}</td>
+                                <td class="has-text-right" id="{{ f.instance.html_id_total_amount }}">
+                                    {% currency_symbol %}{{ f.instance.total_amount | currency_format }}
+                                </td>
+                                <td>{{ f.po_item_status }}</td>
+                                {% if item_formset.can_delete %}<td class="has-text-centered">{{ f.DELETE }}</td>{% endif %}
+                                <td class="has-text-centered">
+                                    {% if f.instance.can_create_bill %}
+                                        {{ f.create_bill }}
+                                    {% elif f.instance.bill_model %}
+                                        <a class="button is-small is-light"
+                                           href="{% url 'django_ledger:bill-detail' entity_slug=entity_slug bill_pk=f.instance.bill_model_id %}">
+                                            View
+                                            Bill
+                                        </a>
+                                    {#
+{% else %}
+                                    #}
+                                {% endif %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+                <tfoot>
+                <tr>
+                    <th></th>
+                    <th></th>
+                    <th></th>
+                    <th class="has-text-right">{% trans 'Total' %}</th>
+                    <th class="has-text-right">
+                        {% currency_symbol %}{{ total_amount_due | currency_format }}
+                    </th>
+                    <th></th>
+                    {% if item_formset.can_delete %}<th></th>{% endif %}
+                    <th></th>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
+    </div>
+    <div class="column is-12">
+        <a href="{% url 'django_ledger:inventory-item-create' entity_slug=entity_slug %}" class="button is-primary">
+            {% trans 'New Item' %}
+        </a>
+        <button class="button is-primary">{% trans 'Save' %}</button>
+    </div>
+</div>
+</form>
diff --git a/tests/django_ledger/tags/po_table.html b/tests/django_ledger/tags/po_table.html
new file mode 100644
index 0000000..98c6f3e
--- /dev/null
+++ b/tests/django_ledger/tags/po_table.html
@@ -0,0 +1,61 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr>
+                <th>PO Number</th>
+                <th>Description</th>
+                <th>PO Date</th>
+                <th>PO Status</th>
+                <th>Fulfilment Date</th>
+                <th>PO Amount</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for po in po_list %}
+                <tr>
+                    <td>{{ po.po_number }}</td>
+                    <td>{{ po.po_title }}</td>
+                    <td>{{ po.po_date }}</td>
+                    <td>
+                        {{ po.get_po_status_display }}
+                    </td>
+                    <td>
+                        {% if po.fulfillment_date %}{{ po.fulfillment_date }}{% endif %}
+                    </td>
+                    <td>
+                        {% currency_symbol %}{{ po.po_amount | currency_format }}
+                    </td>
+                    <td class="has-text-centered">
+                        <div class="dropdown is-right is-hoverable" id="bill-action-{{ po.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>
+                                        Actions
+                                    </span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ po.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a href="{% url 'django_ledger:po-detail' entity_slug=entity_slug po_pk=po.uuid %}"
+                                       class="dropdown-item has-text-success">
+                                        Details
+                                    </a>
+                                    <a href="{% url 'django_ledger:po-delete' entity_slug=entity_slug po_pk=po.uuid %}"
+                                       class="dropdown-item has-text-weight-bold has-text-danger">
+                                        {% trans ' Delete' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/txs_table.html b/tests/django_ledger/tags/txs_table.html
new file mode 100644
index 0000000..4f9f43e
--- /dev/null
+++ b/tests/django_ledger/tags/txs_table.html
@@ -0,0 +1,46 @@
+{% load django_ledger %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
+        <tr>
+            <th>Date</th>
+            <th>Account</th>
+            <th>Account Name</th>
+            <th>Unit</th>
+            <th>Credit</th>
+            <th>Debit</th>
+            <th>Description</th>
+        </tr>
+        {% for tx in txs %}
+            <tr>
+                <td>{{ tx.journal_entry.date }}</td>
+                <td>{{ tx.account.code }}</td>
+                <td>{{ tx.account.name }}</td>
+                <td>
+                    {% if tx.journal_entry.entity_unit %}{{ tx.journal_entry.entity_unit }}{% endif %}
+                </td>
+                <td>
+                    {% if tx.tx_type == 'credit' %}${{ tx.amount | currency_format }}{% endif %}
+                </td>
+                <td>
+                    {% if tx.tx_type == 'debit' %}${{ tx.amount | currency_format }}{% endif %}
+                </td>
+                <td>
+                    {{ tx.description }}
+                </td>
+            </tr>
+        {% endfor %}
+        <tr class="has-text-weight-bold">
+            <td></td>
+            <td></td>
+            <td></td>
+            <td class="has-text-right">Total</td>
+            <td>
+                {% currency_symbol %}{{ total_credits | currency_format }}
+            </td>
+            <td>
+                {% currency_symbol %}{{ total_debits | currency_format }}
+            </td>
+            <td></td>
+        </tr>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/uom_table.html b/tests/django_ledger/tags/uom_table.html
new file mode 100644
index 0000000..5d4f5e8
--- /dev/null
+++ b/tests/django_ledger/tags/uom_table.html
@@ -0,0 +1,53 @@
+{% load trans from i18n %}
+{% load icon from django_ledger %}
+<div class="table-container">
+    <table class="table is-narrow is-striped is-bordered is-fullwidth django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr class="has-text-centered has-text-weight-bold">
+                <td>{% trans 'UOM' %}</td>
+                <td>{% trans 'Abbreviation' %}</td>
+                <td>{% trans 'Active' %}</td>
+                <td>{% trans 'Actions' %}</td>
+            </tr>
+        </thead>
+        <tbody>
+            {% for uom in uom_list %}
+                <tr class="has-text-centered">
+                    <td>{{ uom.name }}</td>
+                    <td>{{ uom.unit_abbr }}</td>
+                    <td class="has-text-centered">
+                        {% if uom.is_active %}
+                            <span class="icon is-small has-text-success">
+                                {% icon 'bi:check-circle-fill' 24 %}
+                            </span>
+                        {% else %}
+                            <span class="icon is-small has-text-danger">
+                                {% icon 'clarity:no-access-solid' 24 %}
+                            </span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        <div class="dropdown is-right is-hoverable" id="uom-action-{{ uom.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>{% trans 'Actions' %}</span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ invoice.uuid }}" role="menu">
+                                <div class="dropdown-content">
+                                    <a href="{% url 'django_ledger:uom-update' entity_slug=entity_slug uom_pk=uom.uuid %}"
+                                       class="dropdown-item has-text-success">
+                                        {% trans 'Update' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/tests/django_ledger/tags/vendor_table.html b/tests/django_ledger/tags/vendor_table.html
new file mode 100644
index 0000000..7ebf2fa
--- /dev/null
+++ b/tests/django_ledger/tags/vendor_table.html
@@ -0,0 +1,46 @@
+{% load django_ledger %}
+{% load i18n %}
+<div class="table-container">
+    <table class="table is-fullwidth is-narrow is-striped is-bordered django-ledger-table-bottom-margin-75">
+        <thead>
+            <tr>
+                <th class="has-text-centered">Vendor</th>
+                <th class="has-text-centered">Address</th>
+                <th class="has-text-centered">Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for vendor in vendors %}
+                <tr class="has-text-centered">
+                    <td>{{ vendor.vendor_name }}</td>
+                    <td>{{ vendor.address_1 }}</td>
+                    <td>
+                        <div class="dropdown is-right is-hoverable" id="vendor-action-{{ vendor.uuid }}">
+                            <div class="dropdown-trigger">
+                                <button class="button is-small is-rounded is-outlined is-dark"
+                                        aria-haspopup="true"
+                                        aria-controls="dropdown-menu">
+                                    <span>Actions</span>
+                                    <span class="icon is-small">{% icon 'bi:arrow-down' 24 %}</span>
+                                </button>
+                            </div>
+                            <div class="dropdown-menu" id="dropdown-menu-{{ vendor.uuid }}" role="menu">
+                                <div class="dropdown-content">
+{#
+<a href="" class="dropdown-item has-text-success">
+View
+</a>
+                                #}
+                                <a href="{% url 'django_ledger:vendor-update' entity_slug=view.kwargs.entity_slug vendor_pk=vendor.uuid %}"
+                                   class="dropdown-item has-text-weight-bold has-text-info">
+                                    {% trans 'Update' %}
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
+</div>
diff --git a/tests/django_ledger/txs.html b/tests/django_ledger/txs.html
new file mode 100644
index 0000000..f8a3717
--- /dev/null
+++ b/tests/django_ledger/txs.html
@@ -0,0 +1,51 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% block view_content %}
+    <div class="box">
+        <form action="{{ view.request.path }}" method="post">
+            {% csrf_token %}
+            <div class="columns is-multiline">
+                <div class="column is-12">
+                    {{ txs_formset.non_form_errors }}
+                    {{ txs_formset.management_form }}
+                </div>
+                <div class="column is-12">
+                    <table class="table is-fullwidth is-narrow is-striped is-bordered">
+                        <tr>
+                            <th>Account</th>
+                            <th>TX Type</th>
+                            <th>Amount</th>
+                            <th>Description</th>
+                            {% if txs_formset.can_delete %}<th>Delete</th>{% endif %}
+                        </tr>
+                        {% for f in txs_formset %}
+                            <tr>
+                                <td>
+                                    {% for hidden_field in f.hidden_fields %}
+                                        {{ hidden_field }}
+                                    {% endfor %}
+                                    {{ f.account }}
+                                </td>
+                                <td>{{ f.tx_type }}</td>
+                                <td>{{ f.amount }}</td>
+                                <td>{{ f.description }}</td>
+                                <td>
+                                    {% if txs_formset.can_delete %}{{ f.DELETE }}{% endif %}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </table>
+                </div>
+                <div class="column is-12 has-text-centered">
+                    <button class="button is-primary is-outlined">
+                        Save
+                    </button>
+                    <a class="button is-dark" href="{% url ">
+                        Done
+                    </a>
+                </div>
+            </div>
+        </form>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/unit_create.html b/tests/django_ledger/unit_create.html
new file mode 100644
index 0000000..74da145
--- /dev/null
+++ b/tests/django_ledger/unit_create.html
@@ -0,0 +1,33 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <h1 class="is-size-1 has-text-weight-thin">
+                            {% trans 'Create Entity Unit' %}
+                        </h1>
+                    </div>
+                </div>
+            </div>
+            <div class="columns is-mobile is-centered">
+                <div class="column is-6">
+                    <form action="{% url 'django_ledger:unit-create' entity_slug=view.kwargs.entity_slug %}"
+                          method="post">
+                        {% csrf_token %}
+                        {{ form.as_p }}
+                        <button class="button is-primary mt-2">{% trans 'Create' %}</button>
+                        <a class="button is-dark mt-2"
+                           href="{% url 'django_ledger:unit-list' entity_slug=view.kwargs.entity_slug %}">
+                            {% trans 'Back' %}
+                        </a>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/unit_detail.html b/tests/django_ledger/unit_detail.html
new file mode 100644
index 0000000..0e679f1
--- /dev/null
+++ b/tests/django_ledger/unit_detail.html
@@ -0,0 +1,38 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <h1 class="is-size-1 has-text-weight-thin">
+                            {{ unit.name }}
+                        </h1>
+                    </div>
+                </div>
+            </div>
+            <div class="columns is-multiline">
+                <div class="column is-12">
+                    {{ unit }}
+                </div>
+                <div class="column is-12">
+                    <a href="{% url 'django_ledger:unit-dashboard' entity_slug=view.kwargs.entity_slug unit_slug=view.kwargs.unit_slug %}"
+                       class="button is-medium is-info">
+                        {% trans 'Dashboard' %}
+                    </a>
+                    <a href="{% url 'django_ledger:unit-bs' entity_slug=view.kwargs.entity_slug unit_slug=view.kwargs.unit_slug %}"
+                       class="button is-medium is-info">
+                        {% trans 'Balance Sheet' %}
+                    </a>
+                    <a href="{% url 'django_ledger:unit-ic' entity_slug=view.kwargs.entity_slug unit_slug=view.kwargs.unit_slug %}"
+                       class="button is-medium is-primary">
+                        {% trans 'Income Statement' %}
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/unit_list.html b/tests/django_ledger/unit_list.html
new file mode 100644
index 0000000..206026f
--- /dev/null
+++ b/tests/django_ledger/unit_list.html
@@ -0,0 +1,62 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <h1 class="is-size-1 has-text-weight-thin">
+                            {% trans 'Entity Units List' %}
+                        </h1>
+                    </div>
+                    <div class="level-item">
+                        <a href="{% url 'django_ledger:unit-create' entity_slug=view.kwargs.entity_slug %}">
+                            <span class="icon is-large has-text-success">
+                                {% icon 'carbon:add-alt' 60 %}
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="columns is-multiline">
+                {% for unit in unit_list %}
+                    <div class="column is-4">
+                        <div class="card">
+                            <div class="card-content">
+{#
+<p class="subtitle has-text-grey has-text-right">
+                            #}
+{#
+<span class="icon">{% icon "bi:cash-stack" 16 %}</span>
+                        #}
+{#                                    {% trans 'Unit' %}
+</p>
+                    #}
+                    <p class="title">
+                        {{ unit.name }}
+                    </p>
+                </div>
+                <footer class="card-footer">
+                    <a href="{% url 'django_ledger:unit-detail' entity_slug=view.kwargs.entity_slug unit_slug=unit.slug %}"
+                       class="card-footer-item has-text-primary has-text-centered">
+                        {% trans 'View' %}
+                    </a>
+                    <a href="{% url 'django_ledger:unit-update' entity_slug=view.kwargs.entity_slug unit_slug=unit.slug %}"
+                       class="card-footer-item has-text-warning-dark has-text-centered">
+                        {% trans 'Update' %}
+                    </a>
+                                {# >
+{% trans 'Mark as Paid' %}
+</a>
+                #}
+            </footer>
+        </div>
+    </div>
+{% endfor %}
+</div>
+</div>
+</div>
+{% endblock %}
diff --git a/tests/django_ledger/unit_update.html b/tests/django_ledger/unit_update.html
new file mode 100644
index 0000000..184e79b
--- /dev/null
+++ b/tests/django_ledger/unit_update.html
@@ -0,0 +1,33 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <h1 class="is-size-1 has-text-weight-thin">
+                            {% trans 'Update Entity Unit' %}
+                        </h1>
+                    </div>
+                </div>
+            </div>
+            <div class="columns is-mobile is-centered">
+                <div class="column is-6">
+                    <form action="{% url 'django_ledger:unit-update' entity_slug=view.kwargs.entity_slug unit_slug=unit.slug %}"
+                          method="post">
+                        {% csrf_token %}
+                        {{ form.as_p }}
+                        <button class="button is-primary mt-2">{% trans 'Update' %}</button>
+                        <a class="button is-dark mt-2"
+                           href="{% url 'django_ledger:unit-list' entity_slug=view.kwargs.entity_slug %}">
+                            {% trans 'Back' %}
+                        </a>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/uom_create.html b/tests/django_ledger/uom_create.html
new file mode 100644
index 0000000..b97b964
--- /dev/null
+++ b/tests/django_ledger/uom_create.html
@@ -0,0 +1,32 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-multiline is-centered">
+        <div class="column is-6">
+            <div class="card">
+                <form action="{% url 'django_ledger:uom-create' entity_slug=view.kwargs.entity_slug %}" method="post">
+                    {% csrf_token %}
+                    <div class="card-header">
+                        <h2 class="card-header-title">
+                            <span class="icon is-medium">
+                                {% icon 'ic:baseline-production-quantity-limits' 36 %}
+                            </span>
+                            {{ page_title }}
+                        </h2>
+                    </div>
+                    <div class="card-content">
+                        {{ form.as_p }}
+                        <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                            {% trans 'Create' %}
+                        </button>
+                        <a href="{% url 'django_ledger:home' %}" class="button is-small is-dark is-fullwidth">
+                            {% trans 'Back' %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/uom_list.html b/tests/django_ledger/uom_list.html
new file mode 100644
index 0000000..40233ef
--- /dev/null
+++ b/tests/django_ledger/uom_list.html
@@ -0,0 +1,27 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="card">
+        <div class="card-content">
+            <div class="level">
+                <div class="level-left">
+                    <div class="level-item">
+                        <h1 class="is-size-1 has-text-weight-thin">
+                            {% trans 'Unit of Measures List' %}
+                        </h1>
+                    </div>
+                    <div class="level-item">
+                        <a href="{% url 'django_ledger:uom-create' entity_slug=view.kwargs.entity_slug %}">
+                            <span class="icon is-large has-text-success">
+                                {% icon 'carbon:add-alt' 60 %}
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% uom_table uom_list %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/uom_update.html b/tests/django_ledger/uom_update.html
new file mode 100644
index 0000000..97c22b6
--- /dev/null
+++ b/tests/django_ledger/uom_update.html
@@ -0,0 +1,34 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="columns is-multiline is-centered">
+        <div class="column is-6">
+            <div class="card">
+                <form action="{% url 'django_ledger:uom-update' entity_slug=view.kwargs.entity_slug uom_pk=uom.uuid %}"
+                      method="post">
+                    {% csrf_token %}
+                    <div class="card-header">
+                        <h2 class="card-header-title">
+                            <span class="icon is-medium">
+                                {% icon 'ic:baseline-production-quantity-limits' 36 %}
+                            </span>
+                            {{ page_title }}
+                        </h2>
+                    </div>
+                    <div class="card-content">
+                        {{ form.as_p }}
+                        <button type="submit" class="button is-primary is-outlined is-fullwidth djetler_my_1">
+                            {% trans 'Update' %}
+                        </button>
+                        <a href="{% url 'django_ledger:uom-list' entity_slug=view.kwargs.entity_slug %}"
+                           class="button is-small is-dark is-fullwidth">
+                            {% trans 'Back' %}
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/vendor_create.html b/tests/django_ledger/vendor_create.html
new file mode 100644
index 0000000..6f02e8c
--- /dev/null
+++ b/tests/django_ledger/vendor_create.html
@@ -0,0 +1,22 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="box">
+        <form method="post" action="{% url 'django_ledger:vendor-create' entity_slug=view.kwargs.entity_slug %}">
+            <div class="field">
+                {{ form.as_p }}
+                {% csrf_token %}
+            </div>
+            <div class="field">
+                <button class="button is-primary is-small is-fullwidth">
+                    {% trans 'Create Vendor' %}
+                </button>
+                <a href="{% url 'django_ledger:vendor-list' entity_slug=view.kwargs.entity_slug %}"
+                   class="button is-dark is-small is-fullwidth mt-2">
+                    {% trans 'Go Back' %}
+                </a>
+            </div>
+        </form>
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/vendor_list.html b/tests/django_ledger/vendor_list.html
new file mode 100644
index 0000000..c8962de
--- /dev/null
+++ b/tests/django_ledger/vendor_list.html
@@ -0,0 +1,20 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load static %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="box">
+        <div class="columns">
+            <div class="column">
+                <a class="button is-primary is-outlined is-small"
+                   href="{% url 'django_ledger:vendor-create' entity_slug=view.kwargs.entity_slug %}">
+                    <span class="icon is-large has-text-success">
+                        {% icon 'carbon:add-alt' 24 %}
+                    </span>
+                    <span>{% trans 'New Vendor' %}</span>
+                </a>
+            </div>
+        </div>
+        {% vendor_table %}
+    </div>
+{% endblock %}
diff --git a/tests/django_ledger/vendor_update.html b/tests/django_ledger/vendor_update.html
new file mode 100644
index 0000000..c1c42fe
--- /dev/null
+++ b/tests/django_ledger/vendor_update.html
@@ -0,0 +1,23 @@
+{% extends 'django_ledger/layouts/content_layout_1.html' %}
+{% load i18n %}
+{% load django_ledger %}
+{% block view_content %}
+    <div class="box">
+        <form method="post"
+              action="{% url 'django_ledger:vendor-update' entity_slug=view.kwargs.entity_slug vendor_pk=vendor.uuid %}">
+            <div class="field">
+                {{ form.as_p }}
+                {% csrf_token %}
+            </div>
+            <div class="field">
+                <button class="button is-primary is-small is-fullwidth">
+                    {% trans 'Update Vendor' %}
+                </button>
+                <a href="{% url 'django_ledger:vendor-list' entity_slug=view.kwargs.entity_slug %}"
+                   class="button is-dark is-small is-fullwidth mt-2">
+                    {% trans 'Go Back' %}
+                </a>
+            </div>
+        </form>
+    </div>
+{% endblock %}
diff --git a/tests/django_oscar/flatpages/default.html b/tests/django_oscar/flatpages/default.html
new file mode 100644
index 0000000..08a80e0
--- /dev/null
+++ b/tests/django_oscar/flatpages/default.html
@@ -0,0 +1,33 @@
+{% extends "oscar/layout.html" %}
+{% load i18n %}
+{% block title %}{{ flatpage.title }} | {{ block.super }}{% endblock %}
+{% block header %}
+    <div class="page-header">
+        {% if user.is_staff %}
+            <a class="float-right d-none d-md-block" href="{% url 'dashboard:page-update' pk=flatpage.id %}">
+                <small>
+                <i class="fas fa-pencil-alt"></i>
+                {% trans "Edit this page" %}
+                </small>
+            </a>
+        {% endif %}
+        <h1>{{ flatpage.title }}</h1>
+    </div>
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ flatpage.title }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block content %}
+    <article>
+        {{ flatpage.content }}
+    </article>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/403.html b/tests/django_oscar/oscar/403.html
new file mode 100644
index 0000000..af016f7
--- /dev/null
+++ b/tests/django_oscar/oscar/403.html
@@ -0,0 +1,13 @@
+{% extends "oscar/error.html" %}
+{% load i18n %}
+{% block title %}
+    {% trans 'Permission denied!' %} | {{ block.super }}
+{% endblock %}
+{% block error_heading %}
+    {% trans "Permission denied!" %}
+{% endblock %}
+{% block error_message %}
+    <p>
+        {% trans "We're sorry but you are not permitted to access this page." %}
+    </p>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/404.html b/tests/django_oscar/oscar/404.html
new file mode 100644
index 0000000..0946e84
--- /dev/null
+++ b/tests/django_oscar/oscar/404.html
@@ -0,0 +1,13 @@
+{% extends "oscar/error.html" %}
+{% load i18n %}
+{% block title %}
+    {% trans 'Page not found' %} | {{ block.super }}
+{% endblock %}
+{% block error_heading %}
+    {% trans "Page not found!" %}
+{% endblock %}
+{% block error_message %}
+    <p>
+        {% trans "We're sorry but the page you are looking for can't be found." %}
+    </p>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/500.html b/tests/django_oscar/oscar/500.html
new file mode 100644
index 0000000..5841d00
--- /dev/null
+++ b/tests/django_oscar/oscar/500.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Server error!</title>
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+        <meta name="robots" content="NOARCHIVE,NOCACHE" />
+    </head>
+    <body>
+        <h1>Server error!</h1>
+        <p>
+            We're sorry but something went terribly wrong and we've been unable to generate the page you requested.
+        </p>
+        <p>
+            This incident has been logged and will be addressed by an engineer as soon as possible.
+        </p>
+        <p>
+            <a onclick="javascript:history.go(-1);">
+                Return to previous page
+            </a>
+            <br>
+            <a href="{{ homepage_url }}">Go to homepage</a>
+        </p>
+    </body>
+</html>
diff --git a/tests/django_oscar/oscar/README.rst b/tests/django_oscar/oscar/README.rst
new file mode 100644
index 0000000..2738fe9
--- /dev/null
+++ b/tests/django_oscar/oscar/README.rst
@@ -0,0 +1,68 @@
+==================
+Template Structure
+==================
+
+Markup
+------
+
+Template markup for the most part has been written in accordance with Twitter Bootstrap.
+Documentation on Bootstrap HTML markup and classes used see (http://twitter.github.com/bootstrap/index.html).
+
+Layouts
+-------
+
+Currently there are 5 different layouts that extend the base.html
+
+layout.html :
+    For single column layouts
+* detail.html
+* basket.html
+* flatpages/default.html
+
+layout_2_col.html :
+    For two column layouts whereby first column is subservient (aside) to the main column
+* home.html
+* browse.html
+
+layout_3_col.html :
+    For three column layouts whereby first and third columns are subservient (aside) to the main middlecolumn
+* Currently NOT used
+
+checkout/layout.html :
+  For the checkout pages, removes the main navigation and uses a single column by default
+* checkout.html
+* gateway.html
+* thank_you.html
+
+dashboard/layout.html :
+  For dashboard section specifically different from the other frontend features:
+* separate css
+* separate js
+* single column 100% page width
+
+Forms
+-----
+
+Forms are rendered using either of these two partial templates
+
+* form_fields.html
+* form_fields_inline.html
+
+form_fields.html :
+    This is used for the majority of the forms in the frontend and dashboard, using a horizontal label / field stack
+
+form_fields_inline.html :
+    Used for smaller forms to reduced screen space (mainly in the dashboard section for search forms)
+
+Partials form_fields::
+
+    'include "oscar/partials/form_fields.html" with form=form'
+
+Partials form_fields_inline::
+
+    'include "oscar/partials/form_fields_inline.html" with form=form'
+
+Conventions
+-----------
+
+Template names should use underscores, not hyphens.
diff --git a/tests/django_oscar/oscar/base.html b/tests/django_oscar/oscar/base.html
new file mode 100644
index 0000000..b325658
--- /dev/null
+++ b/tests/django_oscar/oscar/base.html
@@ -0,0 +1,47 @@
+{% load i18n %}
+{% load static %}
+<!DOCTYPE html>
+<html lang="{{ LANGUAGE_CODE|default:"en-gb" }}" class="{% block html_class %}no-js{% endblock %}">
+<head>
+    <title>
+    {% block title %}{{ shop_name }} - {{ shop_tagline }}{% endblock %}
+    </title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta name="created" content="{% now "jS M Y h:i" %}" />
+    <meta name="description" content="{% block description %}{% endblock %}" />
+    <meta name="viewport" content="{% block viewport %}width=device-width{% endblock %}" />
+    {% block favicon %}
+        <link rel="shortcut icon" href="{% static "oscar/favicon.ico" %}" />
+    {% endblock %}
+    {# Block where global CSS will go. #}
+    {% block styles %}{% endblock %}
+    {# Additional CSS - specific to certain pages #}
+    {% block extrastyles %}{% endblock %}
+    {% block extrahead %}{% endblock %}
+    {% block tracking %}
+        {# Default to using Google analytics #}
+        {% include "oscar/partials/google_analytics.html" %}{% endblock %}
+    </head>
+    <body id="{% block body_id %}default{% endblock %}" class="{% block body_class %}default{% endblock %}">
+    {# Main content goes in this 'layout' block #}
+    {% block layout %}{% endblock %}
+    {# Scripts loaded from a CDN. #}
+    {% block cdn_scripts %}
+        <!-- jQuery -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+        <script>window.jQuery || document.write('<script src="{% static "oscar/js/jquery/jquery.min.js" %}"><\/script>')
+        </script>
+    {% endblock %}
+    {# Local scripts #}
+    {% block scripts %}{% endblock %}
+    {# Additional JS scripts #}
+    {% block extrascripts %}{% endblock %}
+    {# Block for body onload functions #}
+    <script>
+            $(function() {
+                {% block onbodyload %}{% endblock %}
+            });
+    </script>
+    {# Page meta-data - this is populated by the 'metadata' template context processor #}
+</body>
+</html>
diff --git a/tests/django_oscar/oscar/basket/basket.html b/tests/django_oscar/oscar/basket/basket.html
new file mode 100644
index 0000000..a42c3ff
--- /dev/null
+++ b/tests/django_oscar/oscar/basket/basket.html
@@ -0,0 +1,33 @@
+{% extends "oscar/layout.html" %}
+{% load i18n %}
+{% block title %}
+    {% trans "Basket" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Basket" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{# Hide mini-basket so we don't have two baskets to keep in sync #}
+{% block mini_basket %}{% endblock %}
+{% block headertext %}
+    {% trans "Basket" %}
+{% endblock %}
+{% block content %}
+    {# Use a partial template so that AJAX can be used to re-render basket #}
+    {% include 'oscar/basket/partials/basket_content.html' %}{% endblock content %}
+    {% block onbodyload %}
+        {{ block.super }}
+        {# We pass in the URL to send AJAX requests to #}
+        var options = {
+        'basketURL': '{% url 'basket:summary' %}'
+        };
+        oscar.basket.init(options);
+    {% endblock %}
diff --git a/tests/django_oscar/oscar/basket/messages/addition.html b/tests/django_oscar/oscar/basket/messages/addition.html
new file mode 100644
index 0000000..073db55
--- /dev/null
+++ b/tests/django_oscar/oscar/basket/messages/addition.html
@@ -0,0 +1,14 @@
+{% load i18n %}
+{% if quantity == 1 %}
+    {% blocktrans with title=product.get_title %}
+        <strong>{{ title }}</strong>
+        has been added to your basket.
+    {% endblocktrans %}
+{% else %}
+    {% blocktrans with title=product.get_title quantity=quantity %}
+        <strong>{{ quantity }}</strong>
+        copies of
+        <strong>{{ title }}</strong>
+        have been added to your basket.
+    {% endblocktrans %}
+{% endif %}
diff --git a/tests/django_oscar/oscar/basket/messages/line_restored.html b/tests/django_oscar/oscar/basket/messages/line_restored.html
new file mode 100644
index 0000000..10f321c
--- /dev/null
+++ b/tests/django_oscar/oscar/basket/messages/line_restored.html
@@ -0,0 +1,5 @@
+{% load i18n %}
+{% blocktrans with title=line.product.get_title %}
+    <strong>{{ title }}</strong>
+    has been moved back to your basket.
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/basket/messages/line_saved.html b/tests/django_oscar/oscar/basket/messages/line_saved.html
new file mode 100644
index 0000000..c67cf7d
--- /dev/null
+++ b/tests/django_oscar/oscar/basket/messages/line_saved.html
@@ -0,0 +1,5 @@
+{% load i18n %}
+{% blocktrans with title=line.product.get_title %}
+    <strong>{{ title }}</strong>
+    has been saved for later
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/basket/messages/new_total.html b/tests/django_oscar/oscar/basket/messages/new_total.html
new file mode 100644
index 0000000..c8d0720
--- /dev/null
+++ b/tests/django_oscar/oscar/basket/messages/new_total.html
@@ -0,0 +1,26 @@
+{% load i18n %}
+{% load currency_filters %}
+{% if basket.is_empty %}
+    {% trans "Your basket is now empty" %}
+{% else %}
+    {% if basket.is_tax_known %}
+        {% blocktrans with total=basket.total_incl_tax|currency:basket.currency %}
+            Your basket total is now
+            <strong>{{ total }}</strong>
+        {% endblocktrans %}
+    {% else %}
+        {% blocktrans with total=basket.total_excl_tax|currency:basket.currency %}
+            Your basket total is now
+            <strong>{{ total }}</strong>
+        {% endblocktrans %}
+    {% endif %}
+{% endif %}
+{% if include_buttons %}
+    <br>
+    <a href="{% url 'basket:summary' %}" class="btn btn-info">
+        {% trans "View basket" %}
+    </a>
+    <a href="{% url 'checkout:index' %}" class="btn btn-info">
+        {% trans "Checkout now" %}
+    </a>
+{% endif %}
diff --git a/tests/django_oscar/oscar/basket/messages/offer_gained.html b/tests/django_oscar/oscar/basket/messages/offer_gained.html
new file mode 100644
index 0000000..c9f9cdd
--- /dev/null
+++ b/tests/django_oscar/oscar/basket/messages/offer_gained.html
@@ -0,0 +1,6 @@
+{% load i18n %}
+{% blocktrans with name=offer.name %}
+    Your basket now qualifies for the
+    <strong>{{ name }}</strong>
+    offer.
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/basket/messages/offer_lost.html b/tests/django_oscar/oscar/basket/messages/offer_lost.html
new file mode 100644
index 0000000..3852d17
--- /dev/null
+++ b/tests/django_oscar/oscar/basket/messages/offer_lost.html
@@ -0,0 +1,6 @@
+{% load i18n %}
+{% blocktrans with name=offer.name %}
+    Your basket no longer qualifies for the
+    <strong>{{ name }}</strong>
+    offer.
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/basket/partials/basket_content.html b/tests/django_oscar/oscar/basket/partials/basket_content.html
new file mode 100644
index 0000000..7a5c7a3
--- /dev/null
+++ b/tests/django_oscar/oscar/basket/partials/basket_content.html
@@ -0,0 +1,277 @@
+{% load i18n %}
+{% load image_tags %}
+{% load currency_filters %}
+{% load purchase_info_tags %}
+{% load widget_tweaks %}
+{% if basket_warnings %}
+    <h5>{% trans "Important messages about items in your basket" %}</h5>
+    {% for warning in basket_warnings %}
+        <div class="alert alert-warning">
+            {{ warning }}
+        </div>
+    {% endfor %}
+{% endif %}
+{% if upsell_messages %}
+    <div class="card card-body">
+        <h3>{% trans "You could be missing out on offers!" %}</h3>
+        {% for upsell in upsell_messages %}
+            {% blocktrans with message=upsell.message url=upsell.offer.get_absolute_url offer_name=upsell.offer.name %}
+                <div class="warning">
+                    {{ message }} to qualify for the
+                    <a href="{{ url }}">{{ offer_name }}</a>
+                    special offer
+                </div>
+            {% endblocktrans %}
+        {% endfor %}
+    </div>
+{% endif %}
+{% if not basket.is_empty %}
+    {% block basket_form_headers %}
+        <div class="basket-title d-none d-md-block">
+            <div class="row">
+                <h4 class="col-md-6">{% trans "Items to buy now" %}</h4>
+                <h4 class="col-md-3">{% trans "Quantity" %}</h4>
+                <h4 class="col-md-1 text-right">{% trans "Price" %}</h4>
+                <h4 class="col-md-2 text-right">{% trans "Total" %}</h4>
+            </div>
+        </div>
+    {% endblock %}
+    {% block basket_form_main %}
+        <form method="post" class="basket_summary" id="basket_formset">
+            {% csrf_token %}
+            {{ formset.management_form }}
+            {% for form in formset %}
+                {% with line=form.instance product=form.instance.product %}
+                {% purchase_info_for_line request line as session %}
+                <div class="basket-items">
+                    <div class="row">
+                        <div class="col-md-2">
+                            {{ form.id }}
+                            {% with image=product.primary_image %}
+                            {% oscar_thumbnail image.original "100x100" upscale=False as thumb %}
+                            <a href="{{ product.get_absolute_url }}">
+                                <img class="img-thumbnail w-auto mx-auto my-0"
+                                     src="{{ thumb.url }}"
+                                     alt="{{ product.get_title }}"/>
+                            </a>
+                        {% endwith %}
+                    </div>
+                    <div class="col-md-4">
+                        <h3>
+                            <a href="{{ product.get_absolute_url }}">
+                                {{ line.description }}
+                            </a>
+                        </h3>
+                        <p class="availability {{ session.availability.code }}">
+                            {{ session.availability.message }}
+                        </p>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="checkout-quantity">
+                            <div class="input-group {% if form.errors %}error{% endif %}">
+                            {% render_field form.quantity class+="form-control" %}
+                            <div class="input-group-append">
+                                <button class="btn btn-secondary"
+                                        type="submit"
+                                        data-loading-text="{% trans 'Updating...' %}">
+                                    {% trans "Update" %}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="basket-line-actions">
+                        <a href="#" data-id="{{ forloop.counter0 }}" data-behaviours="remove">
+                            {% trans "Remove" %}
+                        </a>
+                        {% if user.is_authenticated %}
+                            |
+                            <a href="#" data-id="{{ forloop.counter0 }}" data-behaviours="save">
+                                {% trans "Save for later" %}
+                            </a>
+                        {% endif %}
+                        <div style="display:none">
+                            {{ form.save_for_later }}
+                            {{ form.DELETE }}
+                        </div>
+                        {% for field_errors in form.errors.values %}
+                            {% for error in field_errors %}
+                                <span class="error-block">
+                                    <i class="fas fa-exclamation"></i>
+                                    {{ error }}
+                                </span>
+                            {% endfor %}
+                        {% endfor %}
+                    </div>
+                </div>
+                <div class="col-md-1">
+                    {% if not line.unit_price_incl_tax and not line.unit_tax_excl_tax %}
+                        <p class="text-right">
+                            &mdash;
+                        </p>
+                    {% else %}
+                        <p class="price_color text-right">
+                            <span class="price-title d-md-none">{% trans "Price" %}:</span>
+                            {% if line.is_tax_known %}
+                                {{ line.unit_price_incl_tax|currency:line.price_currency }}
+                            {% else %}
+                                {{ line.unit_price_excl_tax|currency:line.price_currency }}
+                            {% endif %}
+                        </p>
+                    {% endif %}
+                </div>
+                <div class="col-md-2">
+                    {% if not line.line_price_incl_tax and not line_price_excl_tax %}
+                        <p class="text-right">
+                            &mdash;
+                        </p>
+                    {% else %}
+                        <p class="price_color text-right">
+                            <span class="price-title d-md-none">{% trans "Total" %}:</span>
+                            {% if line.is_tax_known %}
+                                {{ line.line_price_incl_tax|currency:line.price_currency }}
+                            {% else %}
+                                {{ line.line_price_excl_tax|currency:line.price_currency }}
+                            {% endif %}
+                        </p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    {% endwith %}
+{% endfor %}
+</form>
+{% endblock %}
+<div class="row">
+{% block vouchers %}
+{# Hide the entire section if a custom BasketView doesn't pass in a voucher form #}
+{% if voucher_form %}
+    <div class="col-sm-6">
+        <div class="sub-header">
+            <h2>{% trans "Voucher/promo code" %}</h2>
+        </div>
+        <p id="voucher_form_link">
+            <a href="#voucher" class="btn btn-secondary btn-full">
+                {% trans "I have a voucher code..." %}
+            </a>
+        </p>
+        <div id="voucher_form_container" style="display:none">
+            <form id="voucher_form" action="{% url 'basket:vouchers-add' %}" method="post">
+                {% csrf_token %}
+                {% include "oscar/partials/form_fields.html" with form=voucher_form %}
+                <button type="submit" class="btn btn-info" data-loading-text="{% trans 'Adding...' %}">
+                    {% trans "Add voucher" %}
+                </button>
+                {% trans "or" %}
+                <a href="#" id="voucher_form_cancel">
+                    {% trans "cancel" %}
+                </a>
+            </form>
+        </div>
+    </div>
+{% endif %}
+{% endblock vouchers %}
+{% block baskettotals %}
+<div class="col-sm-6">
+    <div class="sub-header">
+        <h2>{% trans "Totals" %}</h2>
+    </div>
+    {% include 'oscar/basket/partials/basket_totals.html' with editable=1 %}
+</div>
+{% endblock baskettotals %}
+</div>
+{% block formactions %}
+<div class="form-group clearfix">
+<div class="row">
+    <div class="col-sm-4 offset-sm-8">
+        <a href="{% url 'checkout:index' %}" class="btn btn-lg btn-primary btn-block">
+            {% trans "Proceed to checkout" %}
+        </a>
+    </div>
+</div>
+</div>
+{% endblock formactions %}
+{% else %}
+{% block emptybasket %}
+<p>
+{% trans "Your basket is empty." %}
+<a href="{{ homepage_url }}">{% trans "Continue shopping" %}</a>
+</p>
+{% endblock %}
+{% endif %}
+{% block savedbasket %}
+{% if user.is_authenticated and saved_formset %}
+<div class="card card-body">
+<div class="sub-header">
+    <h2>{% trans "Items to buy later" %}</h2>
+</div>
+<div class="row basket-title d-none d-md-flex">
+    <div class="col-md-8 h4">
+        {% trans "Items" %}
+    </div>
+    <div class="col-md-2 h4 text-center">
+        {% trans "Price" %}
+    </div>
+    <div class="col-md-2">
+        &nbsp;
+    </div>
+</div>
+<form action="{% url 'basket:saved' %}" method="post" id="saved_basket_formset">
+    {% csrf_token %}
+    {{ saved_formset.management_form }}
+    {% for form in saved_formset %}
+        {% purchase_info_for_product request form.instance.product as session %}
+        <div class="basket-items">
+            <div class="row">
+                <div class="col-md-2">
+                    {{ form.id }}
+                    {% with image=form.instance.product.primary_image %}
+                    {% oscar_thumbnail image.original "100x100" upscale=False as thumb %}
+                    <a href="{{ form.instance.product.get_absolute_url }}">
+                        <img class="card card-body mx-auto"
+                             src="{{ thumb.url }}"
+                             alt="{{ form.instance.product.get_title }}">
+                        </a>
+                    {% endwith %}
+                </div>
+                <div class="col-md-6">
+                    <h3>
+                        <a href="{{ form.instance.product.get_absolute_url }}">
+                            {{ form.instance.description }}
+                        </a>
+                    </h3>
+                    <p class="availability {{ session.availability.code }}">
+                        {{ session.availability.message }}
+                    </p>
+                    <a href="#" data-id="{{ forloop.counter0 }}" data-behaviours="remove">
+                        {% trans "Remove" %}
+                    </a>
+                    <div style="display:none">
+                        {{ form.move_to_basket }}
+                        {{ form.DELETE }}
+                    </div>
+                </div>
+                {% purchase_info_for_product request form.instance.product as saved %}
+                <div class="col-md-2 text-center">
+                    <p class="price_color">
+                        {% if saved.price.is_tax_known %}
+                            {{ saved.price.incl_tax|currency:saved.price.currency }}
+                        {% else %}
+                            {{ saved.price.excl_tax|currency:saved.price.currency }}
+                        {% endif %}
+                    </p>
+                </div>
+                <div class="col-md-2">
+                    <a href="#"
+                       data-id="{{ forloop.counter0 }}"
+                       class="btn float-right btn-block"
+                       data-behaviours="move">
+                        {% trans "Move to basket" %}
+                    </a>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+</form>
+</div>
+{% endif %}
+{% endblock %}
diff --git a/tests/django_oscar/oscar/basket/partials/basket_quick.html b/tests/django_oscar/oscar/basket/partials/basket_quick.html
new file mode 100644
index 0000000..3afa05f
--- /dev/null
+++ b/tests/django_oscar/oscar/basket/partials/basket_quick.html
@@ -0,0 +1,69 @@
+{% load history_tags %}
+{% load basket_tags %}
+{% load currency_filters %}
+{% load image_tags %}
+{% load i18n %}
+<ul class="basket-mini-item list-unstyled">
+    {% if request.basket.num_lines %}
+        {% for line in request.basket.all_lines %}
+            <li>
+                <div class="row">
+                    <div class="col-sm-3">
+                        <div class="image_container w-100">
+                            {% with image=line.product.primary_image %}
+                            {% oscar_thumbnail image.original "100x100" upscale=False as thumb %}
+                            <a href="{{ line.product.get_absolute_url }}">
+                                <img src="{{ thumb.url }}"
+                                     alt="{{ line.product.get_title }}"
+                                     class="img-thumbnail w-auto mx-auto my-0">
+                                </a>
+                            {% endwith %}
+                        </div>
+                    </div>
+                    <div class="col-sm-5">
+                        <p>
+                            <strong>
+                            <a href="{{ line.product.get_absolute_url }}">
+                                {{ line.description }}
+                            </a>
+                            </strong>
+                        </p>
+                    </div>
+                    <div class="col-sm-1 text-center">
+                        <strong>{% trans "Qty" %}</strong>
+                        {{ line.quantity }}
+                    </div>
+                    <div class="col-sm-3 price_color text-right">
+                        {{ line.unit_price_excl_tax|currency:request.basket.currency }}
+                    </div>
+                </div>
+            </li>
+        {% endfor %}
+        <li class="form-group form-actions">
+            <p class="text-right">
+                {% if request.basket.is_tax_known %}
+                    <small>
+                    {% trans "Total:" %} {{ request.basket.total_incl_tax|currency:request.basket.currency }}
+                    </small>
+                {% else %}
+                    <small>
+                    {% trans "Total:" %} {{ request.basket.total_excl_tax|currency:request.basket.currency }}
+                    </small>
+                {% endif %}
+            </p>
+            <a href="{% url 'basket:summary' %}" class="btn btn-info btn-sm">
+                {% trans "View basket" %}
+            </a>
+            <a href="{% url 'checkout:index' %}" class="btn btn-primary btn-sm float-right">
+                <i class="fas fa-shopping-cart"></i>
+                {% trans "Checkout" %}
+            </a>
+        </li>
+    {% else %}
+        <li>
+            <p>
+                {% trans "Your basket is empty." %}
+            </p>
+        </li>
+    {% endif %}
+</ul>
diff --git a/tests/django_oscar/oscar/basket/partials/basket_totals.html b/tests/django_oscar/oscar/basket/partials/basket_totals.html
new file mode 100644
index 0000000..807b08d
--- /dev/null
+++ b/tests/django_oscar/oscar/basket/partials/basket_totals.html
@@ -0,0 +1,291 @@
+{% load i18n %}
+{% load currency_filters %}
+{% load shipping_tags %}
+<div id="basket_totals">
+    <table class="table table-sm">
+        <tbody>
+            {% block basket_header %}
+                <tr>
+                    <th colspan="2">
+                        <h3>{% trans "Basket" %}</h3>
+                    </th>
+                </tr>
+            {% endblock %}
+            {% with offer_discounts=basket.offer_discounts voucher_discounts=basket.grouped_voucher_discounts %}
+            {% block discount_totals %}
+                {% if offer_discounts or voucher_discounts %}
+                    {# Basket total will be discounted so we show a before and after version #}
+                    <tr>
+                        <td>{% trans "Basket total (before discounts)" %}</td>
+                        <td class="text-right">
+                            {% if basket.is_tax_known and not show_tax_separately %}
+                                {{ basket.total_incl_tax_excl_discounts|currency:basket.currency }}
+                            {% else %}
+                                {{ basket.total_excl_tax_excl_discounts|currency:basket.currency }}
+                            {% endif %}
+                        </td>
+                    </tr>
+                    {% for discount in offer_discounts %}
+                        <tr>
+                            <td class="basket-discount">
+                                <span class="badge badge-success">{% trans "Discount" %}</span>
+                                {{ discount.name }}
+                                {% if discount.description %}
+                                    <br/>
+                                    <small>
+                                    {{ discount.description }}
+                                    </small>
+                                {% endif %}
+                            </td>
+                            <td class="text-right">-{{ discount.discount|currency:basket.currency }}</td>
+                        </tr>
+                    {% endfor %}
+                    {% if voucher_discounts %}
+                        <tr>
+                            <th colspan="2">
+                                <h3>{% trans "Vouchers" %}</h3>
+                            </th>
+                        </tr>
+                        {% for discount in voucher_discounts %}
+                            <tr>
+                                <td>
+                                    {{ discount.voucher.name }} ({{ discount.voucher.code }})
+                                    {% if editable %}
+                                        <form action="{% url 'basket:vouchers-remove' pk=discount.voucher.id %}"
+                                              method="POST">
+                                            {% csrf_token %}
+                                            <input type="submit"
+                                                   value="{% trans 'Remove' %}"
+                                                   class="btn btn-sm btn-danger"/>
+                                        </form>
+                                    {% endif %}
+                                </td>
+                                <td class="text-right">-{{ discount.discount|currency:basket.currency }}</td>
+                            </tr>
+                        {% endfor %}
+                    {% endif %}
+                {% endif %}
+            {% endblock %}
+            {% block basket_total %}
+                {% if offer_discounts or voucher_discounts %}
+                    <tr>
+                        <th class="total">{% trans "Basket total (after discounts)" %}</th>
+                        <th class="total text-right">
+                            {% if not show_tax_separately and basket.is_tax_known %}
+                                {{ basket.total_incl_tax|currency:basket.currency }}
+                            {% else %}
+                                {{ basket.total_excl_tax|currency:basket.currency }}
+                            {% endif %}
+                        </th>
+                    </tr>
+                {% else %}
+                    {# No discounts to basket #}
+                    <tr>
+                        <th class="total">{% trans "Basket total" %}</th>
+                        <th class="total text-right">
+                            {% if not show_tax_separately and basket.is_tax_known %}
+                                {{ basket.total_incl_tax|currency:basket.currency }}
+                            {% else %}
+                                {{ basket.total_excl_tax|currency:basket.currency }}
+                            {% endif %}
+                        </th>
+                    </tr>
+                {% endif %}
+            {% endblock %}
+        {% endwith %}
+        {% block shipping_totals %}
+            <tr>
+                <th>&nbsp;</th>
+                <td></td>
+            </tr>
+            <tr>
+                <th colspan="2">
+                    <h3>{% trans "Shipping" %}</h3>
+                    {% if shipping_methods|length > 1 and editable %}
+                        <small>
+                        {% trans "Alternative shipping methods can be chosen during checkout" %}
+                        </small>
+                    {% endif %}
+                </th>
+            </tr>
+            {% if not shipping_method.is_discounted %}
+                <tr>
+                    <th class="total">{{ shipping_method.name }}</th>
+                    <th class="total text-right">
+                        {% if not show_tax_separately and shipping_charge.is_tax_known %}
+                            {{ shipping_charge.incl_tax|currency:basket.currency }}
+                        {% else %}
+                            {{ shipping_charge.excl_tax|currency:basket.currency }}
+                        {% endif %}
+                    </th>
+                </tr>
+            {% else %}
+                {% shipping_charge_discount shipping_method basket as shipping_discount %}
+                {% shipping_charge_excl_discount shipping_method basket as shipping_charge_excl_discount %}
+                {# As shipping is discounted, we break it down into its original charge and a discount #}
+                <tr>
+                    <th class="total">{% trans "Shipping method" %}</th>
+                    <td class="total text-right">{{ shipping_method.name }}</td>
+                </tr>
+                <tr>
+                    <td>{% trans "Shipping total (before discounts)" %}</td>
+                    <td class="text-right">
+                        {% if not show_tax_separately and shipping_charge_excl_discount.is_tax_known %}
+                            {{ shipping_charge_excl_discount.incl_tax|currency:basket.currency }}
+                        {% else %}
+                            {{ shipping_charge_excl_discount.excl_tax|currency:basket.currency }}
+                        {% endif %}
+                    </td>
+                </tr>
+                {# This section needs adjustment to when taxes are shown separately #}
+                <tr>
+                    <td class="basket-discount">
+                        <span class="badge badge-success">{% trans "Discount" %}</span>
+                        {{ shipping_method.discount_name }}
+                    </td>
+                    <td class="text-right">-{{ shipping_discount|currency:basket.currency }}</td>
+                </tr>
+                <tr>
+                    <th class="total">
+                        {% trans "Shipping total (after discounts)" %}
+                    </th>
+                    <th class="total text-right">
+                        {% if not show_tax_separately and shipping_charge.is_tax_known %}
+                            {{ shipping_charge.incl_tax|currency:basket.currency }}
+                        {% else %}
+                            {{ shipping_charge.excl_tax|currency:basket.currency }}
+                        {% endif %}
+                    </th>
+                </tr>
+            {% endif %}
+        {% endblock %}
+        {% block surcharges %}
+            {% if surcharges %}
+                <tr>
+                    <th>&nbsp;</th>
+                    <td></td>
+                </tr>
+                <tr>
+                    <th colspan="2">
+                        <h3>{% trans "Surcharges" %}</h3>
+                    </th>
+                </tr>
+                {% for surcharge in surcharges %}
+                    <tr>
+                        <th class="total">
+                            {{ surcharge.surcharge.name }}
+                        </th>
+                        <th class="total align-right">
+                            {% if not show_tax_separately and surcharge.price.is_tax_known %}
+                                {{ surcharge.price.incl_tax|currency:basket.currency }}
+                            {% else %}
+                                {{ surcharge.price.excl_tax|currency:basket.currency }}
+                            {% endif %}
+                        </th>
+                    </tr>
+                {% endfor %}
+            {% endif %}
+        {% endblock %}
+        {% block tax_totals %}
+            {% if show_tax_separately %}
+                <tr>
+                    <th>
+                        &nbsp;
+                    </th>
+                    <td></td>
+                </tr>
+                <tr>
+                    <th colspan="2">
+                        <h3>
+                            {% trans "Tax" %}
+                        </h3>
+                    </th>
+                </tr>
+                <tr>
+                    <th class="total">
+                        {% trans "Basket" %}
+                    </th>
+                    <th class="total text-right">
+                        {{ basket.total_tax|currency:basket.currency }}
+                    </th>
+                </tr>
+                <tr>
+                    <th class="total">
+                        {% trans "Shipping" %}
+                    </th>
+                    <th class="total text-right">
+                        {{ shipping_charge.tax|currency:basket.currency }}
+                    </th>
+                </tr>
+            {% endif %}
+        {% endblock %}
+        {% block post_order_action_totals %}
+            {% if basket.post_order_actions %}
+                <tr>
+                    <th>
+                        &nbsp;
+                    </th>
+                    <td></td>
+                </tr>
+                <tr>
+                    <th>
+                        <h3>
+                            {% trans "Post order actions" %}
+                        </h3>
+                        <small>
+                        {% trans "These will be applied once your order is placed." %}
+                        </small>
+                    </th>
+                    <td></td>
+                </tr>
+                {% for discount in basket.post_order_actions %}
+                    <tr>
+                        <td class="total" colspan="2">
+                            <span class="badge badge-success">
+                                {{ discount.name }}
+                            </span>
+                            <br/>
+                            <p>
+                                {{ discount.description }}
+                            </p>
+                        </td>
+                    </tr>
+                {% endfor %}
+            {% endif %}
+        {% endblock %}
+        {% block order_total %}
+            <tr>
+                <th>
+                    &nbsp;
+                </th>
+                <td></td>
+            </tr>
+            <tr>
+                <th class="total">
+                    <h3>
+                        {% trans "Order total" %}
+                    </h3>
+                </th>
+                <td class="total text-right">
+                    <h3 class="price_color">
+                        {% if order_total.is_tax_known %}
+                            {{ order_total.incl_tax|currency:basket.currency }}
+                        {% else %}
+                            {{ order_total.excl_tax|currency:basket.currency }}
+                        {% endif %}
+                    </h3>
+                </td>
+            </tr>
+            {% if not order_total.is_tax_known %}
+                <tr>
+                    <td>
+                        <small>
+                        {% trans "Taxes will be added during checkout." %}
+                        </small>
+                    </td>
+                </tr>
+            {% endif %}
+        {% endblock %}
+    </tbody>
+</table>
+</div>
diff --git a/tests/django_oscar/oscar/catalogue/browse.html b/tests/django_oscar/oscar/catalogue/browse.html
new file mode 100644
index 0000000..ef1cf17
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/browse.html
@@ -0,0 +1,133 @@
+{% extends "oscar/layout_2_col.html" %}
+{% load basket_tags %}
+{% load category_tags %}
+{% load product_tags %}
+{% load i18n %}
+{% block title %}
+    {% if summary %}{{ summary }} |{% endif %}
+    {{ block.super }}
+{% endblock %}
+{% block headertext %}{{ summary }}{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ summary }}
+            </li>
+        </ol>
+    </nav>
+{% endblock breadcrumbs %}
+{% block column_left %}
+    {% category_tree as tree_categories %}
+    {% if tree_categories %}
+        <h4>{% trans "Show results for" %}</h4>
+        <div class="side_categories card card-body bg-light">
+            <ul class="nav nav-list">
+                {% for tree_category in tree_categories %}
+                    <li class="mt-2">
+                        <a href="{{ tree_category.url }}">
+                            {% if tree_category.pk == category.pk %}
+                                <strong>{{ tree_category.name }}</strong>
+                            {% else %}
+                                {{ tree_category.name }}
+                            {% endif %}
+                        </a>
+                        {% if tree_category.has_children %}
+                            <ul>
+                            {% else %}
+                            </li>
+                        {% endif %}
+                        {% for n in tree_category.num_to_close %}
+                        </ul>
+                    </li>
+                {% endfor %}
+            {% endfor %}
+        </ul>
+    </div>
+{% endif %}
+{% if has_facets %}
+    <h4>{% trans "Refine by" %}</h4>
+    <div class="side_categories card card-body bg-light">
+        {% for field, data in facet_data.items %}
+            {% if data.results %}
+                {% include 'oscar/search/partials/facet.html' with name=data.name items=data.results %}{% endif %}
+            {% endfor %}
+        </div>
+    {% endif %}
+{% endblock %}
+{% block content %}
+    <form method="get">
+        {# Render other search params as hidden inputs #}
+        {% for value in selected_facets %}
+            <input type="hidden" name="selected_facets" value="{{ value }}" />
+        {% endfor %}
+        <input type="hidden" name="q" value="{{ search_form.q.value|default_if_none:"" }}" />
+        {% if paginator.count %}
+            {% if paginator.num_pages > 1 %}
+                {% blocktrans with start=page_obj.start_index end=page_obj.end_index count num_results=paginator.count %}
+                    <strong>{{ num_results }}</strong>
+                    result - showing
+                    <strong>{{ start }}</strong>
+                    to
+                    <strong>{{ end }}</strong>
+                    .
+                    {% plural %}
+                    <strong>{{ num_results }}</strong>
+                    results - showing
+                    <strong>{{ start }}</strong>
+                    to
+                    <strong>{{ end }}</strong>
+                    .
+                {% endblocktrans %}
+            {% else %}
+                {% blocktrans count num_results=paginator.count %}
+                    <strong>{{ num_results }}</strong>
+                    result.
+                    {% plural %}
+                    <strong>
+                    {{ num_results }}
+                    </strong>
+                    results.
+                {% endblocktrans %}
+            {% endif %}
+            {% if form %}
+                <div class="float-right">
+                    {% include "oscar/partials/form_field.html" with field=form.sort_by style='horizontal' %}
+                </div>
+            {% endif %}
+        {% else %}
+            <p>
+                {% trans "
+                <strong>
+                0
+                </strong>
+                results." %}
+            </p>
+        {% endif %}
+    </form>
+    {% if products %}
+        <section>
+            <div>
+                <ol class="row list-unstyled ml-0 pl-0">
+                    {% for product in products %}
+                        <li class="col-sm-6 col-md-4 col-lg-3">
+                            {% render_product product %}
+                        </li>
+                    {% endfor %}
+                </ol>
+                {% include "oscar/partials/pagination.html" %}
+            </div>
+        </section>
+    {% else %}
+        <p class="nonefound">
+            {% trans "No products found." %}
+        </p>
+    {% endif %}
+{% endblock content %}
+{% block onbodyload %}
+    {{ block.super }}
+    oscar.search.init();
+{% endblock %}
diff --git a/tests/django_oscar/oscar/catalogue/category.html b/tests/django_oscar/oscar/catalogue/category.html
new file mode 100644
index 0000000..b2f164a
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/category.html
@@ -0,0 +1,56 @@
+{% extends "oscar/catalogue/browse.html" %}
+{% load i18n %}
+{% block title %}{{ category.get_meta_title }} | {{ block.super }}{% endblock %}
+{% block description %}{{ category.get_meta_description }}{% endblock %}
+{% block header %}
+    <div class="page-header">
+        {% if user.is_staff %}
+            <a class="float-right d-none d-md-block"
+               href="{% url 'dashboard:catalogue-category-update' pk=category.id %}">
+                <small>
+                <i class="fas fa-pencil-alt"></i>
+                {% trans "Edit this category" %}
+                </small>
+            </a>
+        {% endif %}
+        <h1>
+            {% block headertext %}{{ category.name }}{% endblock %}
+        </h1>
+    </div>
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
+            </li>
+            {% for category in category.get_ancestors %}
+                <li class="breadcrumb-item">
+                    <a href="{{ category.get_absolute_url }}">
+                        {{ category.name }}
+                    </a>
+                </li>
+            {% endfor %}
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ category.name }}
+            </li>
+        </ol>
+    </nav>
+{% endblock breadcrumbs %}
+{% block content %}
+    {% if category.description %}
+        <div class="row">
+            <div class="col-sm-9">
+                <p>
+                    {{ category.description|safe }}
+                </p>
+            </div>
+            {% if category.image %}
+                <div class="col-sm-3">
+                    <img src="{{ category.image.url }}" alt="{{ category.name }}" class="img-fluid" />
+                </div>
+            {% endif %}
+        </div>
+    {% endif %}
+    {{ block.super }}
+{% endblock %}
diff --git a/tests/django_oscar/oscar/catalogue/detail.html b/tests/django_oscar/oscar/catalogue/detail.html
new file mode 100644
index 0000000..4bd3cc1
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/detail.html
@@ -0,0 +1,235 @@
+{% extends "oscar/layout.html" %}
+{% load history_tags %}
+{% load currency_filters %}
+{% load reviews_tags %}
+{% load product_tags %}
+{% load display_tags %}
+{% load i18n %}
+{% load purchase_info_tags %}
+{% block title %}{{ product.get_meta_title }} | {{ block.super }}{% endblock %}
+{% block description %}{{ product.get_meta_description }}{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
+            </li>
+            {% with category=product.get_categories.first %}
+            {% for c in category.get_ancestors_and_self %}
+                <li class="breadcrumb-item">
+                    <a href="{{ c.get_absolute_url }}">
+                        {{ c.name }}
+                    </a>
+                </li>
+            {% endfor %}
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ product.get_title }}
+            </li>
+            {% get_back_button as backbutton %}
+            {% if backbutton %}
+                <li class="float-right">
+                    <a href="{{ backbutton.url }}">
+                        <i class="fas fa-arrow-left"></i>
+                        {{ backbutton.title }}
+                    </a>
+                </li>
+            {% endif %}
+        {% endwith %}
+    </ol>
+</nav>
+{% endblock %}
+{% block header %}{% endblock header %}
+{% block content %}
+    <article class="product_page">
+        <!-- Start of product page -->
+        <div class="row">
+            {% block product_gallery %}
+                <div class="col-sm-6">
+                    {% include "oscar/catalogue/partials/gallery.html" %}
+                </div>
+            {% endblock %}
+            {% block product_main %}
+                <div class="col-sm-6 product_main">
+                    {% comment %}
+                    This is a bit clunky here. Better to have some kind of JS-driven dashboard menu that
+                    pops out when clicked. A bit like the Django-Debug-Toolbar button
+                {% endcomment %}
+                {% if user.is_staff %}
+                    <a class="float-right d-none d-md-block"
+                       href="{% url 'dashboard:catalogue-product' pk=product.id %}">
+                        <small>
+                        <i class="fas fa-pencil-alt"></i>
+                        {% trans "Edit this product" %}
+                        </small>
+                    </a>
+                {% endif %}
+                <h1>{{ product.get_title }}</h1>
+                {% block product_stock_record %}
+                    {% include "oscar/catalogue/partials/stock_record.html" with verbose=1 %}{% endblock %}
+                    {% iffeature "reviews" %}
+                        {% include "oscar/catalogue/reviews/partials/review_stars.html" %}{% endiffeature %}
+                        <hr/>
+                        {% if not product.is_parent %}
+                            {% block product_basket_form %}
+                                {% include "oscar/catalogue/partials/add_to_basket_form.html" %}{% endblock %}
+                            {% else %}
+                                {% block variants %}
+                                    <h2>{% trans 'Variants:' %}</h2>
+                                    {% for child in product.children.public %}
+                                        {% purchase_info_for_product request child as child_session %}
+                                        {% if child_session.availability.is_available_to_buy %}
+                                            <a href="{{ child.get_absolute_url }}">
+                                                {{ child.get_title }}
+                                            </a>
+                                            <br>
+                                        {% endif %}
+                                    {% endfor %}
+                                {% endblock %}
+                            {% endif %}
+                        </div>
+                        <!-- /col-sm-6 -->
+                    {% endblock %}
+                </div>
+                <!-- /row -->
+                {% block product_description %}
+                    {% if product.description %}
+                        <div id="product_description" class="sub-header">
+                            <h2>{% trans "Product Description" %}</h2>
+                        </div>
+                        <p>
+                            {{ product.description|safe }}
+                        </p>
+                    {% endif %}
+                {% endblock %}
+                {% block product_info %}
+                    <div class="sub-header">
+                        <h2>{% trans "Product Information" %}</h2>
+                    </div>
+                    <table class="table table-striped">
+                        {% if product.upc %}
+                            <tr>
+                                <th>{% trans "UPC" %}</th>
+                                <td>{{ product.upc }}</td>
+                            </tr>
+                        {% endif %}
+                        <tr>
+                            <th>{% trans "Product Type" %}</th>
+                            <td>{{ product.get_product_class.name }}</td>
+                        </tr>
+                        {% purchase_info_for_product request product as session %}
+                        {% if session.price.exists %}
+                            <tr>
+                                <th>{% trans "Price (excl. tax)" %}</th>
+                                <td>{{ session.price.excl_tax|currency:session.price.currency }}</td>
+                            </tr>
+                            {% if session.price.is_tax_known %}
+                                <tr>
+                                    <th>
+                                        {% trans "Price (incl. tax)" %}
+                                    </th>
+                                    <td>
+                                        {{ session.price.incl_tax|currency:session.price.currency }}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th>
+                                        {% trans "Tax" %}
+                                    </th>
+                                    <td>
+                                        {{ session.price.tax|currency:session.price.currency }}
+                                    </td>
+                                </tr>
+                            {% endif %}
+                            <tr>
+                                <th>
+                                    {% trans "Availability" %}
+                                </th>
+                                <td>
+                                    {{ session.availability.message }}
+                                </td>
+                            </tr>
+                        {% endif %}
+                        {% for av in product.get_attribute_values %}
+                            <tr>
+                                <th>
+                                    {{ av.attribute.name }}
+                                </th>
+                                <td>
+                                    {{ av.value_as_html }}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                        {% iffeature "reviews" %}
+                            <tr>
+                                <th>
+                                    {% trans "Number of reviews" %}
+                                </th>
+                                <td>
+                                    {{ product.num_approved_reviews }}
+                                </td>
+                            </tr>
+                        {% endiffeature %}
+                    </table>
+                {% endblock %}
+                {% iffeature "reviews" %}
+                    {% block product_review %}
+                        <section>
+                            <div id="reviews" class="sub-header">
+                                {% if product.num_approved_reviews > 3 %}
+                                    <a href="{% url 'catalogue:reviews-list' product_slug=product.slug product_pk=product.id %}"
+                                       class="btn float-right">
+                                        {% trans "See all reviews" %}
+                                    </a>
+                                {% endif %}
+                                <h2>
+                                    {% trans "Customer Reviews" %}
+                                </h2>
+                            </div>
+                            {% if product.num_approved_reviews == 0 %}
+                                <p>
+                                    {% if product|is_review_permitted:user %}
+                                        {% url 'catalogue:reviews-add' product_slug=product.slug product_pk=product.id as add_review_url %}
+                                        {% blocktrans %}
+                                            This product does not have any reviews yet -
+                                            <a href="{{ add_review_url }}#addreview">
+                                                be the first to write one
+                                            </a>
+                                            .
+                                        {% endblocktrans %}
+                                    {% else %}
+                                        {% trans "This product does not have any reviews yet" %}.
+                                    {% endif %}
+                                </p>
+                            {% else %}
+                                <ol class="list-unstyled review-list">
+                                    {% for review in product.reviews.approved.all|slice:":3" %}
+                                        <li>
+                                            {% include 'oscar/catalogue/partials/review.html' %}
+                                        </li>
+                                    {% endfor %}
+                                </ol>
+                            {% endif %}
+                        </section>
+                    {% endblock product_review %}
+                {% endiffeature %}
+                {% with recommended_products=product.sorted_recommended_products|slice:":6" %}
+                {% if recommended_products %}
+                    <div class="sub-header">
+                        <h2>
+                            {% trans "Recommended items" %}
+                        </h2>
+                    </div>
+                    <ul class="row list-unstyled mx-0">
+                        {% for product in recommended_products %}
+                            <li class="col-sm-4 col-md-3 col-lg-3">
+                                {% render_product product %}
+                            </li>
+                        {% endfor %}
+                    </ul>
+                {% endif %}
+            {% endwith %}
+            {% recently_viewed_products current_product=product %}
+        </article>
+        <!-- End of product page -->
+    {% endblock content %}
+    {% block extrascripts %}{{ block.super }}{% endblock %}
diff --git a/tests/django_oscar/oscar/catalogue/partials/add_to_basket_form.html b/tests/django_oscar/oscar/catalogue/partials/add_to_basket_form.html
new file mode 100644
index 0000000..9674784
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/partials/add_to_basket_form.html
@@ -0,0 +1,47 @@
+{% load basket_tags %}
+{% load display_tags %}
+{% load i18n %}
+{% load purchase_info_tags %}
+{% purchase_info_for_product request product as session %}
+{% if session.availability.is_available_to_buy %}
+    {% basket_form request product as basket_form %}
+    <form id="add_to_basket_form"
+          action="{% url 'basket:add' pk=product.pk %}"
+          method="post"
+          class="add-to-basket mb-0">
+        {% csrf_token %}
+        {% include "oscar/partials/form_fields.html" with form=basket_form %}
+        <button type="submit"
+                class="btn btn-lg btn-primary w-100"
+                value="{% trans "
+                Add to basket" %}" data-loading-text="{% trans 'Adding...' %}">
+            {% trans "Add to basket" %}
+        </button>
+    </form>
+    {% iffeature "wishlists" %}
+        {% include "oscar/catalogue/partials/add_to_wishlist.html" %}{% endiffeature %}
+    {% else %}
+        {% if has_active_alert %}
+            <p>
+                {% trans "You have an active stock alert for this product." %}
+            </p>
+        {% else %}
+            <form id="alert_form"
+                  method="post"
+                  action="{% url 'customer:alert-create' pk=product.id %}"
+                  class="add-to-basket mb-0">
+                {% csrf_token %}
+                <p>
+                    {% trans "You can get an email alert when this product is back in stock." %}
+                </p>
+                {% include "oscar/partials/form_fields.html" with form=alert_form %}
+                <button type="submit"
+                        class="btn btn-lg btn-info w-100"
+                        data-loading-text="{% trans 'Submitting...' %}">
+                    {% trans "Notify me" %}
+                </button>
+            </form>
+        {% endif %}
+        {% iffeature "wishlists" %}
+            {% include "oscar/catalogue/partials/add_to_wishlist.html" %}{% endiffeature %}
+        {% endif %}
diff --git a/tests/django_oscar/oscar/catalogue/partials/add_to_basket_form_compact.html b/tests/django_oscar/oscar/catalogue/partials/add_to_basket_form_compact.html
new file mode 100644
index 0000000..8538136
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/partials/add_to_basket_form_compact.html
@@ -0,0 +1,18 @@
+{% load basket_tags %}
+{% load i18n %}
+{% load purchase_info_tags %}
+{% purchase_info_for_product request product as session %}
+{% if session.availability.is_available_to_buy %}
+    {% basket_form request product 'single' as basket_form %}
+    <form action="{% url 'basket:add' pk=product.pk %}" method="post">
+        {% csrf_token %}
+        {{ basket_form.as_p }}
+        <button type="submit" class="btn btn-primary btn-block" data-loading-text="{% trans 'Adding...' %}">
+            {% trans "Add to basket" %}
+        </button>
+    </form>
+{% else %}
+    <span class="btn btn-secondary btn-block disabled">
+        {% trans "Add to basket" %}
+    </span>
+{% endif %}
diff --git a/tests/django_oscar/oscar/catalogue/partials/add_to_wishlist.html b/tests/django_oscar/oscar/catalogue/partials/add_to_wishlist.html
new file mode 100644
index 0000000..e3b80f7
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/partials/add_to_wishlist.html
@@ -0,0 +1,69 @@
+{% load i18n %}
+{% load wishlist_tags %}
+{% if user.is_authenticated %}
+    {% with wishlists=user.wishlists.all %}
+    {# Select wishlists that contains product #}
+    {% wishlists_containing_product wishlists product as product_wishlists %}
+    {% if wishlists %}
+        <div class="btn-group btn-wishlist align-bottom">
+            <a class="btn btn-lg dropdown-toggle" data-toggle="dropdown" href="#">
+                {% trans "Add to wish list" %}
+            </a>
+            <ul class="dropdown-menu dropdown-menu-right">
+                {% for wishlist in wishlists %}
+                    {% if wishlist not in product_wishlists %}
+                        <li>
+                            <a href="{% url 'customer:wishlists-add-product' key=wishlist.key product_pk=product.pk %}"
+                               class="dropdown-item">
+                                {% blocktrans with name=wishlist.name %}
+                                    Add to '{{ name }}' wish list
+                                {% endblocktrans %}
+                            </a>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+                <li>
+                    <a href="{% url 'customer:wishlists-create-with-product' product_pk=product.pk %}"
+                       class="dropdown-item">
+                        {% trans 'Create a new wishlist' %}
+                    </a>
+                </li>
+            </ul>
+        </div>
+    {% else %}
+        {# 1 or no existing wishlists - show a simple button #}
+        <form id="add_to_wishlist_form"
+              action="{% url 'customer:wishlists-add-product' product_pk=product.pk %}"
+              method="post"
+              class="btn-wishlist align-bottom">
+            {% csrf_token %}
+            <button type="submit" class="btn btn-lg" data-loading-text="{% trans 'Adding...' %}">
+                {% trans "Add to wish list" %}
+            </button>
+        </form>
+    {% endif %}
+    {% for wishlist in product_wishlists %}
+        <form action="{% url 'customer:wishlists-remove-product' key=wishlist.key product_pk=product.id %}"
+              method="post">
+            {% csrf_token %}
+            {% blocktrans with name=wishlist.name url=wishlist.get_absolute_url %}
+                <span class="float-left">
+                    Product is in
+                    <a href="{{ url }}">'{{ name }}'</a>
+                    wishlist.
+                </span>
+            {% endblocktrans %}
+            <button type="submit" class="btn btn-sm float-right" data-loading-text="{% trans 'Removing...' %}">
+                {% trans "Remove" %}
+            </button>
+        </form>
+    {% endfor %}
+{% endwith %}
+{% else %}
+<button class="btn btn-lg btn-wishlist align-bottom"
+        disabled="disabled"
+        title="{% trans 'Please login to add products to a wish list.' %}">
+    {% trans 'Add to wish list' %}
+</button>
+<br/>
+{% endif %}
diff --git a/tests/django_oscar/oscar/catalogue/partials/gallery.html b/tests/django_oscar/oscar/catalogue/partials/gallery.html
new file mode 100644
index 0000000..002d19c
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/partials/gallery.html
@@ -0,0 +1,51 @@
+{% load i18n %}
+{% load image_tags %}
+{% with all_images=product.get_all_images %}
+{# use length rather then count as the images get queried anyways #}
+{% if all_images|length > 1 %}
+    <div id="product_gallery" class="carousel slide">
+        <div class="img-thumbnail mb-3">
+            <div class="carousel-inner">
+                {% for image in all_images %}
+                    <div class="carousel-item {% if forloop.first %}active{% endif %}">
+                    {% oscar_thumbnail image.original "440x400" upscale=False as thumb %}
+                    <img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
+                </div>
+            {% endfor %}
+        </div>
+        <a class="carousel-control-prev" href="#product_gallery" role="button" data-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">{% trans "Previous" %}</span>
+        </a>
+        <a class="carousel-control-next" href="#product_gallery" role="button" data-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">{% trans "Next" %}</span>
+        </a>
+    </div>
+    <ol class="carousel-indicators img-thumbnail">
+        {% for image in all_images %}
+            <li data-target="#product_gallery"
+                data-slide-to="{{ forloop.counter0 }}"
+                class="{% if forloop.first %}active{% endif %}">
+            {% oscar_thumbnail image.original "65x55" crop="center" as thumb %}
+            <img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
+        </li>
+    {% endfor %}
+</ol>
+</div>
+{% else %}
+{# Only one image to show #}
+<div id="product_gallery" class="carousel">
+<div class="img-thumbnail">
+    <div class="carousel-inner">
+        <div class="carousel-item active">
+            {% with image=product.primary_image %}
+            {% oscar_thumbnail image.original "440x400" upscale=False as thumb %}
+            <img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
+        {% endwith %}
+    </div>
+</div>
+</div>
+</div>
+{% endif %}
+{% endwith %}
diff --git a/tests/django_oscar/oscar/catalogue/partials/product.html b/tests/django_oscar/oscar/catalogue/partials/product.html
new file mode 100644
index 0000000..07ad908
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/partials/product.html
@@ -0,0 +1,43 @@
+{% load display_tags %}
+{% load i18n %}
+{% load image_tags %}
+{% load reviews_tags %}
+{% block product %}
+    <article class="product_pod">
+        {% block product_image %}
+            <div class="image_container w-100">
+                {% with image=product.primary_image %}
+                {% oscar_thumbnail image.original "x155" upscale=False as thumb %}
+                <a href="{{ product.get_absolute_url }}">
+                    <img src="{{ thumb.url }}" alt="{{ product.get_title }}" class="img-thumbnail w-auto mx-auto my-0">
+                    </a>
+                {% endwith %}
+            </div>
+        {% endblock %}
+        {% block product_review %}
+            {% iffeature "reviews" %}
+                <p class="star-rating {{ product.rating|as_stars }}">
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                </p>
+            {% endiffeature %}
+        {% endblock %}
+        {% block product_title %}
+            <h3 class="mt-3">
+                <a href="{{ product.get_absolute_url }}" title="{{ product.get_title }}">
+                    {{ product.get_title|truncatewords:4 }}
+                </a>
+            </h3>
+        {% endblock %}
+        {% block product_price %}
+            <div class="product_price w-100">
+                {% include "oscar/catalogue/partials/stock_record.html" %}
+                {% if not product.is_parent and not product.has_options %}
+                    {% include "oscar/catalogue/partials/add_to_basket_form_compact.html" %}{% endif %}
+                </div>
+            {% endblock %}
+        </article>
+    {% endblock %}
diff --git a/tests/django_oscar/oscar/catalogue/partials/review.html b/tests/django_oscar/oscar/catalogue/partials/review.html
new file mode 100644
index 0000000..80f54b8
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/partials/review.html
@@ -0,0 +1,77 @@
+{% load reviews_tags %}
+{% load i18n %}
+<article class="review">
+    <header>
+        <h3 class="star-rating {{ review.score|as_stars }}">
+            <span>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+            </span>
+            <a href="{{ review.get_absolute_url }}">
+                {{ review.title }}
+            </a>
+        </h3>
+    </header>
+    <p>
+        {{ review.body|striptags }}
+    </p>
+    <p>
+        <small>
+        {% if review.user == user %}
+            {% blocktrans with review_date=review.date_created %}
+                Reviewed by you on {{ review_date }}
+            {% endblocktrans %}
+        {% else %}
+            {% blocktrans with name=review.reviewer_name review_date=review.date_created %}
+                Reviewed by
+                <strong>{{ name }}</strong>
+                on {{ review_date }}
+            {% endblocktrans %}
+        {% endif %}
+        |
+        <a href="{% url 'catalogue:reviews-detail' product_slug=product.slug product_pk=product.pk pk=review.pk %}">
+            {% trans 'Permalink' %}
+        </a>
+        </small>
+    </p>
+    {% if review|may_vote:user %}
+        <small>
+        {% trans "Is this review helpful?" %}
+        </small>
+        <form action="{% url 'catalogue:reviews-vote' product_slug=product.slug product_pk=product.pk pk=review.pk %}"
+              method="post"
+              class="vote_agree">
+            {% csrf_token %}
+            <input type="hidden" name="delta" value="1"/>
+            <button type="submit" class="btn btn-success btn-sm" data-loading-text="{% trans 'Submitting...' %}">
+                {% trans "Yes" %}
+            </button>
+        </form>
+        <form action="{% url 'catalogue:reviews-vote' product_slug=product.slug product_pk=product.pk pk=review.pk %}"
+              method="post">
+            {% csrf_token %}
+            <input type="hidden" name="delta" value="-1"/>
+            <button type="submit" class="btn btn-danger btn-sm" data-loading-text="{% trans 'Submitting...' %}">
+                {% trans "No" %}
+            </button>
+        </form>
+    {% endif %}
+    <p>
+        <small>
+        {% if review.has_votes %}
+            {% blocktrans with num_up_votes=review.num_up_votes count num_votes=review.total_votes %}
+                <strong>{{ num_up_votes }}</strong>
+                of {{ num_votes }} customer found this useful
+                {% plural %}
+                <strong>{{ num_up_votes }}</strong>
+                of {{ num_votes }} customers found this useful
+            {% endblocktrans %}
+        {% else %}
+            {% trans "This review has no votes." %}
+        {% endif %}
+        </small>
+    </p>
+</article>
diff --git a/tests/django_oscar/oscar/catalogue/partials/stock_record.html b/tests/django_oscar/oscar/catalogue/partials/stock_record.html
new file mode 100644
index 0000000..39e52b5
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/partials/stock_record.html
@@ -0,0 +1,35 @@
+{% load currency_filters %}
+{% load i18n %}
+{% load purchase_info_tags %}
+{% purchase_info_for_product request product as session %}
+{% if session.price.exists %}
+    {% if session.price.excl_tax == 0 %}
+        <p class="price_color">
+            {% trans "Free" %}
+        </p>
+    {% elif session.price.is_tax_known %}
+        <p class="price_color">
+            {{ session.price.incl_tax|currency:session.price.currency }}
+        </p>
+    {% else %}
+        <p class="price_color">
+            {{ session.price.excl_tax|currency:session.price.currency }}
+        </p>
+    {% endif %}
+{% else %}
+    <p class="price_color">
+        &nbsp;
+    </p>
+{% endif %}
+<p class="{{ session.availability.code }} availability">
+    {% if session.availability.is_available_to_buy %}
+        <i class="fas fa-check-circle"></i>
+    {% else %}
+        <i class="fas fa-ban"></i>
+    {% endif %}
+    {% if verbose %}
+        {{ session.availability.message }}
+    {% else %}
+        {{ session.availability.short_message }}
+    {% endif %}
+</p>
diff --git a/tests/django_oscar/oscar/catalogue/reviews/partials/review_stars.html b/tests/django_oscar/oscar/catalogue/reviews/partials/review_stars.html
new file mode 100644
index 0000000..5139f85
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/reviews/partials/review_stars.html
@@ -0,0 +1,30 @@
+{% load reviews_tags %}
+{% load i18n %}
+{% if product.rating != None %}
+    <p class="star-rating {{ product.rating|as_stars }}">
+        <i class="fas fa-star"></i>
+        <i class="fas fa-star"></i>
+        <i class="fas fa-star"></i>
+        <i class="fas fa-star"></i>
+        <i class="fas fa-star"></i>
+        <small>
+        <a href="{% url 'catalogue:reviews-list' product_slug=product.slug product_pk=product.id %}">
+            {% blocktrans count product.num_approved_reviews as num_reviews %}
+                {{ num_reviews }} customer review
+                {% plural %}
+                {{ num_reviews }} customer reviews
+            {% endblocktrans %}
+        </a>
+        </small>
+        &nbsp;
+    {% else %}
+        <p>
+        {% endif %}
+        {% if product|is_review_permitted:user %}
+            <a id="write_review"
+               href="{% url 'catalogue:reviews-add' product_slug=product.slug product_pk=product.id %}#addreview"
+               class="btn btn-success btn-sm">
+                {% trans "Write a review" %}
+            </a>
+        {% endif %}
+    </p>
diff --git a/tests/django_oscar/oscar/catalogue/reviews/review_detail.html b/tests/django_oscar/oscar/catalogue/reviews/review_detail.html
new file mode 100644
index 0000000..0c6b06c
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/reviews/review_detail.html
@@ -0,0 +1,45 @@
+{% extends "oscar/layout.html" %}
+{% load i18n %}
+{% block title %}
+    {{ review.title }} | {% trans "Reviews" %} | {{ product.title }} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
+            </li>
+            {% with category=product.categories.all.0 %}
+            {% for c in category.get_ancestors_and_self %}
+                <li class="breadcrumb-item">
+                    <a href="{{ c.get_absolute_url }}">
+                        {{ c.name }}
+                    </a>
+                </li>
+            {% endfor %}
+            <li class="breadcrumb-item">
+                <a href="{{ product.get_absolute_url }}">
+                    {{ product.title }}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'catalogue:reviews-list' product_slug=product.slug product_pk=product.pk %}">
+                    {% trans "Reviews" %}
+                </a>
+            </li>
+        {% endwith %}
+        <li class="breadcrumb-item active" aria-current="page">
+            {{ review.title }}
+        </li>
+    </ol>
+</nav>
+{% endblock %}
+{% block headertext %}
+{% trans "Customer reviews" %}
+{% endblock %}
+{% block content %}
+<section>
+    {% include 'oscar/catalogue/reviews/review_product.html' %}
+    {% include 'oscar/catalogue/partials/review.html' %}
+</section>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/catalogue/reviews/review_form.html b/tests/django_oscar/oscar/catalogue/reviews/review_form.html
new file mode 100644
index 0000000..cc42883
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/reviews/review_form.html
@@ -0,0 +1,50 @@
+{% extends "oscar/catalogue/detail.html" %}
+{% load i18n %}
+{% block product_review %}
+    <div id="addreview" class="review_add card card-body bg-light">
+        <form id="add_review_form" method="post" action="#addreview">
+            <fieldset>
+                <legend>
+                    {% trans "Leave a product review" %}
+                </legend>
+                {% csrf_token %}
+                {% include 'oscar/partials/form_field.html' with field=form.title %}
+                <div class="reviewrating form-group {% if form.score.errors %}error{% endif %}">
+                <label for="{{ form.score.auto_id }}" class="col-form-label required">
+                    {{ form.score.label|safe }}
+                </label>
+                <div class="controls">
+                    {{ form.score }}
+                    <div class="star-rating {% if form.score.value == '1' %}One{% elif form.score.value == '2' %}Two{% elif form.score.value == '3' %}Three{% elif form.score.value == '4' %}Four{% elif form.score.value == '5' %}Five{% endif %}">
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                </div>
+                {% for error in form.score.errors %}
+                    <span class="error-block">
+                        <i class="fas fa-exclamation"></i>
+                        {{ error }}
+                    </span>
+                {% endfor %}
+            </div>
+            {% comment %}
+            {% include 'oscar/partials/form_field.html' with field=form.score %}{% endcomment %}
+        </div>
+        {% include 'oscar/partials/form_field.html' with field=form.body %}
+        {% if form.name %}
+            {% include 'oscar/partials/form_field.html' with field=form.name %}{% endif %}
+            {% if form.email %}
+                {% include 'oscar/partials/form_field.html' with field=form.email %}{% endif %}
+                <button type="submit" class="btn btn-primary btn-lg" data-loading-text="{% trans 'Saving...' %}">
+                    {% trans "Save review" %}
+                </button>
+                {% trans "or" %}
+                <a href="{{ product.get_absolute_url }}">
+                    {% trans "cancel" %}
+                </a>
+            </fieldset>
+        </form>
+    </div>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/catalogue/reviews/review_list.html b/tests/django_oscar/oscar/catalogue/reviews/review_list.html
new file mode 100644
index 0000000..c71ce96
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/reviews/review_list.html
@@ -0,0 +1,56 @@
+{% extends "oscar/layout.html" %}
+{% load history_tags %}
+{% load i18n %}
+{% block title %}
+    {% trans "All reviews" %} | {{ product.title }} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
+            </li>
+            {% with category=product.categories.all.0 %}
+            {% for c in category.get_ancestors_and_self %}
+                <li class="breadcrumb-item">
+                    <a href="{{ c.get_absolute_url }}">
+                        {{ c.name }}
+                    </a>
+                </li>
+            {% endfor %}
+            <li class="breadcrumb-item">
+                <a href="{{ product.get_absolute_url }}">
+                    {{ product.title }}
+                </a>
+            </li>
+        {% endwith %}
+        <li class="breadcrumb-item active" aria-current="page">
+            {% trans "All reviews" %}
+        </li>
+    </ol>
+</nav>
+{% endblock %}
+{% block headertext %}
+{% trans "Customer reviews" %}
+{% endblock %}
+{% block content %}
+<section>
+    {% include 'oscar/catalogue/reviews/review_product.html' %}
+    {% if reviews %}
+        <form method="get" class="form-inline">
+            {% include "oscar/partials/form_fields_inline.html" with form=form %}
+            <button type="submit" class="btn btn-secondary">
+                {% trans "Go" %}
+            </button>
+        </form>
+        <hr>
+        {% for review in reviews %}
+            {% include 'oscar/catalogue/partials/review.html' %}{% endfor %}
+            {% include 'oscar/partials/pagination.html' %}
+        {% else %}
+            <p>
+                {% trans "This product does not have any reviews yet." %}
+            </p>
+        {% endif %}
+    </section>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/catalogue/reviews/review_product.html b/tests/django_oscar/oscar/catalogue/reviews/review_product.html
new file mode 100644
index 0000000..cfad5d0
--- /dev/null
+++ b/tests/django_oscar/oscar/catalogue/reviews/review_product.html
@@ -0,0 +1,23 @@
+{% load image_tags %}
+<div class="row">
+    <div class="col-sm-2">
+        <div class="image_container w-100">
+            {% with image=product.primary_image %}
+            {% oscar_thumbnail image.original "x155" upscale=False as thumb %}
+            <a href="{{ product.get_absolute_url }}">
+                <img src="{{ thumb.url }}" alt="{{ product.get_title }}" class="img-thumbnail w-auto mx-auto my-0">
+                </a>
+            {% endwith %}
+        </div>
+    </div>
+    <div class="col-sm-10">
+        <h2>
+            <a href="{{ product.get_absolute_url }}">
+                {{ product.get_title }}
+            </a>
+        </h2>
+        {% include "oscar/catalogue/partials/stock_record.html" %}
+        {% include "oscar/catalogue/reviews/partials/review_stars.html" %}
+    </div>
+</div>
+<hr>
diff --git a/tests/django_oscar/oscar/checkout/checkout.html b/tests/django_oscar/oscar/checkout/checkout.html
new file mode 100644
index 0000000..4f1ba60
--- /dev/null
+++ b/tests/django_oscar/oscar/checkout/checkout.html
@@ -0,0 +1,173 @@
+{% extends "oscar/checkout/layout.html" %}
+{% load currency_filters %}
+{% load i18n %}
+{% load image_tags %}
+{% load purchase_info_tags %}
+{% block title %}
+    {% trans "Checkout" %} | {{ block.super }}
+{% endblock %}
+{% block checkout_nav %}
+    {% include 'oscar/checkout/nav.html' %}{% endblock %}
+    {% block content %}
+        {% if error %}
+            <div class="alert alert-danger">
+                {{ error }}
+            </div>
+        {% endif %}
+        <div class="row shipping-payment">
+            {% block shipping_address %}
+                <div class="col-sm-6">
+                    <div class="sub-header">
+                        <h2>{% trans "Shipping" %}</h2>
+                    </div>
+                    {% if shipping_address %}
+                        <div class="card card-body bg-light">
+                            <h3>
+                                {% trans "Address" %}
+                                {% block shipping_address_actions %}
+                                    <a href="{% url 'checkout:shipping-address' %}" class="float-right">
+                                        {% trans "Change" %}
+                                    </a>
+                                {% endblock %}
+                            </h3>
+                            <address>
+                                {% for field in shipping_address.active_address_fields %}
+                                    {{ field }}
+                                    <br/>
+                                {% endfor %}
+                            </address>
+                            {% if shipping_address.phone_number %}
+                                <h4>{% trans "Contact" %}</h4>
+                                <p>
+                                    {% trans "Phone" %}: {{ shipping_address.phone_number }}
+                                    {% if guest_email %}
+                                        <br/>
+                                        {% trans "Email" %}: {{ guest_email }}
+                                    {% endif %}
+                                </p>
+                            {% endif %}
+                            {% if shipping_address.notes %}
+                                <h4>{% trans "Instructions" %}</h4>
+                                <p>
+                                    {{ shipping_address.notes|linebreaks }}
+                                </p>
+                            {% endif %}
+                        </div>
+                    {% endif %}
+                    {% if shipping_method %}
+                        <div class="card card-body bg-light card card-body bg-light-info">
+                            <h3>
+                                {% trans "Shipping method" %}
+                                {% block shipping_method_actions %}
+                                    <a href="{% url 'checkout:shipping-method' %}" class="float-right">
+                                        {% trans "Change" %}
+                                    </a>
+                                {% endblock %}
+                            </h3>
+                            <p>
+                                {{ shipping_method.name }}
+                                {% if shipping_method.description %}- {{ shipping_method.description|safe }}{% endif %}
+                            </p>
+                        </div>
+                    {% endif %}
+                </div>
+            {% endblock shipping_address %}
+            {# You will almost certainly want to override this block to provide a payment summary #}
+            {% block payment_method %}
+                <div class="col-sm-6">
+                    <div class="sub-header">
+                        <h2>{% trans "Payment" %}</h2>
+                    </div>
+                    <div class="card card-body bg-light card card-body bg-light-success">
+                        <h3>
+                            {% trans "Payment" %}
+                            <a href="{% url 'checkout:payment-details' %}" class="float-right">
+                                {% trans "Change" %}
+                            </a>
+                        </h3>
+                        <p>
+                            {% trans "Payment details to go here" %}
+                        </p>
+                    </div>
+                </div>
+            {% endblock payment_method %}
+        </div>
+        {% block order_contents %}
+            <div class="sub-header">
+                {% block order_contents_actions %}
+                    <a href="{% url 'basket:summary' %}" class="float-right">
+                        {% trans "Edit order contents" %}
+                    </a>
+                {% endblock %}
+                <h2>{% trans "Order contents" %}</h2>
+            </div>
+            <div class="basket-title">
+                <div class="row">
+                    <p class="col-sm-9 h4">
+                        {% trans "Item" %}
+                    </p>
+                    <p class="col-sm-1 h4 text-center">
+                        {% trans "Quantity" %}
+                    </p>
+                    <p class="col-sm-2 h4 text-right">
+                        {% trans "Total" %}
+                    </p>
+                </div>
+            </div>
+            {% for line in basket.all_lines %}
+                {% purchase_info_for_line request line as session %}
+                <div class="basket-items">
+                    <div class="row">
+                        <div class="col-sm-2">
+                            <div class="image_container w-100">
+                                {% with image=line.product.primary_image %}
+                                {% oscar_thumbnail image.original "100x100" upscale=False as thumb %}
+                                <a href="{{ form.instance.product.get_absolute_url }}">
+                                    <img src="{{ thumb.url }}"
+                                         alt="{{ product.get_title }}"
+                                         class="img-thumbnail w-auto mx-auto my-0">
+                                    </a>
+                                {% endwith %}
+                            </div>
+                        </div>
+                        <div class="col-sm-7">
+                            <h3>
+                                <a href="{{ line.product.get_absolute_url }}">
+                                    {{ line.description }}
+                                </a>
+                            </h3>
+                            <span class="availability {{ session.availability.code }}">
+                                {{ session.availability.message }}
+                            </span>
+                        </div>
+                        <div class="col-sm-1 text-center">
+                            {{ line.quantity }}
+                        </div>
+                        <div class="col-sm-2 text-right">
+                            <p class="price_color">
+                                {% if not show_tax_separately and line.is_tax_known %}
+                                    {{ line.line_price_incl_tax|currency:basket.currency }}
+                                {% else %}
+                                    {{ line.line_price_excl_tax|currency:basket.currency }}
+                                {% endif %}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+            <div class="row">
+                <div class="col-sm-6">
+                    &nbsp;
+                </div>
+                <div class="col-sm-6">
+                    <div class="sub-header">
+                        <h2>{% trans 'Totals' %}</h2>
+                    </div>
+                    {% include 'oscar/basket/partials/basket_totals.html' %}
+                </div>
+            </div>
+        {% endblock order_contents %}
+        {% block shipping_method %}{% endblock shipping_method %}
+            {% block payment_details %}{% endblock payment_details %}
+                {% block place_order %}{% endblock place_order %}
+                {% endblock content %}
diff --git a/tests/django_oscar/oscar/checkout/gateway.html b/tests/django_oscar/oscar/checkout/gateway.html
new file mode 100644
index 0000000..240ba24
--- /dev/null
+++ b/tests/django_oscar/oscar/checkout/gateway.html
@@ -0,0 +1,64 @@
+{% extends "oscar/checkout/layout.html" %}
+{% load i18n %}
+{% load widget_tweaks %}
+{% block title %}
+    {% trans "Checkout gateway" %} | {{ block.super }}
+{% endblock %}
+{% block checkout_nav %}
+    {% include 'oscar/checkout/nav.html' with step=0 %}{% endblock %}
+    {% block checkout_title %}
+        {% trans "Who are you?" %}
+    {% endblock %}
+    {% block content %}
+        <form method="post" class="card card-body bg-light">
+            {% csrf_token %}
+            {{ form.non_field_errors }}
+            {% include "oscar/partials/form_field.html" with field=form.username %}
+            <div class="form-group">
+                <div class="controls">
+                    <div class="radio">
+                        {{ form.options.0 }}
+                    </div>
+                </div>
+            </div>
+            <div class="form-group {% if form.password.errors %}error{% endif %}">
+            {{ form.options.errors }}
+            <div class="controls">
+                <div class="radio">
+                    {{ form.options.2 }}
+                    <div class="form-inline">
+                        {% render_field form.password class+="form-control mr-sm-2" %}
+                        <small>
+                        <a href="{% url 'password-reset' %}" tabindex="-1">
+                            {% trans "Get a password reminder" %}
+                        </a>
+                        </small>
+                        {% for error in form.password.errors %}<span class="error-block">{{ error }}</span>{% endfor %}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="controls">
+                <div class="radio">
+                    {{ form.options.1 }}
+                </div>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="row">
+                <div class="col-sm-3">
+                    <button type="submit"
+                            class="btn btn-lg btn-block btn-primary"
+                            data-loading-text="{% trans 'Continuing...' %}">
+                        {% trans "Continue" %}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock content %}
+{% block onbodyload %}
+    {{ block.super }}
+    oscar.checkout.gateway.init();
+{% endblock %}
diff --git a/tests/django_oscar/oscar/checkout/layout.html b/tests/django_oscar/oscar/checkout/layout.html
new file mode 100644
index 0000000..76ed5ec
--- /dev/null
+++ b/tests/django_oscar/oscar/checkout/layout.html
@@ -0,0 +1,45 @@
+{% extends "oscar/layout.html" %}
+{% load i18n %}
+{% load category_tags %}
+{% block layout %}
+    <header class="header container">
+        <div class="page_inner">
+            <div class="row">
+                {% include "oscar/partials/brand.html" %}
+            </div>
+            <!-- /row -->
+        </div>
+        {% block checkout_nav %}{% endblock %}
+    </header>
+    <!-- /header -->
+    <div class="container page">
+        <div class="page_inner">
+            {% include 'oscar/partials/alert_messages.html' %}
+            <div class="sub-header">
+                <h1>{% block checkout_title %}{% endblock %}</h1>
+            </div>
+            <!-- The main nav on checkout pages contain links to modal flatpages -->
+            {% block modal %}
+                {% load flatpages %}
+                {% get_flatpages '/order/' as flatpages %}
+                {% for page in flatpages %}
+                    <div id="{{ page.title|slugify }}" class="modal hide fade">
+                        <div class="modal-header">
+                            <a class="close" data-dismiss="modal">
+                                ×
+                            </a>
+                            <h3>{{ page.title }}</h3>
+                        </div>
+                        <div class="modal-body">
+                            <div class="large-content">
+                                {{ page.content|safe }}
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+            {% endblock %}
+            {% block content %}{% endblock %}
+        </div>
+        <!-- /page_inner -->
+    </div>
+    {% include "oscar/partials/footer_checkout.html" %}{% endblock %}
diff --git a/tests/django_oscar/oscar/checkout/nav.html b/tests/django_oscar/oscar/checkout/nav.html
new file mode 100644
index 0000000..8a41194
--- /dev/null
+++ b/tests/django_oscar/oscar/checkout/nav.html
@@ -0,0 +1,65 @@
+{% load i18n %}
+<nav class="navbar navbar-static-top nav-checkout navbar-expand-md navbar-dark bg-dark">
+    <ul class="navbar-nav mr-auto">
+        {% spaceless %}
+            <li >
+                1 %}visited
+            {% else %}
+                disabled
+            {% endif %}
+        {% endif %}
+    {% endif %}
+    ">
+    {% if step == 2 or step == 3 or step == 4 %}
+        <a href="{% url 'checkout:shipping-address' %}" class="nav-link">
+            <i class="fas fa-chevron-right"></i>
+            <span>{% trans "1. Shipping address" %}</span>
+        </a>
+    {% else %}
+        <span class="navbar-text">{% trans "1. Shipping address" %}</span>
+    {% endif %}
+</li>
+<li >
+    2 %}visited
+{% else %}
+    disabled
+{% endif %}
+{% endif %}
+{% endif %}
+">
+{% if step == 3 or step == 4 %}
+<a href="{% url 'checkout:shipping-method' %}" class="nav-link">
+<i class="fas fa-chevron-right"></i>
+<span>{% trans "2. Shipping method" %}</span>
+</a>
+{% else %}
+<span class="navbar-text">{% trans "2. Shipping method" %}</span>
+{% endif %}
+</li>
+<li >
+3 %}visited
+{% else %}
+disabled{% endif %}
+{% endif %}
+{% endif %}
+">
+{% if step == 4 %}
+<a href="{% url 'checkout:payment-details' %}" class="nav-link">
+<i class="fas fa-chevron-right"></i>
+<span>{% trans "3. Payment" %}</span>
+</a>
+{% else %}
+<span class="navbar-text">{% trans "3. Payment" %}</span>
+{% endif %}
+</li>
+<li class="nav-item step4 {% if step == 4 %}active{% else %}disabled{% endif %} ">
+<span class="navbar-text">{% trans "4. Preview" %}</span>
+</li>
+<li class="nav-item step5 {% if step == 5 %}active{% else %}disabled{% endif %} ">
+<span class="navbar-text">{% trans "5. Confirmation" %}</span>
+</li>
+{% endspaceless %}
+</ul>
+<!-- /navbar-inner -->
+</nav>
+<!-- /navbar -->
diff --git a/tests/django_oscar/oscar/checkout/payment_details.html b/tests/django_oscar/oscar/checkout/payment_details.html
new file mode 100644
index 0000000..dd925cf
--- /dev/null
+++ b/tests/django_oscar/oscar/checkout/payment_details.html
@@ -0,0 +1,46 @@
+{% extends "oscar/checkout/checkout.html" %}
+{% load i18n %}
+{% block title %}
+    {% trans "Payment details" %} | {{ block.super }}
+{% endblock %}
+{% block checkout_nav %}
+    {% include 'oscar/checkout/nav.html' with step=3 %}{% endblock %}
+    {% block checkout_title %}
+        {% trans "Enter payment details" %}
+    {% endblock %}
+    {% block order_contents %}{% endblock %}
+    {% block shipping_address %}{% endblock %}
+    {% block shipping_method %}{% endblock %}
+    {% block payment_method %}{% endblock %}
+    {% block payment_details %}
+        {% block payment_details_content %}
+            <p>
+                {% trans "This page needs implementing within your project. You may want to use one of Oscar's payment gateway libraries:" %}
+            </p>
+            <ul>
+                <li>
+                    <a href="https://github.com/django-oscar/django-oscar-paypal">
+                        django-oscar-paypal
+                    </a>
+                </li>
+                <li>
+                    <a href="https://github.com/django-oscar/django-oscar-adyen">
+                        django-oscar-adyen
+                    </a>
+                </li>
+                <li>
+                    <a href="https://github.com/django-oscar/django-oscar-docdata">
+                        django-oscar-docdata
+                    </a>
+                </li>
+                <li>
+                    <a href="https://github.com/django-oscar/django-oscar-accounts">
+                        django-oscar-accounts
+                    </a>
+                </li>
+            </ul>
+            <a id="view_preview" href="{% url 'checkout:preview' %}" class="btn btn-primary btn-lg">
+                {% trans "Continue" %}
+            </a>
+        {% endblock payment_details_content %}
+    {% endblock payment_details %}
diff --git a/tests/django_oscar/oscar/checkout/preview.html b/tests/django_oscar/oscar/checkout/preview.html
new file mode 100644
index 0000000..8768bf3
--- /dev/null
+++ b/tests/django_oscar/oscar/checkout/preview.html
@@ -0,0 +1,37 @@
+{% extends "oscar/checkout/checkout.html" %}
+{% load i18n %}
+{% block title %}
+    {% trans "Order preview" %} | {{ block.super }}
+{% endblock %}
+{% block checkout_nav %}
+    {% include 'oscar/checkout/nav.html' with step=4 %}{% endblock %}
+    {% block checkout_title %}
+        {% trans "Preview order" %}
+    {% endblock %}
+    {% block place_order %}
+        <form method="post" action="{% url 'checkout:preview' %}" id="place_order_form">
+            {% csrf_token %}
+            <input type="hidden" name="action" value="place_order" />
+            {% comment %}
+            When submitting sensitive data on the payment details page (eg a bankcard)
+            we don't want to save the data and so we pass the bound form to the preview
+            template and render it in a hidden div. Then the payment information will
+            get re-submitted when the user confirms the order.
+        {% endcomment %}
+        <div style="display:none">
+            {% block hiddenforms %}{% endblock %}
+        </div>
+        <div class="form-group clearfix">
+            <div class="row">
+                <div class="col-sm-3 offset-sm-9">
+                    <button id='place-order'
+                            type="submit"
+                            class="btn btn-primary btn-lg btn-block"
+                            data-loading-text="{% trans 'Submitting...' %}">
+                        {% trans "Place order" %}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </form>
+{% endblock place_order %}
diff --git a/tests/django_oscar/oscar/checkout/shipping_address.html b/tests/django_oscar/oscar/checkout/shipping_address.html
new file mode 100644
index 0000000..d08d749
--- /dev/null
+++ b/tests/django_oscar/oscar/checkout/shipping_address.html
@@ -0,0 +1,107 @@
+{% extends "oscar/checkout/checkout.html" %}
+{% load i18n %}
+{% block title %}
+    {% trans "Shipping address" %} | {{ block.super }}
+{% endblock %}
+{% block checkout_nav %}
+    {% include 'oscar/checkout/nav.html' with step=1 %}{% endblock %}
+    {% block checkout_title %}
+        {% trans "Shipping address" %}
+    {% endblock %}
+    {% block order_contents %}{% endblock %}
+    {% block shipping_address %}
+        <div class="col-sm-12">
+            <div class="sub-header">
+                <h2>{% trans "Where should we ship to?" %}</h2>
+            </div>
+            {% if user.is_authenticated %}
+                {% if addresses %}
+                    <h3>{% trans "An address from your address book?" %}</h3>
+                    <div class="choose-block">
+                        <div class="row">
+                            {% for address in addresses %}
+                                {% block select_address_form %}
+                                    <div class="col-sm-6 d-flex">
+                                        <div class="card card-body bg-light">
+                                            <address>
+                                                {% block select_address_fields %}
+                                                    {% for field in address.active_address_fields %}
+                                                        <span>{{ field }}</span>
+                                                        {% if not forloop.first %}<br/>{% endif %}
+                                                    {% endfor %}
+                                                {% endblock %}
+                                            </address>
+                                            <form action="{% url 'checkout:shipping-address' %}"
+                                                  method="post"
+                                                  id="select_shipping_address_{{ address.id }}"
+                                                  class="mb-0">
+                                                {% csrf_token %}
+                                                <input type="hidden" name="action" value="ship_to" />
+                                                <input type="hidden" name="address_id" value="{{ address.id }}" />
+                                                {% if address.is_default_for_shipping %}
+                                                    <button type="submit"
+                                                            class="btn btn-success btn-large ship-address"
+                                                            data-loading-text="{% trans 'Saving...' %}">
+                                                        <i class="fas fa-check-circle"></i>
+                                                        {% trans "Ship to your default shipping address" %}
+                                                    </button>
+                                                {% else %}
+                                                    <button type="submit"
+                                                            class="btn btn-primary btn-large ship-address"
+                                                            data-loading-text="{% trans 'Saving...' %}">
+                                                        {% trans "Ship to this address" %}
+                                                    </button>
+                                                {% endif %}
+                                                <div class="btn-group address-controls">
+                                                    <a href="{% url 'checkout:user-address-update' pk=address.id %}"
+                                                       class="btn btn-secondary">
+                                                        {% trans "Edit address" %}
+                                                    </a>
+                                                    <button class="btn btn-secondary dropdown-toggle"
+                                                            data-toggle="dropdown"></button>
+                                                    <ul class="dropdown-menu">
+                                                        <a href="{% url 'checkout:user-address-delete' pk=address.id %}"
+                                                           class="btn-remove-address nav-link">
+                                                            {% trans "Delete" %}
+                                                        </a>
+                                                    </ul>
+                                                </div>
+                                            </form>
+                                        </div>
+                                    </div>
+                                    {% if forloop.counter|divisibleby:2 %}
+                                    </div>
+                                    <div class="row">
+                                    {% endif %}
+                                {% endblock %}
+                            {% endfor %}
+                        </div>
+                    </div>
+                    <h3>{% trans "Or a new address?" %}</h3>
+                {% endif %}
+            {% endif %}
+            {% block new_address_form %}
+                <div class="card card-body bg-light">
+                    <form action="{% url 'checkout:shipping-address' %}" method="post" id="new_shipping_address">
+                        {% csrf_token %}
+                        {% include "oscar/partials/form_fields.html" with form=form style='horizontal' %}
+                        <div class="form-group row">
+                            <div class="offset-sm-4 col-sm-8">
+                                <button type="submit"
+                                        class="btn btn-lg btn-primary"
+                                        data-loading-text="{% trans 'Continuing...' %}">
+                                    {% trans "Continue" %}
+                                </button>
+                                {% trans "or" %}
+                                <a href="{% url 'basket:summary' %}">
+                                    {% trans "return to basket" %}
+                                </a>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            {% endblock %}
+        </div>
+    {% endblock shipping_address %}
+    {% block shipping_method %}{% endblock %}
+    {% block payment_method %}{% endblock %}
diff --git a/tests/django_oscar/oscar/checkout/shipping_methods.html b/tests/django_oscar/oscar/checkout/shipping_methods.html
new file mode 100644
index 0000000..4c424c4
--- /dev/null
+++ b/tests/django_oscar/oscar/checkout/shipping_methods.html
@@ -0,0 +1,69 @@
+{% extends "oscar/checkout/checkout.html" %}
+{% load currency_filters %}
+{% load i18n %}
+{% load shipping_tags %}
+{% block title %}
+    {% trans "Shipping method" %} | {{ block.super }}
+{% endblock %}
+{% block checkout_nav %}
+    {% include 'oscar/checkout/nav.html' with step=2 %}{% endblock %}
+    {% block checkout_title %}
+        {% trans "Shipping method" %}
+    {% endblock %}
+    {% block order_contents %}{% endblock %}
+    {% block shipping_address %}{% endblock %}
+    {% block payment_method %}{% endblock %}
+    {% block shipping_method %}
+        <div class="basket-title">
+            <div class="row">
+                <h4 class="col-sm-8 m-0">{% trans "Method" %}</h4>
+                <h4 class="col-sm-3 m-0">{% trans "Cost" %}</h4>
+            </div>
+        </div>
+        {% for method in methods %}
+            <div class="basket-items">
+                <div class="row">
+                    <div class="col-sm-8">
+                        <h4>{{ method.name }}</h4>
+                        {% if method.description %}
+                            <p>
+                                {{ method.description|safe }}
+                            </p>
+                        {% endif %}
+                        {% if method.is_discounted %}
+                            <small>
+                            {% shipping_charge_discount method basket as discount %}
+                            {% blocktrans with amount=discount|currency:basket.currency name=method.discount_name %}
+                                This includes a discount of
+                                <strong>{{ amount }}</strong>
+                                as
+                                your basket qualifies for the
+                                <strong>{{ name }}</strong>
+                                offer.
+                            {% endblocktrans %}
+                            </small>
+                        {% endif %}
+                    </div>
+                    <div class="col-sm-1">
+                        {% shipping_charge method basket as charge %}
+                        {% if charge.is_tax_known %}
+                            {{ charge.incl_tax|currency:basket.currency }}
+                        {% else %}
+                            {{ charge.excl_tax|currency:basket.currency }}
+                        {% endif %}
+                    </div>
+                    <div class="col-sm-3">
+                        <form method="post" action="{% url 'checkout:shipping-method' %}">
+                            {% csrf_token %}
+                            <input type="hidden" name="method_code" value="{{ method.code }}" />
+                            <button type="submit"
+                                    class="btn btn-lg btn-primary float-right"
+                                    data-loading-text="{% trans 'Submitting...' %}">
+                                {% trans "Select option" %}
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    {% endblock shipping_method %}
diff --git a/tests/django_oscar/oscar/checkout/thank_you.html b/tests/django_oscar/oscar/checkout/thank_you.html
new file mode 100644
index 0000000..914f31a
--- /dev/null
+++ b/tests/django_oscar/oscar/checkout/thank_you.html
@@ -0,0 +1,225 @@
+{% extends "oscar/checkout/layout.html" %}
+{% load currency_filters %}
+{% load i18n %}
+{% load image_tags %}
+{% block title %}
+    {% blocktrans with number=order.number %}
+        Order {{ number }}: confirmation
+    {% endblocktrans %}
+    | {{ block.super }}
+{% endblock title %}
+{% block checkout_nav %}
+    {% include 'oscar/checkout/nav.html' with step=5 %}{% endblock %}
+    {% block checkout_title %}
+        {% blocktrans with number=order.number %}
+            Order {{ number }}: confirmation
+        {% endblocktrans %}
+    {% endblock %}
+    {% block content %}
+        <p class="lead">
+            {% blocktrans with number=order.number %}
+                Your order has been placed and a confirmation email has been sent - your order number is
+                <strong>{{ number }}</strong>
+                .
+            {% endblocktrans %}
+            {% trans "Please make a note of this reference or print this page and quote it in any communication with us regarding your order." %}
+        </p>
+        <div class="row shipping-payment">
+            <div class="col-sm-6">
+                {% block shipping_info %}
+                    <div class="sub-header">
+                        <h2>{% trans "Shipping" %}</h2>
+                    </div>
+                    <div class="card card-body bg-light">
+                        <h3>{% trans "Address" %}</h3>
+                        {% if order.shipping_address %}
+                            <address>
+                                {% for field in order.shipping_address.active_address_fields %}
+                                    {{ field }}
+                                    <br/>
+                                {% endfor %}
+                            </address>
+                            {% if order.shipping_address.phone_number %}
+                                <h4>{% trans "Contact" %}</h4>
+                                <p>
+                                    {% trans "Phone" %}: {{ order.shipping_address.phone_number }}
+                                    {% if order.guest_email %}
+                                        <br/>
+                                        {% trans "Email" %}: {{ order.guest_email }}
+                                    {% endif %}
+                                </p>
+                            {% endif %}
+                            {% if order.shipping_address.notes %}
+                                <h4>{% trans "Instructions" %}</h4>
+                                <p>
+                                    {{ order.shipping_address.notes|linebreaks }}
+                                </p>
+                            {% endif %}
+                        {% else %}
+                            <p>
+                                {% trans "No shipping address required." %}
+                            </p>
+                        {% endif %}
+                    </div>
+                    <div class="card card-body bg-light">
+                        <h3>{% trans "Shipping method" %}</h3>
+                        <p>
+                            {{ order.shipping_method }}
+                        </p>
+                    </div>
+                {% endblock %}
+            </div>
+            <div class="col-sm-6">
+                {% block payment_info %}
+                    <div class="sub-header">
+                        <h2>{% trans "Payment" %}</h2>
+                    </div>
+                    <div class="card card-body bg-light">
+                        <h3>{% trans "Payment" %}</h3>
+                        {% for source in order.sources.all %}
+                            <p>
+                                {% if source.reference %}
+                                    {% blocktrans with amount=source.amount_allocated|currency:source.currency type=source.source_type.name reference=source.reference %}
+                                        Allocation of {{ amount }} from type {{ type }} (reference: {{ reference }})
+                                    {% endblocktrans %}
+                                {% else %}
+                                    {% blocktrans with amount=source.amount_allocated|currency:source.currency type=source.source_type.name %}
+                                        Allocation of {{ amount }} from type {{ type }}
+                                    {% endblocktrans %}
+                                {% endif %}
+                            </p>
+                            {% empty %}
+                            <p>
+                                {% trans "No payment was required for this order." %}
+                            </p>
+                        {% endfor %}
+                        {% if order.billing_address %}
+                            <h4>{% trans "Billing address" %}</h4>
+                            <address>
+                                {% for field in order.billing_address.active_address_fields %}
+                                    {{ field }}
+                                    <br/>
+                                {% endfor %}
+                            </address>
+                        {% endif %}
+                    </div>
+                {% endblock %}
+            </div>
+        </div>
+        {% block order_contents %}
+            <div class="sub-header">
+                <h2>{% trans "Order contents" %}</h2>
+            </div>
+            <div class="basket-title">
+                <div class="row">
+                    <p class="col-sm-9 h4">
+                        {% trans "Items purchased" %}
+                    </p>
+                    <p class="col-sm-1 h4 text-center">
+                        {% trans "Quantity" %}
+                    </p>
+                    <p class="col-sm-2 h4 text-right">
+                        {% trans "Total" %}
+                    </p>
+                </div>
+            </div>
+            {% for line in order.lines.all %}
+                <div class="basket-items">
+                    <div class="row">
+                        <div class="col-sm-2">
+                            <div class="image_container w-100">
+                                {% with image=line.product.primary_image %}
+                                {% oscar_thumbnail image.original "200x200" upscale=False as thumb %}
+                                <a href="{{ line.product.get_absolute_url }}">
+                                    <img src="{{ thumb.url }}"
+                                         alt="{{ product.get_title }}"
+                                         class="img-thumbnail w-auto mx-auto my-0">
+                                    </a>
+                                {% endwith %}
+                            </div>
+                        </div>
+                        <div class="col-sm-7">
+                            <h3>
+                                <a href="{{ line.product.get_absolute_url }}">
+                                    {{ line.description }}
+                                </a>
+                            </h3>
+                            {% if line.upc %}
+                                <p>
+                                    {{ line.upc }}
+                                </p>
+                            {% endif %}
+                        </div>
+                        <div class="col-sm-1 text-center">
+                            {{ line.quantity }}
+                        </div>
+                        <div class="col-sm-2 text-right">
+                            <p class="price_color">
+                                {% if show_tax_separately %}
+                                    {{ line.line_price_before_discounts_excl_tax|currency:order.currency }}
+                                {% else %}
+                                    {{ line.line_price_before_discounts_incl_tax|currency:order.currency }}
+                                {% endif %}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+            {% block basket_totals %}
+                <div class="row">
+                    <div class="col-sm-6">
+                        &nbsp;
+                    </div>
+                    <div class="col-sm-6">
+                        <div class="sub-header">
+                            <h2>
+                                {% trans 'Totals' %}
+                            </h2>
+                        </div>
+                        {% include 'oscar/order/partials/basket_totals.html' %}
+                    </div>
+                </div>
+            {% endblock basket_totals %}
+        {% endblock order_contents %}
+        {% block order_tracking %}
+            {% if not order.user %}
+                <div class="sub-header">
+                    <h2>
+                        {% trans "Tracking your order" %}
+                    </h2>
+                </div>
+                <p>
+                    {% trans "You can track the status of your order" %}
+                    <a class="btn btn-primary"
+                       href="{% url 'customer:anon-order' order_number=order.number hash=order.verification_hash %}">
+                        {% trans "View order status" %}
+                    </a>
+                    .
+                </p>
+            {% endif %}
+        {% endblock %}
+        {% block order_actions %}
+            <div class="form-group">
+                <div class="row">
+                    <div class="col-sm-4">
+                        <p>
+                            <a onclick="window.print()" href="#" class="btn btn-primary btn-block btn-lg">
+                                {% trans "Print this page" %}
+                            </a>
+                        </p>
+                    </div>
+                    <div class="col-sm-4 offset-sm-4">
+                        <p>
+                            <a href="{{ homepage_url }}" class="btn btn-primary btn-block btn-lg">
+                                {% trans "Continue shopping" %}
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        {% endblock order_actions %}
+    {% endblock content %}
+    {% block tracking %}
+        {% if send_analytics_event %}
+            {% include "oscar/partials/google_analytics_transaction.html" %}{% endif %}
+        {% endblock %}
diff --git a/tests/django_oscar/oscar/checkout/user_address_delete.html b/tests/django_oscar/oscar/checkout/user_address_delete.html
new file mode 100644
index 0000000..93a7ff1
--- /dev/null
+++ b/tests/django_oscar/oscar/checkout/user_address_delete.html
@@ -0,0 +1,38 @@
+{% extends "oscar/checkout/checkout.html" %}
+{% load i18n %}
+{% block title %}
+    {% trans "Delete address?" %} | {{ block.super }}
+{% endblock title %}
+{% block order_contents %}{% endblock %}
+{% block shipping_method %}{% endblock %}
+{% block payment_method %}{% endblock %}
+{% block payment_details %}{% endblock %}
+{% block checkout_nav %}
+    {% include 'oscar/checkout/nav.html' with step=1 %}{% endblock %}
+    {% block checkout_title %}
+        {% trans "Delete address?" %}
+    {% endblock %}
+    {% block shipping_address %}
+        <form method="post" id="delete_address_{{ object.id }}">
+            {% csrf_token %}
+            <div class="card card-body bg-light">
+                <address>
+                    {% for field in object.active_address_fields %}
+                        {{ field }}
+                        <br/>
+                    {% endfor %}
+                </address>
+            </div>
+            <p>
+                {% trans "Are you sure you want to delete this address?" %}
+                <button type="submit" class="btn btn-danger" data-loading-text="{% trans 'Submitting...' %}">
+                    {% trans "Yes!" %}
+                </button>
+                {% trans "or" %}
+                <a href="{% url 'checkout:shipping-address' %}">
+                    {% trans "cancel" %}
+                </a>
+                .
+            </p>
+        </form>
+    {% endblock shipping_address %}
diff --git a/tests/django_oscar/oscar/checkout/user_address_form.html b/tests/django_oscar/oscar/checkout/user_address_form.html
new file mode 100644
index 0000000..6ce5da7
--- /dev/null
+++ b/tests/django_oscar/oscar/checkout/user_address_form.html
@@ -0,0 +1,36 @@
+{% extends "oscar/checkout/checkout.html" %}
+{% load i18n %}
+{% block title %}
+    {% trans "Edit address" %} | {{ block.super }}
+{% endblock title %}
+{% block order_contents %}{% endblock %}
+{% block shipping_method %}{% endblock %}
+{% block payment_method %}{% endblock %}
+{% block payment_details %}{% endblock %}
+{% block checkout_nav %}
+    {% include 'oscar/checkout/nav.html' with step=1 %}{% endblock %}
+    {% block checkout_title %}
+        {% trans "Edit address" %}
+    {% endblock %}
+    {% block shipping_address %}
+        <div class="card card-body bg-light">
+            <form id="update_user_address" method="post">
+                {% csrf_token %}
+                {% include "oscar/partials/form_fields.html" with form=form style='horizontal' %}
+                <div class="form-group row">
+                    <div class="offset-sm-4 col-sm-8">
+                        <button type="submit"
+                                class="btn btn-lg btn-primary"
+                                data-loading-text="{% trans 'Saving...' %}">
+                            {% trans "Save" %}
+                        </button>
+                        {% trans "or" %}
+                        <a href="{% url 'checkout:shipping-address' %}">
+                            {% trans "cancel" %}
+                        </a>
+                        .
+                    </div>
+                </div>
+            </form>
+        </div>
+    {% endblock shipping_address %}
diff --git a/tests/django_oscar/oscar/communication/email/email_detail.html b/tests/django_oscar/oscar/communication/email/email_detail.html
new file mode 100644
index 0000000..72c4bd9
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/email/email_detail.html
@@ -0,0 +1,41 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block extra_breadcrumbs %}
+    <li class="breadcrumb-item">
+        <a href="{% url 'customer:email-list' %}">
+            {% trans 'Email history' %}
+        </a>
+    </li>
+{% endblock %}
+{% block tabcontent %}
+    <table class="table table-striped table-bordered">
+        <tr>
+            <th>{% trans 'Date sent' %}</th>
+            <td>{{ email.date_sent }}</td>
+        </tr>
+        <tr>
+            <th>{% trans 'Subject' %}</th>
+            <td>{{ email.subject }}</td>
+        </tr>
+        <tr>
+            <th>{% trans 'Body' %}</th>
+            <td>
+                <iframe id="preview_box" width="100%" height="400">
+                {{ email.body_html|safe }}
+                </iframe>
+            </td>
+        </tr>
+    </table>
+{% endblock tabcontent %}
+{% block onbodyload %}
+    {{ block.super }}
+    $(function() {
+    // Sets the HTML email preview so it's css doesn't touch the page.
+    var el_preview_html = document.getElementById('preview_box');
+    var html = $(el_preview_html).text();
+    var doc = el_preview_html.contentWindow.document;
+    doc.open();
+    doc.write(html);
+    doc.close();
+    });
+{% endblock %}
diff --git a/tests/django_oscar/oscar/communication/email/email_list.html b/tests/django_oscar/oscar/communication/email/email_list.html
new file mode 100644
index 0000000..ac79b9b
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/email/email_list.html
@@ -0,0 +1,31 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block tabcontent %}
+    {% if emails %}
+        <table class="table table-striped table-bordered">
+            <thead>
+                <tr>
+                    <th>{% trans 'Subject' %}</th>
+                    <th>{% trans 'Date sent' %}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for email in emails %}
+                    <tr>
+                        <td>
+                            <a href="{% url 'customer:email-detail' email_id=email.id %}">
+                                {{ email.subject }}
+                            </a>
+                        </td>
+                        <td>{{ email.date_sent }}</td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% include "oscar/partials/pagination.html" %}
+    {% else %}
+        <p>
+            {% trans 'No emails found' %}
+        </p>
+    {% endif %}
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/communication/emails/base.html b/tests/django_oscar/oscar/communication/emails/base.html
new file mode 100644
index 0000000..921599b
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/base.html
@@ -0,0 +1,302 @@
+{% load i18n %}
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <meta name="viewport" content="width=device-width" />
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <style>
+            * {
+              margin: 0;
+              font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+              box-sizing: border-box;
+              font-size: 14px;
+            }
+
+            img {
+              max-width: 100%;
+            }
+
+            body {
+              -webkit-font-smoothing: antialiased;
+              -webkit-text-size-adjust: none;
+              width: 100% !important;
+              height: 100%;
+              line-height: 1.6em;
+            }
+
+            table td {
+              vertical-align: top;
+            }
+
+            body {
+              background-color: #f6f6f6;
+            }
+
+            .body-wrap {
+              background-color: #f6f6f6;
+              width: 100%;
+            }
+
+            .container {
+              display: block !important;
+              max-width: 600px !important;
+              margin: 0 auto !important;
+              clear: both !important;
+            }
+
+            .content {
+              max-width: 600px;
+              margin: 0 auto;
+              display: block;
+              padding: 20px;
+            }
+
+            .main {
+              background-color: #fff;
+              border: 1px solid #e9e9e9;
+              border-radius: 3px;
+            }
+
+            .content-wrap {
+              padding: 20px;
+            }
+
+            .content-block {
+              padding: 0 0 20px;
+            }
+
+            .header {
+              width: 100%;
+              margin-bottom: 20px;
+            }
+
+            .footer {
+              width: 100%;
+              clear: both;
+              color: #999;
+              padding: 20px;
+            }
+            .footer p, .footer a, .footer td {
+              color: #999;
+              font-size: 12px;
+            }
+
+            h1, h2, h3 {
+              font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+              color: #000;
+              margin: 40px 0 0;
+              line-height: 1.2em;
+              font-weight: 400;
+            }
+
+            h1 {
+              font-size: 32px;
+              font-weight: 500;
+            }
+
+            h2 {
+              font-size: 24px;
+            }
+
+            h3 {
+              font-size: 18px;
+            }
+
+            h4 {
+              font-size: 14px;
+              font-weight: 600;
+            }
+
+            p, ul, ol {
+              margin-bottom: 10px;
+              font-weight: normal;
+            }
+            p li, ul li, ol li {
+              margin-left: 5px;
+              list-style-position: inside;
+            }
+
+            a {
+              color: #348eda;
+              text-decoration: underline;
+            }
+
+            .btn-primary {
+              text-decoration: none;
+              color: #FFF;
+              background-color: #348eda;
+              border: solid #348eda;
+              border-width: 10px 20px;
+              line-height: 2em;
+              font-weight: bold;
+              text-align: center;
+              cursor: pointer;
+              display: inline-block;
+              border-radius: 5px;
+              text-transform: capitalize;
+            }
+
+            .last {
+              margin-bottom: 0;
+            }
+
+            .first {
+              margin-top: 0;
+            }
+
+            .aligncenter {
+              text-align: center;
+            }
+
+            .alignright {
+              text-align: right;
+            }
+
+            .alignleft {
+              text-align: left;
+            }
+
+            .clear {
+              clear: both;
+            }
+
+            .alert {
+              font-size: 16px;
+              color: #fff;
+              font-weight: 500;
+              padding: 20px;
+              text-align: center;
+              border-radius: 3px 3px 0 0;
+            }
+            .alert a {
+              color: #fff;
+              text-decoration: none;
+              font-weight: 500;
+              font-size: 16px;
+            }
+            .alert.alert-warning {
+              background-color: #FF9F00;
+            }
+            .alert.alert-bad {
+              background-color: #D0021B;
+            }
+            .alert.alert-good {
+              background-color: #68B90F;
+            }
+
+            .invoice {
+              margin: 40px auto;
+              text-align: left;
+              width: 80%;
+            }
+            .order {
+              text-align: left;
+              width: 100%;
+            }
+            .invoice td, .order td {
+              padding: 5px 0;
+            }
+            .invoice .invoice-items, .order .order-items {
+              width: 100%;
+            }
+            .invoice .invoice-items td, .order .order-items td {
+              border-top: #eee 1px solid;
+            }
+            .invoice .invoice-items .total td, .order .order-items .total td {
+              border-top: 2px solid #333;
+              border-bottom: 2px solid #333;
+              font-weight: 700;
+            }
+
+            @media only screen and (max-width: 640px) {
+              body {
+                padding: 0 !important;
+              }
+
+              h1, h2, h3, h4 {
+                font-weight: 800 !important;
+                margin: 20px 0 5px !important;
+              }
+
+              h1 {
+                font-size: 22px !important;
+              }
+
+              h2 {
+                font-size: 18px !important;
+              }
+
+              h3 {
+                font-size: 16px !important;
+              }
+
+              .container {
+                padding: 0 !important;
+                width: 100% !important;
+              }
+
+              .content {
+                padding: 0 !important;
+              }
+
+              .content-wrap {
+                padding: 10px !important;
+              }
+
+              .invoice {
+                width: 100% !important;
+              }
+
+              .order {
+                width: 100% !important;
+              }
+            }
+
+        </style>
+    </head>
+    <body itemscope itemtype="http://schema.org/EmailMessage">
+        <table class="body-wrap">
+            <tr>
+                <td></td>
+                <td class="container" width="600">
+                    <div class="content">
+                        <table class="main"
+                               width="100%"
+                               cellpadding="0"
+                               cellspacing="0"
+                               itemprop="action"
+                               itemscope itemtype="http://schema.org/ConfirmAction">
+                            <tr>
+                                <td class="content-wrap">
+                                    <table width="100%" cellpadding="0" cellspacing="0">
+                                        {% block header %}{% endblock %}
+                                        {% block tbody %}
+                                            <tr>
+                                                <td class="content-block">{% block body %}{% endblock %}</td>
+                                            </tr>
+                                        {% endblock %}
+                                        {% block footer %}
+                                            <tr>
+                                                <td class="content-block">
+                                                    <p>
+                                                        {% trans "Thanks for using our site!" %}
+                                                    </p>
+                                                    <p>
+                                                        {% blocktrans with name=site.name %}
+                                                            The {{ name }} team
+                                                        {% endblocktrans %}
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                        {% endblock %}
+                                    </table>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </td>
+                <td></td>
+            </tr>
+        </table>
+    </body>
+</html>
diff --git a/tests/django_oscar/oscar/communication/emails/base.txt b/tests/django_oscar/oscar/communication/emails/base.txt
new file mode 100644
index 0000000..95f76a2
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/base.txt
@@ -0,0 +1,4 @@
+{% load i18n %}{% block header %}{% endblock %}{% block body %}{% endblock %}{% block footer %}
+
+{% trans "Thanks for using our site!" %}
+{% blocktrans with name=site.name %}The {{ name }} team{% endblocktrans %}{% endblock %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_email_changed_body.html b/tests/django_oscar/oscar/communication/emails/commtype_email_changed_body.html
new file mode 100644
index 0000000..127caa3
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_email_changed_body.html
@@ -0,0 +1,31 @@
+{% extends "oscar/communication/emails/base.html" %}
+{% load i18n %}
+{% load url_tags %}
+{% block tbody %}
+    <tr>
+        <td class="content-block">
+            {% blocktrans with email=new_email %}
+                You're receiving this email because your email address has been changed to
+                <strong>{{ email }}</strong>
+                .
+            {% endblocktrans %}
+        </td>
+    </tr>
+    <tr>
+        <td class="content-block">
+            {% trans "If it wasn't you who changed it, please reset your password immediately and correct your email address:" %}
+        </td>
+    </tr>
+    <tr>
+        <td class="content-block">
+            <a href="{% absolute_url site.domain reset_url %}" class="btn-primary">
+                Reset password
+            </a>
+        </td>
+    </tr>
+    <tr>
+        <td class="content-block">
+            {% trans "If it was you who changed the email address, you can ignore this email." %}
+        </td>
+    </tr>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_email_changed_body.txt b/tests/django_oscar/oscar/communication/emails/commtype_email_changed_body.txt
new file mode 100644
index 0000000..ab3f91c
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_email_changed_body.txt
@@ -0,0 +1,11 @@
+{% extends "oscar/communication/emails/base.txt" %}
+{% load i18n %}
+{% load url_tags %}
+
+{% block body %}{% autoescape off %}{% blocktrans with email=new_email %}You're receiving this email because your email address has been changed to {{ email }}.{% endblocktrans %}
+
+{% trans "If it wasn't you who changed it, please reset your password immediately and correct your email address:" %}
+{% absolute_url site.domain reset_url %}
+
+{% trans "If it was you who changed the email address, you can ignore this email." %}
+{% endautoescape %}{% endblock %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_email_changed_subject.txt b/tests/django_oscar/oscar/communication/emails/commtype_email_changed_subject.txt
new file mode 100644
index 0000000..e52dfed
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_email_changed_subject.txt
@@ -0,0 +1 @@
+{% load i18n %}{% blocktrans with site_name=site.name %}Your email address has changed at {{ site_name }}.{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_order_placed_body.html b/tests/django_oscar/oscar/communication/emails/commtype_order_placed_body.html
new file mode 100644
index 0000000..7f969cc
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_order_placed_body.html
@@ -0,0 +1,85 @@
+{% extends "oscar/communication/emails/base.html" %}
+{% load currency_filters i18n %}
+{% block tbody %}
+    <tr>
+        <td class="content-block">
+            <p xmlns="http://www.w3.org/1999/html">
+                {% trans 'Hello,' %}
+            </p>
+            <p>
+                {% blocktrans with order_number=order.number %}
+                    We are pleased to confirm your order {{ order_number }} has been received and
+                    will be processed shortly.
+                {% endblocktrans %}
+            </p>
+        </td>
+    </tr>
+    <tr>
+        <td class="content-block">
+            <table class="order">
+                <tbody>
+                    <tr>
+                        <td>{% trans 'Your order contains:' %}</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <table class="order-items" cellpadding="0" cellspacing="0">
+                                <tbody>
+                                    {% for line in order.lines.all %}
+                                        <tr>
+                                            <td>{{ line.title }} &times; {{ line.quantity }}</td>
+                                            <td class="alignright">
+                                                {{ line.line_price_incl_tax|currency:order.currency }}
+                                            </td>
+                                        </tr>
+                                    {% endfor %}
+                                    <tr>
+                                        <td class="alignright">{% trans 'Basket total:' %}</td>
+                                        <td class="alignright">
+                                            {{ order.basket_total_incl_tax|currency:order.currency }}
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="alignright">{% trans 'Shipping:' %}</td>
+                                        <td class="alignright">
+                                            {{ order.shipping_incl_tax|currency:order.currency }}
+                                        </td>
+                                    </tr>
+                                    <tr class="total">
+                                        <td class="alignright" width="80%">{% trans 'Order Total:' %}</td>
+                                        <td class="alignright">{{ order.total_incl_tax|currency:order.currency }}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </td>
+    </tr>
+    <tr>
+        <td class="content-block">
+            <p>
+                {% trans 'Shipping address:' %}
+            </p>
+            <p>
+                {% for field in order.shipping_address.active_address_fields %}
+                    {{ field }}
+                    <br/>
+                {% endfor %}
+            </p>
+        </td>
+    </tr>
+    {% if status_url %}
+        <tr>
+            <td class="content-block">
+                {% blocktrans %}
+                    You can view the status of this order by clicking
+                    <a href="{{ status_url }}" title="order status">
+                        here
+                    </a>
+                {% endblocktrans %}
+            </td>
+        </tr>
+    {% endif %}
+{% endblock %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_order_placed_body.txt b/tests/django_oscar/oscar/communication/emails/commtype_order_placed_body.txt
new file mode 100644
index 0000000..2dd27ef
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_order_placed_body.txt
@@ -0,0 +1,24 @@
+{% load currency_filters i18n %}{% blocktrans with order_number=order.number %}Hello,
+
+We are pleased to confirm your order {{ order_number }} has been received and
+will be processed shortly.{% endblocktrans %}
+
+{% trans 'Your order contains:' %}
+
+{% for line in order.lines.all %} * {{ line.title }} - {%  trans 'quantity:' %} {{ line.quantity }} - {% trans 'price:' %} {{ line.line_price_incl_tax|currency:order.currency }}
+{% endfor %}
+{% trans 'Basket total:' %} {{ order.basket_total_incl_tax|currency:order.currency }}
+{% trans 'Shipping:' %} {{ order.shipping_incl_tax|currency:order.currency }}
+{% trans 'Order Total:' %} {{ order.total_incl_tax|currency:order.currency }}
+
+{% trans 'Shipping address:' %}
+
+{% for field in order.shipping_address.active_address_fields %}  {{ field }}
+{% endfor %}
+
+{% if status_url %}
+{% blocktrans %}You can view the status of this order at the below URL:
+{{ status_url }}{% endblocktrans %}
+{% endif %}
+
+{% blocktrans %}The team{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_order_placed_subject.txt b/tests/django_oscar/oscar/communication/emails/commtype_order_placed_subject.txt
new file mode 100644
index 0000000..de79025
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_order_placed_subject.txt
@@ -0,0 +1 @@
+{% load i18n %}{% blocktrans with number=order.number %}Confirmation of order {{ number }}{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_password_changed_body.html b/tests/django_oscar/oscar/communication/emails/commtype_password_changed_body.html
new file mode 100644
index 0000000..1dc6a09
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_password_changed_body.html
@@ -0,0 +1,29 @@
+{% extends "oscar/communication/emails/base.html" %}
+{% load i18n %}
+{% load url_tags %}
+{% block tbody %}
+    <tr>
+        <td class="content-block">
+            {% blocktrans with name=site.name %}
+                You're receiving this e-mail because your password has been changed at {{ name }}.
+            {% endblocktrans %}
+        </td>
+    </tr>
+    <tr>
+        <td class="content-block">
+            {% trans "If it wasn't you who changed it, please reset your password immediately:" %}
+        </td>
+    </tr>
+    <tr>
+        <td class="content-block">
+            <a href="{% absolute_url site.domain reset_url %}" class="btn-primary">
+                {% trans "Reset password" %}
+            </a>
+        </td>
+    </tr>
+    <tr>
+        <td class="content-block">
+            {% trans "Otherwise, you can ignore this email." %}
+        </td>
+    </tr>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_password_changed_body.txt b/tests/django_oscar/oscar/communication/emails/commtype_password_changed_body.txt
new file mode 100644
index 0000000..732292b
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_password_changed_body.txt
@@ -0,0 +1,14 @@
+{% extends "oscar/communication/emails/base.txt" %}
+{% load i18n %}
+{% load url_tags %}
+
+{% block body %}{% autoescape off %}{% blocktrans with name=site.name %}
+You're receiving this email because your password has been changed at {{ name }}.
+{% endblocktrans %}
+
+{% trans "If it wasn't you who changed it, please reset your password immediately:" %}
+{% absolute_url site.domain reset_url %}
+
+{% trans "Otherwise, you can ignore this email." %}
+
+{% endautoescape %}{% endblock %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_password_changed_subject.txt b/tests/django_oscar/oscar/communication/emails/commtype_password_changed_subject.txt
new file mode 100644
index 0000000..429a9bd
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_password_changed_subject.txt
@@ -0,0 +1 @@
+{% load i18n %}{% blocktrans with site_name=site.name %}Your password changed at {{ site_name }}.{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_password_reset_body.html b/tests/django_oscar/oscar/communication/emails/commtype_password_reset_body.html
new file mode 100644
index 0000000..cb95b85
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_password_reset_body.html
@@ -0,0 +1,24 @@
+{% extends "oscar/communication/emails/base.html" %}
+{% load i18n %}
+{% load url_tags %}
+{% block tbody %}
+    <tr>
+        <td class="content-block">
+            {% blocktrans with name=site.name %}
+                You're receiving this e-mail because you requested a password reset for your user account at {{ name }}.
+            {% endblocktrans %}
+        </td>
+    </tr>
+    <tr>
+        <td class="content-block">
+            {% trans "Please go to the following page and choose a new password:" %}
+        </td>
+    </tr>
+    <tr>
+        <td class="content-block">
+            <a href="{% absolute_url site.domain reset_url %}" class="btn-primary">
+                {% trans "Reset password" %}
+            </a>
+        </td>
+    </tr>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_password_reset_body.txt b/tests/django_oscar/oscar/communication/emails/commtype_password_reset_body.txt
new file mode 100644
index 0000000..aa2e8b6
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_password_reset_body.txt
@@ -0,0 +1,9 @@
+{% extends "oscar/communication/emails/base.txt" %}
+{% load i18n %}
+{% load url_tags %}
+
+{% block body %}{% autoescape off %}
+{% blocktrans with name=site.name %}You're receiving this e-mail because you requested a password reset for your user account at {{ name }}.{% endblocktrans %}
+
+{% trans "Please go to the following page and choose a new password:" %}
+{% absolute_url site.domain reset_url %}{% endautoescape %}{% endblock %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_password_reset_subject.txt b/tests/django_oscar/oscar/communication/emails/commtype_password_reset_subject.txt
new file mode 100644
index 0000000..335dff0
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_password_reset_subject.txt
@@ -0,0 +1 @@
+{% load i18n %}{% blocktrans with site_name=site.name %}Resetting your password at {{ site_name }}.{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_product_alert_body.html b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_body.html
new file mode 100644
index 0000000..e5a0142
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_body.html
@@ -0,0 +1,34 @@
+{% extends "oscar/communication/emails/base.html" %}
+{% load i18n %}
+{% load url_tags %}
+{% block body %}
+    <p>
+        {% if alert.user and alert.user.get_short_name %}
+            {% blocktrans with name=alert.user.get_short_name %}
+                Dear {{ name }},
+            {% endblocktrans %}
+        {% else %}
+            {% trans "Hello," %}
+        {% endif %}
+    </p>
+    <p>
+        {% absolute_url site.domain alert.product.get_absolute_url as url %}
+        {% blocktrans with title=alert.product.get_title|safe url=url %}
+            We are happy to inform you that our product '{{ title }}' is back in stock:
+            {{ url }}
+        {% endblocktrans %}
+    </p>
+    {% if hurry %}
+        <p>
+            {% blocktrans %}
+                Beware that the amount of items in stock is limited. Be quick or someone might get there first.
+            {% endblocktrans %}
+        </p>
+    {% endif %}
+    <p>
+        {% blocktrans %}
+            With this email we have disabled your alert automatically and you will not
+            receive any further email regarding this product.
+        {% endblocktrans %}
+    </p>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_product_alert_body.txt b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_body.txt
new file mode 100644
index 0000000..fab5a60
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_body.txt
@@ -0,0 +1,14 @@
+{% load i18n %}{% load url_tags %}{% if alert.user and alert.user.get_short_name %}{% blocktrans with name=alert.user.get_short_name %}Dear {{ name }},{% endblocktrans %}{% else %}{% trans "Hello," %}{% endif %}
+{% absolute_url site.domain alert.product.get_absolute_url as url %}
+{% blocktrans with title=alert.product.get_title|safe url=url %}
+We are happy to inform you that our product '{{ title }}' is back in stock:
+{{ url }}
+{% endblocktrans %}{% if hurry %}{% blocktrans %}
+Beware that the amount of items in stock is limited. Be quick or someone might get there first.
+{% endblocktrans %}{% endif %}{% blocktrans with site_name=site.name %}
+With this email we have disabled your alert automatically and you will not
+receive any further email regarding this product.
+
+Thanks for your interest,
+The {{ site_name }} Team
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_body.html b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_body.html
new file mode 100644
index 0000000..099f8d4
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_body.html
@@ -0,0 +1,21 @@
+{% extends "oscar/communication/emails/base.html" %}
+{% load i18n %}
+{% load url_tags %}
+{% block body %}
+    {% absolute_url site.domain alert.get_confirm_url as confirm_url %}
+    {% absolute_url site.domain alert.get_cancel_url as cancel_url %}
+    {% blocktrans with title=alert.product.get_title|safe confirm_url=confirm_url cancel_url=cancel_url %}
+        Hello,
+        <p>
+            Somebody (hopefully you) has requested an email alert when '{{ title }}' is back in stock.
+            Please click the following link to confirm: {{ confirm_url }}
+        </p>
+        <p>
+            You can cancel this alert at any time by clicking the following link: {{ cancel_url }}
+        </p>
+        <p>
+            Thanks for your interest,
+            The {{ site }} Team
+        </p>
+    {% endblocktrans %}
+{% endblock %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_body.txt b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_body.txt
new file mode 100644
index 0000000..dba6e27
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_body.txt
@@ -0,0 +1,17 @@
+{% load i18n %}
+{% load url_tags %}
+{% absolute_url site.domain alert.get_confirm_url as confirm_url %}
+{% absolute_url site.domain alert.get_cancel_url as cancel_url %}
+{% blocktrans with title=alert.product.get_title|safe confirm_url=confirm_url cancel_url=cancel_url %}
+Hello,
+
+Somebody (hopefully you) has requested an email alert when
+'{{ title }}' is back in stock.  Please click the following link
+to confirm: {{ confirm_url }}
+
+You can cancel this alert at any time by clicking the following link:
+{{ cancel_url }}
+
+Thanks for your interest,
+The {{ site }} Team
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_subject.txt b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_subject.txt
new file mode 100644
index 0000000..f9b4b4e
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_confirmation_subject.txt
@@ -0,0 +1 @@
+{% load i18n %}{% blocktrans %}Confirmation required for stock alert{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_product_alert_subject.txt b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_subject.txt
new file mode 100644
index 0000000..c427d7d
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_product_alert_subject.txt
@@ -0,0 +1 @@
+{% load i18n %}{% blocktrans with title=alert.product.get_title|safe  %}{{ title }} is back in stock{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_registration_body.html b/tests/django_oscar/oscar/communication/emails/commtype_registration_body.html
new file mode 100644
index 0000000..e50ba06
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_registration_body.html
@@ -0,0 +1,4 @@
+{% load i18n %}
+<p>
+    {% trans 'Thank you for registering.' %}
+</p>
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_registration_body.txt b/tests/django_oscar/oscar/communication/emails/commtype_registration_body.txt
new file mode 100644
index 0000000..028d1a0
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_registration_body.txt
@@ -0,0 +1 @@
+{% load i18n %}{% trans 'Thank you for registering.' %}
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_registration_sms.txt b/tests/django_oscar/oscar/communication/emails/commtype_registration_sms.txt
new file mode 100644
index 0000000..e69de29
diff --git a/tests/django_oscar/oscar/communication/emails/commtype_registration_subject.txt b/tests/django_oscar/oscar/communication/emails/commtype_registration_subject.txt
new file mode 100644
index 0000000..028d1a0
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/emails/commtype_registration_subject.txt
@@ -0,0 +1 @@
+{% load i18n %}{% trans 'Thank you for registering.' %}
diff --git a/tests/django_oscar/oscar/communication/notifications/detail.html b/tests/django_oscar/oscar/communication/notifications/detail.html
new file mode 100644
index 0000000..85e85e6
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/notifications/detail.html
@@ -0,0 +1,43 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block extra_breadcrumbs %}
+    <li class="breadcrumb-item">
+        <a href="{% url 'customer:notifications-inbox' %}">
+            {% trans 'Notifications inbox' %}
+        </a>
+    </li>
+{% endblock %}
+{% block tabcontent %}
+    <table class="table table-striped table-bordered">
+        {% if notification.sender %}
+            <tr>
+                <th>{% trans 'Sender' %}</th>
+                <td>{{ notification.sender }}</td>
+            </tr>
+        {% endif %}
+        <tr>
+            <th>{% trans 'Date sent' %}</th>
+            <td>{{ notification.date_sent }}</td>
+        </tr>
+        {% if notification.body %}
+            <tr>
+                <th>{% trans 'Subject' %}</th>
+                <td>{{ notification.subject|safe }}</td>
+            </tr>
+            <tr>
+                <th>{% trans 'Body' %}</th>
+                <td>{{ notification.body }}</td>
+            </tr>
+        {% else %}
+            <tr>
+                <th>{% trans 'Message' %}</th>
+                <th>{{ notification.subject|safe }}</th>
+            </tr>
+        {% endif %}
+    </table>
+    <div class="form-group form-actions">
+        <a href="{% url 'customer:notifications-inbox' %}" class="btn btn-secondary">
+            {% trans 'Return to notifications inbox' %}
+        </a>
+    </div>
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/communication/notifications/list.html b/tests/django_oscar/oscar/communication/notifications/list.html
new file mode 100644
index 0000000..7a5e688
--- /dev/null
+++ b/tests/django_oscar/oscar/communication/notifications/list.html
@@ -0,0 +1,91 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block tabcontent %}
+    <ul class="nav nav-tabs">
+        <li class="nav-item">
+            <a href="{% url 'customer:notifications-inbox' %}"
+               class="nav-link{% if list_type == 'inbox' %}active{% endif %}">
+            {% trans 'Inbox' %}
+        </a>
+    </li>
+    <li class="nav-item">
+        <a href="{% url 'customer:notifications-archive' %}"
+           class="nav-link{% if list_type == 'archive' %}active{% endif %}">
+        {% trans 'Archive' context 'noun' %}
+    </a>
+</li>
+</ul>
+{% if notifications %}
+{% include "oscar/partials/pagination.html" %}
+<form action="{% url 'customer:notifications-update' %}" method="post">
+    {% csrf_token %}
+    <table class="table table-striped table-bordered">
+        <tbody>
+            {% for notification in notifications %}
+                <tr>
+                    <td>
+                        <input type="checkbox" name="selected_notification" value="{{ notification.id }}"/>
+                    </td>
+                    <td>
+                        {% if notification.is_read %}
+                            <i class="fas fa-inbox"></i>
+                        {% else %}
+                            <i class="fas fa-envelope"></i>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if notification.is_read %}
+                            {{ notification.subject|safe }}
+                        {% else %}
+                            <strong>{{ notification.subject|safe }}</strong>
+                        {% endif %}
+                        <br/>
+                        <em>{{ notification.date_sent }}</em>
+                    </td>
+                    <td>
+                        <a href="{% url 'customer:notifications-detail' pk=notification.pk %}"
+                           class="btn btn-info btn-sm">
+                            {% trans 'View' %}
+                        </a>
+                        {% if list_type == 'inbox' %}
+                            <a class="btn btn-success btn-sm" href="#" data-behaviours="archive">
+                                {% trans 'Archive' context 'verb' %}
+                            </a>
+                        {% endif %}
+                        <a class="btn btn-danger btn-sm" href="#" data-behaviours="delete">
+                            {% trans 'Delete' %}
+                        </a>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    {% trans "With selected items:" %}
+    {% if list_type == 'inbox' %}
+        <button type="submit"
+                class="btn btn-success"
+                name="action"
+                value="archive"
+                data-loading-text="{% trans 'Archiving...' %}">
+            {% trans "Archive" context 'verb' %}
+        </button>
+    {% endif %}
+    <button type="submit"
+            class="btn btn-danger"
+            name="action"
+            value="delete"
+            data-loading-text="{% trans 'Deleting...' %}">
+        {% trans "Delete" %}
+    </button>
+</form>
+{% include "oscar/partials/pagination.html" %}
+{% else %}
+<p class="mt-3">
+    {% trans "There are no notifications to display." %}
+</p>
+{% endif %}
+{% endblock tabcontent %}
+{% block onbodyload %}
+{{ block.super }}
+oscar.notifications.init();
+{% endblock %}
diff --git a/tests/django_oscar/oscar/customer/address/address_delete.html b/tests/django_oscar/oscar/customer/address/address_delete.html
new file mode 100644
index 0000000..0c6c298
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/address/address_delete.html
@@ -0,0 +1,29 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block extra_breadcrumbs %}
+    <li class="breadcrumb-item">
+        <a href="{% url 'customer:address-list' %}">
+            {% trans 'Address book' %}
+        </a>
+    </li>
+{% endblock %}
+{% block tabcontent %}
+    <form method="post">
+        {% csrf_token %}
+        <p>
+            {% trans 'Are you sure you want to delete this address?' %}
+        </p>
+        <p>
+            <strong>{{ object.summary }}</strong>
+        </p>
+        <div class="form-group form-actions">
+            <button type="submit" class="btn btn-danger btn-lg" data-loading-text="{% trans 'Deleting...' %}">
+                {% trans 'Delete' %}
+            </button>
+            {% trans 'or' %}
+            <a href="{% url 'customer:address-list' %}">
+                {% trans 'cancel' %}
+            </a>
+        </div>
+    </form>
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/address/address_form.html b/tests/django_oscar/oscar/customer/address/address_form.html
new file mode 100644
index 0000000..349fe8b
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/address/address_form.html
@@ -0,0 +1,13 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block extra_breadcrumbs %}
+    <li class="breadcrumb-item">
+        <a href="{% url 'customer:address-list' %}">
+            {% trans 'Address book' %}
+        </a>
+    </li>
+{% endblock %}
+{% block tabcontent %}
+    {% with style='horizontal' %}
+    {% include "oscar/partials/form.html" %}{% endwith %}
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/address/address_list.html b/tests/django_oscar/oscar/customer/address/address_list.html
new file mode 100644
index 0000000..4a1ea5e
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/address/address_list.html
@@ -0,0 +1,67 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block tabcontent %}
+    {% if addresses %}
+        <table class="table table-striped table-bordered">
+            <tbody>
+                <tr>
+                    <th>{% trans 'Address' %}</th>
+                    <th></th>
+                </tr>
+                {% for address in addresses %}
+                    <tr>
+                        <td>
+                            {% if address.is_default_for_shipping %}
+                                <span class="badge badge-success">{% trans 'Default shipping address' %}</span>
+                            {% endif %}
+                            {% if address.is_default_for_billing %}
+                                <span class="badge badge-info">{% trans 'Default billing address' %}</span>
+                            {% endif %}
+                            <address>
+                                {% for field in address.active_address_fields %}
+                                    {{ field }}
+                                    <br/>
+                                {% endfor %}
+                            </address>
+                        </td>
+                        <td>
+                            <div class="btn-group">
+                                <a class="btn btn-secondary" href="{% url 'customer:address-detail' pk=address.id %}">
+                                    {% trans 'Edit' %}
+                                </a>
+                                <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"></button>
+                                <div class="dropdown-menu">
+                                    <a href="{% url 'customer:address-delete' pk=address.id %}" class="dropdown-item">
+                                        {% trans 'Delete' %}
+                                    </a>
+                                    {% if address.country.is_shipping_country and not address.is_default_for_shipping %}
+                                        <a href="{% url 'customer:address-change-status' pk=address.id action='default_for_shipping' %}"
+                                           class="dropdown-item">
+                                            {% trans 'Set as default shipping address' %}
+                                        </a>
+                                    {% endif %}
+                                    {% if not address.is_default_for_billing %}
+                                        <a href="{% url 'customer:address-change-status' pk=address.id action='default_for_billing' %}"
+                                           class="dropdown-item">
+                                            {% trans 'Set as default billing address' %}
+                                        </a>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% include "oscar/partials/pagination.html" %}
+    {% else %}
+        <p>
+            {% trans 'There are no addresses in your address book.' %}
+        </p>
+    {% endif %}
+    <p>
+        <a href="{% url 'customer:address-create' %}" class="btn btn-primary">
+            {% trans 'Add a new address' %}
+        </a>
+    </p>
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/alerts/alert_list.html b/tests/django_oscar/oscar/customer/alerts/alert_list.html
new file mode 100644
index 0000000..f1f1b12
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/alerts/alert_list.html
@@ -0,0 +1,47 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block tabcontent %}
+    {% if not alerts %}
+        <p>
+            {% trans "You do not have any active alerts for out-of-stock products." %}
+        </p>
+    {% else %}
+        <form method="post" id="alerts_form">
+            {% csrf_token %}
+            <table class="table table-striped table-bordered">
+                <tr>
+                    <th>{% trans "Product" %}</th>
+                    <th>{% trans "Status" %}</th>
+                    <th>{% trans "Date created" %}</th>
+                    <th></th>
+                </tr>
+                {% for alert in alerts %}
+                    <tr>
+                        <td>
+                            {% with product=alert.product %}
+                            {% if product.is_public %}
+                                <a href="{{ product.get_absolute_url }}">
+                                    {{ product.get_title }}
+                                </a>
+                            {% else %}
+                                {{ product.get_title }}
+                            {% endif %}
+                        {% endwith %}
+                    </td>
+                    <td>{{ alert.status }}</td>
+                    <td>{{ alert.date_created }}</td>
+                    <td>
+                        {% if alert.can_be_cancelled %}
+                            <a href="{% url 'customer:alerts-cancel-by-pk' pk=alert.pk %}?next={% url 'customer:alerts-list' %}"
+                               class="btn btn-danger">
+                                {% trans "Cancel" %}
+                            </a>
+                        {% endif %}
+                    </td>
+                </tr>
+            {% endfor %}
+        </table>
+        {% include "oscar/partials/pagination.html" %}
+    </form>
+{% endif %}
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/alerts/form.html b/tests/django_oscar/oscar/customer/alerts/form.html
new file mode 100644
index 0000000..dc2abbe
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/alerts/form.html
@@ -0,0 +1 @@
+{% extends 'oscar/catalogue/detail.html' %}
diff --git a/tests/django_oscar/oscar/customer/alerts/message.html b/tests/django_oscar/oscar/customer/alerts/message.html
new file mode 100644
index 0000000..8f58dbe
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/alerts/message.html
@@ -0,0 +1,5 @@
+{% load i18n %}
+{% blocktrans with url=alert.product.get_absolute_url title=alert.product.get_title %}
+    <a href="{{ url }}">{{ title }}</a>
+    is back in stock
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/customer/alerts/message_subject.html b/tests/django_oscar/oscar/customer/alerts/message_subject.html
new file mode 100644
index 0000000..0fa7401
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/alerts/message_subject.html
@@ -0,0 +1,4 @@
+{% load i18n %}
+{% blocktrans with title=alert.product.get_title|truncatechars:200 %}
+    {{ title }} is back in stock
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/customer/anon_order.html b/tests/django_oscar/oscar/customer/anon_order.html
new file mode 100644
index 0000000..420fb42
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/anon_order.html
@@ -0,0 +1,151 @@
+{% extends "oscar/layout.html" %}
+{% load currency_filters %}
+{% load i18n %}
+{% load reviews_tags %}
+{% load display_tags %}
+{% block headertext %}
+    {% blocktrans with number=order.number %}
+        Order #{{ number }}
+    {% endblocktrans %}
+{% endblock %}
+{% block content %}
+    {% if order.status %}
+        <div class="sub-header">
+            <h3>{% trans 'Status' %}</h3>
+        </div>
+        <p>
+            {{ order.status }}
+        </p>
+    {% endif %}
+    {% with address=order.shipping_address %}
+    <div class="sub-header">
+        <h3>{% trans 'Shipping address' %}</h3>
+    </div>
+    <table class="table table-striped table-bordered">
+        <tr>
+            <th>{% trans 'Address' %}</th>
+            <td>
+                {% for field in address.active_address_fields %}
+                    {{ field }}
+                    <br/>
+                {% endfor %}
+            </td>
+        </tr>
+        {% if address.phone_number %}
+            <tr>
+                <th>{% trans 'Contact number' %}</th>
+                <td>{{ address.phone_number }}</td>
+            </tr>
+        {% endif %}
+        {% if address.notes %}
+            <tr>
+                <th>{% trans 'Notes' %}</th>
+                <td>{{ address.notes|linebreaks }}</td>
+            </tr>
+        {% endif %}
+    </table>
+{% endwith %}
+<div class="sub-header">
+    <h3>{% trans 'Shipping method' %}</h3>
+</div>
+<p>
+    {{ order.shipping_method }}
+</p>
+<div class="sub-header">
+    <h3>{% trans 'Order contents' %}</h3>
+</div>
+{% csrf_token %}
+<table class="table table-striped table-bordered">
+    <tr>
+        <th>{% trans 'Product' %}</th>
+        <th>
+            {% trans 'Status' %}
+        </th>
+        <th>
+            {% trans 'Quantity' %}
+        </th>
+        <th>
+            {% trans 'Line price excl. tax' %}
+        </th>
+        <th>
+            {% trans 'Line price incl. tax' %}
+        </th>
+        {% iffeature "reviews" %}
+            <th></th>
+        {% endiffeature %}
+    </tr>
+    {% for line in order.lines.all %}
+        <tr>
+            <td>
+                {% if product.is_public %}
+                    <a href="{{ line.product.get_absolute_url }}">
+                        {{ line.description }}
+                    </a>
+                {% else %}
+                    {{ line.description }}
+                {% endif %}
+            </td>
+            <td>
+                {{ line.shipping_status|default:"-" }}
+            </td>
+            <td>
+                {{ line.quantity }}
+            </td>
+            <td>
+                {{ line.line_price_before_discounts_excl_tax|currency:order.currency }}
+            </td>
+            <td>
+                {{ line.line_price_before_discounts_incl_tax|currency:order.currency }}
+            </td>
+            {% iffeature "reviews" %}
+                <td>
+                    {% if line.product|is_review_permitted:user %}
+                        <a href="{% url 'catalogue:reviews-add' product_slug=line.product.slug product_pk=line.product.id %}"
+                           class="btn btn-primary">
+                            {% trans 'Write a review' %}
+                        </a>
+                    {% endif %}
+                </td>
+            {% endiffeature %}
+        </tr>
+    {% endfor %}
+    {% for discount in order.discounts.all %}
+        <tr>
+            <td colspan="5">{{ discount.description }}</td>
+            <td>
+                -{{ discount.amount|currency:order.currency }}
+            </td>
+            <td colspan="1"></td>
+        </tr>
+    {% endfor %}
+</table>
+<table class="table table-striped table-bordered">
+    <caption>
+    {% trans 'Totals' %}
+    </caption>
+    <tr>
+        <th>
+            {% trans 'Basket total (inc. tax)' %}
+        </th>
+        <td>
+            {{ order.basket_total_incl_tax|currency:order.currency }}
+        </td>
+    </tr>
+    <tr>
+        <th>
+            {% trans 'Shipping charge (inc. tax)' %}
+        </th>
+        <td>
+            {{ order.shipping_incl_tax|currency:order.currency }}
+        </td>
+    </tr>
+    <tr>
+        <th>
+            {% trans 'Order total' %}
+        </th>
+        <td>
+            {{ order.total_incl_tax|currency:order.currency }}
+        </td>
+    </tr>
+</table>
+{% endblock content %}
diff --git a/tests/django_oscar/oscar/customer/baseaccountpage.html b/tests/django_oscar/oscar/customer/baseaccountpage.html
new file mode 100644
index 0000000..9b6d618
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/baseaccountpage.html
@@ -0,0 +1,34 @@
+{% extends "oscar/layout_2_col.html" %}
+{% load i18n %}
+{% block title %}
+    {{ page_title }} | {% trans 'Account' %} | {{ block.super }}
+{% endblock %}
+{% block body_class %}account-profile{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:summary' %}">
+                    {% trans 'Account' %}
+                </a>
+            </li>
+            {% block extra_breadcrumbs %}{% endblock %}
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ page_title }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ page_title }}{% endblock %}
+{% block column_left %}
+    <ul class="nav nav-pills flex-column">
+        {% block standard_tabs %}
+            {% include 'oscar/customer/partials/standard_tabs.html' %}{% endblock %}
+        </ul>
+    {% endblock %}
+    {% block content %}
+        {% block tabcontent %}{% endblock tabcontent %}
+        {% endblock content %}
diff --git a/tests/django_oscar/oscar/customer/history/recently_viewed_products.html b/tests/django_oscar/oscar/customer/history/recently_viewed_products.html
new file mode 100644
index 0000000..b0827e9
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/history/recently_viewed_products.html
@@ -0,0 +1,16 @@
+{% load i18n %}
+{% load product_tags %}
+{% with products_sliced=products|slice:":6" %}
+{% if products_sliced %}
+    <div class="sub-header">
+        <h2>{% trans 'Products you recently viewed' %}</h2>
+    </div>
+    <ul class="row list-unstyled mx-0">
+        {% for product in products_sliced %}
+            <li class="col-sm-4 col-md-3 col-lg-3">
+                {% render_product product %}
+            </li>
+        {% endfor %}
+    </ul>
+{% endif %}
+{% endwith %}
diff --git a/tests/django_oscar/oscar/customer/login_registration.html b/tests/django_oscar/oscar/customer/login_registration.html
new file mode 100644
index 0000000..6da4063
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/login_registration.html
@@ -0,0 +1,58 @@
+{% extends "oscar/layout.html" %}
+{% load i18n %}
+{% block title %}
+    {% trans 'Login or register' %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans 'Login or register' %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}{% endblock %}
+{% block content %}
+    <div class="row">
+        <div class="col-sm-6 login_form">
+            <form id="login_form" action="{{ request.get_full_path }}" method="post" class="card card-body bg-light" >
+                <h2>{% trans 'Log In' %}</h2>
+                {% csrf_token %}
+                {% include "oscar/partials/form_fields.html" with form=login_form %}
+                <p>
+                    <a href="{% url 'password-reset' %}">
+                        {% trans "I've forgotten my password" %}
+                    </a>
+                </p>
+                <button name="login_submit"
+                        type="submit"
+                        value="Log In"
+                        class="btn btn-lg btn-primary"
+                        data-loading-text="{% trans ">
+                    {% trans 'Log In' %}
+                </button>
+            </form>
+        </div>
+        <div class="col-sm-6 register_form">
+            <form id="register_form"
+                  action="{{ request.get_full_path }}"
+                  method="post"
+                  class="card card-body bg-light">
+                <h2>{% trans 'Register' %}</h2>
+                {% csrf_token %}
+                {% include "oscar/partials/form_fields.html" with form=registration_form %}
+                <button name="registration_submit"
+                        type="submit"
+                        value="Register"
+                        class="btn btn-lg btn-primary"
+                        data-loading-text="{% trans 'Registering...' %}">
+                    {% trans 'Register' %}
+                </button>
+            </form>
+        </div>
+    </div>
+{% endblock content %}
diff --git a/tests/django_oscar/oscar/customer/order/order_detail.html b/tests/django_oscar/oscar/customer/order/order_detail.html
new file mode 100644
index 0000000..48df791
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/order/order_detail.html
@@ -0,0 +1,214 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load currency_filters %}
+{% load display_tags %}
+{% load i18n %}
+{% load reviews_tags %}
+{% block extra_breadcrumbs %}
+    <li class="breadcrumb-item">
+        <a href="{% url 'customer:order-list' %}">
+            {% trans 'Order history' %}
+        </a>
+    </li>
+{% endblock %}
+{% block tabcontent %}
+    {% if order.status %}
+        <h2>{% trans 'Status' %}</h2>
+        <p>
+            {{ order.status }}
+        </p>
+        <hr>
+    {% endif %}
+    <table class="table table-striped table-bordered">
+        <thead>
+            <tr>
+                <th>{% trans 'Product' %}</th>
+                <th>{% trans 'Qty' %}</th>
+                <th>{% trans 'Line price excl. tax' %}</th>
+                <th>{% trans 'Line price incl. tax' %}</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for line in order.lines.all %}
+                {% with product=line.product %}
+                <tr>
+                    <td>
+                        {% if product %}
+                            {% if product.is_public %}
+                                <p>
+                                    <a href="{{ product.get_absolute_url }}">
+                                        {{ line.description }}
+                                    </a>
+                                </p>
+                            {% else %}
+                                <p>
+                                    {{ line.description }}
+                                </p>
+                            {% endif %}
+                            {% iffeature "reviews" %}
+                                {% if product|is_review_permitted:user %}
+                                    <a class="btn btn-secondary"
+                                       href="{% url 'catalogue:reviews-add' product_slug=product.slug product_pk=product.id %}#addreview">
+                                        {% trans 'Write a review' %}
+                                    </a>
+                                {% endif %}
+                            {% endiffeature %}
+                        {% else %}
+                            <p>
+                                {{ line.description }}
+                            </p>
+                        {% endif %}
+                    </td>
+                    <td>{{ line.quantity }}</td>
+                    <td>{{ line.line_price_before_discounts_excl_tax|currency:order.currency }}</td>
+                    <td>{{ line.line_price_before_discounts_incl_tax|currency:order.currency }}</td>
+                    <td width="90">
+                        {% if product and product.is_public %}
+                            <form id="line_form_{{ line.id }}"
+                                  action="{% url 'customer:order-line' order_number=order.number line_id=line.id %}"
+                                  method="POST">
+                                {% csrf_token %}
+                                <input type="hidden" name="action" value="reorder" />
+                                <button id="reorder_line_{{ line.id }}"
+                                        class="btn btn-success"
+                                        type="submit"
+                                        data-loading-text="{% trans 'Re-ordering...' context 'Buy again' %}">
+                                    {% trans 'Re-order' context 'Buy again' %}
+                                </button>
+                            </form>
+                        {% else %}
+                            {% trans 'Not available anymore' %}
+                        {% endif %}
+                    </td>
+                </tr>
+            {% endwith %}
+        {% endfor %}
+        {% with discounts=order.basket_discounts %}
+        {% block discount_totals %}
+            {% if discounts %}
+                <tr>
+                    <td colspan="4">{% trans "Basket total (excl. discounts)" %}</td>
+                    <td colspan="2">
+                        {{ order.basket_total_before_discounts_incl_tax|currency:order.currency }}
+                    </td>
+                </tr>
+                {% for discount in discounts %}
+                    <tr>
+                        <td colspan="4">
+                            <span class="badge badge-success">{% trans "Discount" %}</span>
+                            {{ discount.offer_name }}
+                        </td>
+                        <td colspan="2">- {{ discount.amount|currency:order.currency }}</td>
+                    </tr>
+                {% endfor %}
+            {% endif %}
+        {% endblock discount_totals %}
+        {% block basket_total %}
+            {% if discounts %}
+                <tr>
+                    <th colspan="4">{% trans "Basket total (inc. discounts)" %}</th>
+                    <td colspan="2">
+                        {{ order.basket_total_incl_tax|currency:order.currency }}
+                    </td>
+                </tr>
+            {% else %}
+                <tr>
+                    <th colspan="4">{% trans "Basket total" %}</th>
+                    <td colspan="2">
+                        {{ order.basket_total_incl_tax|currency:order.currency }}
+                    </td>
+                </tr>
+            {% endif %}
+        {% endblock basket_total %}
+    {% endwith %}
+    {% block shipping_totals %}
+        {% if order.has_shipping_discounts %}
+            <tr>
+                <td colspan="4">{% trans "Shipping total (excl. discounts)" %}</td>
+                <td colspan="2">
+                    {{ order.shipping_before_discounts_incl_tax|currency:order.currency }}
+                </td>
+            </tr>
+            {% for discount in order.shipping_discounts %}
+                <tr>
+                    <td colspan="4">
+                        <span class="badge badge-success">{% trans "Discount" %}</span>
+                        {{ discount.offer_name }}
+                    </td>
+                    <td colspan="2">- {{ discount.amount|currency:order.currency }}</td>
+                </tr>
+            {% endfor %}
+            <tr>
+                <th colspan="4">{% trans "Shipping total (inc. discounts)" %}</th>
+                <td colspan="2">
+                    {{ order.shipping_incl_tax|currency:order.currency }}
+                </td>
+            </tr>
+        {% else %}
+            <tr>
+                <th colspan="4">{% trans "Shipping total" %}</th>
+                <td colspan="2">
+                    {{ order.shipping_incl_tax|currency:order.currency }}
+                </td>
+            </tr>
+        {% endif %}
+    {% endblock %}
+    {% block order_total %}
+        <tr>
+            <th colspan="4">
+                {% trans 'Order total' %}
+            </th>
+            <td colspan="2">
+                {{ order.total_incl_tax|currency:order.currency }}
+            </td>
+        </tr>
+    {% endblock order_total %}
+</tbody>
+</table>
+{% block order_actions %}
+<form id="order_form_{{ order.id }}" action="{% url 'customer:order' order_number=order.number %}" method="post">
+    {% csrf_token %}
+    <input type="hidden" name="order_id" value="{{ order.id }}" />
+    <input type="hidden" name="action" value="reorder" />
+    <button type="submit" class="btn btn-success" data-loading-text="{% trans 'Re-ordering...' context 'Buy again' %}">
+        {% trans 'Re-order all items' context 'Buy again' %}
+    </button>
+</form>
+{% endblock order_actions %}
+<hr>
+<h2>{% trans 'Shipping Method' %}</h2>
+<p>
+{{ order.shipping_method }}
+</p>
+<hr>
+<h2>
+{% trans 'Shipping Address' %}
+</h2>
+<table class="table table-striped table-bordered">
+<tr>
+    <th>
+        {% trans 'Address' %}
+    </th>
+    <th>
+        {% trans 'Contact Number' %}
+    </th>
+    <th>
+        {% trans 'Shipping Notes' %}
+    </th>
+</tr>
+<tr>
+    <td>
+        {% for field in order.shipping_address.active_address_fields %}
+            {{ field }}
+            <br/>
+        {% endfor %}
+    </td>
+    <td>
+        {{ order.shipping_address.phone_number|default:"-" }}
+    </td>
+    <td>
+        {{ order.shipping_address.notes|linebreaks }}
+    </td>
+</tr>
+</table>
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/order/order_list.html b/tests/django_oscar/oscar/customer/order/order_list.html
new file mode 100644
index 0000000..c31b070
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/order/order_list.html
@@ -0,0 +1,84 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load currency_filters %}
+{% load i18n %}
+{% load static %}
+{% block styles %}
+    {{ block.super }}
+    <link rel="stylesheet" href="{% static "/>
+{% endblock %}
+{% block scripts %}
+    {{ block.super }}
+    <script src="{% static "oscar/js/bootstrap4-datetimepicker/moment-with-locales.min.js" %}"></script>
+    <script src="{% static "oscar/js/bootstrap4-datetimepicker/tempusdominus-bootstrap-4.min.js" %}"></script>
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:summary' %}">
+                    {% trans 'Account' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans 'Order history' %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block tabcontent %}
+    {% if orders or form.is_bound %}
+        <div class="card card-body bg-light">
+            <h2>{% trans "Filter" %}</h2>
+            <form method="get">
+                {% include "oscar/partials/form_fields.html" with form=form style='horizontal' %}
+                <div class="form-group row">
+                    <div class="offset-sm-4 col-sm-8">
+                        <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Filtering...' %}">
+                            {% trans 'Filter results' %}
+                        </button>
+                        <a href="{% url 'customer:order-list' %}" class="btn btn-secondary">
+                            {% trans 'Reset' %}
+                        </a>
+                    </div>
+                </div>
+            </form>
+        </div>
+    {% endif %}
+    {% if orders %}
+        <h2>{{ form.description }}</h2>
+        <table class="table table-striped table-bordered">
+            <tr>
+                <th>{% trans "Order number" %}</th>
+                <th>{% trans "Num items" %}</th>
+                <th>{% trans "Total inc tax" %}</th>
+                <th>{% trans "Date submitted" %}</th>
+            </tr>
+            {% for order in orders %}
+                <tr>
+                    <td>
+                        <a href="{% url 'customer:order' order_number=order.number %}">
+                            {{ order.number }}
+                        </a>
+                    </td>
+                    <td>{{ order.num_items }}</td>
+                    <td>{{ order.total_incl_tax|currency:order.currency }}</td>
+                    <td>{{ order.date_placed }}</td>
+                </tr>
+            {% endfor %}
+        </table>
+        {% include "oscar/partials/pagination.html" %}
+    {% else %}
+        {% if form.is_bound %}
+            <p>
+                {% trans "No orders match your search." %}
+            </p>
+        {% else %}
+            <p>
+                {% trans "You haven't placed any orders." %}
+            </p>
+        {% endif %}
+    {% endif %}
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/partials/standard_tabs.html b/tests/django_oscar/oscar/customer/partials/standard_tabs.html
new file mode 100644
index 0000000..fac91f5
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/partials/standard_tabs.html
@@ -0,0 +1,40 @@
+{% load i18n %}
+{% load display_tags %}
+<li class="nav-item">
+    <a href="{% url 'customer:profile-view' %}" class="nav-link{% if active_tab == 'profile' %}active{% endif %}">
+    {% trans "Profile" %}
+</a>
+</li>
+<li class="nav-item">
+<a href="{% url 'customer:order-list' %}" class="nav-link{% if active_tab == 'orders' %}active{% endif %}">
+{% trans "Order History" %}
+</a>
+</li>
+<li class="nav-item">
+<a href="{% url 'customer:address-list' %}" class="nav-link{% if active_tab == 'addresses' %}active{% endif %}">
+{% trans "Address Book" %}
+</a>
+</li>
+<li class="nav-item">
+<a href="{% url 'customer:email-list' %}" class="nav-link{% if active_tab == 'emails' %}active{% endif %}">
+{% trans "Email History" %}
+</a>
+</li>
+<li class="nav-item">
+<a href="{% url 'customer:alerts-list' %}" class="nav-link{% if active_tab == 'alerts' %}active{% endif %}">
+{% trans "Product Alerts" %}
+</a>
+</li>
+<li class="nav-item">
+<a href="{% url 'customer:notifications-inbox' %}"
+   class="nav-link{% if active_tab == 'notifications' %}active{% endif %}">
+{% trans "Notifications" %}
+</a>
+</li>
+{% iffeature 'wishlists' %}
+<li class="nav-item">
+<a href="{% url 'customer:wishlists-list' %}" class="nav-link{% if active_tab == 'wishlists' %}active{% endif %}">
+{% trans "Wish Lists" %}
+</a>
+</li>
+{% endiffeature %}
diff --git a/tests/django_oscar/oscar/customer/profile/change_password_form.html b/tests/django_oscar/oscar/customer/profile/change_password_form.html
new file mode 100644
index 0000000..fd01b95
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/profile/change_password_form.html
@@ -0,0 +1,4 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block tabcontent %}
+    {% include 'oscar/partials/form.html' with form_id="change_password_form" %}{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/profile/profile.html b/tests/django_oscar/oscar/customer/profile/profile.html
new file mode 100644
index 0000000..764c566
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/profile/profile.html
@@ -0,0 +1,37 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block tabcontent %}
+    <table class="table table-striped table-bordered">
+        <tbody>
+            <tr>
+                <th>{% trans 'Name' %}</th>
+                <td>{{ user.get_full_name|default:'-' }}</td>
+            </tr>
+            <tr>
+                <th>{% trans 'Email address' %}</th>
+                <td>{{ user.email }}</td>
+            </tr>
+            {% block profile_fields %}
+                {% for field in profile_fields %}
+                    <tr>
+                        <th>{{ field.name }}</th>
+                        <td>{{ field.value|default:"-" }}</td>
+                    </tr>
+                {% endfor %}
+            {% endblock %}
+            <tr>
+                <th>{% trans 'Date registered' %}</th>
+                <td>{{ user.date_joined }}</td>
+            </tr>
+        </tbody>
+    </table>
+    <a href="{% url 'customer:change-password' %}" class="btn btn-primary">
+        {% trans 'Change password' %}
+    </a>
+    <a href="{% url 'customer:profile-update' %}" class="btn btn-primary">
+        {% trans 'Edit profile' %}
+    </a>
+    <a id="delete_profile" href="{% url 'customer:profile-delete' %}" class="btn btn-danger">
+        {% trans 'Delete profile' %}
+    </a>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/customer/profile/profile_delete.html b/tests/django_oscar/oscar/customer/profile/profile_delete.html
new file mode 100644
index 0000000..3f036d1
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/profile/profile_delete.html
@@ -0,0 +1,28 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block tabcontent %}
+    <p>
+        {% trans "Please confirm your password to delete your profile." %}
+    </p>
+    <form id="delete_profile_form" method="post">
+        {% csrf_token %}
+        {% include "oscar/partials/form_fields.html" with style='horizontal' %}
+        <div class="alert alert-warning">
+            <h3>{% trans "Warning" %}</h3>
+            {% blocktrans %}
+                This will delete all information about you from the site. Deleting your profile cannot be
+                undone.
+            {% endblocktrans %}
+        </div>
+        <div class="form-group">
+            <button class="btn btn-lg btn-danger" type="submit" data-loading-text="{% trans 'Deleting...' %}">
+                {% trans "Delete" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url "customer:profile-view" %}">
+                {% trans "cancel" %}
+            </a>
+            .
+        </div>
+    </form>
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/profile/profile_form.html b/tests/django_oscar/oscar/customer/profile/profile_form.html
new file mode 100644
index 0000000..a406b2f
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/profile/profile_form.html
@@ -0,0 +1,4 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block tabcontent %}
+    {% include 'oscar/partials/form.html' with form_id="profile_form" %}{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/registration.html b/tests/django_oscar/oscar/customer/registration.html
new file mode 100644
index 0000000..7e306aa
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/registration.html
@@ -0,0 +1,42 @@
+{% extends "oscar/layout.html" %}
+{% load i18n %}
+{% block title %}
+    {% trans 'Register' %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans 'Register' %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% trans "Register" %}
+{% endblock %}
+{% block content %}
+    <div class="row">
+        <div class="col-sm-6 register_form">
+            <form id="register_form" method="post">
+                {% csrf_token %}
+                {% include "oscar/partials/form_fields.html" %}
+                <button name="registration_submit"
+                        type="submit"
+                        value="Register"
+                        class="btn btn-primary btn-lg"
+                        data-loading-text="{% trans 'Registering...' %}">
+                    {% trans 'Register' %}
+                </button>
+                {% if cancel_url %}
+                    {% trans "or" %}
+                    <a href="{{ cancel_url }}">{% trans "cancel" %}</a>
+                    .
+                {% endif %}
+            </form>
+        </div>
+    </div>
+{% endblock content %}
diff --git a/tests/django_oscar/oscar/customer/wishlists/wishlists_delete.html b/tests/django_oscar/oscar/customer/wishlists/wishlists_delete.html
new file mode 100644
index 0000000..5a20f42
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/wishlists/wishlists_delete.html
@@ -0,0 +1,48 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:summary' %}">
+                    {% trans 'Account' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:wishlists-list' %}">
+                    {% trans 'Wish Lists' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:wishlists-detail' key=wishlist.key %}">
+                    {{ wishlist.name }}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Delete?" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block tabcontent %}
+    <form method="post">
+        {% csrf_token %}
+        <p>
+            {% blocktrans with name=wishlist.name %}
+                Are you sure you want to delete {{ name }}?
+            {% endblocktrans %}
+        </p>
+        <div class="form-group">
+            <button type="submit" class="btn btn-danger btn-lg" data-loading-text="{% trans 'Deleting...' %}">
+                {% trans 'Delete' %}
+            </button>
+            {% trans 'or' %}
+            <a href="{% url 'customer:wishlists-list' %}">
+                {% trans 'cancel' %}
+            </a>
+        </div>
+    </form>
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/wishlists/wishlists_delete_product.html b/tests/django_oscar/oscar/customer/wishlists/wishlists_delete_product.html
new file mode 100644
index 0000000..be3059e
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/wishlists/wishlists_delete_product.html
@@ -0,0 +1,48 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:summary' %}">
+                    {% trans 'Account' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:wishlists-list' %}">
+                    {% trans 'Wish Lists' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:wishlists-detail' key=wishlist.key %}">
+                    {{ wishlist.name }}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Remove product" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block tabcontent %}
+    <form method="post">
+        {% csrf_token %}
+        <p>
+            {% blocktrans with product_name=object.get_title wishlist_name=wishlist.name %}
+                Are you sure you want to delete {{ product_name }} from wish list {{ wishlist_name }}?
+            {% endblocktrans %}
+        </p>
+        <div class="form-group">
+            <button type="submit" class="btn btn-lg btn-danger" data-loading-text="{% trans 'Removing...' %}">
+                {% trans 'Remove' %}
+            </button>
+            {% trans 'or' %}
+            <a href="{{ wishlist.get_absolute_url }}">
+                {% trans 'cancel' %}
+            </a>
+        </div>
+    </form>
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/wishlists/wishlists_detail.html b/tests/django_oscar/oscar/customer/wishlists/wishlists_detail.html
new file mode 100644
index 0000000..1dc8e97
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/wishlists/wishlists_detail.html
@@ -0,0 +1,131 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load image_tags %}
+{% load i18n %}
+{% load widget_tweaks %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:summary' %}">
+                    {% trans 'Account' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:wishlists-list' %}">
+                    {% trans 'Wish Lists' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ wishlist.name }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block tabcontent %}
+    {% if form.total_form_count %}
+        <form method="post">
+            {{ form.management_form }}
+            {% csrf_token %}
+            <table class="table table-striped table-bordered">
+                <tbody>
+                    <tr>
+                        <th colspan="2">{% trans 'Product' %}</th>
+                        <th>{% trans 'Quantity' %}</th>
+                        <th>{% trans 'Action' %}</th>
+                    </tr>
+                    {% for subform in form %}
+                        {% with line=subform.instance product=subform.instance.product %}
+                        <tr>
+                            <td>
+                                {% if product %}
+                                    {% with image=product.primary_image %}
+                                    {% oscar_thumbnail image.original "100x100" upscale=False as thumb %}
+                                    {% if product.is_public %}
+                                        <a href="{{ product.get_absolute_url }}">
+                                            <img class="img-thumbnail"
+                                                 src="{{ thumb.url }}"
+                                                 alt="{{ product.get_title }}"/>
+                                        </a>
+                                    {% else %}
+                                        <img class="img-thumbnail"
+                                             src="{{ thumb.url }}"
+                                             alt="{{ product.get_title }}"/>
+                                    {% endif %}
+                                {% endwith %}
+                            {% endif %}
+                        </td>
+                        <td>
+                            {% if product and product.is_public %}
+                                <a href="{{ line.product.get_absolute_url }}">
+                                    {{ line.get_title }}
+                                </a>
+                            {% else %}
+                                <em>{{ line.get_title }} ({% trans 'Not available anymore' %})</em>
+                            {% endif %}
+                        </td>
+                        <td>
+                            {% for field in subform %}
+                                {% render_field field class+="form-control" %}
+                                {% for error in field.errors %}
+                                    <ul class="error-block">
+                                        <li>
+                                            {{ error }}
+                                        </li>
+                                    </ul>
+                                {% endfor %}
+                            {% endfor %}
+                        </td>
+                        <td>
+                            <div class="btn-group">
+                                {% if product %}
+                                    <a class="btn btn-secondary" href="{{ line.product.get_absolute_url }}">
+                                        {% trans 'View product' %}
+                                    </a>
+                                    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"></button>
+                                {% else %}
+                                    <a class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" href="#">
+                                        {% trans 'Actions' %}
+                                    </a>
+                                {% endif %}
+                                <ul class="dropdown-menu dropdown-menu-right">
+                                    <li>
+                                        <a href="{% url 'customer:wishlists-remove-product' key=wishlist.key line_pk=line.pk %}"
+                                           class="dropdown-item">
+                                            {% trans 'Remove' %}
+                                        </a>
+                                    </li>
+                                    {% for other_wishlist in other_wishlists %}
+                                        <li>
+                                            <a href="{% url 'customer:wishlists-move-product-to-another' key=wishlist.key line_pk=line.pk to_key=other_wishlist.key %}"
+                                               class="dropdown-item">
+                                                {% blocktrans with name=other_wishlist.name %}
+                                                    Move to '{{ name }}' wish list
+                                                {% endblocktrans %}
+                                            </a>
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            </div>
+                        </td>
+                    </tr>
+                {% endwith %}
+            {% endfor %}
+            <tr>
+                <td colspan="2"></td>
+                <td>
+                    <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Updating...' %}">
+                        {% trans "Update quantities" %}
+                    </button>
+                </td>
+                <td></td>
+            </tr>
+        </tbody>
+    </table>
+</form>
+{% else %}
+{% trans "Your wish list is empty." %}
+{% endif %}
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/wishlists/wishlists_form.html b/tests/django_oscar/oscar/customer/wishlists/wishlists_form.html
new file mode 100644
index 0000000..9fc7a18
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/wishlists/wishlists_form.html
@@ -0,0 +1,58 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:summary' %}">
+                    {% trans 'Account' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'customer:wishlists-list' %}">
+                    {% trans 'Wish Lists' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% if wishlist %}
+                    {{ wishlist.name }}
+                {% else %}
+                    {% trans "Create" %}
+                {% endif %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block tabcontent %}
+    <form method="post" data-behaviours="lock">
+        {% csrf_token %}
+        {% if not wishlist %}
+            <p>
+                {% trans "What should your new wish list be called?" %}
+            </p>
+        {% endif %}
+        {% include "oscar/partials/form_fields.html" %}
+        {% if product %}
+            <p>
+                {% blocktrans with title=product.get_title %}
+                    After your wishlist is created,
+                    <strong>{{ title }}</strong>
+                    will be added.
+                {% endblocktrans %}
+            </p>
+        {% endif %}
+        <div class="form-group">
+            <button class="btn btn-lg btn-primary" type="submit" data-loading-text="{% trans 'Saving...' %}">
+                {% trans "Save" %}
+            </button>
+            {% trans "or" %}
+            <a href="#" onclick="history.go(-1);return false" >
+                {% trans "cancel" %}
+            </a>
+            .
+        </div>
+    </form>
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/customer/wishlists/wishlists_list.html b/tests/django_oscar/oscar/customer/wishlists/wishlists_list.html
new file mode 100644
index 0000000..2268cbd
--- /dev/null
+++ b/tests/django_oscar/oscar/customer/wishlists/wishlists_list.html
@@ -0,0 +1,54 @@
+{% extends "oscar/customer/baseaccountpage.html" %}
+{% load i18n %}
+{% block tabcontent %}
+    {% if wishlists %}
+        <table class="table table-striped table-bordered">
+            <tbody>
+                <tr>
+                    <th>{% trans 'Name' %}</th>
+                    <th>{% trans 'Number of products' %}</th>
+                    <th>{% trans 'Action' %}</th>
+                </tr>
+                {% for wishlist in wishlists %}
+                    <tr>
+                        <td>
+                            <a href="{% url 'customer:wishlists-detail' key=wishlist.key %}">
+                                {{ wishlist.name }}
+                            </a>
+                        </td>
+                        <td>{{ wishlist.lines.count }}</td>
+                        <td>
+                            <div class="btn-group">
+                                <a class="btn btn-secondary"
+                                   href="{% url 'customer:wishlists-detail' key=wishlist.key %}">
+                                    {% trans 'View' %}
+                                </a>
+                                <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"></button>
+                                <div class="dropdown-menu">
+                                    <a href="{% url 'customer:wishlists-update' key=wishlist.key %}"
+                                       class="dropdown-item">
+                                        {% trans 'Wish list settings' %}
+                                    </a>
+                                    <a href="{% url 'customer:wishlists-delete' key=wishlist.key %}"
+                                       class="dropdown-item">
+                                        {% trans 'Delete' %}
+                                    </a>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% include "oscar/partials/pagination.html" %}
+    {% else %}
+        <p>
+            {% trans "You don't have any wish lists yet." %}
+        </p>
+    {% endif %}
+    <p>
+        <a href="{% url 'customer:wishlists-create' %}" class="btn btn-primary">
+            {% trans 'Create a new wish list' %}
+        </a>
+    </p>
+{% endblock tabcontent %}
diff --git a/tests/django_oscar/oscar/dashboard/base.html b/tests/django_oscar/oscar/dashboard/base.html
new file mode 100644
index 0000000..2cb1fb5
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/base.html
@@ -0,0 +1,8 @@
+{% extends "oscar/base.html" %}
+{% block extrahead %}
+    {{ block.super }}
+    <meta name="robots" content="NONE,NOARCHIVE">
+{% endblock %}
+{% block tracking %}
+    {# By default there is no analytics tracking in the dashboard #}
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_delete.html b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_delete.html
new file mode 100644
index 0000000..e3adece
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_delete.html
@@ -0,0 +1,77 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {{ title }} | {% trans "Create Attribute Option Group" %} | {{ block.super }}
+{% endblock %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block navbar %}
+    {% if not is_popup %}{{ block.super }}{% endif %}
+{% endblock %}
+{% block dashboard_nav %}
+    {% if not is_popup %}{{ block.super }}{% endif %}
+{% endblock %}
+{% block breadcrumbs %}
+    {% if not is_popup %}
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:index' %}">
+                        {% trans "Dashboard" %}
+                    </a>
+                </li>
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:catalogue-attribute-option-group-list' %}">
+                        {% trans "Attribute Option Group" %}
+                    </a>
+                </li>
+                <li class="breadcrumb-item active" aria-current="page">
+                    {% trans "Delete Attribute Option Group?" %}
+                </li>
+            </ol>
+        </nav>
+    {% endif %}
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    {% if disallow %}
+        <p>
+            {% trans "Please make sure all Product Attributes are assigned to another Attribute Option Group before deletion." %}
+        </p>
+    {% else %}
+        <div class="table-header">
+            <h2>{% trans "Delete Attribute Option Group" %}</h2>
+        </div>
+        <form method="post" class="card card-body">
+            {% csrf_token %}
+            {% if is_popup %}
+                <input type="hidden" name="{{ is_popup_var }}" value="1" />
+            {% endif %}
+            {% if not is_popup %}
+                {% for key, value in http_get_params.items %}
+                    <input type="hidden" name="{{ key }}" value="{{ value }}" />
+                {% endfor %}
+            {% endif %}
+            <p>
+                {% blocktrans with name=object.name %}
+                    Delete Attribute Option Group
+                    <strong>{{ name }}</strong>
+                    - are you sure?
+                {% endblocktrans %}
+            </p>
+            <div class="form-actions">
+                <a
+                    {% if not is_popup %}
+                        href="{% url 'dashboard:catalogue-attribute-option-group-list' %}"
+                    {% else %}
+                        href="#" onclick="window.close();return false;"
+                    {% endif %}
+                    >
+                    {% trans "Cancel" %}
+                </a>
+                <button type="submit" class="btn btn-danger" data-loading-text="{% trans 'Deleting...' %}">
+                    {% trans "Delete" %}
+                </button>
+            </div>
+        </form>
+    {% endif %}
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_form.html b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_form.html
new file mode 100644
index 0000000..470190a
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_form.html
@@ -0,0 +1,168 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {{ title }} | {% trans "Create Attribute Option Group" %} | {{ block.super }}
+{% endblock %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block navbar %}
+    {% if not is_popup %}{{ block.super }}{% endif %}
+{% endblock %}
+{% block dashboard_nav %}
+    {% if not is_popup %}{{ block.super }}{% endif %}
+{% endblock %}
+{% block breadcrumbs %}
+    {% if not is_popup %}
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:index' %}">
+                        {% trans "Dashboard" %}
+                    </a>
+                </li>
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:catalogue-attribute-option-group-list' %}">
+                        {% trans "Attribute Option Group" %}
+                    </a>
+                </li>
+                <li class="breadcrumb-item active" aria-current="page">
+                    {{ title }}
+                </li>
+            </ol>
+        </nav>
+    {% endif %}
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <form class="form-stacked wysiwyg fixed-actions" method="post" data-behaviour="tab-nav-errors">
+        {% csrf_token %}
+        <div class="row">
+            {% if is_popup %}
+                <input type="hidden" name="{{ is_popup_var }}" value="{{ is_popup }}" />
+            {% endif %}
+            {% if to_field %}
+                <input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}" />
+            {% endif %}
+            {% block tab_nav %}
+                <div class="col-md-3">
+                    <div class="tab-nav sticky-top">
+                        <div class="table-header">
+                            <h3>{% trans "Sections" %}</h3>
+                        </div>
+                        <ul class="nav flex-column bs-docs-sidenav" id="attribute_option_group_update_tabs">
+                            {% block tabs %}
+                                <li class="nav-item">
+                                    <a class="nav-link active"
+                                       href="#attribute_option_group_details"
+                                       data-toggle="tab">
+                                        {% trans 'Attribute Option Group details' %}
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#attribute_options" data-toggle="tab">
+                                        {% trans 'Attribute Options' %}
+                                    </a>
+                                </li>
+                            {% endblock tabs %}
+                        </ul>
+                    </div>
+                </div>
+            {% endblock tab_nav %}
+            <div class="col-md-9">
+                <div class="tab-content">
+                    {% block tab_content %}
+                        {% block attribute_option_group_details %}
+                            <div class="tab-pane active" id="attribute_option_group_details">
+                                <div class="table-header">
+                                    <h3>{% trans "Attribute Option Group details" %}</h3>
+                                </div>
+                                <div class="card card-body attribute-option-group-details">
+                                    {% comment %}
+                                    If the AttributeOptionGroup form has field_errors, partials/form_fields.html
+                                    will render an error message.
+                                    This means that there'll be 2 error messages,
+                                    one from the partial and one from the view. Perhaps there should be
+                                    an option allowing hiding of the error message in the template.
+                                    For now we copy paste what we need from the template.
+                                {% endcomment %}
+                                {% if form.non_field_errors %}
+                                    {% for error in form.non_field_errors %}
+                                        <div class="alert alert-danger">
+                                            <span class="error-block">
+                                                <i class="fas fa-exclamation"></i>
+                                                {{ error }}
+                                            </span>
+                                        </div>
+                                    {% endfor %}
+                                {% endif %}
+                                {% for field in form %}
+                                    {% include 'oscar/dashboard/partials/form_field.html' with field=field %}{% endfor %}
+                                </div>
+                            </div>
+                        {% endblock %}
+                        {% block attribute_options %}
+                            <div class="tab-pane" id="attribute_options">
+                                <div class="table-header">
+                                    <h3>{% trans "Attribute Options" %}</h3>
+                                </div>
+                                <div class="attribute-options">
+                                    <table class="table table-striped table-bordered">
+                                        {{ attribute_option_formset.management_form }}
+                                        {{ attribute_option_formset.non_form_errors }}
+                                        <col width="50%">
+                                        <col width="50%">
+                                        <thead>
+                                            <tr>
+                                                <th>{% trans "Option" %}</th>
+                                                <th>{% trans "Delete?" %}</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {% for attribute_option_form in attribute_option_formset %}
+                                                <tr>
+                                                    {% for hidden_field in attribute_option_form.hidden_fields %}
+                                                        {{ hidden_field }}
+                                                    {% endfor %}
+                                                    <td>
+                                                        {% include 'oscar/dashboard/partials/form_field.html' with field=attribute_option_form.option nolabel=True %}
+                                                    </td>
+                                                    <td>
+                                                        {% include 'oscar/dashboard/partials/form_field.html' with field=attribute_option_form.DELETE nolabel=True %}
+                                                    </td>
+                                                </tr>
+                                            {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        {% endblock %}
+                    {% endblock tab_content %}
+                </div>
+            </div>
+        </div>
+        {% block fixed_actions_group %}
+            <div class="fixed-actions-group">
+                <div class="form-actions">
+                    <div class="float-right">
+                        <a href="#"
+                            {% if not is_popup %}
+                                onclick="window.history.go(-1);return false"
+                            {% else %}
+                                onclick="window.close();return false;"
+                            {% endif %}
+                            >
+                            {% trans "Cancel" %}
+                        </a>
+                        {% trans "or" %}
+                        <button class="btn btn-primary" type="submit">
+                            {% trans "Save" %}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        {% endblock fixed_actions_group %}
+    </form>
+{% endblock dashboard_content %}
+{% block onbodyload %}
+    {{ block.super }}
+    oscar.dashboard.product_attributes.init();
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_list.html b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_list.html
new file mode 100644
index 0000000..dd79a5f
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_list.html
@@ -0,0 +1,44 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% load render_table from django_tables2 %}
+{% block title %}
+    {% trans "Attribute Option Groups" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Attribute Option Group" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <a href="{% url 'dashboard:catalogue-attribute-option-group-create' %}?{{ querystring }}"
+           class="btn btn-primary float-right">
+            <i class="fas fa-plus-circle"></i>
+            {% trans "Create new Attribute Option Group" %}
+        </a>
+        <h1>{% trans "Attribute Option Group" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    {% if attribute_option_groups %}
+        {% block product_list %}
+            <form method="post">
+                {% csrf_token %}
+                {% render_table attribute_option_groups %}
+            </form>
+        {% endblock product_list %}
+    {% else %}
+        <p>
+            {% trans "No Attribute Option Groups found." %}
+        </p>
+    {% endif %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_actions.html b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_actions.html
new file mode 100644
index 0000000..055cb21
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_actions.html
@@ -0,0 +1,24 @@
+{% load django_tables2 %}
+{% load i18n %}
+<div class="btn-toolbar">
+    <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle"
+                type="button"
+                id="dropdownMenuButton"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false">
+            {% trans "Actions" %}
+        </button>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+            <a class="dropdown-item"
+               href="{% url 'dashboard:catalogue-attribute-option-group-update' pk=record.id %}{% querystring %}">
+                {% trans "Edit Attribute Option Group" %}
+            </a>
+            <a class="dropdown-item"
+               href="{% url 'dashboard:catalogue-attribute-option-group-delete' pk=record.id %}{% querystring %}">
+                {% trans "Delete" %}
+            </a>
+        </div>
+    </div>
+</div>
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_name.html b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_name.html
new file mode 100644
index 0000000..c064bea
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_name.html
@@ -0,0 +1,4 @@
+{% load django_tables2 %}
+<a href="{% url 'dashboard:catalogue-attribute-option-group-update' pk=record.pk %}{% querystring %}">
+    {{ value }}
+</a>
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_option_summary.html b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_option_summary.html
new file mode 100644
index 0000000..c064bea
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/attribute_option_group_row_option_summary.html
@@ -0,0 +1,4 @@
+{% load django_tables2 %}
+<a href="{% url 'dashboard:catalogue-attribute-option-group-update' pk=record.pk %}{% querystring %}">
+    {{ value }}
+</a>
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/category_delete.html b/tests/django_oscar/oscar/dashboard/catalogue/category_delete.html
new file mode 100644
index 0000000..08669ba
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/category_delete.html
@@ -0,0 +1,50 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% if parent %}{% url 'dashboard:catalogue-category-detail-list' pk=parent.pk %}{% else %}{% url 'dashboard:catalogue-category-list' %}{% endif %}">
+                {% trans "Categories" %}
+            </a>
+        </li>
+        <li class="breadcrumb-item active" aria-current="page">
+            {% trans "Delete category?" %}
+        </li>
+    </ol>
+</nav>
+{% endblock %}
+{% block headertext %}
+{% trans "Delete category?" %}
+{% endblock %}
+{% block dashboard_content %}
+<div class="table-header">
+    <h2>{% trans "Delete category" %}</h2>
+</div>
+<form method="post" class="card card-body bg-light">
+    {% csrf_token %}
+    {{ form }}
+    {% blocktrans with name=object.name %}
+        <p>
+            Delete category
+            <strong>{{ name }}</strong>
+            - are you sure?
+        </p>
+    {% endblocktrans %}
+    <div class="form-actions">
+        <button type="submit" class="btn btn-danger" data-loading-text="{% trans 'Deleting...' %}">
+            {% trans "Delete" %}
+        </button>
+        {% trans "or" %}
+        <a href="{% if parent %}{% url 'dashboard:catalogue-category-detail-list' pk=parent.pk %}{% else %}{% url 'dashboard:catalogue-category-list' %}{% endif %}">
+        {% trans "cancel" %}
+    </a>
+</div>
+</form>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/category_form.html b/tests/django_oscar/oscar/dashboard/catalogue/category_form.html
new file mode 100644
index 0000000..bf410ba
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/category_form.html
@@ -0,0 +1,131 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load category_tags %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page catalogue{% endblock %}
+{% block title %}
+    {{ title }} | {% trans "Categories" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:catalogue-category-list' %}">
+                    {% trans "Categories" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ title }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <form action="{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}"
+          method="post"
+          class="form-stacked wysiwyg fixed-actions"
+          enctype="multipart/form-data"
+          data-behaviour="tab-nav-errors"
+          autocomplete="off">
+    {% csrf_token %}
+    <div class="row">
+        {% block tab_nav %}
+            <div class="col-md-3">
+                <div class="tab-nav sticky-top">
+                    <div class="table-header">
+                        <h3>{% trans "Sections" %}</h3>
+                    </div>
+                    <ul class="nav flex-column bs-docs-sidenav" id="category_update_tabs">
+                        {% block tabs %}
+                            <li class="nav-item">
+                                <a class="nav-link active" href="#category_details" data-toggle="tab">
+                                    {% trans 'Category details' %}
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#seo" data-toggle="tab">
+                                    {% trans 'Search engine optimisation' %}
+                                </a>
+                            </li>
+                        {% endblock tabs %}
+                    </ul>
+                </div>
+            </div>
+        {% endblock tab_nav %}
+        <div class="col-md-9">
+            <div class="tab-content">
+                {% block tab_content %}
+                    {% block category_details %}
+                        <div class="tab-pane active" id="category_details">
+                            <div class="table-header">
+                                <h3>{% trans "Category details" %}</h3>
+                            </div>
+                            <div class="card card-body category-details">
+                                {% block category_details_content %}
+                                    <span class="error-block">{{ form.non_field_errors }}</span>
+                                    {% for field in form.hidden_fields %}{{ field }}{% endfor %}
+                                    {% for field in form.primary_form_fields %}
+                                        {% if 'attr' not in field.id_for_label %}
+                                            {% include 'oscar/dashboard/partials/form_field.html' with field=field %}{% endif %}
+                                        {% endfor %}
+                                    {% endblock category_details_content %}
+                                </div>
+                            </div>
+                        {% endblock category_details %}
+                        {% block seo %}
+                            <div class="tab-pane" id="seo">
+                                <div class="table-header">
+                                    <h3>{% trans "Search engine optimisation" %}</h3>
+                                </div>
+                                <div class="card card-body">
+                                    {% block seo_content %}
+                                        {% for field in form.seo_form_fields %}
+                                            {% if 'attr' not in field.id_for_label %}
+                                                {% include 'oscar/dashboard/partials/form_field.html' with field=field %}{% endif %}
+                                            {% endfor %}
+                                        {% endblock seo_content %}
+                                    </div>
+                                </div>
+                            {% endblock seo %}
+                        {% endblock tab_content %}
+                    </div>
+                </div>
+            </div>
+            {% block fixed_actions_group %}
+                <div class="fixed-actions-group">
+                    <div class="form-group">
+                        <div class="float-right">
+                            <a href="{% url 'dashboard:catalogue-category-list' %}">
+                                {% trans "Cancel" %}
+                            </a>
+                            {% trans "or" %}
+                            <button class="btn btn-secondary"
+                                    name="action"
+                                    type="submit"
+                                    value="continue"
+                                    data-loading-text="{% trans 'Saving...' %}">
+                                {% trans "Save and continue editing" %}
+                            </button>
+                            <button class="btn btn-primary"
+                                    name="action"
+                                    type="submit"
+                                    value="save"
+                                    data-loading-text="{% trans 'Saving...' %}">
+                                {% trans "Save" %}
+                            </button>
+                        </div>
+                        {% if category %}
+                            <a class="btn btn-success" href="{{ category.get_absolute_url }}">
+                                {% trans "View on site" %}
+                            </a>
+                        {% endif %}
+                    </div>
+                </div>
+            {% endblock fixed_actions_group %}
+        </form>
+    {% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/category_list.html b/tests/django_oscar/oscar/dashboard/catalogue/category_list.html
new file mode 100644
index 0000000..49f7d70
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/category_list.html
@@ -0,0 +1,60 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load category_tags %}
+{% load i18n %}
+{% load render_table from django_tables2 %}
+{% block body_class %}{{ block.super }} catalogue{% endblock %}
+{% block title %}
+    {% trans "Categories" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Categories" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <a href="{% url 'dashboard:catalogue-category-create' %}" class="btn btn-primary float-right">
+            <i class="fas fa-plus-circle"></i>
+            {% trans "Create new category" %}
+        </a>
+        <h1>{% trans "Categories" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <div class="alert alert-info">
+        <div>
+            {% trans "You are editing:" %}
+            <strong>
+            <a href="{% url 'dashboard:catalogue-category-list' %}">
+                {% trans "Home" %}
+            </a>
+            </strong>
+            {% if ancestors %}
+                &gt;
+                {% for ancestor in ancestors %}
+                    <strong>
+                    <a href="{% url 'dashboard:catalogue-category-detail-list' pk=ancestor.pk %}">
+                        {{ ancestor.name }}
+                    </a>
+                    </strong>
+                    {% if not forloop.last %}> {% endif %}
+                {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+    {% render_table categories %}
+    {% if not child_categories %}
+        <p>
+            {% trans "There are no categories." %}
+        </p>
+    {% endif %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/category_row_actions.html b/tests/django_oscar/oscar/dashboard/catalogue/category_row_actions.html
new file mode 100644
index 0000000..2d4992b
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/category_row_actions.html
@@ -0,0 +1,32 @@
+{% load django_tables2 %}
+{% load i18n %}
+<div class="btn-toolbar">
+    <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle"
+                type="button"
+                id="dropdownMenuButton"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false">
+            {% trans "Actions" %}
+        </button>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+            <a class="dropdown-item" href="{% url 'dashboard:catalogue-category-update' pk=record.id %}">
+                {% trans "Edit category" %}
+            </a>
+            <a class="dropdown-item" href="{% url 'dashboard:catalogue-category-create-child' parent=record.pk %}">
+                {% trans "Add child category" %}
+            </a>
+            <a class="dropdown-item {% if not record.has_children %}disabled{% endif %}"
+               href="{% if not record.has_children %}#{% else %}{% url 'dashboard:catalogue-category-detail-list' pk=record.pk %}{% endif %}">
+            {% trans "Edit children" %}
+        </a>
+        <a class="dropdown-item" href="{{ record.get_absolute_url }}">
+            {% trans "View on site" %}
+        </a>
+        <a class="dropdown-item" href="{% url 'dashboard:catalogue-category-delete' pk=record.id %}">
+            {% trans "Delete" %}
+        </a>
+    </div>
+</div>
+</div>
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/messages/product_saved.html b/tests/django_oscar/oscar/dashboard/catalogue/messages/product_saved.html
new file mode 100644
index 0000000..6568115
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/messages/product_saved.html
@@ -0,0 +1,47 @@
+{% load i18n %}
+{% load django_tables2 %}
+<p>
+    {% with name=product.title parent_name=product.parent.title %}
+    {% if product.is_child %}
+        {% if creating %}
+            {% if product.title %}
+                {% blocktrans %}
+                    Created product variant '{{ name }}'.
+                {% endblocktrans %}
+            {% else %}
+                {% blocktrans %}
+                    Created variant of '{{ parent_name }}'.
+                {% endblocktrans %}
+            {% endif %}
+        {% else %}
+            {% if product.title %}
+                {% blocktrans %}
+                    Updated product variant '{{ name }}'.
+                {% endblocktrans %}
+            {% else %}
+                {% blocktrans %}
+                    Updated a variant of '{{ parent_name }}'.
+                {% endblocktrans %}
+            {% endif %}
+        {% endif %}
+    {% else %}
+        {% if creating %}
+            {% blocktrans %}
+                Created product '{{ name }}'.
+            {% endblocktrans %}
+        {% else %}
+            {% blocktrans %}
+                Updated product '{{ name }}'.
+            {% endblocktrans %}
+        {% endif %}
+    {% endif %}
+{% endwith %}
+</p>
+<p>
+<a href="{% url 'dashboard:catalogue-product' pk=product.pk %}{% querystring %}" class="btn btn-success">
+    {% trans "Edit again" %}
+</a>
+<a href="{{ product.get_absolute_url }}" class="btn btn-success">
+    {% trans "View it on the site" %}
+</a>
+</p>
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/option_delete.html b/tests/django_oscar/oscar/dashboard/catalogue/option_delete.html
new file mode 100644
index 0000000..d7d0143
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/option_delete.html
@@ -0,0 +1,71 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {{ title }} | {% trans "Create Option" %} | {{ block.super }}
+{% endblock %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block navbar %}
+    {% if not is_popup %}{{ block.super }}{% endif %}
+{% endblock %}
+{% block dashboard_nav %}
+    {% if not is_popup %}{{ block.super }}{% endif %}
+{% endblock %}
+{% block breadcrumbs %}
+    {% if not is_popup %}
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:index' %}">
+                        {% trans "Dashboard" %}
+                    </a>
+                </li>
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:catalogue-option-list' %}">
+                        {% trans "Options" %}
+                    </a>
+                </li>
+                <li class="breadcrumb-item active" aria-current="page">
+                    {% trans "Delete Option?" %}
+                </li>
+            </ol>
+        </nav>
+    {% endif %}
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    {% if disallow %}
+        <p>
+            {% trans "Please make sure option is not assigned to Products or Product Classes before deletion." %}
+        </p>
+    {% else %}
+        <div class="table-header">
+            <h2>{% trans "Delete Option" %}</h2>
+        </div>
+        <form action="." method="post" class="card card-body bg-light">
+            {% csrf_token %}
+            {% if is_popup %}
+                <input type="hidden" name="{{ is_popup_var }}" value="1" />
+            {% endif %}
+            {% if not is_popup %}
+                {% for key, value in http_get_params.items %}
+                    <input type="hidden" name="{{ key }}" value="{{ value }}" />
+                {% endfor %}
+            {% endif %}
+            <p>
+                {% blocktrans with name=object.name %}
+                    Delete Option
+                    <strong>{{ name }}</strong>
+                    - are you sure?
+                {% endblocktrans %}
+            </p>
+            <div class="form-actions">
+                <a href="{% url 'dashboard:catalogue-option-list' %}">
+                    {% trans "Cancel" %}
+                </a>
+                <button type="submit" class="btn btn-danger" data-loading-text="{% trans 'Deleting...' %}">
+                    {% trans "Delete" %}
+                </button>
+            </div>
+        </form>
+    {% endif %}
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/option_form.html b/tests/django_oscar/oscar/dashboard/catalogue/option_form.html
new file mode 100644
index 0000000..bc59103
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/option_form.html
@@ -0,0 +1,99 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}{{ title }} | {{ block.super }}{% endblock %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block navbar %}
+    {% if not is_popup %}{{ block.super }}{% endif %}
+{% endblock %}
+{% block dashboard_nav %}
+    {% if not is_popup %}{{ block.super }}{% endif %}
+{% endblock %}
+{% block breadcrumbs %}
+    {% if not is_popup %}
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:index' %}">
+                        {% trans "Dashboard" %}
+                    </a>
+                </li>
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:catalogue-option-list' %}">
+                        {% trans "Options" %}
+                    </a>
+                </li>
+                <li class="breadcrumb-item active" aria-current="page">
+                    {{ title }}
+                </li>
+            </ol>
+        </nav>
+    {% endif %}
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <form class="form-stacked wysiwyg fixed-actions" method="post" data-behaviour="tab-nav-errors">
+        {% csrf_token %}
+        <div class="row">
+            {% if is_popup %}
+                <input type="hidden" name="{{ is_popup_var }}" value="{{ is_popup }}" />
+            {% endif %}
+            {% if to_field %}
+                <input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}" />
+            {% endif %}
+            <div class="col-md-12">
+                <div class="tab-content">
+                    {% block option_details %}
+                        <div class="tab-pane active" id="option_details">
+                            <div class="table-header">
+                                <h3>{% trans "Option details" %}</h3>
+                            </div>
+                            <div class="card card-body bg-light option-details">
+                                {% comment %}
+                                If the Option form has field_errors, partials/form_fields.html
+                                will render an error message.
+                                This means that there'll be 2 error messages,
+                                one from the partial and one from the view. Perhaps there should be
+                                an option allowing hiding of the error message in the template.
+                                For now we copy paste what we need from the template.
+                            {% endcomment %}
+                            {% if form.non_field_errors %}
+                                {% for error in form.non_field_errors %}
+                                    <div class="alert alert-danger">
+                                        <span class="error-block">
+                                            <i class="fas fa-exclamation"></i>
+                                            {{ error }}
+                                        </span>
+                                    </div>
+                                {% endfor %}
+                            {% endif %}
+                            {% for field in form %}
+                                {% include 'oscar/dashboard/partials/form_field.html' with field=field %}{% endfor %}
+                            </div>
+                        </div>
+                    {% endblock %}
+                </div>
+            </div>
+        </div>
+        {% block fixed_actions_group %}
+            <div class="fixed-actions-group">
+                <div class="form-actions">
+                    <div class="float-right">
+                        <a href="#"
+                            {% if not is_popup %}
+                                onclick="window.history.go(-1);return false"
+                            {% else %}
+                                onclick="window.close();return false;"
+                            {% endif %}
+                            >
+                            {% trans "Cancel" %}
+                        </a>
+                        {% trans "or" %}
+                        <button class="btn btn-primary" type="submit">
+                            {% trans "Save" %}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        {% endblock fixed_actions_group %}
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/option_list.html b/tests/django_oscar/oscar/dashboard/catalogue/option_list.html
new file mode 100644
index 0000000..b8d6787
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/option_list.html
@@ -0,0 +1,43 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% load render_table from django_tables2 %}
+{% block title %}
+    {% trans "Options" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Options" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <a href="{% url 'dashboard:catalogue-option-create' %}" class="btn btn-primary float-right">
+            <i class="fas fa-plus-circle"></i>
+            {% trans "Create new Option" %}
+        </a>
+        <h1>{% trans "Option" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    {% if options %}
+        {% block product_list %}
+            <form action="." method="post">
+                {% csrf_token %}
+                {% render_table options %}
+            </form>
+        {% endblock product_list %}
+    {% else %}
+        <p>
+            {% trans "No Option found." %}
+        </p>
+    {% endif %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/option_row_actions.html b/tests/django_oscar/oscar/dashboard/catalogue/option_row_actions.html
new file mode 100644
index 0000000..c0962c1
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/option_row_actions.html
@@ -0,0 +1,24 @@
+{% load django_tables2 %}
+{% load i18n %}
+<div class="btn-toolbar">
+    <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle"
+                type="button"
+                id="dropdownMenuButton"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false">
+            {% trans "Actions" %}
+        </button>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+            <a class="dropdown-item"
+               href="{% url 'dashboard:catalogue-option-update' pk=record.id %}{% querystring %}">
+                {% trans "Edit Option" %}
+            </a>
+            <a class="dropdown-item"
+               href="{% url 'dashboard:catalogue-option-delete' pk=record.id %}{% querystring %}">
+                {% trans "Delete" %}
+            </a>
+        </div>
+    </div>
+</div>
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/option_row_name.html b/tests/django_oscar/oscar/dashboard/catalogue/option_row_name.html
new file mode 100644
index 0000000..0d40336
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/option_row_name.html
@@ -0,0 +1,4 @@
+{% load django_tables2 %}
+<a href="{% url 'dashboard:catalogue-option-update' pk=record.pk %}{% querystring %}">
+    {{ value }}
+</a>
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/product_class_delete.html b/tests/django_oscar/oscar/dashboard/catalogue/product_class_delete.html
new file mode 100644
index 0000000..4ddf5df
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/product_class_delete.html
@@ -0,0 +1,54 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:catalogue-class-list' %}">
+                    {% trans "Product type" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Delete product type?" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    {% if disallow %}
+        <p>
+            {% trans "Please make sure all products are assigned to another type before deletion." %}
+        </p>
+    {% else %}
+        <div class="table-header">
+            <h2>{% trans "Delete product type" %}</h2>
+        </div>
+        <form method="post" class="card card-body bg-light">
+            {% csrf_token %}
+            {{ form }}
+            <p>
+                {% blocktrans with name=object.name %}
+                    Delete product type
+                    <strong>{{ name }}</strong>
+                    - are you sure?
+                {% endblocktrans %}
+            </p>
+            <div class="form-actions">
+                <button type="submit" class="btn btn-danger" data-loading-text="{% trans 'Deleting...' %}">
+                    {% trans "Delete" %}
+                </button>
+                {% trans "or" %}
+                <a href="{% url 'dashboard:catalogue-class-list' %}">
+                    {% trans "cancel" %}
+                </a>
+            </div>
+        </form>
+    {% endif %}
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/product_class_form.html b/tests/django_oscar/oscar/dashboard/catalogue/product_class_form.html
new file mode 100644
index 0000000..fcefb8c
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/product_class_form.html
@@ -0,0 +1,160 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {{ title }} | {% trans "Create product type" %} | {{ block.super }}
+{% endblock %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:catalogue-class-list' %}">
+                    {% trans "Product Type" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ title }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <form class="form-stacked wysiwyg fixed-actions" method="post" data-behaviour="tab-nav-errors">
+        {% csrf_token %}
+        <div class="row">
+            {% block tab_nav %}
+                <div class="col-md-3">
+                    <div class="tab-nav sticky-top">
+                        <div class="table-header">
+                            <h3>{% trans "Sections" %}</h3>
+                        </div>
+                        <ul class="nav flex-column bs-docs-sidenav" id="product_update_tabs">
+                            {% block tabs %}
+                                <li class="nav-item">
+                                    <a class="nav-link active" href="#product_class_details" data-toggle="tab">
+                                        {% trans 'Product Class details' %}
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#product_attributes" data-toggle="tab">
+                                        {% trans 'Product attributes' %}
+                                    </a>
+                                </li>
+                            {% endblock tabs %}
+                        </ul>
+                    </div>
+                </div>
+            {% endblock tab_nav %}
+            <div class="col-md-9">
+                <div class="tab-content">
+                    {% block tab_content %}
+                        {% block product_class_details %}
+                            <div class="tab-pane active" id="product_class_details">
+                                <div class="table-header">
+                                    <h3>{% trans "Product Class details" %}</h3>
+                                </div>
+                                <div class="card card-body bg-light product-class-details">
+                                    {% comment %}
+                                    If the ProductClass form has field_errors, partials/form_fields.html
+                                    will render an error message.
+                                    This means that there'll be 2 error messages,
+                                    one from the partial and one from the view. Perhaps there should be
+                                    an option allowing hiding of the error message in the template.
+                                    For now we copy paste what we need from the template.
+                                {% endcomment %}
+                                {% if form.non_field_errors %}
+                                    {% for error in form.non_field_errors %}
+                                        <div class="alert alert-danger">
+                                            <span class="error-block">
+                                                <i class="fas fa-exclamation"></i>
+                                                {{ error }}
+                                            </span>
+                                        </div>
+                                    {% endfor %}
+                                {% endif %}
+                                {% for field in form %}
+                                    {% include 'oscar/dashboard/partials/form_field.html' with field=field %}{% endfor %}
+                                </div>
+                            </div>
+                        {% endblock %}
+                        {% block product_attributes %}
+                            <div class="tab-pane" id="product_attributes">
+                                <div class="table-header">
+                                    <h3>{% trans "Product attributes" %}</h3>
+                                </div>
+                                <div class="product-attributes">
+                                    <table class="table table-striped table-bordered">
+                                        {{ attributes_formset.management_form }}
+                                        {{ attributes_formset.non_form_errors }}
+                                        <col width="20%">
+                                        <col width="20%">
+                                        <col width="20%">
+                                        <thead>
+                                            <tr>
+                                                <th>{% trans "Name" %}</th>
+                                                <th>{% trans "Code" %}</th>
+                                                <th>{% trans "Type" %}</th>
+                                                <th>{% trans "Required" %}</th>
+                                                <th>{% trans "Delete?" %}</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {% for attribute_form in attributes_formset %}
+                                                <tr>
+                                                    {% for hidden_field in attribute_form.hidden_fields %}
+                                                        {{ hidden_field }}
+                                                    {% endfor %}
+                                                    <td>
+                                                        {% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.name nolabel=True %}
+                                                    </td>
+                                                    <td>
+                                                        {% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.code nolabel=True %}
+                                                    </td>
+                                                    <td>
+                                                        {% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.type nolabel=True %}
+                                                        {% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.option_group nolabel=True %}
+                                                    </td>
+                                                    <td>
+                                                        {% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.required nolabel=True %}
+                                                    </td>
+                                                    <td>
+                                                        {% include 'oscar/dashboard/partials/form_field.html' with field=attribute_form.DELETE nolabel=True %}
+                                                    </td>
+                                                </tr>
+                                            {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        {% endblock %}
+                    {% endblock tab_content %}
+                </div>
+            </div>
+        </div>
+        {% block fixed_actions_group %}
+            <div class="fixed-actions-group">
+                <div class="form-actions">
+                    <div class="float-right">
+                        <a href="#" onclick="window.history.go(-1);return false" >
+                            {% trans "Cancel" %}
+                        </a>
+                        {% trans "or" %}
+                        <button class="btn btn-primary" type="submit">
+                            {% trans "Save" %}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        {% endblock fixed_actions_group %}
+    </form>
+{% endblock dashboard_content %}
+{% block onbodyload %}
+    {{ block.super }}
+    oscar.dashboard.product_attributes.init();
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/product_class_list.html b/tests/django_oscar/oscar/dashboard/catalogue/product_class_list.html
new file mode 100644
index 0000000..c782537
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/product_class_list.html
@@ -0,0 +1,93 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Product Type" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <a href="{% url 'dashboard:catalogue-class-create' %}" class="btn btn-primary float-right">
+            <i class="fas fa-plus-circle"></i>
+            {% trans "Create new product type" %}
+        </a>
+        <h1>{% trans "Product types" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    {% if classes %}
+        <table class="table table-striped table-bordered table-hover">
+            <caption>
+            <i class="fas fa-sitemap"></i>
+            {% trans 'Product Types' %}
+            </caption>
+            <thead>
+                <tr>
+                    <th>{% trans "Name" %}</th>
+                    <th>{% trans "Requires shipping" %}</th>
+                    <th>{% trans "Track stock?" %}</th>
+                    <th>&nbsp;</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for class in classes %}
+                    <tr>
+                        <td>
+                            <a href="{% url 'dashboard:catalogue-class-update' class.id %}">
+                                {{ class.name }}
+                            </a>
+                        </td>
+                        <td>
+                            <a href="{% url 'dashboard:catalogue-class-update' class.id %}">
+                                {{ class.requires_shipping|yesno }}
+                            </a>
+                        </td>
+                        <td>
+                            <a href="{% url 'dashboard:catalogue-class-update' class.id %}">
+                                {{ class.track_stock|yesno }}
+                            </a>
+                        </td>
+                        <td>
+                            <div class="btn-toolbar">
+                                <div class="dropdown">
+                                    <button class="btn btn-secondary dropdown-toggle"
+                                            type="button"
+                                            id="dropdownMenuButton"
+                                            data-toggle="dropdown"
+                                            aria-haspopup="true"
+                                            aria-expanded="false">
+                                        {% trans "Actions" %}
+                                    </button>
+                                    <div class="dropdown-menu dropdown-menu-right"
+                                         aria-labelledby="dropdownMenuButton">
+                                        <a class="dropdown-item"
+                                           href="{% url 'dashboard:catalogue-class-update' pk=class.id %}">
+                                            {% trans "Edit product type" %}
+                                        </a>
+                                        <a class="dropdown-item"
+                                           href="{% url 'dashboard:catalogue-class-delete' pk=class.id %}">
+                                            {% trans "Delete" %}
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% else %}
+        <p>
+            {% trans "There are no product types." %}
+        </p>
+    {% endif %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/product_delete.html b/tests/django_oscar/oscar/dashboard/catalogue/product_delete.html
new file mode 100644
index 0000000..ad54e26
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/product_delete.html
@@ -0,0 +1,73 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}{{ title }} | {{ block.super }}{% endblock %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:catalogue-product-list' %}">
+                    {% trans "Products" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:catalogue-product' pk=product.pk %}">
+                    {{ product.get_title }}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ title }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2>{{ title }}</h2>
+    </div>
+    <form method="post" class="card card-body bg-light">
+        {% csrf_token %}
+        <p>
+            {% if product.is_child %}
+                {% blocktrans with title=product.get_title %}
+                    Delete product variant
+                    <strong>{{ title }}</strong>
+                    - are you sure?
+                {% endblocktrans %}
+            {% else %}
+                {% blocktrans with title=product.get_title %}
+                    Delete product
+                    <strong>{{ title }}</strong>
+                    - are you sure?
+                {% endblocktrans %}
+            {% endif %}
+        </p>
+        {% if product.is_parent %}
+            <p>
+                {% trans "This will also delete the following child products:" %}
+                <ul>
+                    {% for child in product.children.all %}
+                        <li>
+                            <strong>{{ child.get_title }}</strong>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </p>
+        {% endif %}
+        <div class="form-actions">
+            <button type="submit" class="btn btn-danger" data-loading-text="{% trans 'Deleting...' %}">
+                {% trans "Delete" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:catalogue-product-list' %}">
+                {% trans "cancel" %}
+            </a>
+        </div>
+    </form>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/product_list.html b/tests/django_oscar/oscar/dashboard/catalogue/product_list.html
new file mode 100644
index 0000000..bfa9464
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/product_list.html
@@ -0,0 +1,102 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% load render_table from django_tables2 %}
+{% block body_class %}{{ block.super }} catalogue{% endblock %}
+{% block title %}
+    {% trans "Products" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Products" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <h1>{% trans "Products" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    {% block create_product %}
+        <div class="table-header">
+            <h3>
+                <i class="fas fa-sitemap"></i>
+                {% trans "Create new product" %}
+            </h3>
+        </div>
+        <div class="card card-body">
+            <form action="{% url 'dashboard:catalogue-product-create' %}" method="get" class="form-inline">
+                {% include "oscar/dashboard/partials/form_fields_inline.html" with form=productclass_form %}
+                <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Submitting...' %}">
+                    <i class="fas fa-plus-circle"></i>
+                    {% trans "New Product" %}
+                </button>
+            </form>
+        </div>
+    {% endblock %}
+    {% block search_products %}
+        <div class="table-header">
+            <h3>
+                <i class="fas fa-search"></i>
+                {% trans "Search Products" %}
+            </h3>
+        </div>
+        <div class="card card-body">
+            <form method="get" class="form-inline">
+                {% comment %}
+                Add the current query string to the search form so that the
+                sort order is not reset when searching.
+            {% endcomment %}
+            {% for name, value in request.GET.items %}
+                {% if name not in form.fields %}
+                    <input type="hidden" name="{{ name }}" value="{{ value }}"/>
+                {% endif %}
+            {% endfor %}
+            {% include "oscar/dashboard/partials/form_fields_inline.html" with form=form %}
+            <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Searching...' %}">
+                <i class="fas fa-search"></i>
+                {% trans "Search" %}
+            </button>
+        </form>
+    </div>
+{% endblock %}
+{% if products %}
+    {% block product_list %}
+        <form method="post">
+            {% csrf_token %}
+            {% render_table products %}
+        </form>
+        <div class="modal fade" id="product-image-modal" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title"></h4>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body text-center">
+                        <img class="img-fluid mx-auto">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {% endblock product_list %}
+    {% else %}
+        <p>
+            {% trans "No products found." %}
+        </p>
+    {% endif %}
+{% endblock dashboard_content %}
+{% block onbodyload %}
+    {{ block.super }}
+    oscar.dashboard.product_lists.init();
+{% endblock onbodyload %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/product_row_actions.html b/tests/django_oscar/oscar/dashboard/catalogue/product_row_actions.html
new file mode 100644
index 0000000..c19afa2
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/product_row_actions.html
@@ -0,0 +1,25 @@
+{% load django_tables2 %}
+{% load i18n %}
+<div class="btn-toolbar">
+    <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle"
+                type="button"
+                id="dropdownMenuButton"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false">
+            {% trans "Actions" %}
+        </button>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+            <a class="dropdown-item" href="{% url 'dashboard:catalogue-product' pk=record.id %}{% querystring %}">
+                {% trans "Edit" %}
+            </a>
+            <a class="dropdown-item" href="{{ record.get_absolute_url }}">
+                {% trans "View on site" %}
+            </a>
+            <a class="dropdown-item" href="{% url 'dashboard:catalogue-product-delete' pk=record.id %}">
+                {% trans "Delete" %}
+            </a>
+        </div>
+    </div>
+</div>
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/product_row_image.html b/tests/django_oscar/oscar/dashboard/catalogue/product_row_image.html
new file mode 100644
index 0000000..408afb0
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/product_row_image.html
@@ -0,0 +1,14 @@
+{% load image_tags %}
+{% if record.primary_image.original.url %}
+    {% with image=record.primary_image %}
+    {% oscar_thumbnail image.original "70x70" upscale=False as thumb %}
+    <a href="#" data-original="{{ image.original.url }}" class="sub-image">
+        <img src="{{ thumb.url }}"
+             alt="{% if image.caption %}{{ image.caption }}{% else %}{{ record.get_title }}{% endif %}"
+             height="{{ thumb.height }}"
+             width="{{ thumb.width }}">
+    </a>
+{% endwith %}
+{% else %}
+—
+{% endif %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/product_row_stockrecords.html b/tests/django_oscar/oscar/dashboard/catalogue/product_row_stockrecords.html
new file mode 100644
index 0000000..0ed2820
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/product_row_stockrecords.html
@@ -0,0 +1,5 @@
+{% if record.is_parent %}
+    -
+{% else %}
+    {{ record.num_stockrecords }}
+{% endif %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/product_row_title.html b/tests/django_oscar/oscar/dashboard/catalogue/product_row_title.html
new file mode 100644
index 0000000..3625b34
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/product_row_title.html
@@ -0,0 +1,4 @@
+{% load django_tables2 %}
+<a href="{% url 'dashboard:catalogue-product' pk=record.pk %}{% querystring %}">
+    {{ value }}
+</a>
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/product_row_variants.html b/tests/django_oscar/oscar/dashboard/catalogue/product_row_variants.html
new file mode 100644
index 0000000..c738ba1
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/product_row_variants.html
@@ -0,0 +1,5 @@
+{% if record.is_standalone %}
+    -
+{% else %}
+    {{ record.children.count }}
+{% endif %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/product_update.html b/tests/django_oscar/oscar/dashboard/catalogue/product_update.html
new file mode 100644
index 0000000..2881bf5
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/product_update.html
@@ -0,0 +1,447 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load form_tags %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page catalogue{% endblock %}
+{% block title %}
+    {{ title }} | {% trans "Products" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:catalogue-product-list' %}">
+                    {% trans "Products" %}
+                </a>
+            </li>
+            {% if parent %}
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:catalogue-product' parent.id %}">
+                        {{ parent.title }}
+                    </a>
+                </li>
+            {% endif %}
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ title }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <form action="{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}"
+          method="post"
+          class="form-stacked wysiwyg fixed-actions"
+          enctype="multipart/form-data"
+          data-behaviour="tab-nav-errors"
+          autocomplete="off">
+    {% csrf_token %}
+    {% if parent %}
+        <div class="row">
+            <div class="col-md-12">
+                <div class="alert alert-info">
+                    {% url 'dashboard:catalogue-product' pk=parent.id as parent_url %}
+                    {% blocktrans with title=parent.title %}
+                        You are currently editing a product variant of
+                        <a href="{{ parent_url }}">{{ title }}</a>
+                        .
+                    {% endblocktrans %}
+                </div>
+            </div>
+        </div>
+    {% endif %}
+    <div class="row">
+        {% block tab_nav %}
+            <div class="col-md-3">
+                <div class="tab-nav sticky-top">
+                    <div class="table-header">
+                        <h3>{% trans "Sections" %}</h3>
+                    </div>
+                    <ul class="nav flex-column bs-docs-sidenav" id="product_update_tabs">
+                        {% comment %}
+                        The navigation below is filtered heavily on the product structure.
+                        This intentionally is the only place where filtering is done, as
+                        deployments are likely to want to override certain aspects of what
+                        data is stored on products of a certain structure. This means that
+                        only one template block (instead of all affected) has to be altered.
+                    {% endcomment %}
+                    {% block tabs %}
+                        <li class="nav-item">
+                            <a class="nav-link active" href="#product_details" data-toggle="tab">
+                                {% trans 'Product details' %}
+                            </a>
+                        </li>
+                        {% if not parent %}
+                            <li class="nav-item">
+                                <a class="nav-link" href="#product_category" data-toggle="tab">
+                                    {% trans 'Categories' %}
+                                </a>
+                            </li>
+                        {% endif %}
+                        {% if product_class.has_attributes %}
+                            <li class="nav-item">
+                                <a class="nav-link" href="#product_attributes" data-toggle="tab">
+                                    {% trans 'Attributes' %}
+                                </a>
+                            </li>
+                        {% endif %}
+                        <li class="nav-item">
+                            <a class="nav-link" href="#product_images" data-toggle="tab">
+                                {% trans 'Images' %}
+                            </a>
+                        </li>
+                        {% if not product.is_parent %}
+                            <li class="nav-item">
+                                <a class="nav-link" href="#product_stock" data-toggle="tab">
+                                    {% trans 'Stock and pricing' %}
+                                </a>
+                            </li>
+                        {% endif %}
+                        {% if user.is_staff and not parent %}
+                            <li class="nav-item">
+                                <a class="nav-link" href="#child_products" data-toggle="tab">
+                                    {% trans 'Variants' %}
+                                </a>
+                            </li>
+                        {% endif %}
+                        {% if not parent %}
+                            <li class="nav-item">
+                                <a class="nav-link" href="#product_recommended" data-toggle="tab">
+                                    {% trans 'Upselling' %}
+                                </a>
+                            </li>
+                        {% endif %}
+                        <li class="nav-item">
+                            <a class="nav-link" href="#seo" data-toggle="tab">
+                                {% trans 'Search engine optimisation' %}
+                            </a>
+                        </li>
+                    {% endblock tabs %}
+                </ul>
+            </div>
+        </div>
+    {% endblock tab_nav %}
+    <div class="col-md-9">
+        <div class="tab-content">
+            {% block tab_content %}
+                {% block product_details %}
+                    <div class="tab-pane active" id="product_details">
+                        <div class="table-header">
+                            <h3>{% trans "Product details" %}</h3>
+                        </div>
+                        <div class="card card-body product-details">
+                            {% block product_details_content %}
+                                <span class="error-block">{{ form.non_field_errors }}</span>
+                                {% for field in form.hidden_fields %}{{ field }}{% endfor %}
+                                {% for field in form.primary_form_fields %}
+                                    {% if 'attr' not in field.id_for_label %}
+                                        {% include 'oscar/dashboard/partials/form_field.html' with field=field %}{% endif %}
+                                    {% endfor %}
+                                {% endblock product_details_content %}
+                            </div>
+                        </div>
+                    {% endblock product_details %}
+                    {% block product_categories %}
+                        <div class="tab-pane" id="product_category">
+                            {% block product_categories_content %}
+                                <table class="table table-striped table-bordered">
+                                    <caption>
+                                    {% trans "Category" %}
+                                    </caption>
+                                    {{ category_formset.management_form }}
+                                    {{ category_formset.non_form_errors }}
+                                    {% for category_form in category_formset %}
+                                        <tr>
+                                            <td class="form-inline">
+                                                {% include "oscar/dashboard/partials/form_fields_inline.html" with form=category_form %}
+                                            </td>
+                                        </tr>
+                                    {% endfor %}
+                                </table>
+                            {% endblock product_categories_content %}
+                        </div>
+                    {% endblock product_categories %}
+                    {% block product_attributes %}
+                        <div class="tab-pane" id="product_attributes">
+                            {% block product_attributes_content %}
+                                <table class="table table-striped table-bordered">
+                                    <caption>
+                                    {% trans "Attributes" %}
+                                    <span class="badge badge-success">{% trans "Product Type:" %} {{ product_class }}</span>
+                                    </caption>
+                                    {% for field in form %}
+                                        {% if 'attr' in field.id_for_label %}
+                                            <tr>
+                                                <td>{% include "oscar/dashboard/partials/form_field.html" %}</td>
+                                            </tr>
+                                        {% endif %}
+                                    {% endfor %}
+                                </table>
+                            {% endblock product_attributes_content %}
+                        </div>
+                    {% endblock product_attributes %}
+                    {% block product_images %}
+                        <div class="tab-pane" id="product_images">
+                            {% block product_images_content %}
+                                <div class="table-header">
+                                    <h3>{% trans "Upload, change or remove images" %}</h3>
+                                </div>
+                                <div class="card card-body">
+                                    {{ image_formset.management_form }}
+                                    {{ image_formset.non_form_errors }}
+                                    <ol class='upload-image'>
+                                        {% for image_form in image_formset %}
+                                            {% include "oscar/dashboard/partials/product_images.html" with form=image_form %}{% endfor %}
+                                        </ol>
+                                        <p class="form-text">
+                                            {% trans 'Drag images to re-order them. Space for additional images will appear when images are added.' %}
+                                        </p>
+                                    </div>
+                                {% endblock product_images_content %}
+                            </div>
+                        {% endblock product_images %}
+                        {% block stockrecords %}
+                            <div class="tab-pane" id="product_stock">
+                                {% block stockrecords_content %}
+                                    <table class="table table-striped table-bordered">
+                                        <caption>
+                                        {% trans "Stock and pricing" %}
+                                        </caption>
+                                        {{ stockrecord_formset.management_form }}
+                                        {{ stockrecord_formset.non_form_errors }}
+                                        <thead>
+                                            <tr>
+                                                <th>{% trans "Partner" %}</th>
+                                                <th>{% trans "SKU" %}</th>
+                                                {% if product_class.track_stock %}
+                                                    <th>{% trans "Num in stock" %}</th>
+                                                    <th>{% trans "Num allocated" %}</th>
+                                                    <th>{% trans "Low stock threshold" %}</th>
+                                                {% endif %}
+                                                <th>{% trans "Currency" %}</th>
+                                                <th>
+                                                    {% trans "Price" %}
+                                                </th>
+                                                <th>
+                                                    {% trans "Delete?" %}
+                                                </th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {% for stockrecord_form in stockrecord_formset %}
+                                                {% if stockrecord_form.non_field_errors %}
+                                                    <tr>
+                                                        <td colspan="{% if product_class.track_stock %}10{% else %}7{% endif %}">
+                                                        {% for error in stockrecord_form.non_field_errors %}
+                                                            <span class="error-block errorlist">
+                                                                <i class="fas fa-exclamation"></i>
+                                                                {{ error }}
+                                                            </span>
+                                                        {% endfor %}
+                                                    </td>
+                                                </tr>
+                                            {% endif %}
+                                            <tr>
+                                                <td>
+                                                    {% include "oscar/dashboard/partials/form_field.html" with field=stockrecord_form.partner nolabel=True %}
+                                                </td>
+                                                <td>
+                                                    {% include "oscar/dashboard/partials/form_field.html" with field=stockrecord_form.partner_sku nolabel=True %}
+                                                </td>
+                                                {% if product_class.track_stock %}
+                                                    <td>
+                                                        {% include "oscar/dashboard/partials/form_field.html" with field=stockrecord_form.num_in_stock nolabel=True %}
+                                                    </td>
+                                                    <td>
+                                                        {{ stockrecord_form.instance.num_allocated|default:"-" }}
+                                                    </td>
+                                                    <td>
+                                                        {% include "oscar/dashboard/partials/form_field.html" with field=stockrecord_form.low_stock_threshold nolabel=True %}
+                                                    </td>
+                                                {% endif %}
+                                                <td>
+                                                    {% include "oscar/dashboard/partials/form_field.html" with field=stockrecord_form.price_currency nolabel=True %}
+                                                </td>
+                                                <td>
+                                                    {% include "oscar/dashboard/partials/form_field.html" with field=stockrecord_form.price nolabel=True %}
+                                                </td>
+                                                <td>
+                                                    {% include "oscar/dashboard/partials/form_field.html" with field=stockrecord_form.id nolabel=True %}
+                                                    {% include "oscar/dashboard/partials/form_field.html" with field=stockrecord_form.DELETE nolabel=True %}
+                                                </td>
+                                            </tr>
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
+                            {% endblock stockrecords_content %}
+                        </div>
+                    {% endblock stockrecords %}
+                    {% block child_products %}
+                        {% with children=product.children.all %}
+                        <div class="tab-pane" id="child_products">
+                            {% block child_products_content %}
+                                <table class='table table-striped table-bordered'>
+                                    <caption>
+                                    {% trans "Variants" %}
+                                    <button class="btn btn-primary float-right" {% if not product.can_be_parent %}disabled{% endif %}
+                                    name="action" type="submit" value="create-child" data-loading-text="{% trans 'Adding...' %}">
+                                    <i class="fas fa-plus-circle"></i>
+                                    {% trans "Add variant" %}
+                                </button>
+                                </caption>
+                                {% if children %}
+                                    <tr>
+                                        <th>
+                                            {% trans "Title" %}
+                                        </th>
+                                        <th>
+                                            {% trans "Attributes" %}
+                                        </th>
+                                        <th>
+                                            {% trans "Stock records" %}
+                                        </th>
+                                        <th>
+                                            {% trans "Is public?" %}
+                                        </th>
+                                        <th>
+                                            &nbsp;
+                                        </th>
+                                    </tr>
+                                    {% for child in children %}
+                                        <tr>
+                                            <td>
+                                                {{ child.get_title }}
+                                            </td>
+                                            <td>
+                                                {{ child.attribute_summary }}
+                                            </td>
+                                            <td>
+                                                {{ child.stockrecords.count }}
+                                            </td>
+                                            <td>
+                                                {% if child.is_public %}
+                                                    <span class="true">✔</span>
+                                                {% else %}
+                                                    <span class="false">✘</span>
+                                                {% endif %}
+                                            </td>
+                                            <td>
+                                                <a href="{% url 'dashboard:catalogue-product' pk=child.id %}"
+                                                   class="btn btn-primary">
+                                                    {% trans "Edit" %}
+                                                </a>
+                                                <a href="{% url 'dashboard:catalogue-product-delete' pk=child.id %}"
+                                                   class="btn btn-danger">
+                                                    {% trans "Delete" %}
+                                                </a>
+                                            </td>
+                                        </tr>
+                                    {% endfor %}
+                                {% else %}
+                                    <tr>
+                                        <td colspan="5">
+                                            {% if product.can_be_parent %}
+                                                {% trans 'This product does not have any variants.' %}
+                                            {% else %}
+                                                {% trans "One can't add variants to this product at this point." %}
+                                                {% if product.pk is None %}
+                                                    {% trans "Please save the product before trying to add variants." %}
+                                                {% elif product.has_stockrecords %}
+                                                    {% trans 'This is likely because this product still has stock records.' %}
+                                                {% endif %}
+                                            {% endif %}
+                                        </td>
+                                    </tr>
+                                {% endif %}
+                            </table>
+                        {% endblock child_products_content %}
+                    </div>
+                {% endwith %}
+            {% endblock child_products %}
+            {% block recommended_products %}
+                <div class="tab-pane" id="product_recommended">
+                    {% block recommended_products_content %}
+                        <table class="table table-striped table-bordered">
+                            <caption>
+                            {% trans "Recommended products" %}
+                            </caption>
+                            {{ recommended_formset.management_form }}
+                            {{ recommended_formset.non_form_errors }}
+                            {% for recommended_form in recommended_formset %}
+                                <tr>
+                                    <td class="form-inline">
+                                        {% include "oscar/dashboard/partials/form_fields_inline.html" with form=recommended_form %}
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                        </table>
+                    {% endblock recommended_products_content %}
+                </div>
+            {% endblock recommended_products %}
+            {% block seo %}
+                <div class="tab-pane" id="seo">
+                    <div class="table-header">
+                        <h3>
+                            {% trans "Search engine optimisation" %}
+                        </h3>
+                    </div>
+                    <div class="card card-body">
+                        {% block seo_content %}
+                            {% for field in form.seo_form_fields %}
+                                {% if 'attr' not in field.id_for_label %}
+                                    {% include 'oscar/dashboard/partials/form_field.html' with field=field %}{% endif %}
+                                {% endfor %}
+                            {% endblock seo_content %}
+                        </div>
+                    </div>
+                {% endblock seo %}
+            {% endblock tab_content %}
+        </div>
+    </div>
+</div>
+{% block fixed_actions_group %}
+    <div class="fixed-actions-group">
+        <div class="form-group">
+            <div class="float-right">
+                <a href="{% url 'dashboard:catalogue-product-list' %}">
+                    {% trans "Cancel" %}
+                </a>
+                {% trans "or" %}
+                {% if parent %}
+                    <button class="btn btn-secondary"
+                            name="action"
+                            type="submit"
+                            value="create-another-child"
+                            data-loading-text="{% trans 'Saving...' %}">
+                        {% trans "Save and add another variant" %}
+                    </button>
+                {% endif %}
+                <button class="btn btn-secondary"
+                        name="action"
+                        type="submit"
+                        value="continue"
+                        data-loading-text="{% trans 'Saving...' %}">
+                    {% trans "Save and continue editing" %}
+                </button>
+                <button class="btn btn-primary"
+                        name="action"
+                        type="submit"
+                        value="save"
+                        data-loading-text="{% trans 'Saving...' %}">
+                    {% trans "Save" %}
+                </button>
+            </div>
+            {% if product %}
+                <a class="btn btn-success" href="{{ product.get_absolute_url }}">
+                    {% trans "View on site" %}
+                </a>
+            {% endif %}
+        </div>
+    </div>
+{% endblock fixed_actions_group %}
+</form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/catalogue/stockalert_list.html b/tests/django_oscar/oscar/dashboard/catalogue/stockalert_list.html
new file mode 100644
index 0000000..2a254f7
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/catalogue/stockalert_list.html
@@ -0,0 +1,101 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} catalogue{% endblock %}
+{% block title %}
+    {% trans "Stock alerts" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Stock alerts" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <h1>{% trans "Stock alerts" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2 class="float-left">
+            <i class="fas fa-sitemap"></i>
+            {{ description }}
+        </h2>
+        <div class="float-right">
+            <div class="dropdown">
+                <button class="btn btn-primary dropdown-toggle"
+                        type="button"
+                        id="dropdownMenuButton"
+                        data-toggle="dropdown"
+                        aria-haspopup="true"
+                        aria-expanded="false">
+                    {% trans "Filter" %}
+                </button>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                    <a class="dropdown-item" href="{% url 'dashboard:stock-alert-list' %}">
+                        {% trans "All" %}
+                    </a>
+                    <a class="dropdown-item" href="{% url 'dashboard:stock-alert-list' %}?status=Open">
+                        {% trans "Open" %}
+                    </a>
+                    <a class="dropdown-item" href="{% url 'dashboard:stock-alert-list' %}?status=Closed">
+                        {% trans "Closed" %}
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <table class="table table-striped table-bordered table-hover">
+        {% if alerts %}
+            <tr>
+                <th>{% trans "Product" %}</th>
+                <th>{% trans "Partner" %}</th>
+                <th>{% trans "Low stock threshold" %}</th>
+                <th>{% trans "Current available stock" %}</th>
+                <th>{% trans "Date alert raised" %}</th>
+                <th>{% trans "Status" %}</th>
+                <th></th>
+            </tr>
+            {% for alert in alerts %}
+                <tr>
+                    <td>
+                        <a href="{% url 'dashboard:catalogue-product' alert.stockrecord.product.id %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}">
+                        {{ alert.stockrecord.product.get_title }}
+                    </a>
+                </td>
+                <td>{{ alert.stockrecord.partner.display_name }}</td>
+                <td>{{ alert.stockrecord.low_stock_threshold }}</td>
+                <td>
+                    {{ alert.stockrecord.net_stock_level }}
+                </td>
+                <td>
+                    {{ alert.date_created }}
+                </td>
+                <td>
+                    {{ alert.status }}
+                </td>
+                <td>
+                    <a class="btn btn-info"
+                       href="{% url 'dashboard:catalogue-product' pk=alert.stockrecord.product.id %}">
+                        {% trans "Update" %}
+                    </a>
+                </td>
+            </tr>
+        {% endfor %}
+    {% else %}
+        <tr>
+            <td>
+                {% trans "No stock alerts found." %}
+            </td>
+        </tr>
+    {% endif %}
+</table>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/comms/detail.html b/tests/django_oscar/oscar/dashboard/comms/detail.html
new file mode 100644
index 0000000..613711b
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/comms/detail.html
@@ -0,0 +1,183 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}{{ commtype.name }} | {{ block.super }}{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:comms-list' %}">
+                    {% trans "Emails" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ commtype.name }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <h1>{{ commtype.name }}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <form method="post" class="form-stacked">
+        <div class="tabbable dashboard">
+            {% if preview %}
+                <ul class="nav nav-tabs mb-0">
+                    <li>
+                        <a href="#email_form" data-toggle="tab">
+                            {% trans "Edit" %}
+                        </a>
+                    </li>
+                    <li class="active">
+                        <a href="#email_preview" data-toggle="tab">
+                            {% trans "Preview" %}
+                        </a>
+                    </li>
+                </ul>
+            {% else %}
+                <div class="table-header">
+                    <h2>
+                        <i class="fas fa-envelope"></i>
+                        {% trans "Edit email" %}
+                    </h2>
+                </div>
+            {% endif %}
+            <div class="{% if preview %}tab-content{% else %}card card-body{% endif %}">
+            <div class="tab-pane {% if not preview %}active{% endif %}" id="email_form">
+            {% csrf_token %}
+            {% include 'oscar/dashboard/partials/form_field.html' with field=form.name %}
+            <div class="table-header">
+                <h3>{% trans "Email content" %}</h3>
+            </div>
+            <div class="card card-body">
+                <p>
+                    {% trans "These fields are rendered using Django's template system." %}
+                </p>
+                <p>
+                    {% trans "You can use the following variables:" %}
+                </p>
+                <dl>
+                    <dt>
+                    <code>
+                    {% templatetag openvariable %} user.get_full_name {% templatetag closevariable %}
+                    </code>
+                    </dt>
+                    <dd>
+                    {% trans "The full name of the user (if they have one)" %}
+                    </dd>
+                    <dt>
+                    <code>
+                    {% templatetag openvariable %} user.email {% templatetag closevariable %}
+                    </code>
+                    </dt>
+                    <dd>
+                    {% trans "The user's email address" %}
+                    </dd>
+                    <dt>
+                    <code>
+                    {% templatetag openvariable %} site.name {% templatetag closevariable %}
+                    </code>
+                    </dt>
+                    <dd>
+                    {% trans "The name of the site (eg example.com)" %}
+                    </dd>
+                    {% if commtype.is_order_related %}
+                        <dt>
+                        <code>
+                        {% templatetag openvariable %} order.number {% templatetag closevariable %}
+                        </code>
+                        </dt>
+                        <dd>
+                        {% trans "Order number" %}
+                        </dd>
+                    {% endif %}
+                </dl>
+            </div>
+            {% include 'oscar/dashboard/partials/form_field.html' with field=form.email_subject_template %}
+            {% include 'oscar/dashboard/partials/form_field.html' with field=form.email_body_template %}
+            {% include 'oscar/dashboard/partials/form_field.html' with field=form.email_body_html_template %}
+            <div class="table-header">
+                <h3>{% trans "Preview" %}</h3>
+            </div>
+            <div class="card card-body">
+                {% if commtype.is_order_related %}
+                    <p>
+                        {% trans "View a preview of this email using order:" %}
+                    </p>
+                    {% include 'oscar/dashboard/partials/form_field.html' with field=form.preview_order_number %}{% endif %}
+                    <button type="submit"
+                            class="btn btn-primary"
+                            name="show_preview"
+                            data-loading-text="{% trans 'Submitting...' %}">
+                        {% trans "View preview" %}
+                    </button>
+                    <p>
+                        {% trans "or send a preview to:" %}
+                    </p>
+                    {% include 'oscar/dashboard/partials/form_field.html' with field=form.preview_email %}
+                    <button type="submit"
+                            class="btn btn-secondary"
+                            name="send_preview"
+                            data-loading-text="{% trans 'Sending...' %}">
+                        {% trans "Send preview email" %}
+                    </button>
+                </div>
+            </div>
+            <div class="tab-pane {% if preview %}active{% endif %}" id="email_preview">
+            <table class="table table-striped table-bordered table-hover">
+                <tr>
+                    <th>{% trans "Subject" %}</th>
+                    <td>{{ preview.subject }}</td>
+                </tr>
+                <tr>
+                    <th>{% trans "Body text" %}</th>
+                    <td>
+                        <pre>
+{{ preview.body }}
+                        </pre>
+                    </td>
+                </tr>
+                <tr>
+                    <th>{% trans "Body HTML" %}</th>
+                    <td>
+                        <iframe id="preview_box" width="100%" height="400">
+                        {{ preview.html }}
+                        </iframe>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Saving...' %}">
+                {% trans "Save" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:comms-list' %}">
+                {% trans "cancel" %}
+            </a>
+            .
+        </div>
+    </div>
+</div>
+</form>
+{% endblock dashboard_content %}
+{% block onbodyload %}
+{{ block.super }}
+$(function() {
+// Sets the HTML email preview so it's css doesn't touch the page.
+var el_preview_html = document.getElementById('preview_box');
+var html = $(el_preview_html).text();
+var doc = el_preview_html.contentWindow.document;
+doc.open();
+doc.write(html);
+doc.close();
+});
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/comms/list.html b/tests/django_oscar/oscar/dashboard/comms/list.html
new file mode 100644
index 0000000..4187193
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/comms/list.html
@@ -0,0 +1,66 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {% trans "Emails" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Emails" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <h1>{% trans "Emails" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <table class="table table-striped table-bordered table-hover">
+        <caption>
+        <i class="fas fa-envelope"></i>
+        {% trans "Emails" %}
+        </caption>
+        {% if commtypes %}
+            <thead>
+                <tr>
+                    <th>{% trans "Code" %}</th>
+                    <th>{% trans "Name" %}</th>
+                    <th>{% trans "Category" %}</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for commtype in commtypes %}
+                    <tr>
+                        <td>
+                            <a href="{% url 'dashboard:comms-update' commtype.code %}">
+                                {{ commtype.code }}
+                            </a>
+                        </td>
+                        <td>{{ commtype.name }}</td>
+                        <td>{{ commtype.category }}</td>
+                        <td>
+                            <a class="btn btn-success" href="{% url 'dashboard:comms-update' commtype.code %}">
+                                {% trans "Edit" %}
+                            </a>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        {% else %}
+            <tbody>
+                <tr>
+                    <td>{% trans "There are no defined emails to edit." %}</td>
+                </tr>
+            </tbody>
+        {% endif %}
+    </table>
+    {% include "oscar/dashboard/partials/pagination.html" %}{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/index.html b/tests/django_oscar/oscar/dashboard/index.html
new file mode 100644
index 0000000..5b03076
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/index.html
@@ -0,0 +1,270 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} orders home{% endblock %}
+{% block extrahead %}
+    {{ block.super }}
+    <meta http-equiv="refresh" content="300">
+{% endblock %}
+{% block breadcrumbs %}{% endblock %}
+{% block headertext %}
+    {% trans "Dashboard" %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <i class="fas fa-signal"></i>
+        {% trans "Your Store Statistics" %}
+    </div>
+    <div class="content-block">
+        <div class="row">
+            <aside class="col-md-3 order-graph-details">
+                <label>
+                    <span>
+                        <i class="fas fa-shopping-cart"></i>
+                        {{ total_orders_last_day }}
+                    </span>
+                    {% trans "Total Orders" %}
+                </label>
+                <label>
+                    <span>
+                        <i class="fas fa-hand-point-right"></i>
+                        {{ total_customers_last_day }}
+                    </span>
+                    {% trans "New Customers" %}
+                </label>
+                <label>
+                    <span>
+                        <i class="fas fa-users"></i>
+                        {{ total_customers }}
+                    </span>
+                    {% trans "Total Customers" %}
+                </label>
+                <label>
+                    <span>
+                        <i class="fas fa-briefcase"></i>
+                        {{ total_products }}
+                    </span>
+                    {% trans "Total Products" %}
+                </label>
+            </aside>
+            <div class="col-md-9">
+                <div id="order_graph">
+                    <div class="bar-caption">
+                        <h2>{% trans "Latest Orders (last 24 hours)" %}</h2>
+                    </div>
+                    <div class="bar-y-axis">
+                        <ul>
+                            {% for y_value in hourly_report_dict.y_range %}
+                                <li>
+                                    <span>{{ y_value|currency }}</span>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    <dl class="bar-chart">
+                        {% for item in hourly_report_dict.order_total_hourly %}
+                            <dd class="bar-layer">
+                            <em>{{ item.end_time|time }}</em>
+                            <span style="height: {{ item.percentage }}%;" >
+                                <p
+                                    {% if item.percentage == 0 %}style="display: none;"{% endif %}
+                                    >
+                                    {{ item.total_incl_tax|currency }}
+                                </p>
+                            </span>
+                            </dd>
+                        {% endfor %}
+                    </dl>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-4">
+            <table class="table table-striped table-bordered table-hover">
+                <caption>
+                <i class="fas fa-shopping-cart"></i>
+                {% trans "Orders - Last 24 Hours" %}
+                </caption>
+                <tr>
+                    <th class="col-md-10">{% trans "Total orders" %}</th>
+                    <td class="col-md-2" >{{ total_orders_last_day }}</td>
+                </tr>
+                <tr>
+                    <th class="col-md-10">{% trans "Total lines" %}</th>
+                    <td class="col-md-2" >{{ total_lines_last_day }}</td>
+                </tr>
+                <tr>
+                    <th class="col-md-10">{% trans "Total revenue" %}</th>
+                    <td class="col-md-2" >{{ total_revenue_last_day|currency }}</td>
+                </tr>
+                <tr>
+                    <th class="col-md-10">{% trans "Average order costs" %}</th>
+                    <td class="col-md-2" >{{ average_order_costs|currency }}</td>
+                </tr>
+            </table>
+        </div>
+        <div class="col-md-4">
+            <table class="table table-striped table-bordered table-hover">
+                <caption>
+                <a href="{% url 'dashboard:order-list' %}" class="btn btn-secondary float-right">
+                    <i class="fas fa-shopping-cart"></i>
+                    {% trans "Manage" %}
+                </a>
+                <i class="fas fa-shopping-cart"></i>
+                {% trans "Orders - All Time" %}
+                </caption>
+                <tr>
+                    <th class="col-md-10">{% trans "Total orders" %}</th>
+                    <td class="col-md-2" >{{ total_orders }}</td>
+                </tr>
+                <tr>
+                    <th class="col-md-10">
+                        {% trans "Total lines" %}
+                    </th>
+                    <td class="col-md-2" >
+                        {{ total_lines }}
+                    </td>
+                </tr>
+                <tr>
+                    <th class="col-md-10">
+                        {% trans "Total revenue" %}
+                    </th>
+                    <td class="col-md-2" >
+                        {{ total_revenue|currency }}
+                    </td>
+                </tr>
+                <tr>
+                    <th class="col-md-10">
+                        {% trans "Total
+                        <em>open</em>
+                        baskets" %}
+                    </th>
+                    <td class="col-md-2" >
+                        {{ total_open_baskets }}
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="col-md-4">
+            <table class="table table-striped table-bordered table-hover">
+                <caption>
+                <i class="fas fa-users"></i>
+                {% trans "Customers" %}
+                </caption>
+                <tr>
+                    <th class="col-md-10">
+                        {% trans "Total customers" %}
+                    </th>
+                    <td class="col-md-2" >
+                        {{ total_customers }}
+                    </td>
+                </tr>
+                <tr>
+                    <th class="col-md-10">
+                        {% trans "New customers" %}
+                    </th>
+                    <td class="col-md-2" >
+                        {{ total_customers_last_day }}
+                    </td>
+                </tr>
+                <tr>
+                    <th class="col-md-10">
+                        {% trans "Total
+                        <em>open</em>
+                        baskets" %}
+                    </th>
+                    <td class="col-md-2" >
+                        {{ total_open_baskets_last_day }}
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-6">
+            <table class="table table-striped table-bordered table-hover">
+                <caption>
+                <div class="btn-toolbar float-right">
+                    <div class="btn-group">
+                        <a href="{% url 'dashboard:catalogue-product-list' %}" class="btn btn-secondary">
+                            <i class="fas fa-sitemap"></i>
+                            {% trans "Manage" %}
+                        </a>
+                    </div>
+                    <div class="btn-group ml-2">
+                        <a href="{% url 'dashboard:stock-alert-list' %}" class="btn btn-secondary">
+                            <i class="fas fa-sitemap"></i>
+                            {% trans "View Stock Alerts" %}
+                        </a>
+                    </div>
+                </div>
+                <i class="fas fa-sitemap"></i>
+                {% trans "Catalogue and stock" %}
+                </caption>
+                <tr>
+                    <th class="col-md-10">
+                        {% trans "Total products" %}
+                    </th>
+                    <td class="col-md-2" >
+                        {{ total_products }}
+                    </td>
+                </tr>
+                <tr>
+                    <th class="col-md-10">
+                        {% trans "
+                        <em>Open</em>
+                        stock alerts" %}
+                    </th>
+                    <td class="col-md-2" >
+                        {{ total_open_stock_alerts }}
+                    </td>
+                </tr>
+                <tr>
+                    <th class="col-md-10">
+                        {% trans "
+                        <em>Closed</em>
+                        stock alerts" %}
+                    </th>
+                    <td class="col-md-2" >
+                        {{ total_closed_stock_alerts }}
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="col-md-6">
+            {% if user.is_staff %}
+                <table class="table table-striped table-bordered table-hover">
+                    <caption>
+                    <i class="fas fa-gift"></i>
+                    {% trans "Offers, vouchers" %}
+                    </caption>
+                    {% for offer_map in offer_maps %}
+                        <tr>
+                            <th class="col-md-10">
+                                {% blocktrans with offer_type=offer_map.offer_type %}
+                                    Active
+                                    <em>{{ offer_type }}</em>
+                                    Offers
+                                {% endblocktrans %}
+                            </th>
+                            <td class="col-md-2" >
+                                {{ offer_map.count }}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                    <tr>
+                        <th class="col-md-10">
+                            {% trans "Active
+                            <em>Vouchers</em>
+                            " %}
+                        </th>
+                        <td class="col-md-2" >
+                            {{ total_vouchers }}
+                        </td>
+                    </tr>
+                </table>
+            {% endif %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/layout.html b/tests/django_oscar/oscar/dashboard/layout.html
new file mode 100644
index 0000000..197aa46
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/layout.html
@@ -0,0 +1,166 @@
+{% extends "oscar/dashboard/base.html" %}
+{% load category_tags %}
+{% load dashboard_tags %}
+{% load i18n %}
+{% load static %}
+{% block styles %}
+    <link rel="stylesheet" type="text/css" href="{% static "oscar/css/dashboard.css" %}" />
+{% endblock %}
+{% block extrastyles %}
+    {{ block.super }}
+    <link rel="stylesheet" href="{% static "oscar/js/select2/select2.min.css" %}" />
+    <link rel="stylesheet" href="{% static "oscar/css/select2-bootstrap.min.css" %}" />
+    <link rel="stylesheet" href="{% static "/>
+{% endblock %}
+{% block title %}
+    {% trans "Dashboard" %} | {{ block.super }}
+{% endblock %}
+{% block layout %}
+    {% block navbar %}
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-accounts">
+            <a class="navbar-brand" href="#">{{ shop_name }}</a>
+            <button class="navbar-toggler"
+                    type="button"
+                    data-toggle="collapse"
+                    data-target="#top_nav_bar"
+                    aria-controls="top_nav_bar"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation">
+                <i class="fas fa-bars"></i>
+            </button>
+            <div class="collapse navbar-collapse" id="top_nav_bar">
+                <ul class="navbar-nav mr-auto"></ul>
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link disabled" href="#">
+                            {% trans "Welcome" %}
+                            <em>{{ user.get_full_name|default:request.user.email }}</em>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ homepage_url }}">
+                            <i class="fas fa-home"></i>
+                            {% trans "Return to site" %}
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'customer:summary' %}">
+                            <i class="fas fa-user"></i>
+                            {% trans "Account" %}
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'dashboard:logout' %}">
+                            <i class="fas fa-sign-out-alt"></i>
+                            {% trans "Log out" %}
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+    {% endblock navbar %}
+    {% block dashboard_nav %}
+        {% dashboard_navigation user as nav_items %}
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-primary">
+            <button class="navbar-toggler float-right"
+                    type="button"
+                    data-toggle="collapse"
+                    data-target="#bottom_nav_bar"
+                    aria-controls="bottom_nav_bar"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation">
+                <i class="fas fa-bars"></i>
+            </button>
+            <div class="collapse navbar-collapse" id="bottom_nav_bar">
+                <ul class="navbar-nav">
+                    {% for item in nav_items %}
+                        <li class="nav-item {% if item.has_children %}dropdown{% endif %}">
+                        <a class="nav-link {% if item.has_children %}dropdown-toggle{% endif %}" href="{% if item.is_heading %}#{% else %}{{ item.url }}{% endif %}"
+                        {% if item.has_children %}
+                            id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                        {% endif %}
+                        >
+                        {% if item.icon %}<i class="{{ item.icon }}"></i>{% endif %}
+                        {{ item.label }}
+                    </a>
+                    {% if item.has_children %}
+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            {% for subitem in item.children %}
+                                <a class="dropdown-item" href="{{ subitem.url }}">
+                                    {% if subitem.icon %}<i class="{{ subitem.icon }}"></i>{% endif %}
+                                    {{ subitem.label }}
+                                </a>
+                            {% endfor %}
+                        </div>
+                    {% endif %}
+                </li>
+            {% endfor %}
+        </ul>
+    </div>
+</nav>
+{% endblock %}
+<div class="container-fluid">
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item active" aria-current="page">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+<div class="content">
+    {% include 'oscar/dashboard/partials/alert_messages.html' %}
+    {% block header %}
+        <div class="page-header">
+            <h1>{% block headertext %}{% endblock %}</h1>
+        </div>
+    {% endblock %}
+    <div class="page-content">
+        {% block content %}
+            {% block dashboard_content %}{% endblock dashboard_content %}
+            {% endblock content %}
+        </div>
+    </div>
+</div>
+<!-- /container -->
+{% endblock %}
+{# Local scripts #}
+{% block scripts %}
+<!-- Twitter Bootstrap -->
+<script src="{% static "oscar/js/bootstrap4/bootstrap.bundle.min.js" %}"></script>
+<!-- Oscar -->
+<script src="{% static "oscar/js/oscar/ui.js" %}"></script>
+{% endblock %}
+{% block extrascripts %}
+{{ block.super }}
+{# jQuery plugins #}
+<script src="{% static "oscar/js/mousewheel/jquery.mousewheel.js" %}"></script>
+<script src="{% static "oscar/js/bootstrap4-datetimepicker/moment-with-locales.min.js" %}"></script>
+<script src="{% static "oscar/js/bootstrap4-datetimepicker/tempusdominus-bootstrap-4.min.js" %}"></script>
+<script src="{% static "oscar/js/inputmask/jquery.inputmask.min.js" %}"></script>
+<script src="{% static "oscar/js/select2/select2.min.js" %}"></script>
+<script src="{% static "oscar/js/jquery-sortable/jquery-sortable-min.js" %}"></script>
+<script src="{% static "oscar/js/oscar/dashboard.js" %}"></script>
+<script src="{% static "oscar/js/oscar/RelatedObjectLookups.js" %}"></script>
+<script src="{% static "oscar/js/tinymce/tinymce.min.js" %}"></script>
+<script src="{% static "oscar/js/tinymce/jquery.tinymce.min.js" %}"></script>
+{% endblock %}
+{% block onbodyload %}
+{{ block.super }}
+// Javascript to enable link to tab
+var url = document.location.toString();
+if (url.match('#')) {
+$('.nav-list a[href="#' + url.split('#')[1] + '"]').tab('show');
+}
+// Change hash for page-reload
+$('.nav-list a').on('shown.bs.tab', function (e) {
+window.location.hash = e.target.hash;
+});
+options = {
+'languageCode': '{{ LANGUAGE_CODE }}'
+};
+oscar.dashboard.init(options);
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/login.html b/tests/django_oscar/oscar/dashboard/login.html
new file mode 100644
index 0000000..7bb4729
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/login.html
@@ -0,0 +1,35 @@
+{% extends "oscar/dashboard/base.html" %}
+{% load i18n %}
+{% load static %}
+{% load widget_tweaks %}
+{% block styles %}
+    <link rel="stylesheet" type="text/css" href="{% static "oscar/css/dashboard.css" %}" />
+{% endblock %}
+{% block body_class %}dashboard-login{% endblock %}
+{% block layout %}
+    <div class="card col-sm-4 mx-auto mt-5">
+        <div class="card-body">
+            <form method="post" novalidate id="dashboard_login_form">
+                <h1>{{ shop_name }}</h1>
+                <hr>
+                {% if form.errors %}
+                    <div class="alert alert-danger">
+                        {% trans "Please enter a correct username and password. Note that both fields may be case-sensitive." %}
+                    </div>
+                {% endif %}
+                <div class="form-group">
+                    {{ form.username.label_tag }}
+                    {% render_field form.username class="form-control" %}
+                </div>
+                <div class="form-group">
+                    {{ form.password.label_tag }}
+                    {% render_field form.password class="form-control" %}
+                </div>
+                <input type="submit" class="btn btn-primary btn-lg" value="{% trans "Login" %}">
+                <input type="hidden" name="next" value="{{ next }}">
+                {% csrf_token %}
+            </form>
+        </div>
+    </div>
+{% endblock %}
+{% block onbodyload %}{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/offers/benefit_form.html b/tests/django_oscar/oscar/dashboard/offers/benefit_form.html
new file mode 100644
index 0000000..3163cd9
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/offers/benefit_form.html
@@ -0,0 +1,34 @@
+{% extends 'oscar/dashboard/offers/step_form.html' %}
+{% load i18n %}
+{% block progress %}
+    {% include 'oscar/dashboard/offers/progress.html' with step=2 %}{% endblock %}
+    {% block form_fields %}
+        <span class="error-block">{{ form.non_field_errors }}</span>
+        {% if form.fields.custom_benefit.choices %}
+            <h4>{% trans "Build a new incentive" %}</h4>
+        {% endif %}
+        {% include "oscar/dashboard/partials/form_field.html" with field=form.range %}
+        <p>
+            {% url 'dashboard:range-list' as range_list_url %}
+            {% blocktrans %}
+                Ranges can be created and edited from within the
+                <a href="{{ range_list_url }}" target="_blank">
+                    range dashboard
+                </a>
+                .
+            {% endblocktrans %}
+        </p>
+        {% include "oscar/dashboard/partials/form_field.html" with field=form.type %}
+        {% include "oscar/dashboard/partials/form_field.html" with field=form.value %}
+        {% include "oscar/dashboard/partials/form_field.html" with field=form.max_affected_items %}
+        {% if form.fields.custom_benefit.choices %}
+            <h4>{% trans "...or choose a pre-defined one" %}</h4>
+            {% include "oscar/dashboard/partials/form_field.html" with field=form.custom_benefit %}{% endif %}
+        {% endblock %}
+        {% block submittext %}
+            {% trans "Continue to step 3" %}
+        {% endblock %}
+        {% block onbodyload %}
+            {{ block.super }}
+            oscar.dashboard.offers.init();
+        {% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/offers/condition_form.html b/tests/django_oscar/oscar/dashboard/offers/condition_form.html
new file mode 100644
index 0000000..46fda11
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/offers/condition_form.html
@@ -0,0 +1,31 @@
+{% extends 'oscar/dashboard/offers/step_form.html' %}
+{% load i18n %}
+{% block summary %}
+    {% include 'oscar/dashboard/offers/summary.html' %}{% endblock %}
+    {% block progress %}
+        {% include 'oscar/dashboard/offers/progress.html' with step=3 %}{% endblock %}
+        {% block form_fields %}
+            <span class="error-block">{{ form.non_field_errors }}</span>
+            {% if form.fields.custom_condition.choices %}
+                <h4>{% trans "Build a new condition" %}</h4>
+            {% endif %}
+            {% include "oscar/dashboard/partials/form_field.html" with field=form.range %}
+            <p>
+                {% url 'dashboard:range-list' as range_list_url %}
+                {% blocktrans %}
+                    Ranges can be created and edited from within the
+                    <a href="{{ range_list_url }}" target="_blank">
+                        range dashboard
+                    </a>
+                    .
+                {% endblocktrans %}
+            </p>
+            {% include "oscar/dashboard/partials/form_field.html" with field=form.type %}
+            {% include "oscar/dashboard/partials/form_field.html" with field=form.value %}
+            {% if form.fields.custom_condition.choices %}
+                <h4>{% trans "...or choose a pre-defined one" %}</h4>
+                {% include "oscar/dashboard/partials/form_field.html" with field=form.custom_condition %}{% endif %}
+            {% endblock %}
+            {% block submittext %}
+                {% trans "Continue to step 4" %}
+            {% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/offers/metadata_form.html b/tests/django_oscar/oscar/dashboard/offers/metadata_form.html
new file mode 100644
index 0000000..14c99ed
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/offers/metadata_form.html
@@ -0,0 +1,7 @@
+{% extends 'oscar/dashboard/offers/step_form.html' %}
+{% load i18n %}
+{% block progress %}
+    {% include 'oscar/dashboard/offers/progress.html' with step=1 %}{% endblock %}
+    {% block submittext %}
+        {% trans "Continue to step 2" %}
+    {% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/offers/offer_delete.html b/tests/django_oscar/oscar/dashboard/offers/offer_delete.html
new file mode 100644
index 0000000..91793d0
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/offers/offer_delete.html
@@ -0,0 +1,48 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {% trans "Delete offer" %} | {% trans "Offers" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:offer-list' %}">
+                    {% trans "Offers" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:offer-detail' pk=offer.pk %}">
+                    '{{ offer.name }}'
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Delete?" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ offer.name }}{% endblock %}
+{% block dashboard_content %}
+    <form method="post">
+        {% csrf_token %}
+        <p>
+            {% trans "Are you sure you want to delete this offer?" %}
+        </p>
+        <div class="form-actions">
+            <button class="btn btn-danger" type="submit" data-loading-text="{% trans 'Deleting...' %}">
+                {% trans "Delete" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:offer-list' %}">
+                {% trans "cancel" %}
+            </a>
+        </div>
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/offers/offer_detail.html b/tests/django_oscar/oscar/dashboard/offers/offer_detail.html
new file mode 100644
index 0000000..2721623
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/offers/offer_detail.html
@@ -0,0 +1,270 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block title %}
+    {% blocktrans with name=offer.name %}
+        {{ name }} | Offers
+    {% endblocktrans %}
+    | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:offer-list' %}">
+                    {% trans "Offers" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ offer.name }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <form id="status_form" class="float-right" method="post">
+            {% csrf_token %}
+            {% if offer.is_suspended %}
+                <button type="submit"
+                        class="btn btn-success"
+                        name="unsuspend"
+                        data-loading-text="{% trans 'Reinstating...' %}">
+                    {% trans "Reinstate offer" %}
+                </button>
+            {% else %}
+                <button type="submit"
+                        class="btn btn-secondary"
+                        name="suspend"
+                        data-loading-text="{% trans 'Suspending...' %}">
+                    {% trans "Suspend offer" %}
+                </button>
+            {% endif %}
+            {% if not offer.vouchers.exists %}
+                <a class="btn btn-danger" href="{% url 'dashboard:offer-delete' pk=offer.pk %}">
+                    {% trans "Delete offer" %}
+                </a>
+            {% endif %}
+        </form>
+        <h1>{{ offer.name }}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <table class="table table-bordered">
+        <tr>
+            <td>
+                {% if offer.is_available %}
+                    <span class="badge badge-success">{% trans "Offer currently available" %}</span>
+                {% else %}
+                    <span class="badge badge-danger">
+                        {% trans "Offer not available due to restrictions!" %}
+                    </span>
+                {% endif %}
+            </td>
+            <td>
+                {% trans "Total cost:" %}
+                <strong>{{ offer.total_discount|currency }}</strong>
+            </td>
+            <td>
+                {% trans "Number of orders:" %}
+                <strong>{{ offer.num_orders }}</strong>
+            </td>
+            <td>
+                {% trans "Number of uses:" %}
+                <strong>{{ offer.num_applications }}</strong>
+            </td>
+        </tr>
+    </table>
+    <div class="table-header">
+        <div class="float-right" style="font-weight: normal">
+            {% trans "Date created:" %} {{ offer.date_created }}
+        </div>
+        <h2>{% trans "Offer details" %}</h2>
+    </div>
+    <table class="table table-striped table-bordered">
+        <tbody>
+            <tr>
+                <th>{% trans "Name" %}</th>
+                <td>{{ offer.name }}</td>
+                <td rowspan="3">
+                    <a id="edit_metadata"
+                       href="{% url 'dashboard:offer-metadata' pk=offer.pk %}"
+                       class="btn btn-secondary">
+                        {% trans "Edit" %}
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <th>{% trans "Description" %}</th>
+                <td>{{ offer.description|safe|default:"-" }}</td>
+            </tr>
+            <tr>
+                <th>{% trans "Type" %}</th>
+                <td>
+                    {{ offer.get_offer_type_display }}
+                </td>
+            </tr>
+            <tr>
+                <th>
+                    {% trans "Incentive" %}
+                </th>
+                <td>
+                    {{ offer.benefit.description|safe }}
+                </td>
+                <td>
+                    <a href="{% url 'dashboard:offer-benefit' pk=offer.pk %}" class="btn btn-secondary">
+                        {% trans "Edit" %}
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <th>
+                    {% trans "Condition" %}
+                </th>
+                <td>
+                    {{ offer.condition.description|safe }}
+                </td>
+                <td>
+                    <a href="{% url 'dashboard:offer-condition' pk=offer.pk %}" class="btn btn-secondary">
+                        {% trans "Edit" %}
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <th>
+                    {% trans "Restrictions" %}
+                </th>
+                <td>
+                    {% for restriction in offer.availability_restrictions %}
+                        {% if not restriction.is_satisfied %}
+                            <span class="badge badge-danger">{{ restriction.description }}</span>
+                            <br/>
+                        {% else %}
+                            {{ restriction.description }}
+                            <br/>
+                        {% endif %}
+                    {% endfor %}
+                </td>
+                <td>
+                    <a href="{% url 'dashboard:offer-restrictions' pk=offer.pk %}" class="btn btn-secondary">
+                        {% trans "Edit" %}
+                    </a>
+                </td>
+            </tr>
+            {% if offer.is_voucher_offer_type %}
+                <tr>
+                    <th>
+                        {% trans "Num of vouchers" %}
+                    </th>
+                    <td>
+                        {{ offer.vouchers.count }}
+                    </td>
+                </tr>
+            {% endif %}
+        </tbody>
+    </table>
+    {% if offer.is_voucher_offer_type %}
+        <div class="table-header">
+            <h2>
+                {% trans "Attached vouchers" %}
+            </h2>
+        </div>
+        <table class="table table-striped table-bordered table-hover">
+            {% if offer.vouchers.exists %}
+                <thead>
+                    <tr>
+                        <th>
+                            {% trans "Name" %}
+                        </th>
+                        <th>
+                            {% trans "Code" %}
+                        </th>
+                        <th>
+                            {% trans "Status" %}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for voucher in offer.vouchers.all %}
+                        <tr>
+                            <td>
+                                <a href="{% url 'dashboard:voucher-stats' voucher.id %}">
+                                    {{ voucher.name }}
+                                </a>
+                            </td>
+                            <td>
+                                <span class="badge badge-secondary">{{ voucher.code }}</span>
+                            </td>
+                            <td>
+                                {% if voucher.is_active %}
+                                    <span class="badge badge-success">{% trans "Active" %}</span>
+                                {% else %}
+                                    <span class="badge badge-secondary">{% trans "Inactive" %}</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            {% else %}
+                <tr>
+                    <td>
+                        {% trans "No vouchers are attached to this offer." %}
+                    </td>
+                </tr>
+            {% endif %}
+        </table>
+    {% endif %}
+    {% if order_discounts %}
+        <div class="table-header">
+            <a class="float-right btn" href=".?format=csv">
+                {% trans "Export to CSV" %}
+            </a>
+            <h2>
+                {% trans "Orders that used this offer" %}
+            </h2>
+        </div>
+        <table class="table table-bordered table-striped">
+            <thead>
+                <th>
+                    {% trans "Order number" %}
+                </th>
+                <th>
+                    {% trans "Order date" %}
+                </th>
+                <th>
+                    {% trans "Order total" %}
+                </th>
+                <th>
+                    {% trans "Cost" %}
+                </th>
+            </thead>
+            <tbody>
+                {% for discount in order_discounts %}
+                    {% with order=discount.order %}
+                    <tr>
+                        <td>
+                            <a href="{% url 'dashboard:order-detail' number=order.number %}">
+                                {{ order.number }}
+                            </a>
+                        </td>
+                        <td>
+                            {{ order.date_placed }}
+                        </td>
+                        <td>
+                            {{ order.total_incl_tax|currency }}
+                        </td>
+                        <td>
+                            {{ discount.amount|currency }}
+                        </td>
+                    </tr>
+                {% endwith %}
+            {% endfor %}
+        </tbody>
+    </table>
+    {% include 'oscar/dashboard/partials/pagination.html' %}{% endif %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/offers/offer_list.html b/tests/django_oscar/oscar/dashboard/offers/offer_list.html
new file mode 100644
index 0000000..3a2fad3
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/offers/offer_list.html
@@ -0,0 +1,226 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load sorting_tags %}
+{% load i18n %}
+{% load widget_tweaks %}
+{% block title %}
+    {% trans "Offers" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Offers" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <a href="{% url 'dashboard:offer-metadata' %}" class="btn btn-primary float-right">
+            <i class="fas fa-plus-circle"></i>
+            {% trans "Create new offer" %}
+        </a>
+        <h1>{% trans "Offers" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h3>
+            <i class="fas fa-search"></i>
+            {% trans "Search" %}
+        </h3>
+    </div>
+    <div class="card card-body bg-light">
+        <form method="get" class="form-inline">
+            {% for field in form %}
+                {% if field.name in form.basic_fields %}
+                    {% if field.is_hidden %}
+                        {{ field }}
+                    {% else %}
+                        <div class="form-group mr-2{% if field.errors %}error{% endif %}">
+                        {{ field.label_tag }}
+                        {% render_field field class+='form-control' %}
+                        {% for error in field.errors %}
+                            <ul class="error-block">
+                                <li>
+                                    {{ error }}
+                                </li>
+                            </ul>
+                        {% endfor %}
+                        {# No help text as it wraps #}
+                    </div>
+                {% endif %}
+            {% else %}
+                <input type="hidden" name="{{ field.name }}" value="{{ field.value|default_if_none:'' }}">
+            {% endif %}
+        {% endfor %}
+        <button type="submit" class="btn btn-primary mr-2" data-loading-text="{% trans 'Searching...' %}">
+            {% trans "Search" %}
+        </button>
+        <a data-toggle="modal" data-target="#SearchModal" href="#" class="mr-2">
+            {% trans "Advanced Search" %}
+        </a>
+        <a href="{% url 'dashboard:offer-list' %}" class="btn btn-secondary">
+            {% trans "Reset" %}
+        </a>
+    </form>
+    {# Search modal, if there are form errors the form is automatically openend #}
+    {% include "oscar/dashboard/partials/advanced_search_modal.html" with form=advanced_form style='horizontal' %}
+    {% if search_filters %}
+        <div class="search-filter-list">
+            <label>
+                Filters:
+            </label>
+            {% for filter in search_filters %}
+                <span class="badge badge-success">{{ filter }}</span>
+            {% endfor %}
+        </div>
+    {% endif %}
+</div>
+<form method="post" class="order_table">
+    {% csrf_token %}
+    <table class="table table-striped table-bordered table-hover">
+        <caption>
+        <i class="fas fa-gift"></i>
+        {% if search_filters %}
+            {% trans "Offer Search Results" %}
+        {% else %}
+            {% trans "All Offers" %}
+        {% endif %}
+        </caption>
+        {% if offers %}
+            <tr>
+                <th>{% anchor 'name' _('Offer name') %}</th>
+                <th>{% anchor 'offer_type' _('Offer type') %}</th>
+                {% if form.is_bound %}
+                    {% if form.is_voucher_offer_type or not form.cleaned_data.offer_type %}
+                        <th>{% trans "Num of vouchers" %}</th>
+                    {% endif %}
+                {% endif %}
+                <th>{% anchor 'start_datetime' _('Start date') %}</th>
+                <th>{% anchor 'end_datetime' _('End date') %}</th>
+                <th>{% trans "Priority" %}</th>
+                <th>{% trans "Incentive" %}</th>
+                <th>{% trans "Condition" %}</th>
+                <th>{% trans "Is available?" %}</th>
+                <th>
+                    {% trans "Restrictions" %}
+                </th>
+                <th>
+                    {% anchor 'num_applications' _('Uses') %}
+                </th>
+                <th>
+                    {% anchor 'total_discount' _('Cost') %}
+                </th>
+                <th></th>
+            </tr>
+            {% for offer in offers %}
+                <tr>
+                    <td>
+                        <a href="{% url 'dashboard:offer-detail' pk=offer.pk %}">
+                            {{ offer.name }}
+                        </a>
+                    </td>
+                    <td>
+                        {{ offer.offer_type }}
+                    </td>
+                    {% if form.is_bound %}
+                        {% if form.is_voucher_offer_type or not form.cleaned_data.offer_type %}
+                            <td>
+                                {{ offer.vouchers.count }}
+                            </td>
+                        {% endif %}
+                    {% endif %}
+                    <td>
+                        {{ offer.start_datetime|default:"-" }}
+                    </td>
+                    <td>
+                        {{ offer.end_datetime|default:"-" }}
+                    </td>
+                    <td>
+                        {{ offer.priority }}
+                    </td>
+                    <td>
+                        {{ offer.benefit.description|safe }}
+                    </td>
+                    <td>
+                        {{ offer.condition.description|safe }}
+                    </td>
+                    <td>
+                        {% if offer.is_available %}
+                            <span class="badge badge-success">{% trans "Yes" %}</span>
+                        {% else %}
+                            <span class="badge badge-danger">{% trans "No" %}</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% for restriction in offer.availability_restrictions %}
+                            {% if not restriction.is_satisfied %}
+                                <label class="badge badge-danger">
+                                    {{ restriction.description }}
+                                </label>
+                            {% else %}
+                                {{ restriction.description }}
+                                <br/>
+                            {% endif %}
+                        {% endfor %}
+                    </td>
+                    <td>
+                        {{ offer.num_applications }}
+                    </td>
+                    <td>
+                        {{ offer.total_discount|currency }}
+                    </td>
+                    <td>
+                        <div class="btn-toolbar">
+                            <div class="dropdown">
+                                <button class="btn btn-secondary dropdown-toggle"
+                                        type="button"
+                                        id="dropdownMenuButton"
+                                        data-toggle="dropdown"
+                                        aria-haspopup="true"
+                                        aria-expanded="false">
+                                    {% trans "Actions" %}
+                                </button>
+                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                    <a class="dropdown-item" href="{% url 'offer:detail' slug=offer.slug %}">
+                                        {% trans "Browse" %}
+                                    </a>
+                                    <a class="dropdown-item" href="{% url 'dashboard:offer-detail' pk=offer.pk %}">
+                                        {% trans "Stats" %}
+                                    </a>
+                                    <a class="dropdown-item" href="{% url 'dashboard:offer-metadata' pk=offer.pk %}">
+                                        {% trans "Edit" %}
+                                    </a>
+                                    {% if not offer.vouchers.exists %}
+                                        <a class="dropdown-item" href="{% url 'dashboard:offer-delete' pk=offer.pk %}">
+                                            {% trans "Delete" %}
+                                        </a>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        {% else %}
+            <tr>
+                <td>
+                    {% trans "No offers found." %}
+                </td>
+            </tr>
+        {% endif %}
+    </table>
+    {% include "oscar/dashboard/partials/pagination.html" %}
+</form>
+{% endblock dashboard_content %}
+{% block onbodyload %}
+{{ block.super }}
+{% if advanced_form.errors %}$('#SearchModal').modal('show');{% endif %}
+{% endblock onbodyload %}
diff --git a/tests/django_oscar/oscar/dashboard/offers/progress.html b/tests/django_oscar/oscar/dashboard/offers/progress.html
new file mode 100644
index 0000000..79d6504
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/offers/progress.html
@@ -0,0 +1,49 @@
+{% load i18n %}
+<div class="tab-nav sticky-top">
+    <div class="table-header">
+        <h3>{% trans "Steps" %}</h3>
+    </div>
+    <ul class="nav flex-column bs-docs-sidenav">
+        <li class="nav-item step1">
+            {% if step == 2 or step == 3 or step == 4 %}
+                <a href="{% if session_offer.pk %}{% url 'dashboard:offer-metadata' pk=session_offer.pk %}{% else %}{% url 'dashboard:offer-metadata' %}{% endif %}"
+                   class="nav-link visited">
+                {% trans "1. Name, description and type" %}
+            </a>
+        {% else %}
+            <a class="nav-link {% if step == 1 %}active{% else %}disabled text-reset{% endif %}">
+            {% trans "1. Name, description and type" %}
+        </a>
+    {% endif %}
+</li>
+<li class="nav-item step2">
+    {% if step == 3 or step == 4 %}
+        <a href="{% if session_offer.pk %}{% url 'dashboard:offer-benefit' pk=session_offer.pk %}{% else %}{% url 'dashboard:offer-benefit' %}{% endif %}"
+           class="nav-link visited">
+        {% trans "2. Incentive" %}
+    </a>
+{% else %}
+    <a class="nav-link {% if step == 2 %}active{% else %}disabled text-reset{% endif %}">
+    {% trans "2. Incentive" %}
+</a>
+{% endif %}
+</li>
+<li class="nav-item step3">
+{% if step == 4 %}
+<a href="{% if session_offer.pk %}{% url 'dashboard:offer-condition' pk=session_offer.pk %}{% else %}{% url 'dashboard:offer-condition' %}{% endif %}"
+   class="nav-link visited">
+{% trans "3. Condition" %}
+</a>
+{% else %}
+<a class="nav-link {% if step == 3 %}active{% else %}disabled text-reset{% endif %}">
+{% trans "3. Condition" %}
+</a>
+{% endif %}
+</li>
+<li class="nav-item step4">
+<a class="nav-link {% if step == 4 %}active{% else %}disabled text-reset{% endif %}">
+{% trans "4. Restrictions" %}
+</a>
+</li>
+</ul>
+</div>
diff --git a/tests/django_oscar/oscar/dashboard/offers/restrictions_form.html b/tests/django_oscar/oscar/dashboard/offers/restrictions_form.html
new file mode 100644
index 0000000..60daffe
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/offers/restrictions_form.html
@@ -0,0 +1,11 @@
+{% extends 'oscar/dashboard/offers/step_form.html' %}
+{% load i18n %}
+{% block summary %}
+    {% include 'oscar/dashboard/offers/summary.html' %}{% endblock %}
+    {% block progress %}
+        {% include 'oscar/dashboard/offers/progress.html' with step=4 %}{% endblock %}
+        {% block form_actions_buttons %}
+            <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Saving...' %}">
+                {% trans "Save this offer" %}
+            </button>
+        {% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/offers/step_form.html b/tests/django_oscar/oscar/dashboard/offers/step_form.html
new file mode 100644
index 0000000..885f634
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/offers/step_form.html
@@ -0,0 +1,105 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {% if offer.pk %}
+        {{ offer.name }}:
+    {% else %}
+        {% trans "Create new offer" %}:
+    {% endif %}
+    {{ title }} | {% trans "Offers" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:offer-list' %}">
+                    {% trans "Offers" %}
+                </a>
+            </li>
+            {% if offer.pk %}
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:offer-detail' pk=offer.pk %}">
+                        {{ offer.name }}
+                    </a>
+                </li>
+            {% else %}
+                <li class="breadcrumb-item">
+                    {% trans "Create new offer" %}
+                </li>
+            {% endif %}
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ title }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% if not offer.pk %}
+        {% trans "Create new offer" %}
+    {% else %}
+        {{ offer.name }}
+    {% endif %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="row">
+        <div class="col-md-3">
+            {% block progress %}
+                {% include 'oscar/dashboard/offers/progress.html' %}{% endblock %}
+            </div>
+            <div class="{% if session_offer %}col-md-6{% else %}col-md-9{% endif %}">
+            <form method="post" class="form-stacked wysiwyg fixed-actions">
+                <div class="table-header">
+                    <h3>{{ title }}</h3>
+                </div>
+                <div class="card card-body">
+                    {% csrf_token %}
+                    {% block form_fields %}
+                        {% include "oscar/dashboard/partials/form_fields.html" with form=form %}{% endblock %}
+                        {% block form_extradata %}{% endblock %}
+                    </div>
+                    {% block form_actions %}
+                        <div class="fixed-actions-group">
+                            <div class="form-actions">
+                                <div class="float-right">
+                                    {% block form_actions_buttons %}
+                                        <button class="btn btn-primary"
+                                                type="submit"
+                                                data-loading-text="{% trans 'Submitting...' %}">
+                                            {% block submittext %}
+                                                {% trans "Continue" %}
+                                            {% endblock %}
+                                        </button>
+                                        {% if offer %}
+                                            {# When editing offer, show saving button #}
+                                            <button class="btn btn-secondary"
+                                                    name="save"
+                                                    type="submit"
+                                                    data-loading-text="{% trans 'Saving...' %}">
+                                                {% trans "Save changes" %}
+                                            </button>
+                                        {% endif %}
+                                    {% endblock %}
+                                </div>
+                                <a class="btn btn-secondary" href="{% url 'dashboard:offer-list' %}">
+                                    {% trans "cancel" %}
+                                </a>
+                            </div>
+                        </div>
+                    {% endblock form_actions %}
+                </form>
+            </div>
+            {% if session_offer %}
+                <div class="col-md-3">
+                    {% block summary %}
+                        {% include 'oscar/dashboard/offers/summary.html' %}{% endblock %}
+                    </div>
+                {% endif %}
+            </div>
+        {% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/offers/summary.html b/tests/django_oscar/oscar/dashboard/offers/summary.html
new file mode 100644
index 0000000..6add8ab
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/offers/summary.html
@@ -0,0 +1,87 @@
+{% load i18n %}
+<div class="table-header">
+    <h3>{% trans "Offer summary" %}</h3>
+</div>
+<div>
+    {% if session_offer.name %}
+        <div class="card card-body">
+            <div class="d-flex">
+                <a href="{% if session_offer.pk %}{% url 'dashboard:offer-metadata' pk=session_offer.pk %}{% else %}{% url 'dashboard:offer-metadata' %}{% endif %}"
+                   class="btn btn-secondary ml-auto">
+                {% trans "Edit" %}
+            </a>
+        </div>
+        <p>
+            <strong>{% trans "Name" %}:</strong>
+            <br />
+            {{ session_offer.name }}
+        </p>
+        {% if session_offer.description %}
+            <p>
+                <strong>{% trans "Description" %}:</strong>
+                <br />
+                {{ session_offer.description|safe|striptags|truncatewords:8 }}
+            </p>
+        {% endif %}
+        <p>
+            <strong>{% trans "Type" %}:</strong>
+            <br />
+            {{ session_offer.offer_type }}
+        </p>
+    </div>
+{% endif %}
+{% if session_offer.benefit %}
+    <div class="card card-body">
+        <div class="d-flex">
+            <a href="{% if session_offer.pk %}{% url 'dashboard:offer-benefit' pk=session_offer.pk %}{% else %}{% url 'dashboard:offer-benefit' %}{% endif %}"
+               class="btn btn-secondary ml-auto">
+            {% trans "Edit" %}
+        </a>
+    </div>
+    <p>
+        <strong>{% trans "Incentive" %}:</strong>
+        <br />
+        {{ session_offer.benefit.description|safe }}
+    </p>
+</div>
+{% endif %}
+{% if session_offer.condition %}
+<div class="card card-body">
+    <div class="d-flex">
+        <a href="{% if session_offer.pk %}{% url 'dashboard:offer-condition' pk=session_offer.pk %}{% else %}{% url 'dashboard:offer-condition' %}{% endif %}"
+           class="btn btn-secondary ml-auto">
+        {% trans "Edit" %}
+    </a>
+</div>
+<p>
+    <strong>{% trans "Condition" %}:</strong>
+    <br />
+    {{ session_offer.condition.description|safe }}
+</p>
+</div>
+{% endif %}
+{% if session_offer.pk %}
+<div class="card card-body">
+<div class="d-flex">
+    <a href="{% if session_offer.pk %}{% url 'dashboard:offer-restrictions' pk=session_offer.pk %}{% else %}{% url 'dashboard:offer-restrictions' %}{% endif %}"
+       class="btn btn-secondary ml-auto">
+    {% trans "Edit" %}
+</a>
+</div>
+<p>
+<strong>{% trans "Restrictions" %}:</strong>
+</p>
+{% if offer.availability_restrictions %}
+<ul>
+    {% for restriction in offer.availability_restrictions %}
+        <li>
+            {{ restriction.description }}
+        </li>
+    {% endfor %}
+</ul>
+{% else %}
+-
+{% endif %}
+</div>
+{% endif %}
+</div>
diff --git a/tests/django_oscar/oscar/dashboard/orders/line_detail.html b/tests/django_oscar/oscar/dashboard/orders/line_detail.html
new file mode 100644
index 0000000..172378e
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/orders/line_detail.html
@@ -0,0 +1,272 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {% blocktrans with number=line.order.number id=line.id %}
+        Order {{ number }} - Line #{{ id }}
+    {% endblocktrans %}
+    | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:order-list' %}">
+                    {% trans "Orders" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:order-detail' number=line.order.number %}">
+                    #{{ line.order.number }}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% blocktrans with id=line.id %}
+                    Line #{{ id }}
+                {% endblocktrans %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% blocktrans with number=line.order.number id=line.id %}
+        Order #{{ number }} - Line #{{ id }}
+    {% endblocktrans %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="row">
+        <div class="col-md-4">
+            <div class="table-header">
+                <h3>{% trans "Product details" %}</h3>
+            </div>
+            <table class="table table-striped table-bordered">
+                <tr>
+                    <th>{% trans "Title" context "Product title" %}</th>
+                    <td>
+                        {% if line.product %}
+                            <a href="{{ line.product.get_absolute_url }}">
+                                {{ line.title }}
+                            </a>
+                        {% else %}
+                            {{ line.title }}
+                        {% endif %}
+                    </td>
+                </tr>
+                <tr>
+                    <th>{% trans "Product Type" %}</th>
+                    <td>{{ line.product.get_product_class }}</td>
+                </tr>
+                <tr>
+                    <th>{% trans "UPC" %}</th>
+                    <td>{{ line.upc|default:"-" }}</td>
+                </tr>
+                <tr>
+                    <th>{% trans "Quantity" %}</th>
+                    <td>{{ line.quantity }}</td>
+                </tr>
+                {% if line.attributes.exists %}
+                    <tr>
+                        <th colspan="2">{% trans "Product Options" %}</th>
+                    </tr>
+                    {% for attribute in line.attributes.all %}
+                        <tr>
+                            <th>{{ attribute.option }}</th>
+                            <td>{{ attribute.value }}</td>
+                        </tr>
+                    {% endfor %}
+                {% endif %}
+            </table>
+        </div>
+        <div class="col-md-4">
+            <div class="table-header">
+                <h3>
+                    {% trans "Partner details" %}
+                </h3>
+            </div>
+            <table class="table table-striped table-bordered">
+                <tr>
+                    <th>
+                        {% trans "Status" %}
+                    </th>
+                    <td>
+                        {{ line.status|default:"-" }}
+                    </td>
+                </tr>
+                <tr>
+                    <th>
+                        {% trans "Partner" %}
+                    </th>
+                    <td>
+                        {{ line.partner_name }}
+                    </td>
+                </tr>
+                <tr>
+                    <th>
+                        {% trans "Partner SKU" %}
+                    </th>
+                    <td>
+                        {{ line.partner_sku }}
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="col-md-4">
+            <div class="table-header">
+                <h3>
+                    {% trans "Shipping details" %}
+                </h3>
+            </div>
+            <table class="table table-striped table-bordered">
+                <tr>
+                    <th>
+                        {% trans "Partner reference number" %}
+                    </th>
+                    <td>
+                        {{ line.partner_line_reference|default:"-" }}
+                    </td>
+                </tr>
+                <tr>
+                    <th>
+                        {% trans "Partner notes" %}
+                    </th>
+                    <td>
+                        {{ line.partner_line_notes|default:"-" }}
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-4">
+            <div class="table-header">
+                <h3>
+                    {% trans "Shipping status" %}
+                </h3>
+            </div>
+            <table class="table table-striped table-bordered">
+                <thead>
+                    <tr>
+                        <th>
+                            {% trans "State" %}
+                        </th>
+                        <th>
+                            {% trans "Quantity" %}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for state in line.shipping_event_breakdown.values %}
+                        <tr>
+                            <td>
+                                {{ state.event_type.name }}
+                            </td>
+                            <td>
+                                {{ state.quantity }}
+                            </td>
+                        </tr>
+                        {% empty %}
+                        <tr>
+                            <td colspan="2">{% trans "No shipping events have occurred." %}</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        <div class="col-md-4">
+            <div class="table-header">
+                <h3>
+                    {% trans "Shipping events" %}
+                </h3>
+            </div>
+            <table class="table table-striped table-bordered">
+                <thead>
+                    <tr>
+                        <th>
+                            {% trans "Event" %}
+                        </th>
+                        <th>
+                            {% trans "Quantity" %}
+                        </th>
+                        <th>
+                            {% trans "Reference" %}
+                        </th>
+                        <th>
+                            {% trans "Date" %}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for event_qty in line.shipping_event_quantities.all %}
+                        <tr>
+                            {% with event=event_qty.event %}
+                            <td>
+                                {{ event.event_type.name }}
+                            </td>
+                            <td>
+                                {{ event_qty.quantity }}
+                            </td>
+                            <td>
+                                {{ event.notes }}
+                            </td>
+                            <td>
+                                {{ event.date_created }}
+                            </td>
+                        {% endwith %}
+                    </tr>
+                    {% empty %}
+                    <tr>
+                        <td colspan="4">{% trans "No shipping events have occurred." %}</td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    <div class="col-md-4">
+        <div class="table-header">
+            <h3>
+                {% trans "Payment events" %}
+            </h3>
+        </div>
+        <table class="table table-striped table-bordered">
+            <thead>
+                <tr>
+                    <th>
+                        {% trans "Event" %}
+                    </th>
+                    <th>
+                        {% trans "Quantity" %}
+                    </th>
+                    <th>
+                        {% trans "Date" %}
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for event_qty in line.payment_event_quantities.all %}
+                    <tr>
+                        {% with event=event_qty.event %}
+                        <td>
+                            {{ event.event_type.name }}
+                        </td>
+                        <td>
+                            {{ event_qty.quantity }}
+                        </td>
+                        <td>
+                            {{ event.date_created }}
+                        </td>
+                    {% endwith %}
+                </tr>
+                {% empty %}
+                <tr>
+                    <td colspan="3">{% trans "No payment events have occurred." %}</td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+</div>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/orders/order_detail.html b/tests/django_oscar/oscar/dashboard/orders/order_detail.html
new file mode 100644
index 0000000..57811f1
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/orders/order_detail.html
@@ -0,0 +1,1088 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% load currency_filters %}
+{% block body_class %}{{ block.super }} orders{% endblock %}
+{% block title %}
+    {% blocktrans with number=order.number %}
+        Order {{ number }}
+    {% endblocktrans %}
+    | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:order-list' %}">
+                    {% trans "Orders" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                #{{ order.number }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% blocktrans with number=order.number %}
+        Order #{{ number }}
+    {% endblocktrans %}
+{% endblock %}
+{% block dashboard_content %}
+    {% block customer_information %}
+        <table class="table table-bordered table-hover">
+            <caption>
+            <i class="fas fa-user"></i>
+            {% trans "Customer Information" %}
+            </caption>
+            {% if order.guest_email %}
+                <tr>
+                    <th>{% trans "Name" %}</th>
+                    <th>{% trans "Email address" %}</th>
+                </tr>
+                <tr>
+                    <td>{% trans "Customer checked out as a guest." %}</td>
+                    <td>{{ order.email }}</td>
+                </tr>
+            {% elif order.user %}
+                <tr>
+                    <th>{% trans "Name" %}</th>
+                    <th>{% trans "Email address" %}</th>
+                </tr>
+                <tr>
+                    <td>{{ order.user.get_full_name|default:"-" }}</td>
+                    <td>{{ order.user.email|default:"-" }}</td>
+                </tr>
+            {% else %}
+                <tr>
+                    <td>{% trans "Customer has deleted their account." %}</td>
+                </tr>
+            {% endif %}
+        </table>
+    {% endblock customer_information %}
+    {% block order_information %}
+        <table class="table table-striped table-bordered table-hover">
+            <caption>
+            <i class="fas fa-shopping-cart"></i>
+            {% trans "Order information" %}
+            </caption>
+            <tr>
+                <th>{% trans "Order Total" %}</th>
+                <th>
+                    {% trans "Date of purchase" %}
+                </th>
+                <th>
+                    {% trans "Time of purchase" %}
+                </th>
+                <th>
+                    {% trans "Status" %}
+                </th>
+            </tr>
+            <tr>
+                <td>
+                    {{ order.total_incl_tax|currency:order.currency }}
+                </td>
+                <td>
+                    {{ order.date_placed|date }}
+                </td>
+                <td>
+                    {{ order.date_placed|time }}
+                </td>
+                <td>
+                    {{ order.status|default:"N/A" }}
+                </td>
+            </tr>
+        </table>
+    {% endblock order_information %}
+    {% block additional_order_information %}{% endblock additional_order_information %}
+        <div class="sub-header">
+            <h2>
+                {% trans "Order Details" %}
+            </h2>
+        </div>
+        <div class="tabbable dashboard">
+            <ul class="nav nav-tabs mb-0" role="tablist">
+                {% block nav_tabs %}
+                    <li class="nav-item">
+                        <a class="nav-link {% if active_tab == 'lines' %}active{% endif %}"
+                           href="#lines"
+                           data-toggle="tab">
+                        {% trans "Order contents" %}
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link {% if active_tab == 'shipping' %}active{% endif %}"
+                       href="#shipping"
+                       data-toggle="tab">
+                    {% trans "Shipping" %}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link {% if active_tab == 'payment' %}active{% endif %}"
+                   href="#payment"
+                   data-toggle="tab">
+                {% trans "Payment" %}
+            </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link {% if active_tab == 'discounts' %}active{% endif %}"
+               href="#discounts"
+               data-toggle="tab">
+            {% trans "Discounts" %}
+        </a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link {% if active_tab == 'notes' %}active{% endif %}" href="#notes" data-toggle="tab">
+        {% trans "Notes" %}
+    </a>
+</li>
+{% endblock nav_tabs %}
+</ul>
+<div class="tab-content">
+<div class="tab-pane fade {% if active_tab == 'lines' %}show active{% endif %}" id="lines" role="tabpanel">
+<div class="table-header">
+<h3>
+    {% trans "Items ordered" %}
+</h3>
+</div>
+<form id="order_lines_form" method="post" class="form-inline">
+{% csrf_token %}
+{% block order_lines %}
+    <table class="table table-striped table-bordered table-hover">
+        <thead>
+            <tr>
+                <th></th>
+                <th></th>
+                <th>
+                    {% trans "Line ID" %}
+                </th>
+                <th>
+                    {% trans "Quantity" %}
+                </th>
+                <th>
+                    {% trans "Product" %}
+                </th>
+                <th>
+                    {% trans "UPC" %}
+                </th>
+                <th>
+                    {% trans "Status" %}
+                </th>
+                <th>
+                    {% trans "Supplier" %}
+                </th>
+                <th>
+                    {% trans "Supplier SKU" %}
+                </th>
+                <th>
+                    {% trans "Price excl tax (before discounts)" %}
+                </th>
+                <th>
+                    {% trans "Price inc tax (before discounts)" %}
+                </th>
+                <th>
+                    {% trans "Actions" %}
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for line in lines %}
+                <tr>
+                    <td>
+                        <input type="checkbox" name="selected_line" value="{{ line.id }}" />
+                    </td>
+                    <td>
+                        <input type="text"
+                               name="selected_line_qty_{{ line.id }}"
+                               value="{{ line.quantity }}"
+                               size="2"
+                               style="width:40px"/>
+                    </td>
+                    <td>
+                        <a href="{% url 'dashboard:order-line-detail' number=order.number line_id=line.id %}">
+                            #{{ line.id }}
+                        </a>
+                    </td>
+                    <td>
+                        {{ line.quantity }}
+                    </td>
+                    <td>
+                        {% if line.product %}
+                            <a href="{% url 'dashboard:catalogue-product' pk=line.product.id %}">
+                                {{ line.title }}
+                            </a>
+                        {% else %}
+                            {{ line.title }}
+                        {% endif %}
+                    </td>
+                    <td>
+                        {{ line.upc|default:"-" }}
+                    </td>
+                    <td>
+                        {{ line.status|default:"-" }}
+                    </td>
+                    <td>
+                        {% if line.partner %}
+                            <a href="{% url 'dashboard:partner-manage' pk=line.partner.id %}">
+                                {{ line.partner_name }}
+                            </a>
+                        {% else %}
+                            {{ line.partner_name }}
+                        {% endif %}
+                    </td>
+                    <td>
+                        {{ line.partner_sku }}
+                    </td>
+                    <td class="text-right">
+                        {{ line.line_price_before_discounts_excl_tax|currency:order.currency }}
+                    </td>
+                    <td class="text-right">
+                        {{ line.line_price_before_discounts_incl_tax|currency:order.currency }}
+                    </td>
+                    <td>
+                        <a href="{% url 'dashboard:order-line-detail' number=order.number line_id=line.id %}"
+                           class="btn btn-secondary">
+                            {% trans "View" %}
+                        </a>
+                    </td>
+                </tr>
+            {% endfor %}
+            <tr>
+                <td colspan="8"></td>
+                <th>
+                    {% trans "Discount" %}
+                </th>
+                <td class="text-right">
+                    {{ order.total_discount_excl_tax|currency:order.currency }}
+                </td>
+                <td class="text-right">
+                    {{ order.total_discount_incl_tax|currency:order.currency }}
+                </td>
+                <td></td>
+            </tr>
+            {% with discounts=order.basket_discounts %}
+            {% if discounts %}
+                <tr>
+                    <td colspan="8"></td>
+                    <th>
+                        {% trans "Basket total (excl. discounts)" %}
+                    </th>
+                    <td class="text-right">
+                        {{ order.basket_total_before_discounts_excl_tax|currency:order.currency }}
+                    </td>
+                    <td class="text-right">
+                        {{ order.basket_total_before_discounts_incl_tax|currency:order.currency }}
+                    </td>
+                    <td></td>
+                </tr>
+                {% for discount in discounts %}
+                    <tr>
+                        <td colspan="8"></td>
+                        <td>
+                            <span class="badge badge-success">{% trans "Discount" %}</span>
+                            {{ discount.offer_name }}
+                        </td>
+                        <td class="text-right"></td>
+                        <td class="text-right">- {{ discount.amount|currency:order.currency }}</td>
+                        <td></td>
+                    </tr>
+                {% endfor %}
+                <tr>
+                    <td colspan="8"></td>
+                    <th>
+                        {% trans "Basket total (inc. discounts)" %}
+                    </th>
+                    <th class="text-right">
+                        {{ order.basket_total_excl_tax|currency:order.currency }}
+                    </th>
+                    <th class="text-right">
+                        {{ order.basket_total_incl_tax|currency:order.currency }}
+                    </th>
+                    <td></td>
+                </tr>
+            {% else %}
+                <tr>
+                    <td colspan="8"></td>
+                    <th>
+                        {% trans "Basket total" %}
+                    </th>
+                    <th class="text-right">
+                        {{ order.basket_total_excl_tax|currency:order.currency }}
+                    </th>
+                    <th class="text-right">
+                        {{ order.basket_total_incl_tax|currency:order.currency }}
+                    </th>
+                    <td></td>
+                </tr>
+            {% endif %}
+        {% endwith %}
+        {% if order.has_shipping_discounts %}
+            <tr>
+                <td colspan="8"></td>
+                <td>
+                    {% trans "Shipping total (excl. discounts)" %}
+                </td>
+                <td class="text-right">
+                    {{ order.shipping_before_discounts_excl_tax|currency:order.currency }}
+                </td>
+                <td class="text-right">
+                    {{ order.shipping_before_discounts_incl_tax|currency:order.currency }}
+                </td>
+                <td></td>
+            </tr>
+            {% for discount in order.shipping_discounts %}
+                <tr>
+                    <td colspan="8"></td>
+                    <td>
+                        <span class="badge badge-success">
+                            {% trans "Discount" %}
+                        </span>
+                        {{ discount.offer_name }}
+                    </td>
+                    <td></td>
+                    <td class="text-right">
+                        - {{ discount.amount|currency:order.currency }}
+                    </td>
+                    <td></td>
+                </tr>
+            {% endfor %}
+            <tr>
+                <td colspan="8"></td>
+                <th>
+                    {% trans "Shipping total (inc. discounts)" %}
+                </th>
+                <th class="text-right">
+                    {{ order.shipping_excl_tax|currency:order.currency }}
+                </th>
+                <th class="text-right">
+                    {{ order.shipping_incl_tax|currency:order.currency }}
+                </th>
+                <td></td>
+            </tr>
+        {% else %}
+            <tr>
+                <td colspan="8"></td>
+                <th>
+                    {% trans "Shipping total" %}
+                </th>
+                <th class="text-right">
+                    {{ order.shipping_excl_tax|currency:order.currency }}
+                </th>
+                <th class="text-right">
+                    {{ order.shipping_incl_tax|currency:order.currency }}
+                </th>
+                <td></td>
+            </tr>
+        {% endif %}
+        {% with surcharges=order.surcharges.all %}
+        {% if surcharges %}
+            {% for charge in surcharges %}
+                <tr>
+                    <td colspan="8"></td>
+                    <th>
+                        {% blocktrans with name=charge.name %}Surcharge {{ name }}{% endblocktrans %}
+                        </th>
+                        <th class="text-right">
+                            {{ charge.excl_tax|currency:order.currency }}
+                        </th>
+                        <th class="text-right">
+                            {{ charge.incl_tax|currency:order.currency }}
+                        </th>
+                        <td></td>
+                    </tr>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <tr>
+            <td colspan="8"></td>
+            <th>
+                {% trans "Order total" %}
+            </th>
+            <th class="text-right">
+                {{ order.total_excl_tax|currency:order.currency }}
+            </th>
+            <th class="text-right">
+                {{ order.total_incl_tax|currency:order.currency }}
+            </th>
+            <td></td>
+        </tr>
+    </tbody>
+</table>
+{% endblock order_lines %}
+{% comment %}
+This is the important block within this template: you will almost certainly want to
+override this block to provide your own form widgets that suit your order processing
+flow. The default contents shows a range of widgets - more than is sensible really.
+{% endcomment %}
+{% block line_actions %}
+<div class="card card-body bg-light">
+<h3>
+    {% trans "With selected lines" %}:
+</h3>
+<div class="form-inline mb-sm-2">
+    <div class="form-group">
+        <div class="form-check">
+            <input id="line_status_check"
+                   class="form-check-input"
+                   type="radio"
+                   name="line_action"
+                   value="change_line_statuses"/>
+            <label for="line_status_check" class="form-check-label">
+                {% trans "Change line status to" %}
+            </label>
+        </div>
+    </div>
+    <div class="form-group">
+        <label class="sr-only" for="new_status_select">
+            {% trans "choose new status" %}
+        </label>
+        <select id="new_status_select" name="new_status">
+            <option value="">
+                -- {% trans "choose new status" %} --
+            </option>
+            {% for status in line_statuses %}
+                <option>
+                    {{ status }}
+                </option>
+            {% endfor %}
+        </select>
+    </div>
+</div>
+<div class="form-inline mb-sm-2">
+    <div class="form-group">
+        <div class="form-check">
+            <input id="shipping_event_check"
+                   class="form-check-input"
+                   type="radio"
+                   name="line_action"
+                   value="create_shipping_event"/>
+            <label for="shipping_event_check" class="form-check-label">
+                {% trans "Create shipping event" %}
+            </label>
+        </div>
+    </div>
+    <div class="form-group mr-1">
+        <label class="sr-only" for="shipping_event_type_select">
+            {% trans "choose event type" %}
+        </label>
+        <select id="shipping_event_type_select" name="shipping_event_type">
+            <option value="">
+                -- {% trans "choose event type" %} --
+            </option>
+            {% for event_type in shipping_event_types %}
+                <option value="{{ event_type.code }}">
+                    {{ event_type.name }}
+                </option>
+            {% endfor %}
+        </select>
+    </div>
+    <div class="form-group">
+        <label for="reference_input">
+            {% trans "with reference" %}
+        </label>
+        <input id="reference_input" type="text" name="reference" value="" />
+    </div>
+</div>
+<div class="form-inline mb-sm-2">
+    <div class="form-group">
+        <div class="form-check">
+            <input id="payment_event_check"
+                   class="form-check-input"
+                   type="radio"
+                   name="line_action"
+                   value="create_payment_event"/>
+            <label for="payment_event_check" class="form-check-label">
+                {% trans "Create payment event" %}
+            </label>
+        </div>
+    </div>
+    <div class="form-group mr-1">
+        <label class="sr-only" for="payment_event_type_select">
+            {% trans "choose event type" %}
+        </label>
+        <select id="payment_event_type_select" name="payment_event_type">
+            <option value="">
+                -- {% trans "choose event type" %} --
+            </option>
+            {% for event_type in payment_event_types %}
+                <option value="{{ event_type.code }}">
+                    {{ event_type.name }}
+                </option>
+            {% endfor %}
+        </select>
+    </div>
+    <div class="form-group">
+        <label for="amount_input">
+            {% trans "with amount" %}
+        </label>
+        <input id="amount_input" type="text" name="amount" value="" />
+    </div>
+</div>
+<div class="flex-nowrap">
+    <button type="submit" class="btn btn-primary">
+        {% trans "Go!" %}
+    </button>
+</div>
+</div>
+{% endblock line_actions %}
+</form>
+<form method="post" id="order_status_form">
+{% csrf_token %}
+{% block order_actions %}
+<div class="card card-body bg-light">
+<h3>
+    <i class="fas fa-exclamation-triangle"></i>
+    {% trans "Change order status" %}:
+</h3>
+{% if order_status_form.has_choices %}
+    {% include "oscar/dashboard/partials/form_fields.html" with form=order_status_form %}
+    <input type="hidden" value="change_order_status" name="order_action" />
+    <div class="flex-nowrap">
+        <button type="submit" class="btn btn-primary">
+            {% trans "Change status" %}
+        </button>
+    </div>
+{% else %}
+    {% trans "This order can't have its status changed." %}
+{% endif %}
+</div>
+{% endblock %}
+</form>
+{% block order_status_changes %}
+<div class="table-header">
+<h3>
+{% trans "Status Changes" %}
+</h3>
+</div>
+{% with status_changes=order.status_changes.all %}
+<table class="table table-striped table-bordered table-hover">
+{% if status_changes %}
+<thead>
+    <tr>
+        <th>
+            {% trans "From" %}
+        </th>
+        <th>
+            {% trans "To" %}
+        </th>
+        <th>
+            {% trans "Date" %}
+        </th>
+    </tr>
+</thead>
+<tbody>
+    {% for status_change in status_changes %}
+        <tr>
+            <td>
+                {{ status_change.old_status }}
+            </td>
+            <td>
+                {{ status_change.new_status }}
+            </td>
+            <td>
+                {{ status_change.date_created }}
+            </td>
+        </tr>
+    {% endfor %}
+</tbody>
+{% else %}
+<tbody>
+    <tr>
+        <td>
+            {% trans "No status changes." %}
+        </td>
+    </tr>
+</tbody>
+{% endif %}
+</table>
+{% endwith %}
+{% endblock %}
+{% block shipping_events %}
+<div class="table-header">
+<h3>
+{% trans "Shipping Events" %}
+</h3>
+</div>
+{% with events=order.shipping_events.all %}
+<table class="table table-striped table-bordered table-hover">
+{% if events %}
+<thead>
+<tr>
+    <th>
+        {% trans "Date" %}
+    </th>
+    <th>
+        {% trans "Event" %}
+    </th>
+    <th>
+        {% trans "Lines" %}
+    </th>
+    <th>
+        {% trans "Reference" %}
+    </th>
+</tr>
+</thead>
+<tbody>
+{% for event in events %}
+    {% with line_qtys=event.line_quantities.all %}
+    <tr>
+        <td>
+            {{ event.date_created }}
+        </td>
+        <td>
+            {{ event.event_type.name }}
+        </td>
+        <td>
+            {% for line_qty in event.line_quantities.all %}
+                <a href="{% url 'dashboard:order-line-detail' number=order.number line_id=line_qty.line.id %}">
+                    {% blocktrans with title=line_qty.line.title event_qty=line_qty.quantity total_qty=line_qty.line.quantity %}
+                        {{ title }} (quantity {{ event_qty }}/{{ total_qty }})
+                    {% endblocktrans %}
+                </a>
+            {% endfor %}
+        </td>
+        <td>
+            {{ event.notes|default:"-" }}
+        </td>
+    </tr>
+{% endwith %}
+{% endfor %}
+</tbody>
+{% else %}
+<tbody>
+<tr>
+<td>
+    {% trans "No shipping events." %}
+</td>
+</tr>
+</tbody>
+{% endif %}
+</table>
+{% endwith %}
+{% endblock %}
+{% block payment_events %}
+<div class="table-header">
+<h3 >{% trans "Payment Events" %}
+</h3>
+</div>
+{% with events=order.payment_events.all %}
+<table class="table table-striped table-bordered table-hover">
+{% if events %}
+<thead>
+<tr>
+<th>
+{% trans "Date" %}
+</th>
+<th>
+{% trans "Event" %}
+</th>
+<th>
+{% trans "Amount" %}
+</th>
+<th>
+{% trans "Lines" %}
+</th>
+<th>
+{% trans "Reference" %}
+</th>
+</tr>
+</thead>
+<tbody>
+{% for event in events %}
+{% with line_qtys=event.line_quantities.all %}
+<tr>
+<td >{{ event.date_created }}
+</td>
+<td >{{ event.event_type.name }}
+</td>
+<td >{{ event.amount|currency:order.currency }}
+</td>
+<td>
+    {% for line_qty in event.line_quantities.all %}
+        {% trans "Product:" %} {{ line_qty.line.title }} - {% trans "quantity" %} {{ line_qty.quantity }}
+        </br>
+    {% endfor %}
+</td>
+<td >{{ event.reference|default:"-" }}
+</td>
+</tr>
+{% endwith %}
+{% endfor %}
+</tbody>
+{% else %}
+<tbody>
+<tr>
+<td>
+{% trans "No payment events." %}
+</td>
+</tr>
+</tbody>
+{% endif %}
+</table>
+{% endwith %}
+{% endblock %}
+</div>
+<div class="tab-pane fade {% if active_tab == 'shipping' %}show active{% endif %}" id="shipping" role="tabpanel">
+{% block tab_shipping %}
+<div class="table-header">
+<h3>
+{% trans "Shipping" %}
+</h3>
+</div>
+<table class="table table-striped table-bordered table-hover">
+<tbody>
+<tr>
+<th>
+{% trans "Method name" %}
+</th>
+<td>
+{{ order.shipping_method }}
+</td>
+</tr>
+<tr>
+<th>
+{% trans "Method code" %}
+</th>
+<td>
+{{ order.shipping_code|upper }}
+</td>
+</tr>
+<tr>
+<th>
+{% trans "Charge (incl tax)" %}
+</th>
+<td>
+{{ order.shipping_incl_tax|currency:order.currency }}
+</td>
+</tr>
+<tr>
+<th>
+{% trans "Charge (excl tax)" %}
+</th>
+<td>
+{{ order.shipping_excl_tax|currency:order.currency }}
+</td>
+</tr>
+<tr>
+<th>
+{% trans "Address" %}
+</th>
+<td>
+{% for field in order.shipping_address.active_address_fields %}
+{{ field }}
+<br/>
+{% endfor %}
+<a class="btn btn-secondary" href="{% url 'dashboard:order-shipping-address' order.number %}">
+{% trans "Update" %}
+</a>
+</td>
+</tr>
+<tr>
+<th>
+{% trans "Phone" %}
+</th>
+<td>
+{{ order.shipping_address.phone_number|default:"-" }}
+</td>
+</tr>
+<tr>
+<th>
+{% trans "Instructions" %}
+</th>
+<td>
+{{ order.shipping_address.notes|default:"-"|linebreaks }}
+</td>
+</tr>
+</tbody>
+</table>
+{% endblock %}
+</div>
+<div class="tab-pane fade {% if active_tab == 'payment' %}show active{% endif %}" id="payment" role="tabpanel">
+{% block tab_payment %}
+{% if order.billing_address %}
+<div class="sub-header">
+<h3 >{% trans "Billing address" %}
+</h3>
+</div>
+<p>
+{% for field in order.billing_address.active_address_fields %}
+{{ field }}
+<br/>
+{% endfor %}
+</p>
+{% endif %}
+{% with sources=order.sources.all %}
+<div class="table-header">
+<h3 >{% trans "Payment sources" %}
+</h3>
+</div>
+{% if sources %}
+<table class="table table-striped table-bordered table-hover">
+<thead>
+<tr>
+<th>
+{% trans "Source" %}
+</th>
+<th>
+{% trans "Allocation" %}
+</th>
+<th>
+{% trans "Amount debited" %}
+</th>
+<th>
+{% trans "Amount refunded" %}
+</th>
+<th>
+{% trans "Reference" %}
+</th>
+</tr>
+</thead>
+<tbody>
+{% for source in sources %}
+<tr>
+<td>
+{{ source.source_type }}
+</td>
+<td>
+{{ source.amount_allocated|currency:order.currency }}
+</td>
+<td>
+{{ source.amount_debited|currency:order.currency }}
+</td>
+<td>
+{{ source.amount_refunded|currency:order.currency }}
+</td>
+<td>
+{{ source.reference|default:"-" }}
+</td>
+</tr>
+{% endfor %}
+</tbody>
+</table>
+{% else %}
+<table class="table table-striped table-bordered table-hover">
+<tr>
+<td>
+{% trans "No payment sources found for this order." %}
+</td>
+</tr>
+</table>
+{% endif %}
+{% endwith %}
+{% block payment_transactions %}
+{% if payment_transactions %}
+<div class="table-header">
+<h3>
+{% trans "Transactions" %}
+</h3>
+</div>
+<table class="table table-striped table-bordered table-hover">
+<thead>
+<tr>
+<th>
+{% trans "Source" %}
+</th>
+<th>
+{% trans "Amount" %}
+</th>
+<th>
+{% trans "Reference" %}
+</th>
+<th>
+{% trans "Status" %}
+</th>
+<th>
+{% trans "Date" %}
+</th>
+</tr>
+</thead>
+<tbody>
+{% for txn in payment_transactions %}
+<tr>
+<td>
+{{ txn.source.source_type }}
+</td>
+<td>
+{{ txn.amount|currency:order.currency }}
+</td>
+<td>
+{{ txn.reference|default:"-" }}
+</td>
+<td>
+{{ txn.status|default:"-" }}
+</td>
+<td>
+{{ txn.date_created }}
+</td>
+</tr>
+{% endfor %}
+</tbody>
+</table>
+{% endif %}
+{% endblock %}
+{% endblock %}
+</div>
+<div class="tab-pane fade {% if active_tab == 'discounts' %}show active{% endif %}" id="discounts" role="tabpanel">
+{% block tab_discounts %}
+{% with discounts=order.discounts.all %}
+<div class="table-header">
+<h3>
+{% trans "Discounts" %}
+</h3>
+</div>
+{% if discounts %}
+<table class="table table-striped table-bordered table-hover">
+<thead>
+<tr>
+<th>
+{% trans "Type" %}
+</th>
+<th>
+{% trans "Voucher" %}
+</th>
+<th>
+{% trans "Offer name" %}
+</th>
+<th>
+{% trans "Frequency" %}
+</th>
+<th>
+{% trans "Message" %}
+</th>
+<th>
+{% trans "Amount" %}
+</th>
+</tr>
+</thead>
+<tbody>
+{% for discount in discounts %}
+<tr>
+<td>
+{{ discount.get_category_display }}
+</td>
+<td>
+{{ discount.voucher.code|default:"-" }}
+</td>
+<td>
+{% if discount.offer %}
+<a href="{% url 'dashboard:offer-detail' pk=discount.offer.id %}">
+{{ discount.offer.name }}
+</a>
+{% else %}
+{{ discount.offer_name }}
+{% endif %}
+</td>
+<td>
+{{ discount.frequency }}
+</td>
+<td>
+{{ discount.message|default:"-" }}
+</td>
+<td>
+{{ discount.amount|currency:order.currency }}
+</td>
+</tr>
+{% endfor %}
+</tbody>
+</table>
+{% else %}
+<table class="table table-striped table-bordered table-hover">
+<tr>
+<td>
+{% trans "No discounts were applied to this order." %}
+</td>
+</tr>
+</table>
+{% endif %}
+{% endwith %}
+{% endblock %}
+</div>
+<div class="tab-pane fade {% if active_tab == 'notes' %}show active{% endif %}" id="notes" role="tabpanel">
+{% block tab_notes %}
+<div class="table-header">
+<h3>
+{% trans "Notes" %}
+</h3>
+</div>
+{% with notes=order.notes.all %}
+<table class="table table-striped table-bordered table-hover">
+{% if notes %}
+<tr>
+<th>
+{% trans "Date" %}
+</th>
+<th>
+{% trans "User" %}
+</th>
+<th>
+{% trans "Type" %}
+</th>
+<th>
+{% trans "Message" %}
+</th>
+<th>
+{% trans "Admin" %}
+</th>
+</tr>
+{% for note in notes %}
+<tr>
+<td>
+{{ note.date_created }}
+</td>
+<td>
+{{ note.user|default:"-" }}
+</td>
+<td>
+{{ note.note_type|default:"-" }}
+</td>
+<td>
+{{ note.message|linebreaks }}
+</td>
+<td>
+{% if note.is_editable %}
+<a href="{% url 'dashboard:order-detail-note' number=order.number note_id=note.id %}#notes" class="btn btn-info">
+{% trans "Edit" %}
+</a>
+<form method="post" class="float-left m-0">
+{% csrf_token %}
+<input type="hidden" name="order_action" value="delete_note" />
+<input type="hidden" name="note_id" value="{{ note.id }}" />
+<input type="submit" value="{% trans "Delete" %}" class="btn btn-danger" />
+</form>
+{% endif %}
+</td>
+</tr>
+{% endfor %}
+{% else %}
+<tr>
+<td>
+{% trans "No notes available." %}
+</td>
+</tr>
+{% endif %}
+</table>
+{% endwith %}
+<form id="order_note_form" action=".?note={{ note_id }}" method="post" class="form-stacked">
+{% csrf_token %}
+<input type="hidden" value="save_note" name="order_action" />
+{% include "oscar/dashboard/partials/form_fields.html" with form=note_form %}
+<div class="form-actions">
+<input type="submit" value="{% trans "Save note" %}" class="btn btn-primary" />
+{% trans "Notes are only editable for 5 minutes after being saved." %}
+</div>
+</form>
+{% endblock %}
+</div>
+{% block extra_tabs %}{% endblock %}
+</div>
+</div>
+{% endblock dashboard_content %}
+{% block onbodyload %}
+{{ block.super }}
+oscar.dashboard.orders.initTabs();
+oscar.dashboard.orders.initTable();
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/orders/order_list.html b/tests/django_oscar/oscar/dashboard/orders/order_list.html
new file mode 100644
index 0000000..42d6337
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/orders/order_list.html
@@ -0,0 +1,231 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load sorting_tags %}
+{% load i18n %}
+{% load widget_tweaks %}
+{% block body_class %}{{ block.super }} orders{% endblock %}
+{% block title %}
+    {% trans "Orders" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Orders" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <h1>{% trans "Orders" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h3>
+            <i class="fas fa-search"></i>
+            {% trans "Search" %}
+        </h3>
+    </div>
+    <div class="card card-body bg-light">
+        <form method="get" class="form-inline" id="search_form">
+            {% for field in form %}
+                {% if "order" in field.id_for_label %}
+                    {% if field.is_hidden %}
+                        {% render_field field class+='form-control' %}
+                    {% else %}
+                        <div class="form-group mr-2">
+                            {{ field.label_tag }}
+                            {% render_field field class+='form-control' %}
+                            {% for error in field.errors %}
+                                <ul class="error-block">
+                                    <li>
+                                        {{ error }}
+                                    </li>
+                                </ul>
+                            {% endfor %}
+                        </div>
+                    {% endif %}
+                {% endif %}
+            {% endfor %}
+            <input type="submit" value="{% trans "Search" %}" class="btn btn-primary mr-2" />
+            <a data-toggle="modal" data-target="#SearchModal" href="#">
+                {% trans "Advanced Search" %}
+            </a>
+        </form>
+        {# Search modal, if there are form errors the form is automatically openend #}
+        {% include "oscar/dashboard/partials/advanced_search_modal.html" with form=form style='horizontal' %}
+        {% if search_filters %}
+            <div class="search-filter-list">
+                <label>
+                    Filters:
+                </label>
+                {% for filter in search_filters %}
+                    <span class="badge badge-success">{{ filter }}</span>
+                {% endfor %}
+            </div>
+        {% endif %}
+    </div>
+    {% if orders %}
+        <form method="post" class="order_table" id="orders_form">
+            {% csrf_token %}
+            {% block order_list %}
+                <table class="table table-striped table-bordered table-hover">
+                    <caption>
+                    <h3 class="float-left">
+                        <i class="fas fa-shopping-cart"></i>
+                        {% if search_filters %}
+                            {% trans "Order Search Results" %}
+                        {% else %}
+                            {% trans "All Orders" %}
+                        {% endif %}
+                    </h3>
+                    <div class="float-right">
+                        <div class="form-inline">
+                            <label>
+                                {% trans "Download selected orders as a CSV" %}
+                            </label>
+                            <button type="submit"
+                                    class="btn btn-primary"
+                                    name="action"
+                                    value="download_selected_orders"
+                                    data-loading-text="{% trans 'Submitting...' %}">
+                                {% trans "Download" %}
+                            </button>
+                        </div>
+                    </div>
+                    </caption>
+                    <thead>
+                        <tr>
+                            <th></th>
+                            <th>{% anchor 'number' _("Order number") %}</th>
+                            <th>{% anchor 'total_incl_tax' _("Total inc tax") %}</th>
+                            <th>{% trans "Number of items" %}</th>
+                            <th>{% trans "Status" %}</th>
+                            <th>{% trans "Customer" %}</th>
+                            <th>{% trans "Shipping address" %}</th>
+                            <th>{% trans "Billing address" %}</th>
+                            <th>{% trans "Date of purchase" %}</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for order in orders %}
+                            <tr>
+                                <td>
+                                    <input type="checkbox"
+                                           name="selected_order"
+                                           class="selected_order"
+                                           value="{{ order.id }}"/>
+                                </td>
+                                <td>
+                                    <a href="{% url 'dashboard:order-detail' number=order.number %}">
+                                        {{ order.number }}
+                                    </a>
+                                </td>
+                                <td>
+                                    {{ order.total_incl_tax|currency:order.currency }}
+                                </td>
+                                <td>
+                                    {{ order.num_items }}
+                                </td>
+                                <td>
+                                    {{ order.status|default:"-" }}
+                                </td>
+                                <td>
+                                    {% if order.guest_email %}
+                                        {{ order.guest_email }}
+                                    {% elif order.user %}
+                                        <a href="{% url 'dashboard:user-detail' pk=order.user.id %}">
+                                            {{ order.user.get_full_name|default:"-" }}
+                                        </a>
+                                    {% else %}
+                                        &lt;{% trans "Deleted" %}&gt;
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    {{ order.shipping_address|default:"-" }}
+                                </td>
+                                <td>
+                                    {{ order.billing_address|default:"-" }}
+                                </td>
+                                <td>
+                                    {{ order.date_placed }}
+                                </td>
+                                <td>
+                                    <a class="btn btn-secondary"
+                                       href="{% url 'dashboard:order-detail' number=order.number %}">
+                                        {% trans "View" %}
+                                    </a>
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            {% endblock order_list %}
+            {% block order_actions %}
+                <div class="card card-body bg-light">
+                    <h3>
+                        <i class="fas fa-exclamation-circle"></i>
+                        {% trans "Change order status" %}:
+                    </h3>
+                    {% if order_statuses %}
+                        <div class="form-group">
+                            <div class="controls">
+                                <select name="new_status">
+                                    <option value="">
+                                        -- {% trans "choose new status" %} --
+                                    </option>
+                                    {% for status in order_statuses %}
+                                        <option>
+                                            {{ status }}
+                                        </option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                        <div class="flex-nowrap">
+                            <button type="submit"
+                                    name="action"
+                                    value="change_order_statuses"
+                                    class="btn btn-primary"
+                                    data-loading-text="{% trans 'Changing...' %}">
+                                {% trans "Change status" %}
+                            </button>
+                        </div>
+                    {% else %}
+                        {% trans "This order can't have its status changed." %}
+                    {% endif %}
+                </div>
+            {% endblock %}
+            {% include "oscar/dashboard/partials/pagination.html" %}
+        </form>
+    {% else %}
+        <table class="table table-striped table-bordered">
+            <caption>
+            <i class="fas fa-shopping-cart"></i>
+            {% if search_filters %}
+                {% trans "Order Search Results" %}
+            {% else %}
+                {% trans "All Orders" %}
+            {% endif %}
+            </caption>
+            <tr>
+                <td>
+                    {% trans "No orders found." %}
+                </td>
+            </tr>
+        </table>
+    {% endif %}
+{% endblock dashboard_content %}
+{% block onbodyload %}
+    {{ block.super }}
+    oscar.dashboard.orders.initTable();
+    {% if form.errors %}$('#SearchModal').modal('show');{% endif %}
+{% endblock onbodyload %}
diff --git a/tests/django_oscar/oscar/dashboard/orders/shippingaddress_form.html b/tests/django_oscar/oscar/dashboard/orders/shippingaddress_form.html
new file mode 100644
index 0000000..67c708d
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/orders/shippingaddress_form.html
@@ -0,0 +1,49 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {% trans "Shipping address" %} | {% trans "Order" %} {{ order.number }} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:order-list' %}">
+                    {% trans "Orders" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:order-detail' number=order.number %}">
+                    {{ order.number }}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Edit shipping address" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% blocktrans %}
+        Edit shipping address for order {{ order.number }}
+    {% endblocktrans %}
+{% endblock %}
+{% block content %}
+    <form method="post" class="card card-body">
+        {% csrf_token %}
+        {% include "oscar/dashboard/partials/form_fields.html" with form=form style='horizontal' %}
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Updating...' %}">
+                {% trans "Update address" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:order-detail' number=order.number %}">
+                {% trans "cancel" %}
+            </a>
+        </div>
+    </form>
+{% endblock content %}
diff --git a/tests/django_oscar/oscar/dashboard/orders/statistics.html b/tests/django_oscar/oscar/dashboard/orders/statistics.html
new file mode 100644
index 0000000..0f38781
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/orders/statistics.html
@@ -0,0 +1,87 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% load django_tables2 %}
+{% block body_class %}{{ block.super }} orders{% endblock %}
+{% block title %}
+    {% trans "Order statistics" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:order-list' %}">
+                    {% trans "Orders" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Statistics" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h3>
+            <i class="fas fa-filter"></i>
+            {% trans "Filter" %}
+        </h3>
+    </div>
+    <div class="card card-body bg-light">
+        <form method="get" action="{% url 'dashboard:order-stats' %}" class="form-inline">
+            {% include "oscar/dashboard/partials/form_fields_inline.html" with form=form %}
+            <button type="submit" class="btn btn-primary mr-2" data-loading-text="{% trans 'Filtering...' %}">
+                {% trans "Filter result" %}
+            </button>
+            <a href="{% url 'dashboard:order-stats' %}" class="btn btn-secondary">
+                {% trans "Reset" %}
+            </a>
+        </form>
+    </div>
+    <table class="table table-striped table-bordered table-hover">
+        <caption>
+        <i class="fas fa-shopping-cart"></i>
+        {% trans "Summary" %}
+        </caption>
+        <tr>
+            <th>{% trans "Total orders" %}</th>
+            <td>{{ total_orders }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "Total lines" %}</th>
+            <td>{{ total_lines }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "Total revenue" %}</th>
+            <td>{{ total_revenue|currency }}</td>
+        </tr>
+    </table>
+    {% if order_status_breakdown %}
+        <table class="table table-striped table-bordered table-hover">
+            <caption>
+            <i class="fas fa-shopping-cart"></i>
+            {% trans "Order status breakdown" %}
+            </caption>
+            <tr>
+                <th>{% trans "Status" %}</th>
+                <th>{% trans "Frequency" %}</th>
+            </tr>
+            {% for dict in order_status_breakdown %}
+                <tr>
+                    <td>
+                        <a href="{% url 'dashboard:order-list' %}{% querystring 'status'=dict.status %}">
+                            {{ dict.status }}
+                        </a>
+                    </td>
+                    <td>{{ dict.freq }}</td>
+                </tr>
+            {% endfor %}
+        </table>
+    {% endif %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/pages/delete.html b/tests/django_oscar/oscar/dashboard/pages/delete.html
new file mode 100644
index 0000000..08d2f6b
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/pages/delete.html
@@ -0,0 +1,61 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {% blocktrans with title=object.title %}
+        Delete page '{{ title }}'?
+    {% endblocktrans %}
+    | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:page-list' %}">
+                    {% trans "Pages" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% blocktrans with title=object.title %}
+                    Delete page '{{ title }}'?
+                {% endblocktrans %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% blocktrans with title=object.title %}
+        Delete page '{{ title }}'?
+    {% endblocktrans %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2>{% trans "Delete page" %}</h2>
+    </div>
+    <form method="post" class="card card-body">
+        {% csrf_token %}
+        {{ form }}
+        <p>
+            {% blocktrans with title=object.title %}
+                Delete page
+                <strong>{{ title }}</strong>
+                - are you sure?
+            {% endblocktrans %}
+        </p>
+        <div class="form-actions">
+            <button type="submit" class="btn btn-danger" data-loading-text="{% trans 'Deleting...' %}">
+                {% trans "Delete" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:page-list' %}">
+                {% trans "cancel" %}
+            </a>
+            .
+        </div>
+    </form>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/pages/index.html b/tests/django_oscar/oscar/dashboard/pages/index.html
new file mode 100644
index 0000000..6abccc4
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/pages/index.html
@@ -0,0 +1,122 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load dashboard_tags %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} pages{% endblock %}
+{% block title %}
+    {% trans "Pages" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Pages" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <a href="{% url 'dashboard:page-create' %}" class="btn btn-primary float-right">
+            <i class="fas fa-plus-circle"></i>
+            {% trans "Create new page" %}
+        </a>
+        <h1>{% trans "Pages" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h3>
+            <i class="fas fa-search"></i>
+            {% trans "Search" %}
+        </h3>
+    </div>
+    <div class="card card-body">
+        <form method="get" class="form-inline">
+            {% include "oscar/dashboard/partials/form_fields_inline.html" with form=form %}
+            <button type="submit" class="btn btn-primary mr-2" data-loading-text="{% trans 'Searching...' %}">
+                {% trans "Search" %}
+            </button>
+            <a href="{% url 'dashboard:page-list' %}" class="btn btn-secondary">
+                {% trans "Reset" %}
+            </a>
+        </form>
+    </div>
+    <div class="table-header">
+        <h2>
+            <i class="fas fa-file"></i>
+            {{ queryset_description }}
+        </h2>
+    </div>
+    {% if flatpage_list %}
+        <form method="post">
+            {% csrf_token %}
+            <table class="table table-striped table-bordered table-hover">
+                <thead>
+                    <tr>
+                        <th>{% trans "Title" context "Page title" %}</th>
+                        <th>{% trans "URL" %}</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for page in flatpage_list %}
+                        <tr>
+                            <td>
+                                <a href="{% url 'dashboard:page-update' pk=page.id %}">
+                                    {{ page.title }}
+                                </a>
+                            </td>
+                            <td>
+                                <a title="{% trans "View on site" %}" href="{{ page.get_absolute_url }}">
+                                    {{ page.url }}
+                                </a>
+                            </td>
+                            <td>
+                                <div class="btn-toolbar">
+                                    <div class="dropdown">
+                                        <button class="btn btn-secondary dropdown-toggle"
+                                                type="button"
+                                                id="dropdownMenuButton"
+                                                data-toggle="dropdown"
+                                                aria-haspopup="true"
+                                                aria-expanded="false">
+                                            {% trans "Actions" %}
+                                        </button>
+                                        <div class="dropdown-menu dropdown-menu-right"
+                                             aria-labelledby="dropdownMenuButton">
+                                            <a class="dropdown-item" href="{{ page.get_absolute_url }}">
+                                                {% trans "View" %}
+                                            </a>
+                                            <a class="dropdown-item"
+                                               id="edit_page_{{ page.id }}"
+                                               href="{% url 'dashboard:page-update' pk=page.id %}">
+                                                {% trans "Edit" %}
+                                            </a>
+                                            <a class="dropdown-item"
+                                               id="delete_page_{{ page.id }}"
+                                               href="{% url 'dashboard:page-delete' pk=page.id %}">
+                                                {% trans "Delete" %}
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+            {% include "oscar/dashboard/partials/pagination.html" %}
+        </form>
+    {% else %}
+        <table class="table table-striped table-bordered table-hover">
+            <tr>
+                <td>{% trans "No pages found." %}</td>
+            </tr>
+        </table>
+    {% endif %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/pages/messages/saved.html b/tests/django_oscar/oscar/dashboard/pages/messages/saved.html
new file mode 100644
index 0000000..ffa4516
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/pages/messages/saved.html
@@ -0,0 +1,16 @@
+{% load i18n %}
+<p>
+    {% blocktrans with title=page.title %}
+        Page
+        <strong>{{ title }}</strong>
+        saved!
+    {% endblocktrans %}
+</p>
+<p>
+    <a href="{{ page.url }}" class="btn btn-success">
+        {% trans "View on site" %}
+    </a>
+    <a href="{% url 'dashboard:page-update' pk=page.pk %}" class="btn btn-success">
+        {% trans "Edit again" %}
+    </a>
+</p>
diff --git a/tests/django_oscar/oscar/dashboard/pages/update.html b/tests/django_oscar/oscar/dashboard/pages/update.html
new file mode 100644
index 0000000..a1de567
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/pages/update.html
@@ -0,0 +1,43 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page pages{% endblock %}
+{% block title %}{{ title }} | {{ block.super }}{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:page-list' %}">
+                    {% trans "Pages" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ title }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2>{{ title }}</h2>
+    </div>
+    <form method="post" class="card card-body form-stacked wysiwyg" enctype="multipart/form-data">
+        {% csrf_token %}
+        {% include 'oscar/dashboard/partials/form_fields.html' with form=form %}
+        <div class="form-actions">
+            <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Saving...' %}">
+                {% trans "Save" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:page-list' %}">
+                {% trans "cancel" %}
+            </a>
+            .
+        </div>
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/partials/advanced_search_modal.html b/tests/django_oscar/oscar/dashboard/partials/advanced_search_modal.html
new file mode 100644
index 0000000..eabd295
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partials/advanced_search_modal.html
@@ -0,0 +1,28 @@
+{% load i18n %}
+<div class="modal fade" data-show="true" id="SearchModal" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>{% trans "Advanced Search" %}</h3>
+                <button type="button" class="close" data-dismiss="modal">
+                    &times;
+                </button>
+            </div>
+            <form method="get" class="form-stacked">
+                <div class="modal-body">
+                    <div class="container">
+                        {% include "oscar/dashboard/partials/form_fields.html" with form=form style=style %}
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <a href="#" class="btn btn-secondary" data-dismiss="modal">
+                        {% trans "Close" %}
+                    </a>
+                    <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Searching...' %}">
+                        {% trans "Search" %}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/tests/django_oscar/oscar/dashboard/partials/alert_messages.html b/tests/django_oscar/oscar/dashboard/partials/alert_messages.html
new file mode 100644
index 0000000..30c9b1d
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partials/alert_messages.html
@@ -0,0 +1,40 @@
+{% load string_filters %}
+{% comment %}
+Use message tags to control these alerts. Available tags include:
+- safe: allow HTML in the message
+- block: for longer messages - this adds extra padding
+- noicon: don't show an icon
+- error/success/info - these change the connotation of the alert
+{% endcomment %}
+<div id="messages">
+{% if messages %}
+    {% for message in messages %}
+        <div class="alert {% for tag in message.tags|split %}alert-{% if tag == 'error' %}danger{% else %}{{ tag }}{% endif %} {% endfor %} alert-dismissible fade show"
+             role="alert">
+        <div class="alertinner {% if 'noicon' not in message.tags %}wicon{% endif %}">
+        {% if 'noicon' not in message.tags %}
+            {# Include an icon by default #}
+            {% if 'success' in message.tags %}
+                <i class="fas fa-check-circle"></i>
+            {% elif 'info' in message.tags %}
+                <i class="fas fa-info-circle"></i>
+            {% elif 'warning' in message.tags %}
+                <i class="fas fa-exclamation-triangle"></i>
+            {% elif 'danger' in message.tags or 'error' in message.tags %}
+                <i class="fas fa-exclamation-circle"></i>
+            {% endif %}
+        {% endif %}
+        {# Allow HTML to be embedded in messages #}
+        {% if 'safe' in message.tags %}
+            {{ message|safe }}
+        {% else %}
+            {{ message }}
+        {% endif %}
+    </div>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+{% endfor %}
+{% endif %}
+</div>
diff --git a/tests/django_oscar/oscar/dashboard/partials/form.html b/tests/django_oscar/oscar/dashboard/partials/form.html
new file mode 100644
index 0000000..8338f21
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partials/form.html
@@ -0,0 +1,22 @@
+{% load i18n %}
+<form
+    {% if form_id %}id="{{ form_id }}"{% endif %}
+    class="form-{{ style|default:"stacked" }} {{ class }}" method="{{ method|default:"post" }}"
+    {% if action %}action="{{ action }}"{% endif %}
+    {% if includes_files %}enctype="multipart/form-data"{% endif %}
+    >
+    {% if not method == "get" %}
+        {% csrf_token %}
+    {% endif %}
+    {% include 'oscar/dashboard/partials/form_fields.html' %}
+    <div class="form-group form-actions">
+        <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Saving...' %}">
+            {% trans "Save" %}
+        </button>
+        {% trans "or" %}
+        <a href="#" onclick="window.history.go(-1);return false" >
+            {% trans "cancel" %}
+        </a>
+        .
+    </div>
+</form>
diff --git a/tests/django_oscar/oscar/dashboard/partials/form_field.html b/tests/django_oscar/oscar/dashboard/partials/form_field.html
new file mode 100644
index 0000000..8add45f
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partials/form_field.html
@@ -0,0 +1,60 @@
+{% load form_tags %}
+{% load widget_tweaks %}
+{% if field.is_hidden %}
+    {{ field }}
+{% else %}
+    {% comment %}
+    Make the field widget type available to templates so we can mark-up
+    checkbox and radio inputs differently to other widgets.
+{% endcomment %}
+{% annotate_form_field field %}
+{% block control_group %}
+    <div class="form-group{% if style == 'horizontal' %}row{% endif %}{% if field.errors %}error{% endif %}">
+    {% block label %}
+        {% if not nolabel and field.widget_type != 'checkbox' %}
+            <label for="{{ field.auto_id }}" class="{% if style|default:"stacked" != 'stacked' %}col-sm-4
+            {% endif %}
+            col-form-label
+            {% if field.field.required %}required{% endif %}
+            ">
+            {{ field.label|safe }}
+        </label>
+    {% endif %}
+{% endblock %}
+{% block controls %}
+    <div class="{% if style|default:"stacked" != 'stacked' %}col-sm-8{% endif %}
+    {% if field.widget_type == 'checkbox' or field.widget_type == 'radioselect' %} form-check{% endif %}">
+    {% block widget %}
+        {% if field.widget_type == 'checkbox' %}
+            {% render_field field class+="form-check-input" %}
+            <label for="{{ field.auto_id }}"
+                   class="form-check-label mt-2{% if field.field.required %}required{% endif %}">
+            {{ field.label|safe }}
+        </label>
+    {% elif field.widget_type == 'radioselect' %}
+        {% render_field field class+="form-check-input position-static controls mt-2" %}
+    {% else %}
+        {% render_field field class+="form-control" %}
+    {% endif %}
+{% endblock %}
+{% block errors %}
+    {% for error in field.errors %}
+        <span class="error-block">
+            <i class="fas fa-exclamation"></i>
+            {{ error }}
+        </span>
+    {% endfor %}
+{% endblock %}
+{% block help_text %}
+    {% if field.help_text %}
+        <small class="form-text text-muted">
+        {# We allow HTML within form help fields #}
+        {{ field.help_text|safe }}
+        </small>
+    {% endif %}
+{% endblock %}
+</div>
+{% endblock %}
+</div>
+{% endblock %}
+{% endif %}
diff --git a/tests/django_oscar/oscar/dashboard/partials/form_fields.html b/tests/django_oscar/oscar/dashboard/partials/form_fields.html
new file mode 100644
index 0000000..3a18506
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partials/form_fields.html
@@ -0,0 +1,19 @@
+{% load i18n %}
+{% if form.is_bound and not form.is_valid %}
+    <div class="alert alert-danger">
+        <strong>{% trans "Oops! We found some errors" %}</strong>
+        - {% trans "please check the error messages below and try again" %}
+    </div>
+{% endif %}
+{% if form.non_field_errors %}
+    {% for error in form.non_field_errors %}
+        <div class="alert alert-danger form-group">
+            <span class="help-inline">
+                <i class="fas fa-exclamation"></i>
+                {{ error }}
+            </span>
+        </div>
+    {% endfor %}
+{% endif %}
+{% for field in form %}
+    {% include 'oscar/dashboard/partials/form_field.html' with field=field style=style %}{% endfor %}
diff --git a/tests/django_oscar/oscar/dashboard/partials/form_fields_inline.html b/tests/django_oscar/oscar/dashboard/partials/form_fields_inline.html
new file mode 100644
index 0000000..3653e91
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partials/form_fields_inline.html
@@ -0,0 +1,20 @@
+{% load widget_tweaks %}
+<span class="error-block">{{ form.non_field_errors }}</span>
+{% for field in form %}
+    {% if field.is_hidden %}
+        {{ field }}
+    {% else %}
+        <div class="form-group mr-2 {% if field.errors %}error{% endif %}">
+        {{ field.label_tag }}
+        {% render_field field class+='form-control' %}
+        {% for error in field.errors %}
+            <ul class="error-block">
+                <li>
+                    {{ error }}
+                </li>
+            </ul>
+        {% endfor %}
+        {# No help text as it wraps #}
+    </div>
+{% endif %}
+{% endfor %}
diff --git a/tests/django_oscar/oscar/dashboard/partials/pagination.html b/tests/django_oscar/oscar/dashboard/partials/pagination.html
new file mode 100644
index 0000000..8931ce0
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partials/pagination.html
@@ -0,0 +1,31 @@
+{% load display_tags %}
+{% load i18n %}
+{% if paginator.num_pages > 1 %}
+    <nav>
+        <ul class="pagination justify-content-center">
+            {% if page_obj.has_previous %}
+                <li class="page-item">
+                    <a class="page-link"
+                       href="?{% get_parameters 'page' %}page={{ page_obj.previous_page_number }}"
+                       tabindex="-1">
+                        {% trans "previous" %}
+                    </a>
+                </li>
+            {% endif %}
+            <li class="page-item disabled">
+                <span class="page-link">
+                    {% blocktrans with page_num=page_obj.number total_pages=paginator.num_pages %}
+                        Page {{ page_num }} of {{ total_pages }}
+                    {% endblocktrans %}
+                </span>
+            </li>
+            {% if page_obj.has_next %}
+                <li class="page-item">
+                    <a class="page-link" href="?{% get_parameters 'page' %}page={{ page_obj.next_page_number }}">
+                        {% trans "next" %}
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+    </nav>
+{% endif %}
diff --git a/tests/django_oscar/oscar/dashboard/partials/product_images.html b/tests/django_oscar/oscar/dashboard/partials/product_images.html
new file mode 100644
index 0000000..217e98f
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partials/product_images.html
@@ -0,0 +1,37 @@
+{% load i18n %}
+<li class='sortable-handle'>
+    {% for field in form %}
+        {% if field.is_hidden %}
+            {{ field }}
+        {% elif "original" in field.id_for_label %}
+            <div>
+                {{ field }}
+            </div>
+            {% for error in field.errors %}
+                <ul class="error-block">
+                    <li>
+                        {{ error }}
+                    </li>
+                </ul>
+            {% endfor %}
+            <a href="#" class="btn btn-info btn-handle btn-reorder {% if not form.instance.id %}disabled{% endif %}"
+            {% if not form.instance.id %}disabled{% endif %}
+            >
+            <i class="fas fa-arrows-alt"></i>
+            {% trans "Re-order" context "Change the sequence order" %}
+        </a>
+        <br>
+    {% else %}
+        {{ field.label_tag }}
+        {{ field }}
+        {% for error in field.errors %}
+            <ul class="error-block">
+                <li>
+                    {{ error }}
+                </li>
+            </ul>
+        {% endfor %}
+    {% endif %}
+{% endfor %}
+{{ form.non_field_errors }}
+</li>
diff --git a/tests/django_oscar/oscar/dashboard/partials/stock_info.html b/tests/django_oscar/oscar/dashboard/partials/stock_info.html
new file mode 100644
index 0000000..e186252
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partials/stock_info.html
@@ -0,0 +1,13 @@
+<div class="form-group">
+    {{ field.label_tag }}
+    <div>
+        {{ field }}
+        {% for error in field.errors %}
+            <ul class="error-block">
+                <li>
+                    {{ error }}
+                </li>
+            </ul>
+        {% endfor %}
+    </div>
+</div>
diff --git a/tests/django_oscar/oscar/dashboard/partners/messages/user_unlinked.html b/tests/django_oscar/oscar/dashboard/partners/messages/user_unlinked.html
new file mode 100644
index 0000000..2e1f4b3
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partners/messages/user_unlinked.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+{% blocktrans %}
+    User {{ user_name }} was unlinked from {{ partner_name }}.
+{% endblocktrans %}
+<a href="{% url 'dashboard:partner-user-link' partner_pk=partner_pk user_pk=user_pk %}">
+    {% trans 'Undo' %}.
+</a>
diff --git a/tests/django_oscar/oscar/dashboard/partners/partner_delete.html b/tests/django_oscar/oscar/dashboard/partners/partner_delete.html
new file mode 100644
index 0000000..bd119f3
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partners/partner_delete.html
@@ -0,0 +1,48 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {% trans "Delete partner" %} | {% trans "Partners" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:partner-list' %}">
+                    {% trans "Partners" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:partner-manage' pk=partner.pk %}">
+                    {{ partner.name }}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Delete?" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ partner.name }}{% endblock %}
+{% block dashboard_content %}
+    <form method="post">
+        {% csrf_token %}
+        <p>
+            {% trans "Are you sure you want to delete this partner?" %}
+        </p>
+        <div class="form-actions">
+            <button class="btn btn-danger" type="submit" data-loading-text="{% trans 'Deleting...' %}">
+                {% trans "Delete" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:partner-list' %}">
+                {% trans "cancel" %}
+            </a>
+        </div>
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/partners/partner_form.html b/tests/django_oscar/oscar/dashboard/partners/partner_form.html
new file mode 100644
index 0000000..dc70483
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partners/partner_form.html
@@ -0,0 +1,32 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load category_tags %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page partner{% endblock %}
+{% block title %}
+    {{ title }} | {% trans "Partners" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:partner-list' %}">
+                    {% trans "Partners" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ title }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <div class="card card-body">
+        {% include 'oscar/dashboard/partials/form.html' with form=form %}
+    </div>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/partners/partner_list.html b/tests/django_oscar/oscar/dashboard/partners/partner_list.html
new file mode 100644
index 0000000..6c0fada
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partners/partner_list.html
@@ -0,0 +1,138 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load sorting_tags %}
+{% load i18n %}
+{% block title %}
+    {% trans "Partners" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Partners" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <a href="{% url 'dashboard:partner-create' %}" class="btn btn-primary float-right">
+            <i class="fas fa-plus-circle"></i>
+            {% trans "Create new partner" %}
+        </a>
+        <h1>{% trans "Partners" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <div class="card card-body bg-light">
+        <form method="get" class="form-inline">
+            {% include 'oscar/dashboard/partials/form_fields_inline.html' with form=form %}
+            <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Searching...' %}">
+                {% trans "Search" %}
+            </button>
+            {% if is_filtered %}
+                <a class="btn btn-secondary" href="{% url 'dashboard:partner-list' %}" >
+                    {% trans "Reset" %}
+                </a>
+            {% endif %}
+        </form>
+    </div>
+    <form method="post" class="order_table">
+        {% csrf_token %}
+        <table class="table table-striped table-bordered">
+            <caption>
+            <i class="fas fa-briefcase"></i>
+            {{ queryset_description }}
+            </caption>
+            {% if partners %}
+                <tr>
+                    <th>{% anchor 'name' _('Name') %}</th>
+                    <th>{% trans 'Users' %}</th>
+                    <th>{% trans 'Addresses' %}</th>
+                    <th>&nbsp;</th>
+                </tr>
+                {% for partner in partners %}
+                    <tr>
+                        <td>
+                            <a href="{% url 'dashboard:partner-manage' pk=partner.pk %}">
+                                {{ partner.name }}
+                            </a>
+                        </td>
+                        <td>
+                            {% with users=partner.users.all %}
+                            {% if users %}
+                                <ul>
+                                    {% for user in users %}
+                                        <li>
+                                            <a href="{% url 'dashboard:partner-user-update' partner_pk=partner.pk user_pk=user.id %}"
+                                               title="{% trans ">
+                                                {{ user.get_full_name|default:user.email }}
+                                            </a>
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            {% else %}
+                                {% trans 'No users associated.' %}
+                            {% endif %}
+                        {% endwith %}
+                    </td>
+                    <td>
+                        {% with addresses=partner.addresses.all %}
+                        {% if addresses %}
+                            <ul>
+                                {% for address in addresses %}
+                                    <li>
+                                        {{ address.summary }}
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% else %}
+                            {% trans 'No address associated.' %}
+                        {% endif %}
+                    {% endwith %}
+                </td>
+                <td>
+                    <div class="btn-toolbar">
+                        <div class="dropdown">
+                            <button class="btn btn-secondary dropdown-toggle"
+                                    type="button"
+                                    id="dropdownMenuButton"
+                                    data-toggle="dropdown"
+                                    aria-haspopup="true"
+                                    aria-expanded="false">
+                                {% trans "Actions" %}
+                            </button>
+                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                <a class="dropdown-item" href="{% url 'dashboard:partner-manage' pk=partner.pk %}">
+                                    {% trans "Manage partner and users" %}
+                                </a>
+                                <a class="dropdown-item" href="{% url 'dashboard:partner-delete' pk=partner.pk %}">
+                                    {% trans "Delete partner" %}
+                                </a>
+                                <a class="dropdown-item"
+                                   href="{% url 'dashboard:partner-user-select' partner_pk=partner.pk %}">
+                                    {% trans "Link an existing user" %}
+                                </a>
+                                <a class="dropdown-item"
+                                   href="{% url 'dashboard:partner-user-create' partner_pk=partner.pk %}">
+                                    {% trans "Link a new user" %}
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        {% endfor %}
+    {% else %}
+        <tr>
+            <td>{% trans "No partners found." %}</td>
+        </tr>
+    {% endif %}
+</table>
+{% include "oscar/dashboard/partials/pagination.html" %}
+</form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/partners/partner_manage.html b/tests/django_oscar/oscar/dashboard/partners/partner_manage.html
new file mode 100644
index 0000000..56738b6
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partners/partner_manage.html
@@ -0,0 +1,88 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page partners{% endblock %}
+{% block title %}
+    {{ partner.name }} | {% trans "Partners" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:partner-list' %}">
+                    {% trans "Partners" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ partner.name }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ partner.name }}{% endblock %}
+{% block dashboard_content %}
+    <div class="row">
+        <div class="col-md-12">
+            <div class="table-header">
+                <h2>{{ title }}</h2>
+            </div>
+            {% include "oscar/dashboard/partials/form.html" with form=form class="card card-body" %}
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            <h2>{% trans "Users" %}</h2>
+            {% if users %}
+                <table class="table table-striped table-bordered">
+                    <thead>
+                        <tr>
+                            <th>{% trans 'Email' %}</th>
+                            <th>{% trans 'First name' %}</th>
+                            <th>{% trans 'Last name' %}</th>
+                            <th>&nbsp;</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for user in users %}
+                            <tr>
+                                <td>
+                                    <a href="{% url 'dashboard:partner-user-update' partner_pk=partner.pk user_pk=user.id %}">
+                                        {{ user.email }}
+                                    </a>
+                                </td>
+                                <td>{{ user.first_name|default:"-" }}</td>
+                                <td>{{ user.last_name|default:"-" }}</td>
+                                <td>
+                                    <form action="{% url 'dashboard:partner-user-unlink' partner_pk=partner.id user_pk=user.id %}"
+                                          method="post">
+                                        {% csrf_token %}
+                                        <button type="submit"
+                                                class="btn btn-danger"
+                                                data-loading-text="{% trans 'Unlinking...' %}">
+                                            {% trans 'Unlink user' %}
+                                        </button>
+                                    </form>
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            {% else %}
+                <p>
+                    {% trans "No users linked." %}
+                </p>
+            {% endif %}
+            <div class="form-group">
+                <a class="btn btn-info" href="{% url 'dashboard:partner-user-create' partner_pk=partner.pk %}" >
+                    {% trans "Link a new user" %}
+                </a>
+                <a class="btn btn-info" href="{% url 'dashboard:partner-user-select' partner_pk=partner.pk %}" >
+                    {% trans "Link an existing user" %}
+                </a>
+            </div>
+        </div>
+    {% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/partners/partner_user_form.html b/tests/django_oscar/oscar/dashboard/partners/partner_user_form.html
new file mode 100644
index 0000000..f335d5c
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partners/partner_user_form.html
@@ -0,0 +1,50 @@
+{% extends "oscar/dashboard/layout.html" %}
+{% load category_tags %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page partner{% endblock %}
+{% block title %}
+    {{ title }} | {{ partner.name }} | {% trans "Partners" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:partner-list' %}">
+                    {% trans "Partners" %}
+                </a>
+            </li>
+            {% if partner %}
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:partner-manage' pk=partner.id %}">
+                        {{ partner.name }}
+                    </a>
+                </li>
+            {% endif %}
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ title }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <form method="post" class="card card-body form-stacked wysiwyg" enctype="multipart/form-data">
+        {% csrf_token %}
+        {% include 'oscar/dashboard/partials/form_fields.html' with form=form %}
+        <div class="form-actions">
+            <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Saving...' %}">
+                {% trans "Save" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:partner-manage' pk=partner.pk %}">
+                {% trans "cancel" %}
+            </a>
+            .
+        </div>
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/partners/partner_user_list.html b/tests/django_oscar/oscar/dashboard/partners/partner_user_list.html
new file mode 100644
index 0000000..8a77a5a
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partners/partner_user_list.html
@@ -0,0 +1,86 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {% trans "Partners" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:partner-list' %}">
+                    {% trans "Partners" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ partner.name }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <div class="btn-group float-right">
+            <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
+                <i class="fas fa-plus-circle"></i>
+                {% trans 'Link a user' %}
+            </a>
+            <ul class="dropdown-menu dropdown-menu-right">
+                <li>
+                    <a href="{% url 'dashboard:partner-user-create' partner_pk=partner.pk %}" >
+                        {% trans "Link a new user" %}
+                    </a>
+                </li>
+                <li>
+                    <a href="{% url 'dashboard:partner-user-select' partner_pk=partner.pk %}" >
+                        {% trans "Link an existing user" %}
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <h1>{% trans "Manage users" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    {% if users %}
+        <table class="table table-striped table-bordered">
+            <thead>
+                <tr>
+                    <th>{% trans 'Email' %}</th>
+                    <th>{% trans 'First name' %}</th>
+                    <th>{% trans 'Last name' %}</th>
+                    <th>&nbsp;</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for user in users %}
+                    <tr>
+                        <td>
+                            <a href="{% url 'dashboard:partner-user-update' partner_pk=partner.pk user_pk=user.id %}">
+                                {{ user.email }}
+                            </a>
+                        </td>
+                        <td>{{ user.first_name|default:"-" }}</td>
+                        <td>{{ user.last_name|default:"-" }}</td>
+                        <td>
+                            <form action="{% url 'dashboard:partner-user-unlink' partner_pk=partner.id user_pkuser.id %}"
+                                  method="post">
+                                {% csrf_token %}
+                                <button type="submit"
+                                        class="btn btn-danger"
+                                        data-loading-text="{% trans 'Unlinking...' %}">
+                                    {% trans 'Unlink user' %}
+                                </button>
+                            </form>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% else %}
+        <p>
+            {% trans "No users linked." %}
+        </p>
+    {% endif %}
+    {% include "oscar/dashboard/partials/pagination.html" %}
+    <h1>{% trans "Update details" %}</h1>
+    {% include 'oscar/dashboard/partials/form.html' %}{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/partners/partner_user_select.html b/tests/django_oscar/oscar/dashboard/partners/partner_user_select.html
new file mode 100644
index 0000000..6618872
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/partners/partner_user_select.html
@@ -0,0 +1,102 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {% trans "Link an existing user" %} | {{ partner.name }} | {% trans "Partners" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:partner-list' %}">
+                    {% trans "Partners" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:partner-manage' pk=partner.id %}">
+                    {{ partner.name }}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Link an existing user" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% trans "Link an existing user" %}
+{% endblock %}
+{% block dashboard_content %}
+    {% block users_form %}
+        <div class="card card-body">
+            <form method="get" class="form-inline">
+                {% include 'oscar/dashboard/partials/form_fields_inline.html' with form=form %}
+                <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Searching...' %}">
+                    {% trans "Search" %}
+                </button>
+                {% if form.is_bound %}
+                    <a class="btn btn-secondary"
+                       href="{% url 'dashboard:partner-user-select' partner_pk=partner.id %}">
+                        {% trans "Reset" %}
+                    </a>
+                {% endif %}
+                <div style="margin-top:5px">
+                    {% trans "A partial email address can be entered (eg '@example.com') to match multiple addresses." %}
+                </div>
+            </form>
+        </div>
+    {% endblock %}
+    {% if form.is_bound %}
+        {% if users %}
+            {% with partner_users=partner.users.all %}
+            <table class="table table-striped table-bordered">
+                {% block users_header %}
+                    <thead>
+                        <tr>
+                            <th>{% trans 'Email' %}</th>
+                            <th>{% trans 'First name' %}</th>
+                            <th>{% trans 'Last name' %}</th>
+                            <th>&nbsp;</th>
+                        </tr>
+                    </thead>
+                {% endblock %}
+                <tbody>
+                    {% for user in users %}
+                        {% block users_row %}
+                            <tr>
+                                <td>{{ user.email }}</td>
+                                <td>{{ user.first_name|default:"-" }}</td>
+                                <td>{{ user.last_name|default:"-" }}</td>
+                                <td>
+                                    {% if user in partner_users %}
+                                        {% blocktrans with name=partner.name %}
+                                            User is already linked to {{ name }}.
+                                        {% endblocktrans %}
+                                    {% else %}
+                                        <form action="{% url 'dashboard:partner-user-link' partner_pk=partner.id user_pk=user.id %}"
+                                              method="post">
+                                            {% csrf_token %}
+                                            <button type="submit"
+                                                    class="btn btn-primary"
+                                                    data-loading-text="{% trans 'Linking...' %}">
+                                                {% trans 'Link user' %}
+                                            </button>
+                                        </form>
+                                    {% endif %}
+                                </td>
+                            </tr>
+                        {% endblock %}
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% endwith %}
+        {% include "oscar/dashboard/partials/pagination.html" %}
+    {% else %}
+        {% trans "No users found." %}
+    {% endif %}
+{% endif %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/ranges/messages/range_products_saved.html b/tests/django_oscar/oscar/dashboard/ranges/messages/range_products_saved.html
new file mode 100644
index 0000000..6e335b2
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/ranges/messages/range_products_saved.html
@@ -0,0 +1,55 @@
+{% load i18n %}
+{% blocktrans with range_name=range.name filename=upload.filepath %}
+    <p>
+        File
+        <strong>{{ filename }}</strong>
+        processed.
+    </p>
+{% endblocktrans %}
+<ul>
+    {% if upload.num_new_skus %}
+        <li>
+            {% blocktrans count n=upload.num_new_skus %}
+                <strong>{{ n }}</strong>
+                product added
+                {% plural %}
+                <strong>{{ n }}</strong>
+                products added
+            {% endblocktrans %}
+        </li>
+    {% endif %}
+    {% if upload.num_duplicate_skus %}
+        <li>
+            {% blocktrans count n=upload.num_duplicate_skus %}
+                There was
+                <strong>{{ n }}</strong>
+                duplicate product in the file
+                {% plural %}
+                There were
+                <strong>{{ n }}</strong>
+                duplicate products in the file
+            {% endblocktrans %}
+        </li>
+    {% endif %}
+    {% if upload.num_unknown_skus %}
+        <li>
+            {% blocktrans count n=upload.num_unknown_skus %}
+                There was
+                <strong>{{ n }}</strong>
+                product in the file that couldn't be found in the catalogue
+                {% plural %}
+                There were
+                <strong>{{ n }}</strong>
+                products in the file that couldn't be found in the catalogue
+            {% endblocktrans %}
+        </li>
+    {% endif %}
+</ul>
+<p>
+    <a href="{% url 'dashboard:range-update' pk=range.pk %}" class="btn btn-success">
+        {% trans "Edit range metadata" %}
+    </a>
+    <a href="{% url 'dashboard:range-list' %}" class="btn btn-success">
+        {% trans "Return to ranges homepage" %}
+    </a>
+</p>
diff --git a/tests/django_oscar/oscar/dashboard/ranges/messages/range_saved.html b/tests/django_oscar/oscar/dashboard/ranges/messages/range_saved.html
new file mode 100644
index 0000000..60397e9
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/ranges/messages/range_saved.html
@@ -0,0 +1,16 @@
+{% load i18n %}
+{% blocktrans with name=range.name %}
+    <p>
+        Range
+        <strong>{{ name }}</strong>
+        saved.
+    </p>
+{% endblocktrans %}
+<p>
+    <a href="{% url 'dashboard:range-update' pk=range.pk %}" class="btn btn-success">
+        {% trans "Edit again" %}
+    </a>
+    <a href="{% url 'dashboard:range-products' pk=range.pk %}" class="btn btn-success">
+        {% trans "Edit included products" %}
+    </a>
+</p>
diff --git a/tests/django_oscar/oscar/dashboard/ranges/range_delete.html b/tests/django_oscar/oscar/dashboard/ranges/range_delete.html
new file mode 100644
index 0000000..399f25d
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/ranges/range_delete.html
@@ -0,0 +1,51 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {% blocktrans with name=range.name %}
+        Delete range '{{ name }}'?
+    {% endblocktrans %}
+    | {% trans "Ranges" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:range-list' %}">
+                    {% trans "Ranges" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:range-update' pk=range.pk %}">
+                    '{{ range.name }}'
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Delete?" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ range.name }}{% endblock %}
+{% block dashboard_content %}
+    <form method="post" class="card card-body bg-light">
+        <p>
+            {% trans "Are you sure you want to delete this range?" %}
+        </p>
+        {% csrf_token %}
+        <div class="form-actions">
+            <button class="btn btn-danger" type="submit" data-loading-text="{% trans 'Deleting...' %}">
+                {% trans "Delete" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:range-list' %}">
+                {% trans "cancel" %}
+            </a>
+        </div>
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/ranges/range_form.html b/tests/django_oscar/oscar/dashboard/ranges/range_form.html
new file mode 100644
index 0000000..b852677
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/ranges/range_form.html
@@ -0,0 +1,58 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {{ title }} | {% trans "Ranges" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:range-list' %}">
+                    {% trans "Ranges" %}
+                </a>
+            </li>
+            {% if range %}
+                <li class="breadcrumb-item active" aria-current="page">
+                    '{{ range.name }}'
+                </li>
+            {% else %}
+                <li class="breadcrumb-item active" aria-current="page">
+                    {{ title }}
+                </li>
+            {% endif %}
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% if range %}
+        {{ range.name }}
+    {% else %}
+        {% trans "Create new range" %}
+    {% endif %}
+{% endblock %}
+{% block dashboard_content %}
+    <form method="post" class="form-stacked card card-body bg-light wysiwyg">
+        {% csrf_token %}
+        {% include "oscar/dashboard/partials/form_fields.html" with form=form %}
+        {% block form_actions %}
+            <div class="form-actions">
+                <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Saving...' %}">
+                    {% trans "Save" %}
+                </button>
+                {% trans "or" %}
+                {# This is an input so we distinguish between which button was pressed #}
+                <input class="btn btn-primary" type="submit" name="action" value="{% trans "/>
+                {% trans "or" %}
+                <a href="{% url 'dashboard:range-list' %}">
+                    {% trans "cancel" %}
+                </a>
+            </div>
+        {% endblock form_actions %}
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/ranges/range_list.html b/tests/django_oscar/oscar/dashboard/ranges/range_list.html
new file mode 100644
index 0000000..f7d37c1
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/ranges/range_list.html
@@ -0,0 +1,118 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {% trans "Ranges" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Ranges" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <a href="{% url 'dashboard:range-create' %}" class="btn btn-primary float-right">
+            <i class="fas fa-plus-circle"></i>
+            {% trans "Create new range" %}
+        </a>
+        <h1>{% trans "Ranges" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <table class="table table-striped table-bordered">
+        <caption>
+        <i class="fas fa-ellipsis-h"></i>
+        {% trans "Ranges" %}
+        </caption>
+        {% if ranges %}
+            <thead>
+                <tr>
+                    <th>{% trans "Name" %}</th>
+                    <th>{% trans "Num products" %}</th>
+                    <th>{% trans "Is public?" %}</th>
+                    <th>{% trans "Date created" %}</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for range in ranges %}
+                    <tr>
+                        <td>
+                            {% if range.is_editable %}
+                                <a href="{% url 'dashboard:range-update' pk=range.id %}">
+                                    {{ range.name }}
+                                </a>
+                            {% else %}
+                                {{ range.name }}
+                            {% endif %}
+                        </td>
+                        {% if range.includes_all_products %}
+                            <td>{% trans 'All' %}</td>
+                        {% else %}
+                            <td>{{ range.num_products|default:"-" }}</td>
+                        {% endif %}
+                        {% if range.is_public %}
+                            <td>{% trans "Yes" %}</td>
+                        {% else %}
+                            <td>{% trans "No" %}</td>
+                        {% endif %}
+                        <td>
+                            {{ range.date_created }}
+                        </td>
+                        <td>
+                            <div class="btn-toolbar">
+                                <div class="dropdown">
+                                    <button class="btn btn-secondary dropdown-toggle"
+                                            type="button"
+                                            id="dropdownMenuButton"
+                                            data-toggle="dropdown"
+                                            aria-haspopup="true"
+                                            aria-expanded="false">
+                                        {% trans "Actions" %}
+                                    </button>
+                                    <div class="dropdown-menu dropdown-menu-right"
+                                         aria-labelledby="dropdownMenuButton">
+                                        {% if range.is_editable %}
+                                            <a class="dropdown-item"
+                                               href="{% url 'dashboard:range-update' pk=range.id %}">
+                                                {% trans "Edit" %}
+                                            </a>
+                                            {% if not range.includes_all_products %}
+                                                <a class="dropdown-item"
+                                                   href="{% url 'dashboard:range-products' pk=range.id %}">
+                                                    {% trans "Edit products" %}
+                                                </a>
+                                            {% endif %}
+                                        {% endif %}
+                                        {% if range.is_public %}
+                                            <a class="dropdown-item" href="{{ range.get_absolute_url }}">
+                                                {% trans "View on site" %}
+                                            </a>
+                                        {% endif %}
+                                        <a class="dropdown-item" href="{% url 'dashboard:range-delete' pk=range.id %}">
+                                            {% trans "Delete" %}
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        {% else %}
+            <tr>
+                <td>
+                    {% trans "No ranges found." %}
+                </td>
+            </tr>
+        {% endif %}
+    </table>
+    {% include "oscar/dashboard/partials/pagination.html" %}{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/ranges/range_product_list.html b/tests/django_oscar/oscar/dashboard/ranges/range_product_list.html
new file mode 100644
index 0000000..56475a4
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/ranges/range_product_list.html
@@ -0,0 +1,185 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {% blocktrans with name=range.name %}
+        Products in range '{{ name }}'
+    {% endblocktrans %}
+    | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:range-list' %}">
+                    {% trans "Ranges" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:range-update' pk=range.id %}">
+                    '{{ range.name }}'
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Products" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {{ range.name }}: {% trans "products" %}
+{% endblock %}
+{% block dashboard_content %}
+    {% if range.includes_all_products %}
+        {% trans "This range contains all products. To add products manually, please unselect the 'Includes All Products' option on the edit range page." %}
+    {% else %}
+        <div class="table-header">
+            <h3>{% trans "Add products" %}</h3>
+        </div>
+        <div class="card card-body bg-light">
+            <form method="post" class="form-stacked" enctype="multipart/form-data">
+                {% csrf_token %}
+                <input type="hidden" name="action" value="add_products"/>
+                {% include 'oscar/dashboard/partials/form_fields.html' with form=form %}
+                <div class="controls">
+                    <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Running...' %}">
+                        {% trans "Go!" %}
+                    </button>
+                </div>
+            </form>
+            {% with uploads=range.file_uploads.all %}
+            {% if uploads %}
+                <div class="table-header">
+                    <h3>{% trans "Upload history" %}</h3>
+                </div>
+                <table class="table table-striped table-bordered table-hover">
+                    <thead>
+                        <tr>
+                            <th>{% trans "Filename" %}</th>
+                            <th>{% trans "New products" %}</th>
+                            <th>{% trans "Duplicate products" %}</th>
+                            <th>{% trans "Unknown products" %}</th>
+                            <th>{% trans "Date uploaded" %}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for upload in uploads %}
+                            <tr>
+                                <td>{{ upload.filepath }}</td>
+                                <td>{{ upload.num_new_skus }}</td>
+                                <td>{{ upload.num_duplicate_skus }}</td>
+                                <td>
+                                    {{ upload.num_unknown_skus }}
+                                </td>
+                                <td>
+                                    {{ upload.date_uploaded }}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            {% endif %}
+        {% endwith %}
+        {% if products %}
+            <form method="post">
+                {% csrf_token %}
+                <table class="table table-striped table-bordered table-hover">
+                    <caption>
+                    <h3 class="float-left">{% trans "Products in range" %}</h3>
+                    <div class="float-right">
+                        <input type="hidden" name="action" value="remove_selected_products" />
+                        <button type="submit" class="btn btn-secondary" data-loading-text="{% trans 'Removing...' %}">
+                            {% trans "Remove selected products" %}
+                        </button>
+                    </div>
+                    </caption>
+                    <thead>
+                        <tr>
+                            <th></th>
+                            <th>
+                                {% trans "UPC" %}
+                            </th>
+                            <th>
+                                {% trans "Title" context "Product title" %}
+                            </th>
+                            <th>
+                                {% trans "Is product discountable?" %}
+                            </th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody class="product_list">
+                        {% for product in products %}
+                            <tr id="product_{{ product.pk }}">
+                                <td>
+                                    <input type="checkbox" name="selected_product" value="{{ product.id }}" />
+                                </td>
+                                <td>
+                                    {{ product.upc|default:"-" }}
+                                </td>
+                                <td>
+                                    <a href="{% url 'dashboard:catalogue-product' pk=product.id %}">
+                                        {{ product.get_title }}
+                                    </a>
+                                </td>
+                                <td>
+                                    {% if product.get_is_discountable %}
+                                        {% trans "Yes" %}
+                                    {% else %}
+                                        {% trans "No" %}
+                                    {% endif %}
+                                </td>
+                                <td>
+                                    <a class="btn btn-danger" href="#" data-behaviours="remove">
+                                        {% trans "Remove" %}
+                                    </a>
+                                    {% if range.is_reorderable %}
+                                        <a href="#" class="btn btn-info btn-handle">
+                                            <i class="fas fa-arrows-alt"></i>
+                                            {% trans "Re-order" context "Change the sequence order" %}
+                                        </a>
+                                    {% endif %}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+                {% include "oscar/dashboard/partials/pagination.html" %}
+            </form>
+        {% else %}
+            <table class="table table-striped table-bordered table-hover">
+                <caption>
+                {% trans "Products in Range" %}
+                </caption>
+                <tr>
+                    <td>
+                        {% trans "No products found." %}
+                    </td>
+                </tr>
+            </table>
+        {% endif %}
+    </div>
+{% endif %}
+<div class="form-actions">
+    <a href="{% url 'dashboard:range-update' pk=range.id %}" class="btn btn-primary">
+        {% trans "Edit range" %}
+    </a>
+    {% trans "or" %}
+    <a href="{% url 'dashboard:range-list' %}" class="">
+        {% trans "return to range list" %}
+    </a>
+</div>
+{% endblock dashboard_content %}
+{% block onbodyload %}
+{{ block.super }}
+oscar.dashboard.ranges.init();
+oscar.dashboard.reordering.init({
+wrapper: '.product_list',
+submit_url: '{% url 'dashboard:range-reorder' pk=range.id %}'
+});
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/reports/index.html b/tests/django_oscar/oscar/dashboard/reports/index.html
new file mode 100644
index 0000000..15ec970
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/reports/index.html
@@ -0,0 +1,51 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} reports{% endblock %}
+{% block title %}
+    {% trans "Reports" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Reporting Dashboard" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% trans "Reporting dashboard" %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h3>
+            <i class="fas fa-chart-bar"></i>
+            {% trans "Reporting dashboard" %}
+        </h3>
+    </div>
+    <div class="card card-body">
+        <form method="get" class="form-inline">
+            {% include "oscar/dashboard/partials/form_fields_inline.html" with form=form %}
+            <span class="form-group">
+                {# data-loading-text is deliberately not used here so that the button doesn't stay disabled after a CSV download has started #}
+                <button type="submit" id='generate_report' class="btn btn-primary">
+                    {% trans "Generate report" %}
+                </button>
+            </span>
+        </form>
+    </div>
+    {% if description %}
+        <div class="table-header">
+            <h3>
+                <i class="fas fa-chart-bar"></i>
+                {{ description }}
+            </h3>
+        </div>
+    {% endif %}
+    {% block report %}{% endblock %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/reports/partials/offer_report.html b/tests/django_oscar/oscar/dashboard/reports/partials/offer_report.html
new file mode 100644
index 0000000..bc68849
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/reports/partials/offer_report.html
@@ -0,0 +1,27 @@
+{% extends 'oscar/dashboard/reports/index.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block report %}
+    <table class="table table-striped table-bordered table-hover">
+        {% if objects %}
+            <tr>
+                <th>{% trans "Offer" %}</th>
+                <th>{% trans "Total discount" %}</th>
+            </tr>
+            {% for offer_discount in objects %}
+                <tr>
+                    <td>
+                        <a href="{% url 'dashboard:offer-detail' offer_discount.offer.pk %}">
+                            {{ offer_discount.offer.name }}
+                        </a>
+                    </td>
+                    <td>{{ offer_discount.total_discount|currency }}</td>
+                </tr>
+            {% endfor %}
+        {% else %}
+            <tr>
+                <td>{% trans "No results found." %}</td>
+            </tr>
+        {% endif %}
+    </table>
+    {% include "oscar/dashboard/partials/pagination.html" %}{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/reports/partials/open_basket_report.html b/tests/django_oscar/oscar/dashboard/reports/partials/open_basket_report.html
new file mode 100644
index 0000000..6a8447e
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/reports/partials/open_basket_report.html
@@ -0,0 +1,43 @@
+{% extends 'oscar/dashboard/reports/index.html' %}
+{% load currency_filters %}
+{% load datetime_filters %}
+{% load i18n %}
+{% block report %}
+    <table class="table table-striped table-bordered table-hover">
+        <tr>
+            <th>{% trans "Email" %}</th>
+            <th>{% trans "Name" %}</th>
+            <th>{% trans "Num lines" %}</th>
+            <th>{% trans "Num items" %}</th>
+            <th>{% trans "Date of creation" %}</th>
+            <th>{% trans "Time since creation" %}</th>
+        </tr>
+        {% for basket in objects %}
+            <tr>
+                <td>
+                    {% if basket.owner %}
+                        <a href="{% url 'dashboard:user-detail' basket.owner.id %}">
+                            {{ basket.owner.email }}
+                        </a>
+                    {% else %}
+                        -
+                    {% endif %}
+                </td>
+                <td>
+                    {% if basket.owner %}
+                        <a href="{% url 'dashboard:user-detail' basket.owner.id %}">
+                            {{ basket.owner.get_full_name|default:"-" }}
+                        </a>
+                    </td>
+                {% else %}
+                    -
+                {% endif %}
+            </td>
+            <td>{{ basket.num_lines }}</td>
+            <td>{{ basket.num_items }}</td>
+            <td>{{ basket.date_created }}</td>
+            <td>{{ basket.time_since_creation|timedelta }}</td>
+        </tr>
+    {% endfor %}
+</table>
+{% include "oscar/dashboard/partials/pagination.html" %}{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/reports/partials/order_report.html b/tests/django_oscar/oscar/dashboard/reports/partials/order_report.html
new file mode 100644
index 0000000..c50aade
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/reports/partials/order_report.html
@@ -0,0 +1,47 @@
+{% extends 'oscar/dashboard/reports/index.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block report %}
+    <table class="table table-striped table-bordered table-hover">
+        {% if objects %}
+            <tr>
+                <th>{% trans "Order number" %}</th>
+                <th>{% trans "Name" %}</th>
+                <th>{% trans "Email" %}</th>
+                <th>{% trans "Total incl. tax" %}</th>
+                <th>{% trans "Date placed" %}</th>
+                <th></th>
+            </tr>
+            {% for order in objects %}
+                <tr>
+                    <td>
+                        <a href="{% url 'dashboard:order-detail' order.number %}">
+                            {{ order.number }}
+                        </a>
+                    </td>
+                    <td>
+                        {% if order.user %}
+                            <a href="{% url 'dashboard:user-detail' order.user.id %}">
+                                {{ order.user|default:"-" }}
+                            </a>
+                        {% else %}
+                            -
+                        {% endif %}
+                    </td>
+                    <td>{{ order.email }}</td>
+                    <td>{{ order.total_incl_tax|currency:order.currency }}</td>
+                    <td>{{ order.date_placed }}</td>
+                    <td>
+                        <a class="btn btn-secondary" href="{% url 'dashboard:order-detail' number=order.number %}">
+                            {% trans "View" %}
+                        </a>
+                    </td>
+                </tr>
+            {% endfor %}
+        {% else %}
+            <tr>
+                <td>{% trans "No results found." %}</td>
+            </tr>
+        {% endif %}
+    </table>
+    {% include "oscar/dashboard/partials/pagination.html" %}{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/reports/partials/product_report.html b/tests/django_oscar/oscar/dashboard/reports/partials/product_report.html
new file mode 100644
index 0000000..bd8b02f
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/reports/partials/product_report.html
@@ -0,0 +1,25 @@
+{% extends 'oscar/dashboard/reports/index.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block report %}
+    <table class="table table-striped table-bordered table-hover">
+        <tr>
+            <th>{% trans "Product" %}</th>
+            <th>{% trans "Views" %}</th>
+            <th>{% trans "Basket additions" %}</th>
+            <th>{% trans "Purchases" %}</th>
+        </tr>
+        {% for product in objects %}
+            <tr>
+                <td>
+                    <a href="{% url 'dashboard:catalogue-product' product.product.id %}">
+                        {{ product.product }}
+                    </a>
+                </td>
+                <td>{{ product.num_views }}</td>
+                <td>{{ product.num_basket_additions }}</td>
+                <td>{{ product.num_purchases }}</td>
+            </tr>
+        {% endfor %}
+    </table>
+    {% include "oscar/dashboard/partials/pagination.html" %}{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/reports/partials/submitted_basket_report.html b/tests/django_oscar/oscar/dashboard/reports/partials/submitted_basket_report.html
new file mode 100644
index 0000000..f506bc6
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/reports/partials/submitted_basket_report.html
@@ -0,0 +1,41 @@
+{% extends 'oscar/dashboard/reports/index.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block report %}
+    <table class="table table-striped table-bordered table-hover">
+        <tr>
+            <th>{% trans "Email" %}</th>
+            <th>{% trans "Name" %}</th>
+            <th>{% trans "Num lines" %}</th>
+            <th>{% trans "Num items" %}</th>
+            <th>{% trans "Date created" %}</th>
+            <th>{% trans "Time between creation and submission" %}</th>
+        </tr>
+        {% for basket in objects %}
+            <tr>
+                <td>
+                    {% if basket.owner %}
+                        <a href="{% url 'dashboard:user-detail' basket.owner.id %}">
+                            {{ basket.owner.email }}
+                        </a>
+                    {% else %}
+                        -
+                    {% endif %}
+                </td>
+                <td>
+                    {% if basket.owner %}
+                        <a href="{% url 'dashboard:user-detail' basket.owner.id %}">
+                            {{ basket.owner.get_full_name|default:"-" }}
+                        </a>
+                    {% else %}
+                        -
+                    {% endif %}
+                </td>
+                <td>{{ basket.num_lines }}</td>
+                <td>{{ basket.num_items }}</td>
+                <td>{{ basket.date_created }}</td>
+                <td>{{ basket.time_before_submit }}</td>
+            </tr>
+        {% endfor %}
+    </table>
+    {% include "oscar/dashboard/partials/pagination.html" %}{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/reports/partials/user_report.html b/tests/django_oscar/oscar/dashboard/reports/partials/user_report.html
new file mode 100644
index 0000000..cce756f
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/reports/partials/user_report.html
@@ -0,0 +1,57 @@
+{% extends 'oscar/dashboard/reports/index.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block report %}
+    <table class="table table-striped table-bordered table-hover">
+        <tr>
+            <th>{% trans "Email" %}</th>
+            <th>{% trans "Name" %}</th>
+            <th>{% trans "Date registered" %}</th>
+            <th>{% trans "Product views" %}</th>
+            <th>{% trans "Basket additions" %}</th>
+            <th>{% trans "Orders" %}</th>
+            <th>{% trans "Order lines" %}</th>
+            <th>{% trans "Order items" %}</th>
+            <th>{% trans "Total spent" %}</th>
+            <th>{% trans "Date of last order" %}</th>
+        </tr>
+        {% for user in objects %}
+            <tr>
+                <td>
+                    <a href="{% url 'dashboard:user-detail' user.user.id %}">
+                        {{ user.user.email }}
+                    </a>
+                </td>
+                <td>
+                    <a href="{% url 'dashboard:user-detail' user.user.id %}">
+                        {{ user.user.get_full_name|default:"-" }}
+                    </a>
+                </td>
+                <td>
+                    {{ user.user.date_joined }}
+                </td>
+                <td>
+                    {{ user.num_product_views }}
+                </td>
+                <td>
+                    {{ user.num_basket_additions }}
+                </td>
+                <td>
+                    {{ user.num_orders }}
+                </td>
+                <td>
+                    {{ user.num_order_lines }}
+                </td>
+                <td>
+                    {{ user.num_order_items }}
+                </td>
+                <td>
+                    {{ user.total_spent|currency }}
+                </td>
+                <td>
+                    {{ user.date_last_order|default:"-" }}
+                </td>
+            </tr>
+        {% endfor %}
+    </table>
+    {% include "oscar/dashboard/partials/pagination.html" %}{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/reports/partials/voucher_report.html b/tests/django_oscar/oscar/dashboard/reports/partials/voucher_report.html
new file mode 100644
index 0000000..aaa0671
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/reports/partials/voucher_report.html
@@ -0,0 +1,31 @@
+{% extends 'oscar/dashboard/reports/index.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block report %}
+    <table class="table table-striped table-bordered table-hover">
+        {% if objects %}
+            <tr>
+                <th>{% trans "Voucher code" %}</th>
+                <th>{% trans "Added to a basket" %}</th>
+                <th>{% trans "Used in an order" %}</th>
+                <th>{% trans "Total discount" %}</th>
+            </tr>
+            {% for voucher in objects %}
+                <tr>
+                    <td>
+                        <a href="{% url 'dashboard:voucher-stats' voucher.id %}">
+                            {{ voucher.code }}
+                        </a>
+                    </td>
+                    <td>{{ voucher.num_basket_additions }}</td>
+                    <td>{{ voucher.num_orders }}</td>
+                    <td>{{ voucher.total_discount|currency }}</td>
+                </tr>
+            {% endfor %}
+        {% else %}
+            <tr>
+                <td>{% trans "No vouchers were used in this period" %}</td>
+            </tr>
+        {% endif %}
+    </table>
+    {% include "oscar/dashboard/partials/pagination.html" %}{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/reviews/review_delete.html b/tests/django_oscar/oscar/dashboard/reviews/review_delete.html
new file mode 100644
index 0000000..cbddb6f
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/reviews/review_delete.html
@@ -0,0 +1,95 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {% blocktrans with title=review.title|truncatechars:30 %}
+        Delete review '{{ title }}'?
+    {% endblocktrans %}
+    | {% trans "Reviews" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:reviews-list' %}">
+                    {% trans "Reviews" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% blocktrans with title=review.title|truncatechars:30 %}
+                    Delete review "{{ title }}"?
+                {% endblocktrans %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% blocktrans with title=review.title|truncatechars:30 %}
+        Delete review "{{ title }}"?
+    {% endblocktrans %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2>{% trans "Review" %}</h2>
+    </div>
+    <form method="post" class="card card-body bg-light">
+        {% csrf_token %}
+        <table class="table table-striped table-bordered table-hover">
+            <tbody>
+                <tr>
+                    <th>{% trans "Title" context "Product review title" %}</th>
+                    <td>{{ review.title }}</td>
+                </tr>
+                <tr>
+                    <th>{% trans "Product" %}</th>
+                    <td>{{ review.product.title }}</td>
+                </tr>
+                <tr>
+                    <th>{% trans "User" %}</th>
+                    <td>{{ review.user.reviewer_name|default:"-" }}</td>
+                </tr>
+                <tr>
+                    <th>{% trans "Score" %}</th>
+                    <td>{{ review.score|floatformat:1 }}</td>
+                </tr>
+                <tr>
+                    <th>{% trans "Votes" %}</th>
+                    <td>
+                        {{ review.total_votes }}
+                    </td>
+                </tr>
+                <tr>
+                    <th>
+                        {% trans "Status" %}
+                    </th>
+                    <td>
+                        {{ review.status }}
+                    </td>
+                </tr>
+                <tr>
+                    <th>
+                        {% trans "Date created" %}
+                    </th>
+                    <td>
+                        {{ review.date_created }}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <div class="form-actions">
+            <button class="btn btn-danger" type="submit" data-loading-text="{% trans 'Deleting...' %}">
+                {% trans "Delete" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:reviews-list' %}">
+                {% trans "cancel" %}
+            </a>
+        </div>
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/reviews/review_list.html b/tests/django_oscar/oscar/dashboard/reviews/review_list.html
new file mode 100644
index 0000000..3104970
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/reviews/review_list.html
@@ -0,0 +1,176 @@
+{% extends "oscar/dashboard/layout.html" %}
+{% load currency_filters %}
+{% load sorting_tags %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} reviews{% endblock %}
+{% block title %}
+    {% trans "Reviews" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Reviews" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <h1>{% trans "Reviews" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h3>
+            <i class="fas fa-search"></i>
+            {% trans "Review Search" %}
+        </h3>
+    </div>
+    <div class="card card-body">
+        <form method="get" class="form-inline">
+            {% include 'oscar/dashboard/partials/form_fields_inline.html' with form=form %}
+            <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Searching...' %}">
+                {% trans "Search" %}
+            </button>
+        </form>
+    </div>
+    {% if review_list %}
+        <form method="post">
+            {% csrf_token %}
+            <table class="table table-striped table-bordered table-hover">
+                <caption>
+                <h3 class="float-left">
+                    <i class="fas fa-thumbs-up"></i>
+                    {{ description }}
+                </h3>
+                <div class="float-right">
+                    <div class="form-inline">
+                        {% trans "Update status of selected reviews" %}
+                        {{ review_form.status }}
+                        <input type="hidden" name="action" value="update_selected_review_status" />
+                        <button type="submit"
+                                name="update"
+                                class="btn btn-success"
+                                data-loading-text="{% trans 'Updating...' %}">
+                            {% trans "Update" %}
+                        </button>
+                    </div>
+                </div>
+                </caption>
+                <tr>
+                    <th></th>
+                    <th>{% trans "Title" context "Review title" %}</th>
+                    <th>{% trans "Product" %}</th>
+                    <th>{% trans "User" %}</th>
+                    <th>{% anchor 'score' _("Score") %}</th>
+                    <th>{% anchor 'total_votes' _("Votes") %}</th>
+                    <th>{% trans "Status" %}</th>
+                    <th>{% anchor 'date_created' _("Date created") %}</th>
+                    <th></th>
+                </tr>
+                {% for review in review_list %}
+                    <tr>
+                        <td>
+                            <input type="checkbox"
+                                   name="selected_review"
+                                   class="selected_review"
+                                   value="{{ review.id }}"/>
+                        </td>
+                        <td>
+                            <a href="{% url 'dashboard:reviews-update' pk=review.id %}">
+                                {{ review.title }}
+                            </a>
+                        </td>
+                        <td>
+                            {% if review.product %}
+                                <a href='{{ review.product.get_absolute_url }}'>
+                                    {{ review.product.title }}
+                                </a>
+                            </td>
+                        {% else %}
+                            {% trans "[Product deleted]" %}
+                        {% endif %}
+                        <td>
+                            {% if not review.is_anonymous %}
+                                <a href="{% url 'dashboard:user-detail' pk=review.user.id %}">
+                                    {{ review.reviewer_name }}
+                                </a>
+                            {% else %}
+                                {{ review.name }}
+                            {% endif %}
+                        </td>
+                        <td>
+                            {{ review.score|floatformat:1 }} / {{ 5.0|floatformat:1 }}
+                        </td>
+                        <td>
+                            {{ review.total_votes }}
+                        </td>
+                        <td>
+                            {% if review.status == 1 %}
+                                <span class="badge badge-success">
+                                {% elif review.status == 2 %}
+                                    <span class="badge badge-danger">
+                                    {% else %}
+                                        <span class="badge badge-info">
+                                        {% endif %}
+                                        {{ review.get_status_display }}
+                                    </span>
+                                </td>
+                                <td>
+                                    {{ review.date_created }}
+                                </td>
+                                <td>
+                                    <div class="btn-toolbar">
+                                        <div class="dropdown">
+                                            <button class="btn btn-secondary dropdown-toggle"
+                                                    type="button"
+                                                    id="dropdownMenuButton"
+                                                    data-toggle="dropdown"
+                                                    aria-haspopup="true"
+                                                    aria-expanded="false">
+                                                {% trans "Actions" %}
+                                            </button>
+                                            <div class="dropdown-menu dropdown-menu-right"
+                                                 aria-labelledby="dropdownMenuButton">
+                                                {% if review.title and review.product %}
+                                                    <a class="dropdown-item"
+                                                       href="{% url 'catalogue:reviews-detail' product_slug=review.product.slug product_pk=review.product.id pk=review.id %}">
+                                                        {% trans "View on site" %}
+                                                    </a>
+                                                {% endif %}
+                                                <a class="dropdown-item"
+                                                   href="{% url 'dashboard:reviews-update' pk=review.id %}">
+                                                    {% trans "Edit" %}
+                                                </a>
+                                                <a class="dropdown-item"
+                                                   href="{% url 'dashboard:reviews-delete' pk=review.id %}">
+                                                    {% trans "Delete" %}
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </table>
+                    {% include "oscar/dashboard/partials/pagination.html" %}
+                </form>
+            {% else %}
+                <table class="table table-striped table-bordered table-hover">
+                    <caption>
+                    {{ description }}
+                    </caption>
+                    <tr>
+                        <td>
+                            {% trans "No reviews found." %}
+                        </td>
+                    </tr>
+                </table>
+            {% endif %}
+        {% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/reviews/review_update.html b/tests/django_oscar/oscar/dashboard/reviews/review_update.html
new file mode 100644
index 0000000..b373ef9
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/reviews/review_update.html
@@ -0,0 +1,96 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {% trans "Update review" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:reviews-list' %}">
+                    {% trans "Reviews" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% blocktrans %}
+                    Review #{{ review.id }}
+                {% endblocktrans %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% blocktrans with review_id=review.id %}
+        Review #{{ review_id }}
+    {% endblocktrans %}
+{% endblock %}
+{% block dashboard_content %}
+    <form method="post" class="form-stacked" enctype="multipart/form-data">
+        {% csrf_token %}
+        <div class="table-header">
+            <h3>{% trans "Review information" %}</h3>
+        </div>
+        <div class="card card-body bg-light">
+            <div class="clearfix">
+                {{ form.first }}
+                {% for field in form %}
+                    {# display title (first) and body (last) as full lines #}
+                    {% if forloop.counter < 3 %}
+                        <div class="form-group">
+                            {% if field.is_hidden %}
+                                {{ field }}
+                            {% else %}
+                                {{ field.label_tag }}
+                                <div class="controls">
+                                    {{ field }}
+                                    {% for error in field.errors %}
+                                        <span class="error-block">{{ error|escape }}</span>
+                                    {% endfor %}
+                                    {% if field.help_text %}
+                                        <small class="form-text text-muted">
+                                        {{ field.help_text }}
+                                        </small>
+                                    {% endif %}
+                                </div>
+                            {% endif %}
+                        </div>
+                    {% else %}
+                        <div class="form-inline float-left">
+                            {% if field.is_hidden %}
+                                {{ field }}
+                            {% else %}
+                                <span class="form-group">
+                                    {{ field.label_tag }}
+                                    {{ field }}
+                                    {% for error in field.errors %}
+                                        <ul class="error-block">
+                                            <li>
+                                                {{ error|escape }}
+                                            </li>
+                                        </ul>
+                                    {% endfor %}
+                                </span>
+                            {% endif %}
+                        </div>
+                    {% endif %}
+                {% endfor %}
+            </div>
+            <div class="form-actions">
+                <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Saving...' %}">
+                    {% trans "Save" %}
+                </button>
+                {% trans "or" %}
+                <a href="{% url 'dashboard:reviews-list' %}">
+                    {% trans "cancel" %}
+                </a>
+            </div>
+        </div>
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/shipping/messages/band_created.html b/tests/django_oscar/oscar/dashboard/shipping/messages/band_created.html
new file mode 100644
index 0000000..fd01709
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/messages/band_created.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+{% blocktrans with name=band.method.name %}
+    <p>
+        A weight band has been added to the
+        <strong>{{ name }}</strong>
+        shipping method.
+    </p>
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/dashboard/shipping/messages/band_deleted.html b/tests/django_oscar/oscar/dashboard/shipping/messages/band_deleted.html
new file mode 100644
index 0000000..c9c41e6
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/messages/band_deleted.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+{% blocktrans with name=band.method.name %}
+    <p>
+        Weight band deleted from the
+        <strong>{{ name }}</strong>
+        shipping method
+    {% endblocktrans %}
diff --git a/tests/django_oscar/oscar/dashboard/shipping/messages/band_updated.html b/tests/django_oscar/oscar/dashboard/shipping/messages/band_updated.html
new file mode 100644
index 0000000..7e7a6e4
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/messages/band_updated.html
@@ -0,0 +1,4 @@
+{% load i18n %}
+<p>
+    {% trans "Weight band updated" %}
+</p>
diff --git a/tests/django_oscar/oscar/dashboard/shipping/messages/method_created.html b/tests/django_oscar/oscar/dashboard/shipping/messages/method_created.html
new file mode 100644
index 0000000..ddf4fdf
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/messages/method_created.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+{% blocktrans with name=method.name %}
+    <p>
+        A shipping method
+        <strong>{{ name }}</strong>
+        has been created.
+    </p>
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/dashboard/shipping/messages/method_deleted.html b/tests/django_oscar/oscar/dashboard/shipping/messages/method_deleted.html
new file mode 100644
index 0000000..594f808
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/messages/method_deleted.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+{% blocktrans with name=method.name %}
+    <p>
+        The
+        <strong>{{ name }}</strong>
+        shipping method has been deleted.
+    </p>
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/dashboard/shipping/messages/method_updated.html b/tests/django_oscar/oscar/dashboard/shipping/messages/method_updated.html
new file mode 100644
index 0000000..b0dac56
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/messages/method_updated.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+{% blocktrans with name=method.name %}
+    <p>
+        The
+        <strong>{{ name }}</strong>
+        shipping method has been updated.
+    </p>
+{% endblocktrans %}
diff --git a/tests/django_oscar/oscar/dashboard/shipping/weight_band_delete.html b/tests/django_oscar/oscar/dashboard/shipping/weight_band_delete.html
new file mode 100644
index 0000000..a771b57
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/weight_band_delete.html
@@ -0,0 +1,64 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% load currency_filters %}
+{% block title %}
+    {% trans "Delete weight band?" %} |
+    {{ band.method.name }} |
+    {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:shipping-method-list' %}">
+                    {% trans "Shipping methods" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                {{ band.method.name }}
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Delete weight band?" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% trans "Delete weight band?" %}
+{% endblock %}
+{% block dashboard_content %}
+    <table class="table table-bordered">
+        <thead>
+            <tr>
+                <th>{% trans "Weight range (kg)" %}</th>
+                <th>{% trans "Charge" %}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>{{ band.weight_from|floatformat:3 }} - {{ band.weight_to|floatformat:3 }}</td>
+                <td>{{ band.charge|currency }}</td>
+            </tr>
+        </tbody>
+    </table>
+    <form method="post" class="card card-body bg-light">
+        <p>
+            {% trans "Are you sure you want to delete this weight band method?" %}
+        </p>
+        {% csrf_token %}
+        <div class="form-actions">
+            <button class="btn btn-danger" type="submit" data-loading-text="{% trans 'Deleting...' %}">
+                {% trans "Delete" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:shipping-method-detail' pk=band.method.pk %}">
+                {% trans "cancel" %}
+            </a>
+        </div>
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/shipping/weight_band_form.html b/tests/django_oscar/oscar/dashboard/shipping/weight_band_form.html
new file mode 100644
index 0000000..7a32ba1
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/weight_band_form.html
@@ -0,0 +1,52 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% load currency_filters %}
+{% block title %}
+    {% trans "Edit weight band" %} |
+    {{ band.method.name }} |
+    {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:shipping-method-list' %}">
+                    {% trans "Shipping methods" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                {{ band.method.name }}
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Edit weight band" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% trans "Edit weight band" %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="card card-body bg-light">
+        <form method="post" class="form-stacked">
+            {% csrf_token %}
+            {% include "oscar/dashboard/partials/form_fields.html" with form=form %}
+            {% block form_actions %}
+                <div class="form-actions">
+                    <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Saving...' %}">
+                        {% trans "Save" %}
+                    </button>
+                    {% trans "or" %}
+                    <a href="{% url 'dashboard:shipping-method-list' %}">
+                        {% trans "cancel" %}
+                    </a>
+                </div>
+            {% endblock form_actions %}
+        </form>
+    </div>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/shipping/weight_based_delete.html b/tests/django_oscar/oscar/dashboard/shipping/weight_based_delete.html
new file mode 100644
index 0000000..761f51b
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/weight_based_delete.html
@@ -0,0 +1,48 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {% blocktrans with name=method.name %}
+        Delete shipping method '{{ name }}'?
+    {% endblocktrans %}
+    | {% trans "Shipping methods" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:shipping-method-list' %}">
+                    {% trans "Shipping methods" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                {{ method.name }}
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Delete?" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ method.name }}{% endblock %}
+{% block dashboard_content %}
+    <form method="post" class="card card-body bg-light">
+        <p>
+            {% trans "Are you sure you want to delete this shipping method?" %}
+        </p>
+        {% csrf_token %}
+        <div class="form-actions">
+            <button class="btn btn-danger" type="submit" data-loading-text="{% trans 'Deleting...' %}">
+                {% trans "Delete" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:shipping-method-list' %}">
+                {% trans "cancel" %}
+            </a>
+        </div>
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/shipping/weight_based_detail.html b/tests/django_oscar/oscar/dashboard/shipping/weight_based_detail.html
new file mode 100644
index 0000000..9ac63bc
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/weight_based_detail.html
@@ -0,0 +1,115 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% load currency_filters %}
+{% block title %}{{ method.name }} | {{ block.super }}{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:shipping-method-list' %}">
+                    {% trans "Shipping methods" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ method.name }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ method.name }}{% endblock %}
+{% block dashboard_content %}
+    <div class="card card-body bg-light">
+        <h2>{% trans "Shipping method" %}</h2>
+        <table class="table table-bordered">
+            <tbody>
+                <tr>
+                    <th>{% trans "Name" %}</th>
+                    <td>{{ method.name }}</td>
+                </tr>
+                <tr>
+                    <th>{% trans "Description" %}</th>
+                    <td>{{ method.description|safe|default:"-" }}</td>
+                </tr>
+                {% with countries=method.countries.all %}
+                {% if countries %}
+                    <tr>
+                        <th>{% trans "Applies to countries" %}</th>
+                        <td>{{ countries|join:", " }}</td>
+                    </tr>
+                {% endif %}
+            {% endwith %}
+            <tr>
+                <th>{% trans "Default product weight (kg)" %}</th>
+                <td>{{ method.default_weight }}</td>
+            </tr>
+        </tbody>
+    </table>
+    <p>
+        <a id="edit_method" href="{% url 'dashboard:shipping-method-edit' pk=method.pk %}" class="btn btn-primary">
+            {% trans 'Edit shipping method' %}
+        </a>
+        <a id="delete_method" href="{% url 'dashboard:shipping-method-delete' pk=method.pk %}" class="btn btn-danger">
+            {% trans 'Delete shipping method' %}
+        </a>
+    </p>
+    <h2>{% trans "Weight bands" %}</h2>
+    {% if method.bands.all.count %}
+        <table class="table table-bordered">
+            <thead>
+                <tr>
+                    <th>
+                        {% trans "Weight range (kg)" %}
+                    </th>
+                    <th>
+                        {% trans "Charge" %}
+                    </th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for band in method.bands.all %}
+                    <tr>
+                        <td>
+                            {{ band.weight_from|floatformat:3 }} - {{ band.weight_to|floatformat:3 }}
+                        </td>
+                        <td>
+                            {{ band.charge|currency }}
+                        </td>
+                        <td>
+                            <a id="edit_band_{{ band.id }}"
+                               href="{% url 'dashboard:shipping-method-band-edit' method_pk=band.method.pk pk=band.pk %}"
+                               class="btn btn-primary">
+                                {% trans "Edit" %}
+                            </a>
+                            <a id="delete_band_{{ band.id }}"
+                               href="{% url 'dashboard:shipping-method-band-delete' method_pk=band.method.pk pk=band.pk %}"
+                               class="btn btn-danger">
+                                {% trans "Delete" %}
+                            </a>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    {% else %}
+        <p>
+            {% trans "No weight bands have been added yet." %}
+        </p>
+    {% endif %}
+    <h2>
+        {% trans "Add a new weight band" %}
+    </h2>
+    <form method="post">
+        {% csrf_token %}
+        {% include "oscar/dashboard/partials/form_fields.html" with form=form %}
+        <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Adding...' %}">
+            {% trans 'Add weight band' %}
+        </button>
+    </form>
+</div>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/shipping/weight_based_form.html b/tests/django_oscar/oscar/dashboard/shipping/weight_based_form.html
new file mode 100644
index 0000000..e0a73d1
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/weight_based_form.html
@@ -0,0 +1,63 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% load currency_filters %}
+{% block title %}
+    {% if method %}
+        {{ method.name }}
+    {% else %}
+        {% trans "Create a new shipping method" %}
+    {% endif %}
+    | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:shipping-method-list' %}">
+                    {% trans "Shipping methods" %}
+                </a>
+            </li>
+            {% if method %}
+                <li class="breadcrumb-item">
+                    {{ method.name }}
+                </li>
+                <li class="breadcrumb-item active" aria-current="page">
+                    {% trans "Edit" %}
+                </li>
+            {% else %}
+                <li class="breadcrumb-item active" aria-current="page">
+                    {% trans "Create a new shipping method" %}
+                </li>
+            {% endif %}
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% if method %}
+        {{ method.name }}
+    {% else %}
+        {% trans "Create a new shipping method" %}
+    {% endif %}
+{% endblock %}
+{% block dashboard_content %}
+    <form method="post" class="form-stacked card card-body bg-light wysiwyg">
+        {% csrf_token %}
+        {% include "oscar/dashboard/partials/form_fields.html" with form=form %}
+        {% block form_actions %}
+            <div class="form-actions">
+                <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Saving...' %}">
+                    {% trans "Save" %}
+                </button>
+                {% trans "or" %}
+                <a href="{% url 'dashboard:shipping-method-list' %}">
+                    {% trans "cancel" %}
+                </a>
+            </div>
+        {% endblock form_actions %}
+    </form>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/shipping/weight_based_list.html b/tests/django_oscar/oscar/dashboard/shipping/weight_based_list.html
new file mode 100644
index 0000000..995efbd
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/shipping/weight_based_list.html
@@ -0,0 +1,78 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% load currency_filters %}
+{% block title %}
+    {% trans "Shipping methods" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Shipping methods" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <a id="create_new_shipping_method"
+           href="{% url 'dashboard:shipping-method-create' %}"
+           class="btn btn-primary float-right">
+            <i class="fas fa-plus-circle"></i>
+            {% trans "Create new shipping charge" %}
+        </a>
+        <h1>{% trans "Shipping methods" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <table class="table table-striped table-bordered">
+        <caption>
+        <i class="fas fa-truck"></i>
+        {% trans "Shipping methods" %}
+        </caption>
+        {% if methods %}
+            <thead>
+                <tr>
+                    <th>{% trans "Name" %}</th>
+                    <th>{% trans "Number of weight bands" %}</th>
+                    <th>{% trans "Default weight (kg)" %}</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for method in methods %}
+                    <tr>
+                        <td>
+                            <a href="{% url 'dashboard:shipping-method-detail' pk=method.pk %}">
+                                {{ method.name }}
+                            </a>
+                        </td>
+                        <td>{{ method.num_bands }}</td>
+                        <td>{{ method.default_weight }}</td>
+                        <td>
+                            <a href="{% url 'dashboard:shipping-method-detail' pk=method.pk %}"
+                               class="btn btn-secondary">
+                                {% trans "View" %}
+                            </a>
+                            <a href="{% url 'dashboard:shipping-method-edit' pk=method.pk %}" class="btn btn-primary">
+                                {% trans "Edit" %}
+                            </a>
+                            <a href="{% url 'dashboard:shipping-method-delete' pk=method.pk %}" class="btn btn-danger">
+                                {% trans "Delete" %}
+                            </a>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        {% else %}
+            <tr>
+                <td>{% trans "No shipping methods found." %}</td>
+            </tr>
+        {% endif %}
+    </table>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/table.html b/tests/django_oscar/oscar/dashboard/table.html
new file mode 100644
index 0000000..bfa4d08
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/table.html
@@ -0,0 +1,33 @@
+{% extends 'django_tables2/table.html' %}
+{% load django_tables2 %}
+{% load i18n %}
+{% block table.thead %}
+    <caption>
+    {% block table.caption %}
+        <h3 class="float-left">
+            {% if table.icon %}<i class="{{ table.icon }}"></i>{% endif %}
+            {{ table.get_caption_display }}
+        </h3>
+    {% endblock %}
+    </caption>
+    <thead>
+        <tr>
+            {% for column in table.columns %}
+                {% if column.orderable %}
+                    <th {{ column.attrs.th.as_html }}>
+                        <a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}">
+                            {{ column.header }}
+                            <span></span>
+                        </a>
+                    </th>
+                {% else %}
+                    <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
+                {% endif %}
+            {% endfor %}
+        </tr>
+    </thead>
+{% endblock table.thead %}
+{% block pagination %}
+    {% with page_obj=table.page paginator=table.paginator %}
+    {% include "oscar/dashboard/partials/pagination.html" %}{% endwith %}
+{% endblock pagination %}
diff --git a/tests/django_oscar/oscar/dashboard/users/alerts/delete.html b/tests/django_oscar/oscar/dashboard/users/alerts/delete.html
new file mode 100644
index 0000000..a03510a
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/users/alerts/delete.html
@@ -0,0 +1,62 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page users{% endblock %}
+{% block title %}
+    {% blocktrans with id=alert.id %}
+        Alert #{{ id }}
+    {% endblocktrans %}
+    | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:user-alert-list' %}">
+                    {% trans "Product alerts" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% blocktrans with id=alert.id %}
+                    Alert #{{ id }}
+                {% endblocktrans %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% blocktrans with id=alert.id %}
+        Delete alert #{{ id }}?
+    {% endblocktrans %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2>
+            {% blocktrans with id=alert.id %}
+                Product alert #{{ id }}
+            {% endblocktrans %}
+        </h2>
+    </div>
+    <div class="card card-body bg-light">
+        {% include 'oscar/dashboard/users/alerts/partials/alert.html' %}
+        <form method="post">
+            {% csrf_token %}
+            <div class="form-actions">
+                <p>
+                    {% trans "Are you sure that you want to delete this alert?" %}
+                </p>
+                <button type='submit' class="btn btn-danger" data-loading-text="{% trans 'Deleting...' %}">
+                    {% trans "Delete" %}
+                </button>
+                {% trans "or" %}
+                <a href="{% url 'dashboard:user-alert-list' %}">
+                    {% trans "cancel" %}
+                </a>
+            </div>
+        </form>
+    </div>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/users/alerts/list.html b/tests/django_oscar/oscar/dashboard/users/alerts/list.html
new file mode 100644
index 0000000..5fdae5e
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/users/alerts/list.html
@@ -0,0 +1,114 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% load currency_filters %}
+{% block body_class %}{{ block.super }} users{% endblock %}
+{% block title %}
+    {% trans "Product alerts" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Product alerts" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% trans "Product alerts" %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h3>
+            <i class="fas fa-search"></i>
+            {% trans "Search product alerts" %}
+        </h3>
+    </div>
+    <div class="card card-body">
+        <form method="get" class="form-inline">
+            {% include "oscar/dashboard/partials/form_fields_inline.html" with form=form %}
+            <button type="submit" class="btn btn-primary mr-2" data-loading-text="{% trans 'Searching...' %}">
+                {% trans "Search" %}
+            </button>
+            {% trans "or" %}
+            <a href="{% url 'dashboard:user-alert-list' %}" class="btn btn-secondary ml-2">
+                {% trans "reset" %}
+            </a>
+        </form>
+    </div>
+    <div class="table-header">
+        <h2>
+            <i class="fas fa-users"></i>
+            {{ queryset_description }}
+        </h2>
+    </div>
+    {% if alerts %}
+        <table class="table table-striped table-bordered table-hover">
+            <tr>
+                <th>{% trans "Product" %}</th>
+                <th>{% trans "User" %}</th>
+                <th>{% trans "Status" %}</th>
+                <th>{% trans "Date created" %}</th>
+                <th>{% trans "Date alert sent" %}</th>
+                <th></th>
+            </tr>
+            {% for alert in alerts %}
+                <tr>
+                    <td>
+                        <a href="{{ alert.product.get_absolute_url }}">
+                            {{ alert.product }}
+                        </a>
+                    </td>
+                    <td>
+                        {% if alert.user %}
+                            <a href="{% url 'dashboard:user-detail' pk=alert.user.id %}">
+                                {{ alert.user.email }}
+                            </a>
+                        {% else %}
+                            {{ alert.email }} {% trans "(Anonymous)" %}
+                        {% endif %}
+                    </td>
+                    <td>{{ alert.status }}</td>
+                    <td>{{ alert.date_created }}</td>
+                    <td>{{ alert.date_closed|default:"-" }}</td>
+                    <td>
+                        <div class="btn-toolbar">
+                            <div class="dropdown">
+                                <button class="btn btn-secondary dropdown-toggle"
+                                        type="button"
+                                        id="dropdownMenuButton"
+                                        data-toggle="dropdown"
+                                        aria-haspopup="true"
+                                        aria-expanded="false">
+                                    {% trans "Actions" %}
+                                </button>
+                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                    <a class="dropdown-item"
+                                       href="{% url 'dashboard:user-alert-update' pk=alert.id %}">
+                                        {% trans "Edit" %}
+                                    </a>
+                                    <a class="dropdown-item"
+                                       href="{% url 'dashboard:user-alert-delete' pk=alert.id %}">
+                                        {% trans "Delete" %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </table>
+        {% include "oscar/dashboard/partials/pagination.html" %}
+    {% else %}
+        <table class="table table-striped table-bordered table-hover">
+            <tr>
+                <td>{% trans "No alerts found." %}</td>
+            </tr>
+        </table>
+    {% endif %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/users/alerts/partials/alert.html b/tests/django_oscar/oscar/dashboard/users/alerts/partials/alert.html
new file mode 100644
index 0000000..a85bb7b
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/users/alerts/partials/alert.html
@@ -0,0 +1,52 @@
+{% load i18n %}
+<table class="table table-striped table-bordered table-hover">
+    <tbody>
+        <tr>
+            <th>{% trans "Product" %}</th>
+            <td>
+                <a href="{{ alert.product.get_absolute_url }}">
+                    {{ alert.product }}
+                </a>
+            </td>
+        </tr>
+        <tr>
+            <th>{% trans "User" %}</th>
+            <td>
+                {% if alert.user %}
+                    {{ alert.user }}
+                {% else %}
+                    {{ alert.email }}
+                {% endif %}
+            </td>
+        </tr>
+        <tr>
+            <th>{% trans "Status" %}</th>
+            <td>{{ alert.status }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "Date created" %}</th>
+            <td>{{ alert.date_created }}</td>
+        </tr>
+        {% if not alert.user %}
+            <tr>
+                <th>{% trans "Date confirmed" %}</th>
+                <td>{{ alert.date_confirmed|default:"-" }}</td>
+            </tr>
+        {% endif %}
+        {% if alert.is_cancelled %}
+            <tr>
+                <th>{% trans "Date cancelled" %}</th>
+                <td>{{ alert.date_cancelled }}</td>
+            </tr>
+        {% else %}
+            <tr>
+                <th>
+                    {% trans "Date alert sent" %}
+                </th>
+                <td>
+                    {{ alert.date_closed|default:"-" }}
+                </td>
+            </tr>
+        {% endif %}
+    </tbody>
+</table>
diff --git a/tests/django_oscar/oscar/dashboard/users/alerts/update.html b/tests/django_oscar/oscar/dashboard/users/alerts/update.html
new file mode 100644
index 0000000..ffdafbc
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/users/alerts/update.html
@@ -0,0 +1,56 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} users{% endblock %}
+{% block title %}
+    {% blocktrans with id=alert.id %}
+        Update alert #{{ id }}
+    {% endblocktrans %}
+    | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:user-alert-list' %}">
+                    {% trans "Product alerts" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% blocktrans with id=alert.id %}
+                    Alert #{{ id }}
+                {% endblocktrans %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% blocktrans with id=alert.id %}
+        Product alert #{{ id }}
+    {% endblocktrans %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2 class="float-left">
+            {% blocktrans with id=alert.id %}
+                Product alert #{{ id }}
+            {% endblocktrans %}
+        </h2>
+        <div class="float-right">
+            <form method="post" class="form-inline">
+                {% csrf_token %}
+                {% include 'oscar/dashboard/partials/form_fields_inline.html' %}
+                <button type='submit' class="btn btn-primary" data-loading-text="{% trans 'Saving...' %}">
+                    {% trans "Save" %}
+                </button>
+                <a href="{% url 'dashboard:user-alert-list' %}" class="btn btn-secondary">
+                    {% trans "cancel" %}
+                </a>
+            </form>
+        </div>
+    </div>
+    {% include 'oscar/dashboard/users/alerts/partials/alert.html' %}{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/users/detail.html b/tests/django_oscar/oscar/dashboard/users/detail.html
new file mode 100644
index 0000000..1285e40
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/users/detail.html
@@ -0,0 +1,310 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} users{% endblock %}
+{% block title %}{{ customer.email }} | {{ block.super }}{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:users-index' %}">
+                    {% trans "Customers" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ customer.email }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ customer.email }}{% endblock %}
+{% block dashboard_content %}
+    <div class="row">
+        {% block user_general_info %}
+            <div class="col-md-12">
+                <div class="table-header">
+                    <h2>{% trans "General" %}</h2>
+                </div>
+                <table class="table table-bordered">
+                    <tr>
+                        <th>{% trans "Name" %}</th>
+                        <td>{{ customer.get_full_name|default:"-" }}</td>
+                    </tr>
+                    <tr>
+                        <th>{% trans "Email" %}</th>
+                        <td>{{ customer.email }}</td>
+                    </tr>
+                    <tr>
+                        <th>{% trans "Active" %}?</th>
+                        <td>{{ customer.is_active|yesno:_("Yes,No") }}</td>
+                    </tr>
+                    <tr>
+                        <th>{% trans "Superuser" %}?</th>
+                        <td>{{ customer.is_superuser|yesno:_("True,False") }}</td>
+                    </tr>
+                    <tr>
+                        <th>{% trans "Staff" %}?</th>
+                        <td>
+                            {{ customer.is_staff|yesno:_("True,False") }}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>
+                            {% trans "Last login" %}
+                        </th>
+                        <td>
+                            {{ customer.last_login }}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>
+                            {% trans "Date joined" %}
+                        </th>
+                        <td>
+                            {{ customer.date_joined }}
+                        </td>
+                    </tr>
+                    {% if customer.userrecord %}
+                        {% with record=customer.userrecord %}
+                        <tr>
+                            <th>
+                                {% trans "Products viewed" %}
+                            </th>
+                            <td>
+                                {{ record.num_product_views|default:0 }}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th>
+                                {% trans "Number of orders" %}
+                            </th>
+                            <td>
+                                {{ record.num_orders|default:0 }}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th>
+                                {% trans "Number of ordered items" %}
+                            </th>
+                            <td>
+                                {{ record.num_order_items|default:0 }}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th>
+                                {% trans "Total spent" %}
+                            </th>
+                            <td>
+                                {{ record.total_spent|default:0|currency }}
+                            </td>
+                        </tr>
+                    {% endwith %}
+                {% endif %}
+                <tr>
+                    <th>
+                        {% trans "Reviews written" %}
+                    </th>
+                    <td>
+                        {{ customer.reviews.count }}
+                    </td>
+                </tr>
+                {% if customer.email %}
+                    <tr>
+                        <th>
+                            {% trans "Actions" %}
+                        </th>
+                        <td>
+                            <form id="password_reset_form"
+                                  action="{% url 'dashboard:user-password-reset' pk=customer.id %}"
+                                  method="post">
+                                {% csrf_token %}
+                                <button type="submit"
+                                        class="btn btn-primary"
+                                        data-loading-text="{% trans 'Sending...' %}">
+                                    {% trans 'Send password reset email' %}
+                                </button>
+                            </form>
+                        </td>
+                    </tr>
+                {% endif %}
+            </table>
+        </div>
+    {% endblock %}
+</div>
+<div class="row">
+    {% block user_additional_info %}
+        <div class="tabbable dashboard col-md-12">
+            {% block tab_nav %}
+                <ul class="nav nav-tabs mb-0" role="tablist">
+                    <li class="nav-item">
+                        <a class="nav-link active" href="#user_orders" data-toggle="tab">
+                            {% trans "Orders" %}
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#user_addresses" data-toggle="tab">
+                            {% trans "Addresses" %}
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#user_reviews" data-toggle="tab">
+                            {% trans "Reviews" %}
+                        </a>
+                    </li>
+                </ul>
+            {% endblock %}
+            <div class="tab-content">
+                {% block user_orders %}
+                    <div id="user_orders" class="tab-pane fade show active" role="tabpanel">
+                        <table class="table table-striped table-bordered table-hover">
+                            <caption>
+                            {% trans "Orders" %}
+                            </caption>
+                            {% with orders=customer.orders.all %}
+                            {% if orders %}
+                                <tr>
+                                    <th>
+                                        {% trans "Order Number" %}
+                                    </th>
+                                    <th>
+                                        {% trans "Num items" %}
+                                    </th>
+                                    <th>
+                                        {% trans "Total value" %}
+                                    </th>
+                                    <th>
+                                        {% trans "Date placed" %}
+                                    </th>
+                                    <th>
+                                        {% trans "Status" %}
+                                    </th>
+                                    <th></th>
+                                </tr>
+                                {% for order in orders %}
+                                    <tr>
+                                        <td>
+                                            <a href="{% url 'dashboard:order-detail' order.number %}">
+                                                {{ order.number }}
+                                            </a>
+                                        </td>
+                                        <td>
+                                            {{ order.num_items }}
+                                        </td>
+                                        <td>
+                                            {{ order.basket_total_incl_tax|currency }}
+                                        </td>
+                                        <td>
+                                            {{ order.date_placed|date }}
+                                        </td>
+                                        <td>
+                                            {{ order.status|default:"-" }}
+                                        </td>
+                                        <td>
+                                            <a href="{% url 'dashboard:order-detail' number=order.number %}"
+                                               class="btn btn-info">
+                                                {% trans "View" %}
+                                            </a>
+                                        </td>
+                                    </tr>
+                                {% endfor %}
+                            {% else %}
+                                <tr>
+                                    <td>
+                                        {% trans "This customer has not placed any orders yet." %}
+                                    </td>
+                                </tr>
+                            {% endif %}
+                        {% endwith %}
+                    </table>
+                </div>
+            {% endblock %}
+            {% block user_addresses %}
+                <div id="user_addresses" class="tab-pane fade" role="tabpanel">
+                    <h2>
+                        {% trans "Addresses" %}
+                    </h2>
+                    <div class="row">
+                        {% for address in customer.addresses.all %}
+                            <div class="col-md-3">
+                                <div class="card card-body bg-info">
+                                    {% for field in address.active_address_fields %}
+                                        {{ field }}
+                                        <br/>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                            {% if forloop.counter|divisibleby:4 %}
+                            </div>
+                            <div class="row">
+                            {% endif %}
+                            {% empty %}
+                            <p>
+                                {% trans "This customer has not saved any addresses." %}
+                            </p>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endblock %}
+            {% block user_reviews %}
+                <div id="user_reviews" class="tab-pane fade" role="tabpanel">
+                    <table class="table table-striped table-bordered table-hover">
+                        <caption>
+                        {% trans "Reviews" %}
+                        </caption>
+                        {% if customer.reviews.count %}
+                            <tr>
+                                <th>
+                                    {% trans "Product ID" %}
+                                </th>
+                                <th>
+                                    {% trans "Score" %}
+                                </th>
+                                <th>
+                                    {% trans "Title" context "Product review title" %}
+                                </th>
+                                <th>
+                                    {% trans "Body" %}
+                                </th>
+                                <th>
+                                    {% trans "Date created" %}
+                                </th>
+                            </tr>
+                            {% for review in customer.reviews.all %}
+                                <tr>
+                                    <td>
+                                        {{ review.product_id }}
+                                    </td>
+                                    <td>
+                                        {{ review.score }}
+                                    </td>
+                                    <td>
+                                        {{ review.title }}
+                                    </td>
+                                    <td>
+                                        {{ review.body }}
+                                    </td>
+                                    <td>
+                                        {{ review.date_created }}
+                                    </td>
+                                </tr>
+                            {% endfor %}
+                        {% else %}
+                            <tr>
+                                <td>
+                                    {% trans "This customer has not written any reviews yet." %}
+                                </td>
+                            </tr>
+                        {% endif %}
+                    </table>
+                </div>
+            {% endblock %}
+        </div>
+    </div>
+</div>
+{% endblock %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/users/index.html b/tests/django_oscar/oscar/dashboard/users/index.html
new file mode 100644
index 0000000..4fe42d2
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/users/index.html
@@ -0,0 +1,66 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load dashboard_tags %}
+{% load i18n %}
+{% load render_table from django_tables2 %}
+{% block body_class %}{{ block.super }} users{% endblock %}
+{% block title %}
+    {% trans "Customers" %} | {{ block.super }}
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <h1>{% trans "Customers" %}</h1>
+    </div>
+{% endblock header %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Customers" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h3>
+            <i class="fas fa-search"></i>
+            {% trans "Search" %}
+        </h3>
+    </div>
+    <div class="card card-body">
+        <form method="get" class="form-inline">
+            {% include "oscar/dashboard/partials/form_fields_inline.html" with form=form %}
+            <button type="submit"
+                    name="search"
+                    class="btn btn-primary mr-2"
+                    data-loading-text="{% trans 'Searching...' %}">
+                {% trans "Search" %}
+            </button>
+            <a href="{% url 'dashboard:users-index' %}" class="btn btn-secondary">
+                {% trans "Reset" %}
+            </a>
+        </form>
+    </div>
+    {% block users_list %}
+        {% if users.data %}
+            <form id="user_list_form" method="post" class="form-inline">
+                {% csrf_token %}
+                {% render_table users %}
+            </form>
+        {% else %}
+            <table class="table table-striped table-bordered table-hover">
+                <caption>
+                {{ queryset_description }}
+                </caption>
+                <tr>
+                    <td>{% trans "No customers found." %}</td>
+                </tr>
+            </table>
+        {% endif %}
+    {% endblock %}
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/users/table.html b/tests/django_oscar/oscar/dashboard/users/table.html
new file mode 100644
index 0000000..90c71dc
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/users/table.html
@@ -0,0 +1,31 @@
+{% extends 'oscar/dashboard/table.html' %}
+{% load i18n %}
+{% block table.caption %}
+    {{ block.super }}
+    <div class="float-right">
+        <div class="form-inline">
+            <i class="fas fa-sync-alt mr-1"></i>
+            <span class="mr-2">{% trans "Bulk Actions" %}</span>
+            <label class="mr-3">
+                {% trans "With selected customers:" %}
+            </label>
+            <div class="form-check mr-2">
+                <input id="make_active_check" class="form-check-input" type="radio" name="action" value="make_active"/>
+                <label class="form-check-label" for="make_active_check">
+                    {% trans "Make active" %}
+                </label>
+            </div>
+            <div class="form-check mr-2">
+                <input id="make_inactive_check"
+                       class="form-check-input"
+                       type="radio"
+                       name="action"
+                       value="make_inactive"/>
+                <label class="form-check-label" for="make_inactive_check">
+                    {% trans "Make inactive" %}
+                </label>
+            </div>
+            <input type="submit" value="{% trans "Go!" %}" class="btn btn-primary" />
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/dashboard/users/user_row_actions.html b/tests/django_oscar/oscar/dashboard/users/user_row_actions.html
new file mode 100644
index 0000000..e8e67f8
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/users/user_row_actions.html
@@ -0,0 +1,4 @@
+{% load i18n %}
+<a href="{% url 'dashboard:user-detail' pk=record.id %}" class="btn btn-secondary">
+    {% trans "View" %}
+</a>
diff --git a/tests/django_oscar/oscar/dashboard/users/user_row_checkbox.html b/tests/django_oscar/oscar/dashboard/users/user_row_checkbox.html
new file mode 100644
index 0000000..d271d81
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/users/user_row_checkbox.html
@@ -0,0 +1 @@
+<input type="checkbox" name="selected_user" class="selected_user" value="{{ record.id }}"/>
diff --git a/tests/django_oscar/oscar/dashboard/vouchers/partials/voucher_details_table.html b/tests/django_oscar/oscar/dashboard/vouchers/partials/voucher_details_table.html
new file mode 100644
index 0000000..3f8f2cb
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/vouchers/partials/voucher_details_table.html
@@ -0,0 +1,45 @@
+{% load i18n %}
+<table class="table table-striped table-bordered table-hover">
+    <tbody>
+        {% if voucher.voucher_set %}
+            <tr>
+                <th>{% trans "Voucher set" %}</th>
+                <td>
+                    <a href="{% url 'dashboard:voucher-set-detail' pk=voucher.voucher_set.pk %}">
+                        {{ voucher.voucher_set.name }}
+                    </a>
+                </td>
+            </tr>
+        {% endif %}
+        <tr>
+            <th>{% trans "Name" %}</th>
+            <td>{{ voucher.name }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "Code" %}</th>
+            <td>{{ voucher.code }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "Start datetime" %}</th>
+            <td>{{ voucher.start_datetime }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "End datetime" %}</th>
+            <td>{{ voucher.end_datetime }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "Usage" %}</th>
+            <td>
+                {{ voucher.get_usage_display }}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {% trans "Number of offers" %}
+            </th>
+            <td>
+                {{ voucher.offers.count }}
+            </td>
+        </tr>
+    </tbody>
+</table>
diff --git a/tests/django_oscar/oscar/dashboard/vouchers/partials/voucher_set_details_table.html b/tests/django_oscar/oscar/dashboard/vouchers/partials/voucher_set_details_table.html
new file mode 100644
index 0000000..de36e94
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/vouchers/partials/voucher_set_details_table.html
@@ -0,0 +1,66 @@
+{% load i18n %}
+<table class="table table-striped table-bordered">
+    <caption>
+    <h3>{% trans "Voucher set" %}</h3>
+    </caption>
+    <tbody>
+        <tr>
+            <th>{% trans "Title" %}</th>
+            <td>{{ voucher_set.name }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "Start" %}</th>
+            <td>{{ voucher_set.start_datetime }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "End" %}</th>
+            <td>{{ voucher_set.end_datetime }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "Description" %}</th>
+            <td>{{ voucher_set.description }}</td>
+        </tr>
+        <tr>
+            <th>{% trans "Number of vouchers" %}</th>
+            <td>
+                {{ voucher_set.count }}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {% trans "Number of offers" %}
+            </th>
+            <td>
+                {{ voucher_set.vouchers.first.offers.count|default:0 }}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {% trans "Status" %}
+            </th>
+            <td>
+                {% if voucher_set.is_active %}
+                    <span class="badge badge-success">{% trans "Active" %}</span>
+                {% else %}
+                    <span class="badge badge-secondary">{% trans "Inactive" %}</span>
+                {% endif %}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {% trans "Created" %}
+            </th>
+            <td>
+                {{ voucher_set.date_created }}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {% trans "Usage" %}
+            </th>
+            <td>
+                {{ voucher_set.vouchers.first.get_usage_display }}
+            </td>
+        </tr>
+    </tbody>
+</table>
diff --git a/tests/django_oscar/oscar/dashboard/vouchers/voucher_delete.html b/tests/django_oscar/oscar/dashboard/vouchers/voucher_delete.html
new file mode 100644
index 0000000..9a5a3a9
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/vouchers/voucher_delete.html
@@ -0,0 +1,72 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {% if not voucher.voucher_set %}
+        {% blocktrans with name=voucher.name %}
+            Delete voucher '{{ name }}'?
+        {% endblocktrans %}
+        | {% trans "Vouchers" %} | {{ block.super }}
+    {% else %}
+        {% blocktrans with code=voucher.code %}
+            Delete voucher '{{ code }}'?
+        {% endblocktrans %}
+        | {% trans "Vouchers" %} | {{ block.super }}
+    {% endif %}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:voucher-list' %}">
+                    {% trans "Vouchers" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:voucher-stats' pk=voucher.pk %}">
+                    {{ voucher }}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Delete?" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% if not voucher.voucher_set %}
+        {% blocktrans with name=voucher.name %}
+            Delete voucher '{{ name }}'?
+        {% endblocktrans %}
+    {% else %}
+        {% blocktrans with code=voucher.code %}
+            Delete voucher '{{ code }}' from set?
+        {% endblocktrans %}
+    {% endif %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2>{% trans "Voucher details" %}</h2>
+    </div>
+    <div class="card card-body bg-light">
+        {% include "oscar/dashboard/vouchers/partials/voucher_details_table.html" %}
+        <form method="post">
+            {% csrf_token %}
+            <div class="form-actions">
+                <button class="btn btn-danger" type="submit" data-loading-text="{% trans 'Deleting...' %}">
+                    {% trans "Delete" %}
+                </button>
+                {% trans "or" %}
+                <a href="{% if not voucher.voucher_set %}{% url 'dashboard:voucher-list' %}{% else %}{% url 'dashboard:voucher-set-detail' pk=voucher.voucher_set.pk %}{% endif %}">
+                {% trans "cancel" %}
+            </a>
+        </div>
+    </form>
+</div>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/vouchers/voucher_detail.html b/tests/django_oscar/oscar/dashboard/vouchers/voucher_detail.html
new file mode 100644
index 0000000..3e8447e
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/vouchers/voucher_detail.html
@@ -0,0 +1,212 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block title %}
+    {{ voucher }} | {% trans "Vouchers" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:voucher-list' %}">
+                    {% trans "Vouchers" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ voucher }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ voucher }}{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2>{% trans "Voucher details" %}</h2>
+    </div>
+    {% include "oscar/dashboard/vouchers/partials/voucher_details_table.html" %}
+    <div class="table-header">
+        <h2>{% trans "Attached offers" %}</h2>
+    </div>
+    <table class="table table-striped table-bordered table-hover">
+        {% if voucher.offers.exists %}
+            <thead>
+                <tr>
+                    <th>{% trans "Offer name" %}</th>
+                    <th>{% trans "Start date" %}</th>
+                    <th>{% trans "End date" %}</th>
+                    <th>{% trans "Is available?" %}</th>
+                    <th>{% trans "Priority" %}</th>
+                    <th>{% trans "Incentive" %}</th>
+                    <th>{% trans "Condition" %}</th>
+                    <th>{% trans "Restrictions" %}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for offer in voucher.offers.all %}
+                    <tr>
+                        <td>
+                            <a href="{% url 'dashboard:offer-detail' pk=offer.pk %}">
+                                {{ offer.name }}
+                            </a>
+                        </td>
+                        <td>
+                            {{ offer.start_datetime|default:"-" }}
+                        </td>
+                        <td>
+                            {{ offer.end_datetime|default:"-" }}
+                        </td>
+                        <td>
+                            {% if offer.is_available %}
+                                <span class="badge badge-success">{% trans "Yes" %}</span>
+                            {% else %}
+                                <span class="badge badge-danger">{% trans "No" %}</span>
+                            {% endif %}
+                        </td>
+                        <td>
+                            {{ offer.priority }}
+                        </td>
+                        <td>
+                            {{ offer.benefit.description|safe }}
+                        </td>
+                        <td>
+                            {{ offer.condition.description|safe }}
+                        </td>
+                        <td>
+                            {% for restriction in offer.availability_restrictions %}
+                                {% if not restriction.is_satisfied %}
+                                    <label class="badge badge-danger">
+                                        {{ restriction.description }}
+                                    </label>
+                                {% else %}
+                                    {{ restriction.description }}
+                                    <br/>
+                                {% endif %}
+                            {% endfor %}
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        {% else %}
+            <tr>
+                <td>
+                    {% trans "No offers are attached to this voucher." %}
+                </td>
+            </tr>
+        {% endif %}
+    </table>
+    <div class="table-header">
+        <h2>
+            {% trans "Voucher performance" %}
+        </h2>
+    </div>
+    <table class="table table-striped table-bordered table-hover">
+        <tbody>
+            <tr>
+                <th>
+                    {% trans "Number of basket additions" %}
+                </th>
+                <td>
+                    {{ voucher.num_basket_additions }}
+                </td>
+            </tr>
+            <tr>
+                <th>
+                    {% trans "Number of orders" %}
+                </th>
+                <td>
+                    {{ voucher.num_orders }}
+                </td>
+            </tr>
+            <tr>
+                <th>
+                    {% trans "Total discount" %}
+                </th>
+                <td>
+                    {{ voucher.total_discount|currency }}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="table-header">
+        <h2>
+            {% trans "Recent orders" %}
+        </h2>
+    </div>
+    <table class="table table-striped table-bordered table-hover">
+        {% if not discounts %}
+            <tr>
+                <td>
+                    {% trans "No orders have been placed that use this voucher." %}
+                </td>
+            </tr>
+        {% else %}
+            <thead>
+                <tr>
+                    <th>
+                        {% trans "Order number" %}
+                    </th>
+                    <th>
+                        {% trans "Order total" %}
+                    </th>
+                    <th>
+                        {% trans "Discount" %}
+                    </th>
+                    <th>
+                        {% trans "Date placed" %}
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for discount in discounts %}
+                    {% with order=discount.order %}
+                    <tr>
+                        <td>
+                            <a href="{% url "dashboard:order-detail" number=order.number %}">
+                                {{ order.number }}
+                            </a>
+                        </td>
+                        <td>
+                            {{ order.total_incl_tax|currency:order.currency }}
+                        </td>
+                        <td>
+                            {{ discount.amount|currency:order.currency }}
+                        </td>
+                        <td>
+                            {{ order.date_placed }}
+                        </td>
+                    </tr>
+                {% endwith %}
+            {% endfor %}
+        </tbody>
+    {% endif %}
+</table>
+<div class="form-actions">
+    {% if not voucher.voucher_set %}
+        <a class="btn btn-primary" href="{% url 'dashboard:voucher-update' pk=voucher.id %}">
+            {% trans "Edit" %}
+        </a>
+        {% trans "or" %}
+    {% else %}
+        <a class="btn btn-primary" href="{% url 'dashboard:voucher-set-update' pk=voucher.voucher_set.pk %}">
+            {% trans "Edit set" %}
+        </a>
+        {% trans "or" %}
+    {% endif %}
+    <a class="btn btn-danger" href="{% url 'dashboard:voucher-delete' pk=voucher.id %}">
+        {% if not voucher.voucher_set %}
+            {% trans "Delete" %}
+        {% else %}
+            {% trans "Delete from set" %}
+        {% endif %}
+    </a>
+    {% trans "or" %}
+    <a href="{% if not voucher.voucher_set %}{% url 'dashboard:voucher-list' %}{% else %}{% url 'dashboard:voucher-set-detail' pk=voucher.voucher_set.pk %}{% endif %}">
+    {% trans "cancel" %}
+</a>
+</div>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/vouchers/voucher_form.html b/tests/django_oscar/oscar/dashboard/vouchers/voucher_form.html
new file mode 100644
index 0000000..2be05f7
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/vouchers/voucher_form.html
@@ -0,0 +1,61 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {{ title }} | {% trans "Vouchers" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:voucher-list' %}">
+                    {% trans "Vouchers" %}
+                </a>
+            </li>
+            {% if voucher %}
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:voucher-stats' pk=voucher.id %}">
+                        {{ voucher }}
+                    </a>
+                </li>
+            {% endif %}
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Edit" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2>
+            <i class="fas fa-money-bill"></i>
+            {% if voucher %}
+                {% trans "Edit voucher" %}
+            {% else %}
+                {% trans "Create voucher" %}
+            {% endif %}
+        </h2>
+    </div>
+    <form method="post" class="card card-body form-stacked">
+        {% csrf_token %}
+        {% include "oscar/dashboard/partials/form_fields.html" with form=form %}
+        {% block form_actions %}
+            <div class="form-actions">
+                <button class="btn btn-primary" type="submit" data-loading-text="{% trans 'Saving...' %}">
+                    {% trans "Save" %}
+                </button>
+                {% trans "or" %}
+                <a href="{% url 'dashboard:voucher-list' %}">
+                    {% trans "cancel" %}
+                </a>
+            </div>
+        {% endblock form_actions %}
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/vouchers/voucher_list.html b/tests/django_oscar/oscar/dashboard/vouchers/voucher_list.html
new file mode 100644
index 0000000..81a4c9a
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/vouchers/voucher_list.html
@@ -0,0 +1,220 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load sorting_tags %}
+{% load i18n %}
+{% load widget_tweaks %}
+{% block title %}
+    {% trans "Vouchers" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            {% if form.is_bound %}
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:voucher-list' %}">
+                        {% trans "Vouchers" %}
+                    </a>
+                </li>
+            {% endif %}
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Vouchers" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <a href="{% url 'dashboard:voucher-create' %}" class="btn btn-primary float-right">
+            <i class="fas fa-plus-circle"></i>
+            {% trans "Create new voucher" %}
+        </a>
+        <h1>{% trans "Vouchers" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    {% block page_head %}
+        <div class="table-header">
+            <h3>
+                <i class="fas fa-search"></i>
+                {% trans "Search" %}
+            </h3>
+        </div>
+        <div class="card card-body bg-light">
+            <form method="get" class="form-inline">
+                {% for field in form %}
+                    {% if field.name in form.basic_fields %}
+                        {% if field.is_hidden %}
+                            {{ field }}
+                        {% else %}
+                            <div class="form-group mr-2{% if field.errors %}error{% endif %}">
+                            {{ field.label_tag }}
+                            {% render_field field class+='form-control' %}
+                            {% for error in field.errors %}
+                                <ul class="error-block">
+                                    <li>
+                                        {{ error }}
+                                    </li>
+                                </ul>
+                            {% endfor %}
+                            {# No help text as it wraps #}
+                        </div>
+                    {% endif %}
+                {% else %}
+                    <input type="hidden" name="{{ field.name }}" value="{{ field.value|default_if_none:'' }}">
+                {% endif %}
+            {% endfor %}
+            <button type="submit" class="btn btn-primary mr-2" data-loading-text="{% trans 'Searching...' %}">
+                {% trans "Search" %}
+            </button>
+            <a data-toggle="modal" data-target="#SearchModal" href="#" class="mr-2">
+                {% trans "Advanced Search" %}
+            </a>
+            <a href="{% url 'dashboard:voucher-list' %}" class="btn btn-secondary">
+                {% trans "Reset" %}
+            </a>
+        </form>
+        {# Search modal, if there are form errors the form is automatically openend #}
+        {% include "oscar/dashboard/partials/advanced_search_modal.html" with form=advanced_form style='horizontal' %}
+        {% if search_filters %}
+            <div class="search-filter-list">
+                <label>
+                    Filters:
+                </label>
+                {% for filter in search_filters %}
+                    <span class="badge badge-success">{{ filter }}</span>
+                {% endfor %}
+            </div>
+        {% endif %}
+    </div>
+{% endblock page_head %}
+{% block voucher_table %}
+    <table class="table table-striped table-bordered table-hover">
+        <caption>
+        <i class="fas fa-money-bill"></i>
+        {% if search_filters %}
+            {% trans "Voucher Search Results" %}
+        {% else %}
+            {% trans "All Vouchers" %}
+        {% endif %}
+        </caption>
+        {% if vouchers %}
+            {% block table_head %}
+                <tr>
+                    <th>{% trans "Name" %}</th>
+                    <th>{% trans "Code" %}</th>
+                    <th>{% trans "Status" %}</th>
+                    <th>{% trans "Num offers" %}</th>
+                    <th>{% anchor 'num_basket_additions' _("Num baskets") %}</th>
+                    <th>{% anchor 'num_orders' _("Num orders") %}</th>
+                    <th>{% anchor 'date_created' _("Date created") %}</th>
+                    {% if form.is_bound and form.cleaned_data.in_set is not False %}
+                        <th>{% trans "Set" %}</th>
+                    {% endif %}
+                    <th></th>
+                </tr>
+            {% endblock table_head %}
+            {% for voucher in vouchers %}
+                {% block table_row %}
+                    <tr>
+                        <td>
+                            <a href="{% url 'dashboard:voucher-stats' voucher.id %}">
+                                {{ voucher.name }}
+                            </a>
+                        </td>
+                        <td>
+                            <span class="badge badge-secondary">{{ voucher.code }}</span>
+                        </td>
+                        <td>
+                            {% if voucher.is_active %}
+                                <span class="badge badge-success">{% trans "Active" %}</span>
+                            {% else %}
+                                <span class="badge badge-secondary">{% trans "Inactive" %}</span>
+                            {% endif %}
+                        </td>
+                        <td>
+                            {{ voucher.offers.count }}
+                        </td>
+                        <td>
+                            {{ voucher.num_basket_additions }}
+                        </td>
+                        <td>
+                            {{ voucher.num_orders }}
+                        </td>
+                        <td>
+                            {{ voucher.date_created }}
+                        </td>
+                        {% if form.is_bound and form.cleaned_data.in_set is not False %}
+                            <td>
+                                {% if voucher.voucher_set.pk %}
+                                    <a href="{% url 'dashboard:voucher-set-detail' pk=voucher.voucher_set.pk %}">
+                                        {{ voucher.voucher_set.name }}
+                                    </a>
+                                {% else %}
+                                    -
+                                {% endif %}
+                            </td>
+                        {% endif %}
+                        <td>
+                            {% block row_actions %}
+                                <div class="btn-toolbar">
+                                    <div class="dropdown">
+                                        <button class="btn btn-secondary dropdown-toggle"
+                                                type="button"
+                                                id="dropdownMenuButton"
+                                                data-toggle="dropdown"
+                                                aria-haspopup="true"
+                                                aria-expanded="false">
+                                            {% trans "Actions" %}
+                                        </button>
+                                        <div class="dropdown-menu dropdown-menu-right"
+                                             aria-labelledby="dropdownMenuButton">
+                                            <a class="dropdown-item"
+                                               href="{% url 'dashboard:voucher-stats' pk=voucher.id %}">
+                                                {% trans "Stats" %}
+                                            </a>
+                                            {% if not voucher.voucher_set %}
+                                                <a class="dropdown-item"
+                                                   href="{% url 'dashboard:voucher-update' pk=voucher.id %}">
+                                                    {% trans "Edit" %}
+                                                </a>
+                                            {% else %}
+                                                <a class="dropdown-item"
+                                                   href="{% url 'dashboard:voucher-set-update' pk=voucher.voucher_set.pk %}">
+                                                    {% trans "Edit set" %}
+                                                </a>
+                                            {% endif %}
+                                            <a class="dropdown-item"
+                                               href="{% url 'dashboard:voucher-delete' pk=voucher.id %}">
+                                                {% if not voucher.voucher_set %}
+                                                    {% trans "Delete" %}
+                                                {% else %}
+                                                    {% trans "Delete from set" %}
+                                                {% endif %}
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            {% endblock row_actions %}
+                        </td>
+                    </tr>
+                {% endblock table_row %}
+            {% endfor %}
+        {% else %}
+            <tr>
+                <td>
+                    {% trans "No vouchers found." %}
+                </td>
+            </tr>
+        {% endif %}
+    </table>
+{% endblock voucher_table %}
+{% include "oscar/dashboard/partials/pagination.html" %}{% endblock dashboard_content %}
+{% block onbodyload %}
+    {{ block.super }}
+    {% if advanced_form.errors %}$('#SearchModal').modal('show');{% endif %}
+{% endblock onbodyload %}
diff --git a/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_delete.html b/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_delete.html
new file mode 100644
index 0000000..394e9cf
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_delete.html
@@ -0,0 +1,59 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {% blocktrans with name=voucher_set.name %}
+        Delete voucher set '{{ name }}'?
+    {% endblocktrans %}
+    | {% trans "Voucher sets" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:voucher-set-list' %}">
+                    {% trans "Voucher sets" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:voucher-set-detail' pk=voucher_set.pk %}">
+                    {{ voucher_set }}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Delete?" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% blocktrans with name=voucher_set.name count=voucher_set.count %}
+        Delete voucher set '{{ name }}' and its {{ count }} vouchers?
+    {% endblocktrans %}
+{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2>{% trans "Voucher set details" %}</h2>
+    </div>
+    <div class="card card-body bg-light">
+        {% include "oscar/dashboard/vouchers/partials/voucher_set_details_table.html" %}
+        <form method="post">
+            {% csrf_token %}
+            <div class="form-actions">
+                <button class="btn btn-danger" type="submit" data-loading-text="{% trans 'Deleting...' %}">
+                    {% trans "Delete" %}
+                </button>
+                {% trans "or" %}
+                <a href="{% url 'dashboard:voucher-set-list' %}">
+                    {% trans "cancel" %}
+                </a>
+            </div>
+        </form>
+    </div>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_detail.html b/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_detail.html
new file mode 100644
index 0000000..fd6a571
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_detail.html
@@ -0,0 +1,222 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load sorting_tags %}
+{% load i18n %}
+{% block title %}{{ voucher_set.name }} | {{ block.super }}{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:voucher-set-list' %}">
+                    {% trans "Voucher sets" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ voucher_set.name }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <div class="float-right">
+            <a href="{% url 'dashboard:voucher-set-download' pk=voucher_set.pk %}" class="btn btn-primary">
+                <i class="fas fa-download"></i>
+                {% trans "Download CSV" %}
+            </a>
+        </div>
+        <h1>{% trans "Voucher set" %} '{{ voucher_set.name }}'</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    {% include "oscar/dashboard/vouchers/partials/voucher_set_details_table.html" %}
+    <div class="table-header">
+        <h3>
+            <i class="fas fa-search"></i>
+            {% trans "Search vouchers" %}
+        </h3>
+    </div>
+    <div class="card card-body bg-light">
+        <form method="get" class="form-inline">
+            {% include 'oscar/partials/form_fields_inline.html' with form=form %}
+            <button type="submit" class="btn btn-primary">
+                {% trans "Search" %}
+            </button>
+            <a href="{% url 'dashboard:voucher-set-detail' pk=voucher_set.pk %}" class="btn">
+                {% trans "Reset" %}
+            </a>
+        </form>
+        {% if search_filters %}
+            <div class="search-filter-list">
+                <label>
+                    Filters:
+                </label>
+                {% for filter in search_filters %}
+                    <span class="badge badge-success">{{ filter }}</span>
+                {% endfor %}
+            </div>
+        {% endif %}
+    </div>
+    <table class="table table-striped table-bordered table-hover">
+        <caption>
+        <i class="fas fa-money-bill"></i>
+        {% if search_filters %}
+            {% trans "Voucher Search Results" %}
+        {% else %}
+            {% trans "All Vouchers" %}
+        {% endif %}
+        </caption>
+        {% if vouchers %}
+            <tr>
+                <th>{% trans "Code" %}</th>
+                <th>{% anchor 'num_basket_additions' _("Num baskets") %}</th>
+                <th>{% anchor 'num_orders' _("Num orders") %}</th>
+                <th>{% anchor 'date_created' _("Date created") %}</th>
+                <th></th>
+            </tr>
+            {% for voucher in vouchers %}
+                <tr>
+                    <td>
+                        <span class="badge badge-secondary">{{ voucher.code }}</span>
+                    </td>
+                    <td>{{ voucher.num_basket_additions }}</td>
+                    <td>{{ voucher.num_orders }}</td>
+                    <td>{{ voucher.date_created }}</td>
+                    <td>
+                        <div class="btn-toolbar">
+                            <div class="dropdown">
+                                <button class="btn btn-secondary dropdown-toggle"
+                                        type="button"
+                                        id="dropdownMenuButton"
+                                        data-toggle="dropdown"
+                                        aria-haspopup="true"
+                                        aria-expanded="false">
+                                    {% trans "Actions" %}
+                                </button>
+                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                    <a class="dropdown-item" href="{% url 'dashboard:voucher-stats' pk=voucher.id %}">
+                                        {% trans "Stats" %}
+                                    </a>
+                                    <a class="dropdown-item" href="{% url 'dashboard:voucher-delete' pk=voucher.id %}">
+                                        {% trans "Delete" %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        {% else %}
+            <tr>
+                <td>{% trans "No vouchers found." %}</td>
+            </tr>
+        {% endif %}
+    </table>
+    {% include "oscar/partials/pagination.html" %}
+    <div class="table-header">
+        <h2>
+            {% trans "Attached offers" %}
+        </h2>
+    </div>
+    <table class="table table-striped table-bordered table-hover">
+        {% if voucher_set.vouchers.first.offers.exists %}
+            <thead>
+                <tr>
+                    <th>
+                        {% trans "Offer name" %}
+                    </th>
+                    <th>
+                        {% trans "Start date" %}
+                    </th>
+                    <th>
+                        {% trans "End date" %}
+                    </th>
+                    <th>
+                        {% trans "Is available?" %}
+                    </th>
+                    <th>
+                        {% trans "Priority" %}
+                    </th>
+                    <th>
+                        {% trans "Incentive" %}
+                    </th>
+                    <th>
+                        {% trans "Condition" %}
+                    </th>
+                    <th>
+                        {% trans "Restrictions" %}
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for offer in voucher_set.vouchers.first.offers.all %}
+                    <tr>
+                        <td>
+                            <a href="{% url 'dashboard:offer-detail' pk=offer.pk %}">
+                                {{ offer.name }}
+                            </a>
+                        </td>
+                        <td>
+                            {{ offer.start_datetime|default:"-" }}
+                        </td>
+                        <td>
+                            {{ offer.end_datetime|default:"-" }}
+                        </td>
+                        <td>
+                            {% if offer.is_available %}
+                                <span class="badge badge-success">{% trans "Yes" %}</span>
+                            {% else %}
+                                <span class="badge badge-danger">{% trans "No" %}</span>
+                            {% endif %}
+                        </td>
+                        <td>
+                            {{ offer.priority }}
+                        </td>
+                        <td>
+                            {{ offer.benefit.description|safe }}
+                        </td>
+                        <td>
+                            {{ offer.condition.description|safe }}
+                        </td>
+                        <td>
+                            {% for restriction in offer.availability_restrictions %}
+                                {% if not restriction.is_satisfied %}
+                                    <label class="badge badge-danger">
+                                        {{ restriction.description }}
+                                    </label>
+                                {% else %}
+                                    {{ restriction.description }}
+                                    <br/>
+                                {% endif %}
+                            {% endfor %}
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        {% else %}
+            <tr>
+                <td>
+                    {% trans "No offers are attached to this voucher set." %}
+                </td>
+            </tr>
+        {% endif %}
+    </table>
+    <div class="form-actions">
+        <a class="btn btn-primary" href="{% url 'dashboard:voucher-set-update' pk=voucher_set.pk %}">
+            {% trans "Edit" %}
+        </a>
+        {% trans "or" %}
+        <a class="btn btn-danger" href="{% url 'dashboard:voucher-set-delete' pk=voucher_set.pk %}">
+            {% trans "Delete" %}
+        </a>
+        {% trans "or" %}
+        <a href="{% url 'dashboard:voucher-set-list' %}">
+            {% trans "cancel" %}
+        </a>
+    </div>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_form.html b/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_form.html
new file mode 100644
index 0000000..4da1642
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_form.html
@@ -0,0 +1,61 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load i18n %}
+{% block body_class %}{{ block.super }} create-page{% endblock %}
+{% block title %}
+    {{ title }} | {% trans "Voucher sets" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:voucher-list' %}">
+                    {% trans "Voucher sets" %}
+                </a>
+            </li>
+            {% if voucher_set %}
+                <li class="breadcrumb-item">
+                    <a href="{% url 'dashboard:voucher-set-detail' pk=voucher_set.pk %}">
+                        {{ voucher_set }}
+                    </a>
+                </li>
+            {% endif %}
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Edit" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ title }}{% endblock %}
+{% block dashboard_content %}
+    <div class="table-header">
+        <h2>
+            <i class="fas fa-money-bill"></i>
+            {% if voucher_set %}
+                {% trans "Edit voucher set" %}
+            {% else %}
+                {% trans "Create voucher set" %}
+            {% endif %}
+        </h2>
+    </div>
+    <form method="post" class="card card-body form-stacked">
+        {% csrf_token %}
+        {% include "oscar/dashboard/partials/form_fields.html" with form=form %}
+        {% block form_actions %}
+            <div class="form-actions">
+                <button class="btn btn-primary" type="submit">
+                    {% trans "Save" %}
+                </button>
+                {% trans "or" %}
+                <a href="{% url 'dashboard:voucher-set-list' %}">
+                    {% trans "cancel" %}
+                </a>
+            </div>
+        {% endblock form_actions %}
+    </form>
+{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_list.html b/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_list.html
new file mode 100644
index 0000000..2aba0e3
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/vouchers/voucher_set_list.html
@@ -0,0 +1,113 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load currency_filters %}
+{% load sorting_tags %}
+{% load i18n %}
+{% block title %}{{ description }} | {{ block.super }}{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'dashboard:index' %}">
+                    {% trans "Dashboard" %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ description }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block header %}
+    <div class="page-header">
+        <a href="{% url 'dashboard:voucher-set-create' %}" class="btn btn-primary float-right">
+            <i class="fas fa-plus-circle"></i>
+            {% trans "Create new voucher set" %}
+        </a>
+        <h1>{% trans "Voucher sets" %}</h1>
+    </div>
+{% endblock header %}
+{% block dashboard_content %}
+    <table class="table table-striped table-bordered table-hover">
+        {% if description != "All voucher sets" %}
+            <caption>
+            <i class="fas fa-money-bill"></i>
+            {{ description }}
+            </caption>
+        {% endif %}
+        {% if voucher_sets %}
+            <tr>
+                <th>{% trans "Name" %}</th>
+                <th>{% trans "Num" %}</th>
+                <th>{% trans "Status" %}</th>
+                <th>{% trans "Num offers" %}</th>
+                <th>{% anchor 'num_basket_additions' _("Num baskets") %}</th>
+                <th>{% anchor 'num_orders' _("Num orders") %}</th>
+                <th>{% anchor 'date_created' _("Date created") %}</th>
+                <th></th>
+            </tr>
+            {% for voucher_set in voucher_sets %}
+                <tr>
+                    <td>
+                        <a href="{% url 'dashboard:voucher-set-detail' pk=voucher_set.pk %}">
+                            {{ voucher_set.name }}
+                        </a>
+                    </td>
+                    <td>{{ voucher_set.count }}</td>
+                    <td>
+                        {% if voucher_set.is_active %}
+                            <span class="badge badge-success">{% trans "Active" %}</span>
+                        {% else %}
+                            <span class="badge badge-warning">{% trans "Inactive" %}</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {{ voucher_set.vouchers.first.offers.count|default:0 }}
+                    </td>
+                    <td>
+                        {{ voucher_set.num_basket_additions }}
+                    </td>
+                    <td>
+                        {{ voucher_set.num_orders }}
+                    </td>
+                    <td>
+                        {{ voucher_set.date_created }}
+                    </td>
+                    <td>
+                        <div class="btn-toolbar">
+                            <div class="dropdown">
+                                <button class="btn btn-secondary dropdown-toggle"
+                                        type="button"
+                                        id="dropdownMenuButton"
+                                        data-toggle="dropdown"
+                                        aria-haspopup="true"
+                                        aria-expanded="false">
+                                    {% trans "Actions" %}
+                                </button>
+                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                    <a class="dropdown-item"
+                                       href="{% url 'dashboard:voucher-set-detail' pk=voucher_set.pk %}">
+                                        {% trans "Detail" %}
+                                    </a>
+                                    <a class="dropdown-item"
+                                       href="{% url 'dashboard:voucher-set-update' pk=voucher_set.pk %}">
+                                        {% trans "Edit" %}
+                                    </a>
+                                    <a class="dropdown-item"
+                                       href="{% url 'dashboard:voucher-set-delete' pk=voucher_set.pk %}">
+                                        {% trans "Delete" %}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        {% else %}
+            <tr>
+                <td>
+                    {% trans "No voucher sets found." %}
+                </td>
+            </tr>
+        {% endif %}
+    </table>
+    {% include "oscar/partials/pagination.html" %}{% endblock dashboard_content %}
diff --git a/tests/django_oscar/oscar/dashboard/widgets/popup_response.html b/tests/django_oscar/oscar/dashboard/widgets/popup_response.html
new file mode 100644
index 0000000..36233a7
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/widgets/popup_response.html
@@ -0,0 +1,10 @@
+{% load i18n static %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>{% trans 'Popup closing...' %}</title>
+    </head>
+    <body>
+        <script type="text/javascript" id="oscar-popup-response-constants" src="{% static "oscar/js/oscar/popup_response.js" %}" data-popup-response="{{ popup_response_data }}"></script>
+    </body>
+</html>
diff --git a/tests/django_oscar/oscar/dashboard/widgets/related_multiple_widget_wrapper.html b/tests/django_oscar/oscar/dashboard/widgets/related_multiple_widget_wrapper.html
new file mode 100644
index 0000000..71d8ec6
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/widgets/related_multiple_widget_wrapper.html
@@ -0,0 +1,28 @@
+{% load i18n static %}
+<div class="related-widget-wrapper multiple">
+    {{ rendered_widget }}
+    {% block links %}
+        {% spaceless %}
+            <div class="d-none">
+                <a class="related-widget-wrapper-link change-related"
+                   id="change_id_{{ name }}"
+                   data-href-template="{{ change_related_template_url }}?{{ url_params }}"
+                   title="{% blocktrans %}Change selected {{ model }}{% endblocktrans %}">
+                    <i class="fas fa-pencil-alt"></i>
+                </a>
+                <a class="related-widget-wrapper-link delete-related"
+                   id="delete_id_{{ name }}"
+                   data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
+                   title="{% blocktrans %}Delete selected {{ model }}{% endblocktrans %}">
+                    <i class="fas fa-trash-alt"></i>
+                </a>
+            </div>
+            <a class="related-widget-wrapper-link add-related"
+               id="create_id_{{ name }}"
+               href="{{ add_related_url }}?{{ url_params }}"
+               title="{% blocktrans %}Add another {{ model }}{% endblocktrans %}">
+                <img src="{% static 'oscar/img/ui/icon-addlink.svg' %}" alt="{% trans 'Add' %}"/>
+            </a>
+        {% endspaceless %}
+    {% endblock %}
+</div>
diff --git a/tests/django_oscar/oscar/dashboard/widgets/related_widget_wrapper.html b/tests/django_oscar/oscar/dashboard/widgets/related_widget_wrapper.html
new file mode 100644
index 0000000..14b5f00
--- /dev/null
+++ b/tests/django_oscar/oscar/dashboard/widgets/related_widget_wrapper.html
@@ -0,0 +1,26 @@
+{% load i18n static %}
+<div class="related-widget-wrapper single">
+    {{ rendered_widget }}
+    {% block links %}
+        {% spaceless %}
+            <a class="related-widget-wrapper-link change-related"
+               id="change_id_{{ name }}"
+               data-href-template="{{ change_related_template_url }}?{{ url_params }}"
+               title="{% blocktrans %}Change selected {{ model }}{% endblocktrans %}">
+                <img src="{% static 'oscar/img/ui/icon-changelink.svg' %}" alt="{% trans 'Change' %}"/>
+            </a>
+            <a class="related-widget-wrapper-link add-related"
+               id="create_id_{{ name }}"
+               href="{{ add_related_url }}?{{ url_params }}"
+               title="{% blocktrans %}Add another {{ model }}{% endblocktrans %}">
+                <img src="{% static 'oscar/img/ui/icon-addlink.svg' %}" alt="{% trans 'Add' %}"/>
+            </a>
+            <a class="related-widget-wrapper-link delete-related"
+               id="delete_id_{{ name }}"
+               data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
+               title="{% blocktrans %}Delete selected {{ model }}{% endblocktrans %}">
+                <img src="{% static 'oscar/img/ui/icon-deletelink.svg' %}" alt="{% trans 'Delete' %}"/>
+            </a>
+        {% endspaceless %}
+    {% endblock %}
+</div>
diff --git a/tests/django_oscar/oscar/error.html b/tests/django_oscar/oscar/error.html
new file mode 100644
index 0000000..7e56c9d
--- /dev/null
+++ b/tests/django_oscar/oscar/error.html
@@ -0,0 +1,23 @@
+{% extends "oscar/layout.html" %}
+{% load i18n %}
+{% block layout %}
+    {% include "oscar/partials/nav_accounts.html" %}
+    <div class="container">
+        <div class="jumbotron">
+            <h1>
+                {% block error_heading %}
+                    {% trans 'Sorry!' %}
+                {% endblock %}
+            </h1>
+            {% block error_message %}{% endblock %}
+            <p>
+                <a class="btn btn-primary btn-lg" onclick="javascript:history.go(-1);">
+                    {% trans 'Return to previous page' %}
+                </a>
+                <a class="btn btn-primary btn-lg" href="{{ homepage_url }}">
+                    {% trans "Go to homepage" %}
+                </a>
+            </p>
+        </div>
+    </div>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/forms/widgets/date_time_picker.html b/tests/django_oscar/oscar/forms/widgets/date_time_picker.html
new file mode 100644
index 0000000..81a317d
--- /dev/null
+++ b/tests/django_oscar/oscar/forms/widgets/date_time_picker.html
@@ -0,0 +1,14 @@
+<div class="form-inline">
+    <div class="input-group date" id="wrapper_for_{{ widget.attrs.id }}"
+        {% for name, value in div_attrs.items %}
+            {{ name }}="{{ value|stringformat:'s' }}"
+        {% endfor %}
+        data-target-input="nearest">
+        {% include "django/forms/widgets/input.html" %}
+        <div class="input-group-append" data-toggle="datetimepicker" data-target="#wrapper_for_{{ widget.attrs.id }}">
+            <div class="input-group-text">
+                <i class="{{ icon_classes }}"></i>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/tests/django_oscar/oscar/forms/widgets/image_input_widget.html b/tests/django_oscar/oscar/forms/widgets/image_input_widget.html
new file mode 100644
index 0000000..3385028
--- /dev/null
+++ b/tests/django_oscar/oscar/forms/widgets/image_input_widget.html
@@ -0,0 +1,18 @@
+{% load i18n %}
+{% load image_tags %}
+<div id="{{ image_id }}" class="image-input">
+    {% if image_url %}
+        {% oscar_thumbnail image_url "200x200" upscale=False as thumb %}
+        <img src="{{ thumb.url }}" alt="{% trans "thumbnail" %}" />
+    {% else %}
+        <img alt="{% trans "
+             thumbnail" %}" onload="$('#upload_button_{{ image_id }}').hide()"
+             onerror="$('#upload_button_{{ image_id }}').show(); alert('{% trans 'Unrecognized image type!' %}')"/>
+        <button class="btn btn-primary" id="upload_button_{{ image_id }}">
+            {% trans "Upload Image" %}
+        </button>
+    {% endif %}
+    <div class="input-field">
+        {% include "django/forms/widgets/input.html" %}
+    </div>
+</div>
diff --git a/tests/django_oscar/oscar/layout.html b/tests/django_oscar/oscar/layout.html
new file mode 100644
index 0000000..bb821b5
--- /dev/null
+++ b/tests/django_oscar/oscar/layout.html
@@ -0,0 +1,60 @@
+{% extends "oscar/base.html" %}
+{% load static %}
+{% block styles %}
+    <link rel="stylesheet" type="text/css" href="{% static "oscar/css/styles.css" %}" />
+{% endblock %}
+{% block layout %}
+    {# Top-horizontal bar with account, notifictions, dashboard links #}
+    {% include "oscar/partials/nav_accounts.html" %}
+    {# Site logo/title, mini-basket, browse dropdown and searchbox #}
+    <header class="header container">
+        <div class="page_inner">
+            <div class="row justify-content-between">
+                {% include "oscar/partials/brand.html" %}
+                {# Mini-basket wrapped in a block so some templates can now display it #}
+                {% block mini_basket %}
+                    {% include "oscar/partials/mini_basket.html" %}{% endblock %}
+                </div>
+            </div>
+            {% block navigation %}
+                {% include "oscar/partials/nav_primary.html" %}{% endblock %}
+            </header>
+            {# Main content of page - other layout templates may override this block #}
+            {% block content_wrapper %}
+                <div class="container page">
+                    <div class="page_inner">
+                        {% block breadcrumbs %}{% endblock %}
+                        {% block header %}
+                            <div class="page-header">
+                                <h1>{% block headertext %}{% endblock %}</h1>
+                            </div>
+                        {% endblock %}
+                        {% include "oscar/partials/alert_messages.html" %}
+                        {% block subnavigation %}{% endblock %}
+                        <div class="content">
+                            {% block subheader %}{% endblock subheader %}
+                                {# Div exists for AJAX updates to entire content section #}
+                                <div id="content_inner">
+                                    {% block content %}{% endblock %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                {% endblock %}
+                {% include "oscar/partials/footer.html" %}{% endblock %}
+                {# Local scripts #}
+                {% block scripts %}
+                    {{ block.super }}
+                    <!-- Twitter Bootstrap -->
+                    <script src="{% static "oscar/js/bootstrap4/bootstrap.bundle.min.js" %}"></script>
+                    <!-- Oscar -->
+                    <script src="{% static "oscar/js/oscar/ui.js" %}"></script>
+                {% endblock %}
+                {% block extrascripts %}
+                    {% include "oscar/partials/extrascripts.html" %}
+                    {{ block.super }}
+                {% endblock %}
+                {% block onbodyload %}
+                    {{ block.super }}
+                    oscar.init();
+                {% endblock %}
diff --git a/tests/django_oscar/oscar/layout_2_col.html b/tests/django_oscar/oscar/layout_2_col.html
new file mode 100644
index 0000000..c96a6bc
--- /dev/null
+++ b/tests/django_oscar/oscar/layout_2_col.html
@@ -0,0 +1,31 @@
+{% extends "oscar/layout.html" %}
+{% comment %}
+Keep the same header and footer as the standard layout template but override the
+main content area to split it into a sidebar and a content block
+{% endcomment %}
+{% block content_wrapper %}
+<div class="{% block content_wrapper_classes %}container page{% endblock %}">
+<div class="page_inner">
+    {% block breadcrumbs %}{% endblock %}
+    <div class="row">
+        <aside class="sidebar col-sm-4 col-md-3">
+            {% block column_left %}{% endblock %}
+            {% block column_left_extra %}{% endblock %}
+        </aside>
+        <div class="col-sm-8 col-md-9">
+            {% block header %}
+                <div class="page-header">
+                    <h1>{% block headertext %}{% endblock %}</h1>
+                </div>
+            {% endblock %}
+            {% include "oscar/partials/alert_messages.html" %}
+            {% block pre_content %}{% endblock %}
+            {% block content %}{% endblock %}
+        </div>
+    </div>
+    <!-- /row -->
+</div>
+<!-- /page_inner -->
+</div>
+<!-- /container -->
+{% endblock %}
diff --git a/tests/django_oscar/oscar/layout_3_col.html b/tests/django_oscar/oscar/layout_3_col.html
new file mode 100644
index 0000000..83e59b7
--- /dev/null
+++ b/tests/django_oscar/oscar/layout_3_col.html
@@ -0,0 +1,28 @@
+{% extends "oscar/layout.html" %}
+{% block content_wrapper %}
+    <div class="container page">
+        <div class="page_inner">
+            {% block breadcrumbs %}{% endblock %}
+            <div class="row">
+                <aside class="col-sm-3">
+                    {% block column_left %}{% endblock %}
+                </aside>
+                <div class="col-sm-6">
+                    {% block header %}
+                        <div class="page-header">
+                            <h1>{% block headertext %}{% endblock %}</h1>
+                        </div>
+                    {% endblock %}
+                    {% include "oscar/partials/alert_messages.html" %}
+                    {% block content %}{% endblock %}
+                </div>
+                <aside class="col-sm-3">
+                    {% block column_right %}{% endblock %}
+                </aside>
+            </div>
+            <!-- /row -->
+        </div>
+        <!-- /page_inner -->
+    </div>
+    <!-- /container -->
+{% endblock %}
diff --git a/tests/django_oscar/oscar/login_forbidden.html b/tests/django_oscar/oscar/login_forbidden.html
new file mode 100644
index 0000000..250957b
--- /dev/null
+++ b/tests/django_oscar/oscar/login_forbidden.html
@@ -0,0 +1,7 @@
+{% extends "oscar/403.html" %}
+{% load i18n %}
+{% block error_message %}
+    <p>
+        {% trans "This page is only available to users who aren't logged in." %}
+    </p>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/offer/detail.html b/tests/django_oscar/oscar/offer/detail.html
new file mode 100644
index 0000000..5694e5b
--- /dev/null
+++ b/tests/django_oscar/oscar/offer/detail.html
@@ -0,0 +1,68 @@
+{% extends "oscar/layout.html" %}
+{% load i18n %}
+{% load product_tags %}
+{% block title %}{{ offer.name }} | {{ block.super }}{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'offer:list' %}">{% trans "Offers" %}</a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ offer.name }}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}{{ offer.name }}{% endblock %}
+{% block content %}
+    {% if not offer.is_available %}
+        <div class="alert alert-danger">
+            {% trans " This offer is no longer available." %}
+        </div>
+    {% endif %}
+    {% if upsell_message %}
+        <div class="row">
+            {% if offer.description %}
+                <div class="col-sm-7">
+                    <p>
+                        {{ offer.description|safe }}
+                    </p>
+                </div>
+            {% endif %}
+            <div class="col-sm-5">
+                <div class="card card-body bg-light">
+                    <h2 class="h4">
+                        <i class="fas fa-exclamation"></i>
+                        {% trans "What you need to do" %}
+                    </h2>
+                    <p>
+                        {{ upsell_message }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    {% endif %}
+    {% if products %}
+        <section>
+            <div>
+                {% include "oscar/partials/pagination.html" %}
+                <ol class="row list-unstyled ml-0 pl-0">
+                    {% for product in products %}
+                        <li class="col-sm-4 col-md-3 col-lg-3">
+                            {% render_product product %}
+                        </li>
+                    {% endfor %}
+                </ol>
+                {% include "oscar/partials/pagination.html" %}
+            </div>
+        </section>
+    {% else %}
+        <p class="nonefound">
+            {% trans "No products found." %}
+        </p>
+    {% endif %}
+{% endblock content %}
diff --git a/tests/django_oscar/oscar/offer/list.html b/tests/django_oscar/oscar/offer/list.html
new file mode 100644
index 0000000..30920fd
--- /dev/null
+++ b/tests/django_oscar/oscar/offer/list.html
@@ -0,0 +1,52 @@
+{% extends "oscar/layout.html" %}
+{% load i18n %}
+{% load product_tags %}
+{% block title %}
+    {% trans "Offers" %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans "Offers" %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% trans "Offers" %}
+{% endblock %}
+{% block content %}
+    {% if not offers %}
+        <p>
+            {% trans "There are no site offers at the moment." %}
+        </p>
+    {% else %}
+        {% for offer in offers %}
+            <h2>{{ offer.name }}</h2>
+            {% if offer.description %}
+                <p>
+                    {{ offer.description|safe }}
+                </p>
+            {% endif %}
+            {% if offer.has_products %}
+                <ul class="row list-unstyled mx-0">
+                    {% for product in offer.products|slice:":12" %}
+                        <li class="col-sm-4 col-md-3 col-lg-3">
+                            {% render_product product %}
+                        </li>
+                    {% endfor %}
+                </ul>
+                <p>
+                    <a class="btn btn-secondary" href="{% url 'offer:detail' slug=offer.slug %}">
+                        {% trans "Browse products in offer" %}
+                    </a>
+                </p>
+            {% endif %}
+            <hr/>
+        {% endfor %}
+    {% endif %}
+{% endblock content %}
diff --git a/tests/django_oscar/oscar/offer/range.html b/tests/django_oscar/oscar/offer/range.html
new file mode 100644
index 0000000..f91b1ab
--- /dev/null
+++ b/tests/django_oscar/oscar/offer/range.html
@@ -0,0 +1,40 @@
+{% extends "oscar/layout.html" %}
+{% load basket_tags %}
+{% load category_tags %}
+{% load i18n %}
+{% load product_tags %}
+{% block title %}{{ range.name }} | {{ block.super }}{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {{ range.name }}
+            </li>
+        </ol>
+    </nav>
+{% endblock breadcrumbs %}
+{% block headertext %}{{ range.name }}{% endblock %}
+{% block content %}
+    {% if range.description %}{{ range.description|safe }}{% endif %}
+    {% if products %}
+        <section>
+            <div>
+                <ol class="row list-unstyled ml-0 pl-0">
+                    {% for product in products %}
+                        <li class="col-sm-4 col-md-3 col-lg-3">
+                            {% render_product product %}
+                        </li>
+                    {% endfor %}
+                </ol>
+                {% include "oscar/partials/pagination.html" %}
+            </div>
+        </section>
+    {% else %}
+        <p class="nonefound">
+            {% trans "No products found." %}
+        </p>
+    {% endif %}
+{% endblock content %}
diff --git a/tests/django_oscar/oscar/order/partials/basket_totals.html b/tests/django_oscar/oscar/order/partials/basket_totals.html
new file mode 100644
index 0000000..c0fd6ea
--- /dev/null
+++ b/tests/django_oscar/oscar/order/partials/basket_totals.html
@@ -0,0 +1,190 @@
+{% load i18n %}
+{% load currency_filters %}
+<div id="basket_totals">
+    <table class="table table-sm">
+        <tr>
+            <th colspan="2">
+                <h3>{% trans "Basket" %}</h3>
+            </th>
+        </tr>
+        {% with discounts=order.basket_discounts %}
+        {% block discount_totals %}
+            {% if discounts %}
+                <tr>
+                    <td>{% trans "Basket total (before discounts)" %}</td>
+                    <td class="text-right">
+                        {{ order.basket_total_before_discounts_incl_tax|currency:order.currency }}
+                    </td>
+                </tr>
+                {% for discount in discounts %}
+                    <tr>
+                        <td>
+                            <span class="badge badge-success">{% trans "Discount" %}</span>
+                            {{ discount.offer }}
+                        </td>
+                        <td class="text-right">- {{ discount.amount|currency:order.currency }}</td>
+                    </tr>
+                {% endfor %}
+            {% endif %}
+        {% endblock discount_totals %}
+        {% block basket_total %}
+            {% if discounts %}
+                <tr>
+                    <th class="total">{% trans "Basket total (after discounts)" %}</th>
+                    <th class="total text-right">
+                        {{ order.basket_total_incl_tax|currency:order.currency }}
+                    </th>
+                </tr>
+            {% else %}
+                <tr class="basket-items">
+                    <th class="total">{% trans "Basket total" %}</th>
+                    <th class="total text-right">
+                        {% if show_tax_separately %}
+                            {{ order.basket_total_excl_tax|currency:order.currency }}
+                        {% else %}
+                            {{ order.basket_total_incl_tax|currency:order.currency }}
+                        {% endif %}
+                    </th>
+                </tr>
+            {% endif %}
+        {% endblock basket_total %}
+    {% endwith %}
+    {% block shipping_total %}
+        <tr>
+            <th>&nbsp;</th>
+            <td></td>
+        </tr>
+        <tr>
+            <th colspan="2">
+                <h3>{% trans "Shipping" %}</h3>
+            </th>
+        </tr>
+        <tr>
+            <td>{% trans "Shipping method" %}</td>
+            <td class="text-right">{{ order.shipping_method }}</td>
+        </tr>
+        {% if order.has_shipping_discounts %}
+            <tr>
+                <td>{% trans "Shipping charge (before discounts)" %}</td>
+                <td class="text-right">
+                    {{ order.shipping_before_discounts_incl_tax|currency:order.currency }}
+                </td>
+            </tr>
+            {% for discount in order.shipping_discounts %}
+                <tr>
+                    <td>
+                        <span class="badge badge-success">{% trans "Discount" %}</span>
+                        {{ discount.offer }}
+                    </td>
+                    <td class="text-right">- {{ discount.amount|currency:order.currency }}</td>
+                </tr>
+            {% endfor %}
+            <tr>
+                <th class="total">{% trans "Shipping charge (after discounts)" %}</th>
+                <th class="total text-right">
+                    {{ order.shipping_incl_tax|currency:order.currency }}
+                </th>
+            </tr>
+        {% else %}
+            <tr>
+                <th class="total">{% trans "Shipping charge" %}</th>
+                <th class="total text-right">
+                    {% if show_tax_separately %}
+                        {{ order.shipping_excl_tax|currency:order.currency }}
+                    {% else %}
+                        {{ order.shipping_incl_tax|currency:order.currency }}
+                    {% endif %}
+                </th>
+            </tr>
+        {% endif %}
+    {% endblock shipping_total %}
+    {% block surcharges %}
+        {% with surcharges=order.surcharges.all %}
+        {% if surcharges %}
+            <tr>
+                <th>&nbsp;</th>
+                <td></td>
+            </tr>
+            <tr>
+                <th colspan="2">
+                    <h3>{% trans "Surcharges" %}</h3>
+                </th>
+            </tr>
+            {% for charge in surcharges %}
+                <tr>
+                    <th class="total">{{ charge.name }}</th>
+                    <th class="total align-right">
+                        {% if show_tax_separately %}
+                            {{ charge.excl_tax|currency:order.currency }}
+                        {% else %}
+                            {{ charge.incl_tax|currency:order.currency }}
+                        {% endif %}
+                    </th>
+                </tr>
+            {% endfor %}
+        {% endif %}
+    {% endwith %}
+{% endblock %}
+{% if show_tax_separately %}
+    <tr>
+        <th colspan="2">
+            &nbsp;
+        </th>
+    </tr>
+    <tr>
+        <th class="total">
+            {% trans "Order tax" %}
+        </th>
+        <th class="total text-right">
+            {{ order.total_tax|currency:order.currency }}
+        </th>
+    </tr>
+{% endif %}
+{% block post_order_action_totals %}
+    {% with actions=order.post_order_actions %}
+    {% if actions %}
+        <tr>
+            <th colspan="2">
+                &nbsp;
+            </th>
+        </tr>
+        <tr>
+            <th colspan="2">
+                <h3>
+                    {% trans "Post order actions" %}
+                </h3>
+            </th>
+        </tr>
+        {% for action in order.post_order_actions %}
+            <tr>
+                <td class="total" colspan="2">
+                    <p>
+                        {{ action.message }}
+                    </p>
+                </td>
+            </tr>
+        {% endfor %}
+    {% endif %}
+{% endwith %}
+{% endblock post_order_action_totals %}
+{% block order_total %}
+<tr>
+    <th colspan="2">
+        &nbsp;
+    </th>
+</tr>
+<tr>
+    <td class="total">
+        <h3>
+            {% trans "Order total" %}
+        </h3>
+    </td>
+    <td class="total text-right">
+        <h3 class="price_color">
+            {{ order.total_incl_tax|currency:order.currency }}
+        </h3>
+    </td>
+</tr>
+{% endblock order_total %}
+</table>
+</div>
diff --git a/tests/django_oscar/oscar/partials/alert_messages.html b/tests/django_oscar/oscar/partials/alert_messages.html
new file mode 100644
index 0000000..b62dc70
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/alert_messages.html
@@ -0,0 +1,39 @@
+{% load string_filters %}
+{% comment %}
+Use message tags to control these alerts. Available tags include:
+- safe: allow HTML in the message
+- block: for longer messages - this adds extra padding
+- noicon: don't show an icon
+- error/success/info - these change the connotation of the alert
+{% endcomment %}
+<div id="messages">
+{% if messages %}
+    {% for message in messages %}
+        <div class="alert alert-dismissible {% for tag in message.tags|split %}alert-{% if tag == 'error' %}danger{% else %}{{ tag }}{% endif %} {% endfor %} fade show">
+        <a class="close" data-dismiss="alert" href="#">
+            &times;
+        </a>
+        <div class="alertinner {% if 'noicon' not in message.tags %}wicon{% endif %}">
+        {% if 'noicon' not in message.tags %}
+            {# Include an icon by default #}
+            {% if 'success' in message.tags %}
+                <i class="fas fa-check-circle"></i>
+            {% elif 'info' in message.tags %}
+                <i class="fas fa-info-circle"></i>
+            {% elif 'warning' in message.tags %}
+                <i class="fas fa-exclamation-triangle"></i>
+            {% elif 'danger' in message.tags or 'error' in message.tags %}
+                <i class="fas fa-exclamation-circle"></i>
+            {% endif %}
+        {% endif %}
+        {# Allow HTML to be embedded in messages #}
+        {% if 'safe' in message.tags %}
+            {{ message|safe }}
+        {% else %}
+            {{ message }}
+        {% endif %}
+    </div>
+</div>
+{% endfor %}
+{% endif %}
+</div>
diff --git a/tests/django_oscar/oscar/partials/brand.html b/tests/django_oscar/oscar/partials/brand.html
new file mode 100644
index 0000000..86b4d59
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/brand.html
@@ -0,0 +1,8 @@
+<div class="col-sm-6 h1">
+    <a href="{{ homepage_url }}">
+        {% block brand_title %}{{ shop_name }}{% endblock %}
+    </a>
+    <small>
+    {{ shop_tagline }}
+    </small>
+</div>
diff --git a/tests/django_oscar/oscar/partials/extrascripts.html b/tests/django_oscar/oscar/partials/extrascripts.html
new file mode 100644
index 0000000..6555625
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/extrascripts.html
@@ -0,0 +1,4 @@
+{% comment %}
+This file exists so you can easily add your own Javascript without
+having to fork layout.html etc. Instead, just override this file.
+{% endcomment %}
diff --git a/tests/django_oscar/oscar/partials/footer.html b/tests/django_oscar/oscar/partials/footer.html
new file mode 100644
index 0000000..a19937d
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/footer.html
@@ -0,0 +1,7 @@
+<footer class="container">
+    {% block footer %}
+        {% comment %}
+        Could be used for displaying links to privacy policy, terms of service, etc.
+    {% endcomment %}
+{% endblock %}
+</footer>
diff --git a/tests/django_oscar/oscar/partials/footer_checkout.html b/tests/django_oscar/oscar/partials/footer_checkout.html
new file mode 100644
index 0000000..6fd4038
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/footer_checkout.html
@@ -0,0 +1,3 @@
+<footer class="container">
+    {% block footer %}{% endblock %}
+</footer>
diff --git a/tests/django_oscar/oscar/partials/form.html b/tests/django_oscar/oscar/partials/form.html
new file mode 100644
index 0000000..366c724
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/form.html
@@ -0,0 +1,24 @@
+{% load i18n %}
+<form
+    {% if form_id %}id="{{ form_id }}"{% endif %}
+    class="{{ class }}" method="{{ method|default:"post" }}"
+    {% if action %}action="{{ action }}"{% endif %}
+    {% if includes_files %}enctype="multipart/form-data"{% endif %}
+    >
+    {% if not method == "get" %}
+        {% csrf_token %}
+    {% endif %}
+    {% include 'oscar/partials/form_fields.html' %}
+    <div class="form-group{% if style == 'horizontal' %}row{% endif %}">
+    <div class="{% if style == 'horizontal' %}offset-sm-4 col-sm-8{% endif %}">
+    <button class="btn btn-lg btn-primary" type="submit" data-loading-text="{% trans 'Saving...' %}">
+        {% trans "Save" %}
+    </button>
+    {% trans "or" %}
+    <a href="#" onclick="window.history.go(-1);return false" >
+        {% trans "cancel" %}
+    </a>
+    .
+</div>
+</div>
+</form>
diff --git a/tests/django_oscar/oscar/partials/form_field.html b/tests/django_oscar/oscar/partials/form_field.html
new file mode 100644
index 0000000..6b3a253
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/form_field.html
@@ -0,0 +1,62 @@
+{% load form_tags %}
+{% load widget_tweaks %}
+{% if field.is_hidden %}
+    {{ field }}
+{% else %}
+    {% comment %}
+    Make the field widget type available to templates so we can mark-up
+    checkbox and radio inputs differently to other widgets.
+{% endcomment %}
+{% annotate_form_field field %}
+{% block control_group %}
+    <div class="form-group{% if style == "horizontal" %}row{% endif %}
+    ">
+    {% block label %}
+        {% if not nolabel and field.widget_type != 'checkbox' %}
+            <label for="{{ field.auto_id }}" class="{% if style|default:"stacked" != 'stacked' %}col-sm-4
+            {% endif %}
+            col-form-label
+            {% if field.field.required %}required{% endif %}
+            ">
+            {{ field.label|safe }}
+        </label>
+    {% endif %}
+{% endblock %}
+{% block controls %}
+    <div class="{% if style|default:"stacked" != 'stacked' %}col-sm-7
+    {% endif %}
+    {% if field.widget_type == 'checkbox' %}
+        form-check{% endif %}
+        ">
+        {% block widget %}
+            {% if field.widget_type == 'checkbox' %}
+                <label for="{{ field.auto_id }}"
+                       class="col-form-label {% if field.field.required %}required{% endif %}">
+                {% render_field field %}
+                {{ field.label|safe }}
+            </label>
+        {% else %}
+            {% render_field field class+="form-control" %}
+        {% endif %}
+    {% endblock %}
+    {% block errors %}
+        {% for error in field.errors %}
+            <span class="error-block">
+                <i class="fas fa-exclamation"></i>
+                {{ error }}
+            </span>
+        {% endfor %}
+    {% endblock %}
+    {% block help_text %}
+        {% if field.help_text %}
+            <small class="form-text text-muted">
+            {# We allow HTML within form help fields #}
+            {{ field.help_text|safe }}
+            </small>
+        {% endif %}
+    {% endblock %}
+</div>
+{% endblock %}
+</div>
+{% endblock %}
+{% endif %}
diff --git a/tests/django_oscar/oscar/partials/form_fields.html b/tests/django_oscar/oscar/partials/form_fields.html
new file mode 100644
index 0000000..8e43ea0
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/form_fields.html
@@ -0,0 +1,17 @@
+{% load i18n %}
+{% if form.is_bound and not form.is_valid %}
+    <div class="alert alert-danger">
+        <strong>{% trans "Oops! We found some errors" %}</strong>
+        - {% trans "please check the error messages below and try again" %}
+    </div>
+{% endif %}
+{% if form.non_field_errors %}
+    {% for error in form.non_field_errors %}
+        <div class="alert alert-danger">
+            <i class="fas fa-exclamation"></i>
+            {{ error }}
+        </div>
+    {% endfor %}
+{% endif %}
+{% for field in form %}
+    {% include 'oscar/partials/form_field.html' with field=field style=style %}{% endfor %}
diff --git a/tests/django_oscar/oscar/partials/form_fields_inline.html b/tests/django_oscar/oscar/partials/form_fields_inline.html
new file mode 100644
index 0000000..796f02a
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/form_fields_inline.html
@@ -0,0 +1,20 @@
+{% load widget_tweaks %}
+<span class="error-block">{{ form.non_field_errors }}</span>
+{% for field in form %}
+    {% if field.is_hidden %}
+        {{ field }}
+    {% else %}
+        <span class="form-group {% if field.errors %}error{% endif %}">
+        <span class="mr-sm-1">{{ field.label_tag }}</span>
+        {% render_field field class+="form-control mr-sm-2" %}
+        {% for error in field.errors %}
+            <ul class="error-block">
+                <li>
+                    {{ error }}
+                </li>
+            </ul>
+        {% endfor %}
+        {# No help text as it wraps #}
+    </span>
+{% endif %}
+{% endfor %}
diff --git a/tests/django_oscar/oscar/partials/google_analytics.html b/tests/django_oscar/oscar/partials/google_analytics.html
new file mode 100644
index 0000000..7056fc7
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/google_analytics.html
@@ -0,0 +1,15 @@
+{% if google_analytics_id %}
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{ google_analytics_id }}"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments)};
+      gtag('js', new Date());
+
+      {% if user.is_authenticated %}
+        gtag('config', "{{ google_analytics_id }}", { 'user_id': "{{ user.pk }}" });
+      {% else %}
+        gtag('config', "{{ google_analytics_id }}");
+      {% endif %}
+      {% block extratracking %}{% endblock %}
+    </script>
+{% endif %}
diff --git a/tests/django_oscar/oscar/partials/google_analytics_transaction.html b/tests/django_oscar/oscar/partials/google_analytics_transaction.html
new file mode 100644
index 0000000..0be6021
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/google_analytics_transaction.html
@@ -0,0 +1,24 @@
+{% extends "oscar/partials/google_analytics.html" %}
+{% load l10n %}
+{% block extratracking %}
+    gtag('event', 'purchase', {
+    "transaction_id": '{{ order.number|escapejs }}',
+    "affiliation": '{{ shop_name|escapejs }}',
+    "value": '{{ order.total_incl_tax|unlocalize|escapejs }}',
+    "currency": '{{ order.currency|escapejs }}',
+    "tax": '{{ order.total_tax|unlocalize|escapejs }}',
+    "shipping": '{{ order.shipping_incl_tax|unlocalize|escapejs }}',
+    items: [
+    {% for line in order.lines.all %}
+        {
+        'id': '{{ line.partner_sku|escapejs }}',
+        'name': '{{ line.title|escapejs }}',
+        'category': '{{ line.category|default:"Uncategorised"|escapejs }}',
+        'price': '{{ line.unit_price_incl_tax|unlocalize|escapejs }}',
+        'quantity': '{{ line.quantity|escapejs }}'
+        }
+        {% if not forloop.last %},{% endif %}
+    {% endfor %}
+    ]
+    });
+{% endblock %}
diff --git a/tests/django_oscar/oscar/partials/mini_basket.html b/tests/django_oscar/oscar/partials/mini_basket.html
new file mode 100644
index 0000000..7497a48
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/mini_basket.html
@@ -0,0 +1,27 @@
+{% load currency_filters %}
+{% load i18n %}
+<div class="basket-mini col-sm-5 text-right d-none d-md-block">
+    <strong>{% trans "Basket total:" %}</strong>
+    {% if request.basket.is_tax_known %}
+        {{ request.basket.total_incl_tax|currency:request.basket.currency }}
+    {% else %}
+        {{ request.basket.total_excl_tax|currency:request.basket.currency }}
+    {% endif %}
+    <div class="btn-group">
+        <button type="button"
+                class="btn btn-outline-secondary"
+                onclick="window.location.href='{% url 'basket:summary' %}';">
+            {% trans "View basket" %}
+        </button>
+        <button type="button"
+                class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false">
+            <span class="sr-only">Toggle Dropdown</span>
+        </button>
+        <div class="dropdown-menu dropdown-menu-right">
+            {% include "oscar/basket/partials/basket_quick.html" %}
+        </div>
+    </div>
+</div>
diff --git a/tests/django_oscar/oscar/partials/nav_accounts.html b/tests/django_oscar/oscar/partials/nav_accounts.html
new file mode 100644
index 0000000..e5aea2d
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/nav_accounts.html
@@ -0,0 +1,88 @@
+{% load i18n %}
+<nav id="top_page" class="navbar navbar-expand-lg navbar-light bg-light accounts">
+    <button class="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target=".account-collapse"
+            aria-controls="navbarSupportedContent"
+            aria-expanded="false"
+            aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="container">
+        <div class="navbar-collapse account-collapse collapse">
+            {% block nav_account_languages %}
+                {% if LANGUAGES|length > 1 %}
+                    <form id="language_selector"
+                          class="form-inline mb-0 mt-2 mt-lg-0"
+                          action="{% url 'set_language' %}"
+                          method="post">
+                        {% csrf_token %}
+                        <input name="next" type="hidden" value="{{ language_neutral_url_path }}" />
+                        <div class="form-group mb-0">
+                            <select name="language" class="form-control">
+                                {% get_language_info_list for LANGUAGES as languages %}
+                                {% for language in languages %}
+                                    <option value="{{ language.code }}"
+                                        {% if language.code == LANGUAGE_CODE %}
+                                            selected="selected"
+                                        {% endif %}
+                                        >
+                                        {{ language.name_local }}
+                                    </option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                        <button class="btn btn-outline-secondary ml-2"
+                                type="submit"
+                                data-loading-text="{% trans 'Submitting...' %}">
+                            {% trans "Go" %}
+                        </button>
+                    </form>
+                {% endif %}
+            {% endblock %}
+            <ul class="navbar-nav ml-md-auto d-md-flex">
+                {% if user.is_authenticated %}
+                    {% block nav_account_navbar_authenticated %}
+                        <li class="nav-item mr-2">
+                            {% if num_unread_notifications > 0 %}
+                                {# If user has new notifications - we change account link to go to inbox #}
+                                <a href="{% url 'customer:notifications-inbox' %}" class="nav-link mt-2 mt-lg-0">
+                                    <i class="far fa-user mr-2"></i>
+                                    {% trans "Account" %}
+                                    <span class="badge badge-warning">{{ num_unread_notifications }}</span>
+                                </a>
+                            {% else %}
+                                <a href="{% url 'customer:summary' %}" class="nav-link mt-2 mt-lg-0">
+                                    <i class="far fa-user mr-2"></i>
+                                    {% trans "Account" %}
+                                </a>
+                            {% endif %}
+                        </li>
+                        {% if user.is_staff or perms.partner.dashboard_access %}
+                            <li class="nav-item mr-2">
+                                <a href="{% url 'dashboard:index' %}" class="nav-link">
+                                    <i class="fas fa-list-ul mr-2"></i>
+                                    {% trans "Dashboard" %}
+                                </a>
+                            </li>
+                        {% endif %}
+                        <li class="nav-item mr-2">
+                            <a id="logout_link" href="{% url 'customer:logout' %}" class="nav-link">
+                                <i class="fas fa-sign-out-alt mr-2"></i>
+                                {% trans "Logout" %}
+                            </a>
+                        </li>
+                    {% endblock %}
+                {% else %}
+                    <li class="nav-item mr-2">
+                        <a id="login_link" href="{% url 'customer:login' %}" class="nav-link">
+                            <i class="fas fa-sign-in-alt mr-2"></i>
+                            {% trans "Login or register" %}
+                        </a>
+                    </li>
+                {% endif %}
+            </ul>
+        </div>
+    </div>
+</nav>
diff --git a/tests/django_oscar/oscar/partials/nav_checkout.html b/tests/django_oscar/oscar/partials/nav_checkout.html
new file mode 100644
index 0000000..1ecd4e8
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/nav_checkout.html
@@ -0,0 +1,35 @@
+<div class="navbar primary">
+    {% load flatpages %}
+    {% get_flatpages '/order/' as flatpages %}
+    {% if flatpages %}
+        <div class="navbar-inner">
+            <div class="container" style="width: auto;">
+                <a class="btn navbar-btn" data-toggle="collapse" data-target=".navbar-collapse">
+                    <i class="fas fa-bars"></i>
+                </a>
+                <a class="brand hidden" href="{{ homepage_url }}">
+                    {{ shop_name }}
+                </a>
+                <div class="navbar-collapse">
+                    <ul class="nav">
+                        <!-- Links to modal flatpages -->
+                        {% for page in flatpages %}
+                            <li>
+                                <a data-toggle="modal" href="#{{ page.title|slugify }}">
+                                    {{ page.title }}
+                                </a>
+                            </li>
+                        {% endfor %}
+                        <!-- Delete this if other links present -->
+                        <li>
+                            <a href="{{ homepage_url }}">&larr;</a>
+                        </li>
+                    </ul>
+                </div>
+                <!-- /.navbar-collapse -->
+            </div>
+        </div>
+        <!-- /navbar-inner -->
+    {% endif %}
+</div>
+<!-- /navbar -->
diff --git a/tests/django_oscar/oscar/partials/nav_primary.html b/tests/django_oscar/oscar/partials/nav_primary.html
new file mode 100644
index 0000000..16bcc97
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/nav_primary.html
@@ -0,0 +1,79 @@
+{% load currency_filters %}
+{% load category_tags %}
+{% load i18n %}
+<nav class="{% block nav_classes %}navbar navbar-expand-lg navbar-dark bg-dark{% endblock %}">
+{% block navbar_toggler %}
+    <button class="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent"
+            aria-expanded="false"
+            aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+{% endblock %}
+{% block navbar_basket %}
+    <a class="btn btn-secondary float-right btn-cart ml-auto d-inline-block d-md-none"
+       href="{% url 'basket:summary' %}">
+        <i class="fas fa-shopping-cart"></i>
+        {% trans "Basket" %}
+        {% if not request.basket.is_empty %}
+            {% if request.basket.is_tax_known %}
+                {% blocktrans with total=request.basket.total_incl_tax|currency:request.basket.currency %}
+                    Total: {{ total }}
+                {% endblocktrans %}
+            {% else %}
+                {% blocktrans with total=request.basket.total_excl_tax|currency:request.basket.currency %}
+                    Total: {{ total }}
+                {% endblocktrans %}
+            {% endif %}
+        {% endif %}
+    </a>
+{% endblock %}
+{% block navbar_collapse %}
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        {% block nav %}
+            <ul class="navbar-nav mr-auto">
+                {% block nav_items %}
+                    <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">
+                            {% block browse_store_text %}
+                                {% trans "Browse store" %}
+                            {% endblock %}
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            {% category_tree depth=1 as tree_categories %}
+                            <a class="dropdown-item" href="{% url 'catalogue:index' %}">
+                                {% trans "All products" %}
+                            </a>
+                            {% if tree_categories %}
+                                <div class="dropdown-divider"></div>
+                                {% for tree_category in tree_categories %}
+                                    <a class="dropdown-item" href="{{ tree_category.get_absolute_url }}">
+                                        {{ tree_category.name }}
+                                    </a>
+                                {% endfor %}
+                            {% endif %}
+                            <div class="dropdown-divider"></div>
+                            {% block nav_dropdown_extra_items %}
+                                <a class="dropdown-item" href="{% url 'offer:list' %}">
+                                    {% trans "Offers" %}
+                                </a>
+                            {% endblock %}
+                        </div>
+                    </li>
+                {% endblock %}
+            </ul>
+        {% endblock %}
+        {% block nav_extra %}
+            {% include "oscar/partials/search.html" %}{% endblock %}
+        </div>
+    {% endblock %}
+</nav>
diff --git a/tests/django_oscar/oscar/partials/pagination.html b/tests/django_oscar/oscar/partials/pagination.html
new file mode 100644
index 0000000..8931ce0
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/pagination.html
@@ -0,0 +1,31 @@
+{% load display_tags %}
+{% load i18n %}
+{% if paginator.num_pages > 1 %}
+    <nav>
+        <ul class="pagination justify-content-center">
+            {% if page_obj.has_previous %}
+                <li class="page-item">
+                    <a class="page-link"
+                       href="?{% get_parameters 'page' %}page={{ page_obj.previous_page_number }}"
+                       tabindex="-1">
+                        {% trans "previous" %}
+                    </a>
+                </li>
+            {% endif %}
+            <li class="page-item disabled">
+                <span class="page-link">
+                    {% blocktrans with page_num=page_obj.number total_pages=paginator.num_pages %}
+                        Page {{ page_num }} of {{ total_pages }}
+                    {% endblocktrans %}
+                </span>
+            </li>
+            {% if page_obj.has_next %}
+                <li class="page-item">
+                    <a class="page-link" href="?{% get_parameters 'page' %}page={{ page_obj.next_page_number }}">
+                        {% trans "next" %}
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+    </nav>
+{% endif %}
diff --git a/tests/django_oscar/oscar/partials/search.html b/tests/django_oscar/oscar/partials/search.html
new file mode 100644
index 0000000..b50562a
--- /dev/null
+++ b/tests/django_oscar/oscar/partials/search.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+<form class="form-inline my-2 my-lg-0" method="GET" action="{% url 'search:search' %}">
+    <input class="form-control mr-sm-2" name="q" placeholder="Search" aria-label="Search">
+    <button class="btn btn btn-secondary my-2 my-sm-0" type="submit">
+        {% trans "Search" %}
+    </button>
+</form>
diff --git a/tests/django_oscar/oscar/registration/password_reset_complete.html b/tests/django_oscar/oscar/registration/password_reset_complete.html
new file mode 100644
index 0000000..7a0b5d4
--- /dev/null
+++ b/tests/django_oscar/oscar/registration/password_reset_complete.html
@@ -0,0 +1,35 @@
+{% extends 'oscar/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {% trans 'Password reset complete' %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'password-reset' %}">
+                    {% trans 'Password reset' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans 'Complete' %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% trans "Password reset complete" %}
+{% endblock %}
+{% block content %}
+    <p>
+        {% trans "Your password has been set. You may go ahead and log in now." %}
+    </p>
+    <p>
+        <a href="{{ login_url }}" class="btn btn-lg btn-primary">
+            {% trans 'Log in' %}
+        </a>
+    </p>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/registration/password_reset_confirm.html b/tests/django_oscar/oscar/registration/password_reset_confirm.html
new file mode 100644
index 0000000..328958f
--- /dev/null
+++ b/tests/django_oscar/oscar/registration/password_reset_confirm.html
@@ -0,0 +1,46 @@
+{% extends 'oscar/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {% trans 'Enter a new password' %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'password-reset' %}">
+                    {% trans 'Password reset' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans 'Enter a new password' %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% trans "Enter a new password" %}
+{% endblock %}
+{% block content %}
+    {% if validlink %}
+        <p>
+            {% trans "Please enter your new password twice so we can verify you typed it in correctly." %}
+        </p>
+        <form id="password_reset_form" method="post">
+            {% csrf_token %}
+            {% include 'oscar/partials/form_fields.html' %}
+            <div class="form-group form-actions">
+                <button class="btn btn-primary btn-lg" type="submit" data-loading-text="{% trans 'Changing...' %}">
+                    {% trans 'Change my password' %}
+                </button>
+            </div>
+        </form>
+    {% else %}
+        <h1>{% trans 'Password reset unsuccessful' %}</h1>
+        <p>
+            {% trans "The password reset link was invalid, possibly because it has already been used. Please request a new password reset." %}
+        </p>
+    {% endif %}
+{% endblock %}
diff --git a/tests/django_oscar/oscar/registration/password_reset_done.html b/tests/django_oscar/oscar/registration/password_reset_done.html
new file mode 100644
index 0000000..e0fde2e
--- /dev/null
+++ b/tests/django_oscar/oscar/registration/password_reset_done.html
@@ -0,0 +1,38 @@
+{% extends 'oscar/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {% trans 'Password reset email sent' %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'password-reset' %}">
+                    {% trans 'Password reset' %}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans 'Email sent' %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% trans "Email sent" %}
+{% endblock %}
+{% block content %}
+    <p>
+        {% blocktrans %}
+            We've e-mailed you instructions for resetting your password. You should be receiving it shortly.
+        {% endblocktrans %}
+    </p>
+    <p>
+        {% blocktrans %}
+            If you don't receive an email, please make sure you've entered the address you registered with, and check
+            your spam folder.
+        {% endblocktrans %}
+    </p>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/registration/password_reset_form.html b/tests/django_oscar/oscar/registration/password_reset_form.html
new file mode 100644
index 0000000..40fce8d
--- /dev/null
+++ b/tests/django_oscar/oscar/registration/password_reset_form.html
@@ -0,0 +1,34 @@
+{% extends 'oscar/layout.html' %}
+{% load i18n %}
+{% block title %}
+    {% trans 'Password reset' %} | {{ block.super }}
+{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                {% trans 'Password reset' %}
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block headertext %}
+    {% trans "Password reset" %}
+{% endblock %}
+{% block content %}
+    <form id="password_reset_form" method="post">
+        {% csrf_token %}
+        <p>
+            {% trans "Forgotten your password? Enter your e-mail address below, and we'll e-mail instructions for setting a new one." %}
+        </p>
+        {% include 'oscar/partials/form_fields.html' with style='stacked' %}
+        <div class="form-group form-actions">
+            <button type="submit" class="btn btn-primary btn-lg" data-loading-text="{% trans 'Sending...' %}">
+                {% trans 'Send reset email' %}
+            </button>
+        </div>
+    </form>
+{% endblock %}
diff --git a/tests/django_oscar/oscar/search/indexes/product/item_text.txt b/tests/django_oscar/oscar/search/indexes/product/item_text.txt
new file mode 100644
index 0000000..8fae4f4
--- /dev/null
+++ b/tests/django_oscar/oscar/search/indexes/product/item_text.txt
@@ -0,0 +1,3 @@
+{{ object.upc|default:"" }}
+{{ object.title }}
+{{ object.description|default:"" }}
diff --git a/tests/django_oscar/oscar/search/partials/facet.html b/tests/django_oscar/oscar/search/partials/facet.html
new file mode 100644
index 0000000..8b37073
--- /dev/null
+++ b/tests/django_oscar/oscar/search/partials/facet.html
@@ -0,0 +1,25 @@
+{% load i18n %}
+<dl>
+    <dt class="nav-header">
+    {{ name }}
+    </dt>
+    {% for item in items %}
+        <dd>
+        {% if item.selected %}
+            <input class="facet_checkbox" type="checkbox" name="{{ item.name }}" checked />
+            <input class="facet_url" type="hidden" name="url_for_{{ item.name }}" value="{{ item.deselect_url }}" />
+            <strong>{{ item.name }}</strong>
+        {% else %}
+            {% if item.disabled %}
+                <input type="checkbox" name="{{ item.name }}" disabled />
+                {{ item.name }}
+            {% else %}
+                <input class="facet_checkbox" type="checkbox" name="{{ item.name }}" />
+                <input class="facet_url" type="hidden" name="url_for_{{ item.name }}" value="{{ item.select_url }}" />
+                <a href="{{ item.select_url }}">{{ item.name }}</a>
+            {% endif %}
+        {% endif %}
+        {% if item.show_count %}({{ item.count }}){% endif %}
+        </dd>
+    {% endfor %}
+</dl>
diff --git a/tests/django_oscar/oscar/search/results.html b/tests/django_oscar/oscar/search/results.html
new file mode 100644
index 0000000..9a0bd7e
--- /dev/null
+++ b/tests/django_oscar/oscar/search/results.html
@@ -0,0 +1,105 @@
+{% extends "oscar/layout_2_col.html" %}
+{% load currency_filters %}
+{% load product_tags %}
+{% load i18n %}
+{% block title %}"{{ query }}" | {{ block.super }}{% endblock %}
+{% block breadcrumbs %}
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{{ homepage_url }}">{% trans "Home" %}</a>
+            </li>
+            <li class="breadcrumb-item">
+                {% trans "Search" %}
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                "{{ query }}"
+            </li>
+        </ol>
+    </nav>
+{% endblock %}
+{% block column_left %}
+    {% if has_facets %}
+        <h4>{% trans "Refine your search" %}</h4>
+        <dl>
+            {% for field, data in facet_data.items %}
+                {% if data.results %}
+                    {% include 'oscar/search/partials/facet.html' with name=data.name items=data.results %}{% endif %}
+                {% endfor %}
+            </dl>
+        {% endif %}
+    {% endblock %}
+    {% block headertext %}
+        {% blocktrans with q=query %}
+            Products matching "{{ q }}"
+        {% endblocktrans %}
+    {% endblock %}
+    {% block content %}
+        <form method="get">
+            {# Render other search params as hidden inputs #}
+            {% for value in selected_facets %}
+                <input type="hidden" name="selected_facets" value="{{ value }}" />
+            {% endfor %}
+            <input type="hidden" name="q" value="{{ search_form.q.value }}" />
+            {% if paginator.count %}
+                {% if paginator.num_pages > 1 %}
+                    {% blocktrans with start=page.start_index end=page.end_index num_results=paginator.count %}
+                        Found
+                        <strong>{{ num_results }}</strong>
+                        results, showing
+                        <strong>{{ start }}</strong>
+                        to
+                        <strong>{{ end }}</strong>
+                        .
+                    {% endblocktrans %}
+                {% else %}
+                    {% blocktrans count num_results=paginator.count %}
+                        Found
+                        <strong>{{ num_results }}</strong>
+                        result.
+                        {% plural %}
+                        Found
+                        <strong>{{ num_results }}</strong>
+                        results.
+                    {% endblocktrans %}
+                {% endif %}
+                <div class="float-right">
+                    {% include "oscar/partials/form_field.html" with field=search_form.sort_by %}
+                </div>
+            {% else %}
+                <p>
+                    {% trans "Found
+                    <strong>0</strong>
+                    results." %}
+                    {% if suggestion %}
+                        {% url 'search:search' as search_url %}
+                        {% blocktrans %}
+                            Did you mean
+                            <a href="{{ search_url }}?q={{ suggestion }}">
+                                "{{ suggestion }}"
+                            </a>
+                            ?
+                        {% endblocktrans %}
+                    {% endif %}
+                </p>
+            {% endif %}
+        </form>
+        {% if page.object_list %}
+            <section>
+                <div>
+                    <ol class="row list-unstyled ml-0 pl-0">
+                        {% for result in page.object_list %}
+                            <li class="col-sm-4 col-md-3 col-lg-3">
+                                {% render_product result.object %}
+                            </li>
+                        {% endfor %}
+                    </ol>
+                    {% include "oscar/partials/pagination.html" with page_obj=page %}
+                </div>
+            </section>
+        {% endif %}
+    {% endblock %}
+    {% block onbodyload %}
+        {{ block.super }}
+        oscar.search.init();
+    {% endblock %}
diff --git a/tests/django_rest/admin.html b/tests/django_rest/admin.html
new file mode 100644
index 0000000..295f4fa
--- /dev/null
+++ b/tests/django_rest/admin.html
@@ -0,0 +1,316 @@
+{% load static %}
+{% load i18n %}
+{% load rest_framework %}
+<!DOCTYPE html>
+<html>
+    <head>
+        {% block head %}
+            {% block meta %}
+                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+                <meta name="robots" content="NONE,NOARCHIVE" />
+            {% endblock %}
+            <title>
+            {% block title %}Django REST framework{% endblock %}
+            </title>
+            {% block style %}
+                {% block bootstrap_theme %}
+                    <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap.min.css" %}"/>
+                    <link rel="stylesheet"
+                          type="text/css"
+                          href="{% static "/>
+                {% endblock %}
+                <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/prettify.css" %}"/>
+                <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/default.css" %}"/>
+            {% endblock %}
+        {% endblock %}
+    </head>
+    {% block body %}
+        <body class="{% block bodyclass %}{% endblock %}">
+        <div class="wrapper">
+            {% block navbar %}
+                <div class="navbar navbar-static-top {% block bootstrap_navbar_variant %}navbar-inverse{% endblock %}">
+                <div class="container">
+                    <span>
+                        {% block branding %}
+                            <a class='navbar-brand' rel="nofollow" href='https://www.django-rest-framework.org/'>
+                                Django REST framework
+                            </a>
+                        {% endblock %}
+                    </span>
+                    <ul class="nav navbar-nav pull-right">
+                        {% block userlinks %}
+                            {% if user.is_authenticated %}
+                                {% optional_logout request user %}
+                            {% else %}
+                                {% optional_login request %}
+                            {% endif %}
+                        {% endblock %}
+                    </ul>
+                </div>
+            </div>
+        {% endblock %}
+        <div class="container">
+            {% block breadcrumbs %}
+                <ul class="breadcrumb">
+                    {% for breadcrumb_name, breadcrumb_url in breadcrumblist %}
+                        {% if forloop.last %}
+                            <li class="active">
+                                <a href="{{ breadcrumb_url }}">{{ breadcrumb_name }}</a>
+                            </li>
+                        {% else %}
+                            <li>
+                                <a href="{{ breadcrumb_url }}">{{ breadcrumb_name }}</a>
+                            </li>
+                        {% endif %}
+                    {% endfor %}
+                </ul>
+            {% endblock %}
+            <!-- Content -->
+            <div id="content">
+                {% if 'GET' in allowed_methods %}
+                    <form id="get-form" class="pull-right">
+                        <fieldset>
+                            <div class="btn-group format-selection">
+                                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+                                    Format
+                                    <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    {% for format in available_formats %}
+                                        <li>
+                                            <a class="format-option"
+                                               href='{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}'
+                                               rel="nofollow">
+                                                {{ format }}
+                                            </a>
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            </div>
+                        </fieldset>
+                    </form>
+                {% endif %}
+                {% if post_form %}
+                    <button type="button"
+                            class="button-form btn btn-primary"
+                            data-toggle="modal"
+                            data-target="#createModal">
+                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                        Create
+                    </button>
+                {% endif %}
+                {% if put_form %}
+                    <button type="button"
+                            class="button-form btn btn-primary"
+                            data-toggle="modal"
+                            data-target="#editModal">
+                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
+                        Edit
+                    </button>
+                {% endif %}
+                {% if delete_form %}
+                    <form class="button-form" action="{{ request.get_full_path }}" data-method="DELETE">
+                        <button class="btn btn-danger">
+                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+                            Delete
+                        </button>
+                    </form>
+                {% endif %}
+                {% if extra_actions %}
+                    <div class="dropdown" style="float: right; margin-right: 10px">
+                        <button class="btn btn-default"
+                                id="extra-actions-menu"
+                                data-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="true">
+                            {% trans "Extra Actions" %}
+                            <span class="caret"></span>
+                        </button>
+                        <ul class="dropdown-menu" aria-labelledby="extra-actions-menu">
+                            {% for action_name, url in extra_actions|items %}
+                                <li>
+                                    <a href="{{ url }}">{{ action_name }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                {% endif %}
+                {% if filter_form %}
+                    <button style="float: right; margin-right: 10px"
+                            data-toggle="modal"
+                            data-target="#filtersModal"
+                            class="btn btn-default">
+                        <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
+                        {% trans "Filters" %}
+                    </button>
+                {% endif %}
+                <div class="content-main">
+                    <div class="page-header">
+                        <h1>{{ name }}</h1>
+                    </div>
+                    <div style="float:left">
+                        {% block description %}{{ description }}{% endblock %}
+                    </div>
+                    {% if paginator %}
+                        <nav style="float: right">
+                            {% get_pagination_html paginator %}
+                        </nav>
+                    {% endif %}
+                    <div class="request-info" style="clear: both" >
+                        {% if style == 'list' %}
+                            {% include "rest_framework/admin/list.html" %}
+                        {% else %}
+                            {% include "rest_framework/admin/detail.html" %}{% endif %}
+                        </div>
+                        {% if paginator %}
+                            <nav style="float: right">
+                                {% get_pagination_html paginator %}
+                            </nav>
+                        {% endif %}
+                    </div>
+                </div>
+                <!-- END Content -->
+            </div>
+            <!-- /.container -->
+        </div>
+        <!-- ./wrapper -->
+        <!-- Create Modal -->
+        <div class="modal fade"
+             id="createModal"
+             tabindex="-1"
+             role="dialog"
+             aria-labelledby="myModalLabel"
+             aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                        <h4 class="modal-title" id="myModalLabel">
+                            Create
+                        </h4>
+                    </div>
+                    <form action="{{ request.get_full_path }}"
+                          method="POST"
+                          enctype="multipart/form-data"
+                          class="form-horizontal">
+                        <div class="modal-body">
+                            <fieldset>
+                                {% csrf_token %}
+                                {{ post_form }}
+                            </fieldset>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-default" data-dismiss="modal">
+                                Close
+                            </button>
+                            <button type="submit" class="btn btn-primary">
+                                Save
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+        <!-- Edit Modal -->
+        <div class="modal fade"
+             id="editModal"
+             tabindex="-1"
+             role="dialog"
+             aria-labelledby="myModalLabel"
+             aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                        <h4 class="modal-title" id="myModalLabel">
+                            Edit
+                        </h4>
+                    </div>
+                    <form action="{{ request.get_full_path }}"
+                          data-method="PUT"
+                          enctype="multipart/form-data"
+                          class="form-horizontal">
+                        <div class="modal-body">
+                            <fieldset>
+                                {{ put_form }}
+                            </fieldset>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-default" data-dismiss="modal">
+                                Close
+                            </button>
+                            <button type="submit" class="btn btn-primary">
+                                Save
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+        {% if error_form %}
+            <!-- Errors Modal -->
+            <div class="modal"
+                 id="errorModal"
+                 tabindex="-1"
+                 role="dialog"
+                 aria-labelledby="myModalLabel"
+                 aria-hidden="true">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                            <h4 class="modal-title" id="myModalLabel">
+                                {{ error_title }}
+                            </h4>
+                        </div>
+                        <form action="{{ request.get_full_path }}"
+                              data-method="{{ request.method }}"
+                              enctype="multipart/form-data"
+                              class="form-horizontal">
+                            <div class="modal-body">
+                                <fieldset>
+                                    {{ error_form }}
+                                </fieldset>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-default" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="submit" class="btn btn-primary">
+                                    Save
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+        {% if filter_form %}{{ filter_form }}{% endif %}
+        {% block script %}
+            <script>
+          window.drf = {
+            csrfHeaderName: "{{ csrf_header_name|default:'X-CSRFToken' }}",
+            csrfToken: "{{ csrf_token }}"
+          };
+            </script>
+            <script src="{% static "rest_framework/js/jquery-3.5.1.min.js" %}"></script>
+            <script src="{% static "rest_framework/js/ajax-form.js" %}"></script>
+            <script src="{% static "rest_framework/js/csrf.js" %}"></script>
+            <script src="{% static "rest_framework/js/bootstrap.min.js" %}"></script>
+            <script src="{% static "rest_framework/js/prettify-min.js" %}"></script>
+            <script src="{% static "rest_framework/js/default.js" %}"></script>
+            <script>
+          $(document).ready(function() {
+            $('form').ajaxForm();
+          });
+            </script>
+        {% endblock %}
+    </body>
+{% endblock %}
+</html>
diff --git a/tests/django_rest/admin/detail.html b/tests/django_rest/admin/detail.html
new file mode 100644
index 0000000..7537956
--- /dev/null
+++ b/tests/django_rest/admin/detail.html
@@ -0,0 +1,13 @@
+{% load rest_framework %}
+<table class="table table-striped">
+    <tbody>
+        {% for key, value in results|items %}
+            {% if key in details %}
+                <tr>
+                    <th>{{ key|capfirst }}</th>
+                    <td {{ value|add_nested_class }}>{{ value|format_value }}</td>
+                </tr>
+            {% endif %}
+        {% endfor %}
+    </tbody>
+</table>
diff --git a/tests/django_rest/admin/dict_value.html b/tests/django_rest/admin/dict_value.html
new file mode 100644
index 0000000..37bf0be
--- /dev/null
+++ b/tests/django_rest/admin/dict_value.html
@@ -0,0 +1,11 @@
+{% load rest_framework %}
+<table class="table table-striped">
+    <tbody>
+        {% for k, v in value|items %}
+            <tr>
+                <th>{{ k|format_value }}</th>
+                <td>{{ v|format_value }}</td>
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
diff --git a/tests/django_rest/admin/list.html b/tests/django_rest/admin/list.html
new file mode 100644
index 0000000..b159ffe
--- /dev/null
+++ b/tests/django_rest/admin/list.html
@@ -0,0 +1,29 @@
+{% load rest_framework %}
+<table class="table table-striped">
+    <thead>
+        <tr>
+            {% for column in columns %}<th>{{ column|capfirst }}</th>{% endfor %}
+            <th class="col-xs-1"></th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for row in results %}
+            <tr>
+                {% for key, value in row|items %}
+                    {% if key in columns %}
+                        <td {{ value|add_nested_class }} >{{ value|format_value }}</td>
+                    {% endif %}
+                {% endfor %}
+                <td>
+                    {% if row.url %}
+                        <a href="{{ row.url }}">
+                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+                        </a>
+                    {% else %}
+                        <span class="glyphicon glyphicon-chevron-right text-muted" aria-hidden="true"></span>
+                    {% endif %}
+                </td>
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
diff --git a/tests/django_rest/admin/list_value.html b/tests/django_rest/admin/list_value.html
new file mode 100644
index 0000000..24ee569
--- /dev/null
+++ b/tests/django_rest/admin/list_value.html
@@ -0,0 +1,11 @@
+{% load rest_framework %}
+<table class="table table-striped">
+    <tbody>
+        {% for item in value %}
+            <tr>
+                <th>{{ forloop.counter0 }}</th>
+                <td>{{ item|format_value }}</td>
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
diff --git a/tests/django_rest/admin/simple_list_value.html b/tests/django_rest/admin/simple_list_value.html
new file mode 100644
index 0000000..01997f6
--- /dev/null
+++ b/tests/django_rest/admin/simple_list_value.html
@@ -0,0 +1,5 @@
+{% load rest_framework %}
+{% for item in value %}
+    {% if not forloop.first %},{% endif %}
+    {{ item|format_value }}
+{% endfor %}
diff --git a/tests/django_rest/api.html b/tests/django_rest/api.html
new file mode 100644
index 0000000..0b5ef96
--- /dev/null
+++ b/tests/django_rest/api.html
@@ -0,0 +1,2 @@
+{% extends "rest_framework/base.html" %}
+{# Override this template in your own templates directory to customize #}
diff --git a/tests/django_rest/base.html b/tests/django_rest/base.html
new file mode 100644
index 0000000..07c119c
--- /dev/null
+++ b/tests/django_rest/base.html
@@ -0,0 +1,372 @@
+{% load static %}
+{% load i18n %}
+{% load rest_framework %}
+<!DOCTYPE html>
+<html>
+    <head>
+        {% block head %}
+            {% block meta %}
+                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+                <meta name="robots" content="NONE,NOARCHIVE" />
+            {% endblock %}
+            <title>
+            {% block title %}
+                {% if name %}{{ name }} – {% endif %}
+                Django REST framework
+            {% endblock %}
+            </title>
+            {% block style %}
+                {% block bootstrap_theme %}
+                    <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap.min.css" %}"/>
+                    <link rel="stylesheet"
+                          type="text/css"
+                          href="{% static "/>
+                {% endblock %}
+                <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/prettify.css" %}"/>
+                <link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/default.css" %}"/>
+                {% if code_style %}
+                    <style>
+{{ code_style }}
+                    </style>
+                {% endif %}
+            {% endblock %}
+        {% endblock %}
+    </head>
+    {% block body %}
+        <body class="{% block bodyclass %}{% endblock %}">
+        <div class="wrapper">
+            {% block navbar %}
+                <div class="navbar navbar-static-top {% block bootstrap_navbar_variant %}navbar-inverse{% endblock %}"
+                     role="navigation"
+                     aria-label="{% trans ">
+                <div class="container">
+                    <span>
+                        {% block branding %}
+                            <a class='navbar-brand' rel="nofollow" href='https://www.django-rest-framework.org/'>
+                                Django REST framework
+                            </a>
+                        {% endblock %}
+                    </span>
+                    <ul class="nav navbar-nav pull-right">
+                        {% block userlinks %}
+                            {% if user.is_authenticated %}
+                                {% optional_logout request user %}
+                            {% else %}
+                                {% optional_login request %}
+                            {% endif %}
+                        {% endblock %}
+                    </ul>
+                </div>
+            </div>
+        {% endblock %}
+        <div class="container">
+            {% block breadcrumbs %}
+                <ul class="breadcrumb">
+                    {% for breadcrumb_name, breadcrumb_url in breadcrumblist %}
+                        {% if forloop.last %}
+                            <li class="active">
+                                <a href="{{ breadcrumb_url }}">{{ breadcrumb_name }}</a>
+                            </li>
+                        {% else %}
+                            <li>
+                                <a href="{{ breadcrumb_url }}">{{ breadcrumb_name }}</a>
+                            </li>
+                        {% endif %}
+                        {% empty %}
+                        {% block breadcrumbs_empty %}
+                            &nbsp;
+                        {% endblock breadcrumbs_empty %}
+                    {% endfor %}
+                </ul>
+            {% endblock %}
+            <!-- Content -->
+            <div id="content" role="main" aria-label="{% trans "content" %}">
+                {% block content %}
+                    <div class="region" aria-label="{% trans "request form" %}">
+                        {% block request_forms %}
+                            {% if 'GET' in allowed_methods %}
+                                <form id="get-form" class="pull-right">
+                                    <fieldset>
+                                        {% if api_settings.URL_FORMAT_OVERRIDE %}
+                                            <div class="btn-group format-selection">
+                                                <a class="btn btn-primary js-tooltip"
+                                                   href="{{ request.get_full_path }}"
+                                                   rel="nofollow"
+                                                   title="Make a GET request on the {{ name }} resource">
+                                                    GET
+                                                </a>
+                                                <button class="btn btn-primary dropdown-toggle js-tooltip"
+                                                        data-toggle="dropdown"
+                                                        title="Specify a format for the GET request">
+                                                    <span class="caret"></span>
+                                                </button>
+                                                <ul class="dropdown-menu">
+                                                    {% for format in available_formats %}
+                                                        <li>
+                                                            <a class="js-tooltip format-option"
+                                                               href="{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}"
+                                                               rel="nofollow"
+                                                               title="Make a GET request on the {{ name }} resource with the format set to `{{ format }}`">
+                                                                {{ format }}
+                                                            </a>
+                                                        </li>
+                                                    {% endfor %}
+                                                </ul>
+                                            </div>
+                                        {% else %}
+                                            <a class="btn btn-primary js-tooltip"
+                                               href="{{ request.get_full_path }}"
+                                               rel="nofollow"
+                                               title="Make a GET request on the {{ name }} resource">
+                                                GET
+                                            </a>
+                                        {% endif %}
+                                    </fieldset>
+                                </form>
+                            {% endif %}
+                            {% if options_form %}
+                                <form class="button-form" action="{{ request.get_full_path }}" data-method="OPTIONS">
+                                    <button class="btn btn-primary js-tooltip"
+                                            title="Make an OPTIONS request on the {{ name }} resource">
+                                        OPTIONS
+                                    </button>
+                                </form>
+                            {% endif %}
+                            {% if delete_form %}
+                                <button class="btn btn-danger button-form js-tooltip"
+                                        title="Make a DELETE request on the {{ name }} resource"
+                                        data-toggle="modal"
+                                        data-target="#deleteModal">
+                                    DELETE
+                                </button>
+                                <!-- Delete Modal -->
+                                <div class="modal fade"
+                                     id="deleteModal"
+                                     tabindex="-1"
+                                     role="dialog"
+                                     aria-labelledby="myModalLabel"
+                                     aria-hidden="true">
+                                    <div class="modal-dialog">
+                                        <div class="modal-content">
+                                            <div class="modal-body">
+                                                <h4 class="text-center">Are you sure you want to delete this {{ name }}?</h4>
+                                            </div>
+                                            <div class="modal-footer">
+                                                <button type="button" class="btn btn-default" data-dismiss="modal">
+                                                    Cancel
+                                                </button>
+                                                <form class="button-form"
+                                                      action="{{ request.get_full_path }}"
+                                                      data-method="DELETE">
+                                                    <button class="btn btn-danger">Delete</button>
+                                                </form>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            {% endif %}
+                            {% if extra_actions %}
+                                <div class="dropdown" style="float: right; margin-right: 10px">
+                                    <button class="btn btn-default"
+                                            id="extra-actions-menu"
+                                            data-toggle="dropdown"
+                                            aria-haspopup="true"
+                                            aria-expanded="true">
+                                        {% trans "Extra Actions" %}
+                                        <span class="caret"></span>
+                                    </button>
+                                    <ul class="dropdown-menu" aria-labelledby="extra-actions-menu">
+                                        {% for action_name, url in extra_actions|items %}
+                                            <li>
+                                                <a href="{{ url }}">{{ action_name }}</a>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                </div>
+                            {% endif %}
+                            {% if filter_form %}
+                                <button style="float: right; margin-right: 10px"
+                                        data-toggle="modal"
+                                        data-target="#filtersModal"
+                                        class="btn btn-default">
+                                    <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
+                                    {% trans "Filters" %}
+                                </button>
+                            {% endif %}
+                        {% endblock request_forms %}
+                    </div>
+                    <div class="content-main" role="main" aria-label="{% trans "main content" %}">
+                        <div class="page-header">
+                            <h1>{{ name }}</h1>
+                        </div>
+                        <div style="float:left">
+                            {% block description %}{{ description }}{% endblock %}
+                        </div>
+                        {% if paginator %}
+                            <nav style="float: right">
+                                {% get_pagination_html paginator %}
+                            </nav>
+                        {% endif %}
+                        <div class="request-info" style="clear: both" aria-label="{% trans "request info" %}">
+                            <pre class="prettyprint">
+                            <b>{{ request.method }}</b> {{ request.get_full_path }}</pre>
+                        </div>
+                        <div class="response-info" aria-label="{% trans "response info" %}">
+                            <pre class="prettyprint"><span class="meta nocode"><b>HTTP {{ response.status_code }} {{ response.status_text }}</b>{% for key, val in response_headers|items %}
+<b>{{ key }}:</b> <span class="lit">{{ val|break_long_headers|urlize }}</span>{% endfor %}
+
+</span>{{ content|urlize }}
+                        </pre>
+                    </div>
+                </div>
+                {% if display_edit_forms %}
+                    {% if post_form or raw_data_post_form %}
+                        <div {% if post_form %}class="tabbable"{% endif %}
+                        >
+                        {% if post_form %}
+                            <ul class="nav nav-tabs form-switcher">
+                                <li>
+                                    <a name='html-tab' href="#post-object-form" data-toggle="tab">
+                                        HTML form
+                                    </a>
+                                </li>
+                                <li>
+                                    <a name='raw-tab' href="#post-generic-content-form" data-toggle="tab">
+                                        Raw data
+                                    </a>
+                                </li>
+                            </ul>
+                        {% endif %}
+                        <div class="well tab-content">
+                            {% if post_form %}
+                                <div class="tab-pane" id="post-object-form">
+                                    {% with form=post_form %}
+                                    <form action="{{ request.get_full_path }}"
+                                          method="POST"
+                                          enctype="multipart/form-data"
+                                          class="form-horizontal">
+                                        <fieldset>
+                                            {% csrf_token %}
+                                            {{ post_form }}
+                                            <div class="form-actions">
+                                                <button class="btn btn-primary js-tooltip"
+                                                        title="Make a POST request on the {{ name }} resource">
+                                                    POST
+                                                </button>
+                                            </div>
+                                        </fieldset>
+                                    </form>
+                                {% endwith %}
+                            </div>
+                        {% endif %}
+                        <div {% if post_form %}class="tab-pane"{% endif %} id="post-generic-content-form">
+                        {% with form=raw_data_post_form %}
+                        <form action="{{ request.get_full_path }}" method="POST" class="form-horizontal">
+                            <fieldset>
+                                {% include "rest_framework/raw_data_form.html" %}
+                                <div class="form-actions">
+                                    <button class="btn btn-primary js-tooltip"
+                                            title="Make a POST request on the {{ name }} resource">
+                                        POST
+                                    </button>
+                                </div>
+                            </fieldset>
+                        </form>
+                    {% endwith %}
+                </div>
+            </div>
+        </div>
+    {% endif %}
+    {% if put_form or raw_data_put_form or raw_data_patch_form %}
+        <div {% if put_form %}class="tabbable"{% endif %}>
+        {% if put_form %}
+            <ul class="nav nav-tabs form-switcher">
+                <li>
+                    <a name='html-tab' href="#put-object-form" data-toggle="tab">
+                        HTML form
+                    </a>
+                </li>
+                <li>
+                    <a name='raw-tab' href="#put-generic-content-form" data-toggle="tab">
+                        Raw data
+                    </a>
+                </li>
+            </ul>
+        {% endif %}
+        <div class="well tab-content">
+            {% if put_form %}
+                <div class="tab-pane" id="put-object-form">
+                    <form action="{{ request.get_full_path }}"
+                          data-method="PUT"
+                          enctype="multipart/form-data"
+                          class="form-horizontal">
+                        <fieldset>
+                            {{ put_form }}
+                            <div class="form-actions">
+                                <button class="btn btn-primary js-tooltip"
+                                        title="Make a PUT request on the {{ name }} resource">
+                                    PUT
+                                </button>
+                            </div>
+                        </fieldset>
+                    </form>
+                </div>
+            {% endif %}
+            <div {% if put_form %}class="tab-pane"{% endif %} id="put-generic-content-form">
+            {% with form=raw_data_put_or_patch_form %}
+            <form action="{{ request.get_full_path }}" data-method="PUT" class="form-horizontal">
+                <fieldset>
+                    {% include "rest_framework/raw_data_form.html" %}
+                    <div class="form-actions">
+                        {% if raw_data_put_form %}
+                            <button class="btn btn-primary js-tooltip"
+                                    title="Make a PUT request on the {{ name }} resource">
+                                PUT
+                            </button>
+                        {% endif %}
+                        {% if raw_data_patch_form %}
+                            <button data-method="PATCH"
+                                    class="btn btn-primary js-tooltip"
+                                    title="Make a PATCH request on the {{ name }} resource">
+                                PATCH
+                            </button>
+                        {% endif %}
+                    </div>
+                </fieldset>
+            </form>
+        {% endwith %}
+    </div>
+</div>
+</div>
+{% endif %}
+{% endif %}
+{% endblock content %}
+</div>
+<!-- /.content -->
+</div>
+<!-- /.container -->
+</div>
+<!-- ./wrapper -->
+{% if filter_form %}{{ filter_form }}{% endif %}
+{% block script %}
+<script>
+        window.drf = {
+          csrfHeaderName: "{{ csrf_header_name|default:'X-CSRFToken' }}",
+          csrfToken: "{% if request %}{{ csrf_token }}{% endif %}"
+        };
+</script>
+<script src="{% static "rest_framework/js/jquery-3.5.1.min.js" %}"></script>
+<script src="{% static "rest_framework/js/ajax-form.js" %}"></script>
+<script src="{% static "rest_framework/js/csrf.js" %}"></script>
+<script src="{% static "rest_framework/js/bootstrap.min.js" %}"></script>
+<script src="{% static "rest_framework/js/prettify-min.js" %}"></script>
+<script src="{% static "rest_framework/js/default.js" %}"></script>
+<script>
+        $(document).ready(function() {
+          $('form').ajaxForm();
+        });
+</script>
+{% endblock %}
+</body>
+{% endblock %}
+</html>
diff --git a/tests/django_rest/docs/auth/basic.html b/tests/django_rest/docs/auth/basic.html
new file mode 100644
index 0000000..6aea910
--- /dev/null
+++ b/tests/django_rest/docs/auth/basic.html
@@ -0,0 +1,46 @@
+{% load rest_framework %}
+<!-- Modal -->
+<div class="modal fade auth-modal auth-basic"
+     id="auth_basic_modal"
+     tabindex="-1"
+     role="dialog"
+     aria-labelledby="basic authentication modal">
+    <div class="modal-dialog modal-md" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title">
+                    <i class="fa fa-key"></i>
+                    Basic Authentication
+                </h3>
+            </div>
+            <form class="form-horizontal authentication-basic-form">
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="authorization" class="col-sm-2 control-label">
+                            Username:
+                        </label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="username" required>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="authorization" class="col-sm-2 control-label">
+                            Password:
+                        </label>
+                        <div class="col-sm-10">
+                            <input type="password" class="form-control" id="password" required>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">
+                        Close
+                    </button>
+                    <button type="submit" class="btn btn-primary">
+                        Use Basic Authentication
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/tests/django_rest/docs/auth/session.html b/tests/django_rest/docs/auth/session.html
new file mode 100644
index 0000000..d92e3c5
--- /dev/null
+++ b/tests/django_rest/docs/auth/session.html
@@ -0,0 +1,41 @@
+{% load rest_framework %}
+<!-- Modal -->
+<div class="modal fade auth-modal auth-session"
+     id="auth_session_modal"
+     tabindex="-1"
+     role="dialog"
+     aria-labelledby="session authentication modal">
+    <div class="modal-dialog modal-md" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title">
+                    <i class="fa fa-key"></i>
+                    Session Authentication
+                </h3>
+            </div>
+            <form class="form-horizontal authentication-session-form">
+                <div class="modal-body">
+                    {% if user.is_authenticated %}
+                        <h4 class="text-center">You are logged in as {{ user.get_username }}.</h4>
+                    {% else %}
+                        <div class="text-center">
+                            <h4 class="text-center">
+                                You need to {% optional_docs_login request %} to enable Session Authentication.
+                            </h4>
+                        </div>
+                    {% endif %}
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">
+                        Close
+                    </button>
+                    {% if user.is_authenticated %}
+                        <button type="submit" class="btn btn-primary">
+                            Use Session Authentication
+                        </button>
+                    {% endif %}
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/tests/django_rest/docs/auth/token.html b/tests/django_rest/docs/auth/token.html
new file mode 100644
index 0000000..707b804
--- /dev/null
+++ b/tests/django_rest/docs/auth/token.html
@@ -0,0 +1,74 @@
+{% load rest_framework %}
+<!-- Modal -->
+<div class="modal fade auth-modal auth-token"
+     id="auth_token_modal"
+     tabindex="-1"
+     role="dialog"
+     aria-labelledby="token authentication modal">
+    <div class="modal-dialog modal-md" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title">
+                    <i class="fa fa-key"></i>
+                    Token Authentication
+                </h3>
+            </div>
+            <form class="form-horizontal authentication-token-form">
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="prefix" class="col-sm-2 control-label">
+                            Scheme:
+                        </label>
+                        <div class="col-sm-10">
+                            <input type="text"
+                                   class="form-control"
+                                   id="scheme"
+                                   placeholder="Bearer"
+                                   aria-describedby="schemeHelpBlock"
+                                   required>
+                            <span id="schemeHelpBlock" class="help-block">
+                                Either a registered authentication scheme such as
+                                <code>
+                                Bearer
+                                </code>
+                                , or a custom schema such as
+                                <code>
+                                Token
+                                </code>
+                                or
+                                <code>
+                                JWT
+                                </code>
+                                .
+                            </span>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="token" class="col-sm-2 control-label">
+                            Token:
+                        </label>
+                        <div class="col-sm-10">
+                            <input type="text"
+                                   class="form-control"
+                                   id="token"
+                                   placeholder="XXXX-XXXX-XXXX-XXXX"
+                                   aria-describedby="helpBlock"
+                                   required>
+                            <span id="tokenHelpBlock" class="help-block">
+                                A valid API token.
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">
+                        Close
+                    </button>
+                    <button type="submit" class="btn btn-primary">
+                        Use Token Authentication
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/tests/django_rest/docs/document.html b/tests/django_rest/docs/document.html
new file mode 100644
index 0000000..048e9d2
--- /dev/null
+++ b/tests/django_rest/docs/document.html
@@ -0,0 +1,31 @@
+{% load rest_framework %}
+<div class="row intro">
+    <div class="col-md-6 intro-title">
+        <h1>{{ document.title }}</h1>
+        {% if document.description %}
+            <p>
+                {% render_markdown document.description %}
+            </p>
+        {% endif %}
+    </div>
+    <div class="col-md-6 intro-code">
+        {% for html in lang_intro_htmls %}
+            {% include html %}{% endfor %}
+        </div>
+    </div>
+    {% if document|data %}
+        {% for section_key, section in document|data|items %}
+            {% if section_key %}
+                <h2 id="{{ section_key }}" class="coredocs-section-title">
+                    {{ section_key }}
+                    <a href="#{{ section_key }}">
+                        <i class="fa fa-link" aria-hidden="true"></i>
+                    </a>
+                </h2>
+            {% endif %}
+            {% for link_key, link in section|schema_links|items %}
+                {% include "rest_framework/docs/link.html" %}{% endfor %}
+            {% endfor %}
+            {% for link_key, link in document.links|items %}
+                {% include "rest_framework/docs/link.html" %}{% endfor %}
+            {% endif %}
diff --git a/tests/django_rest/docs/error.html b/tests/django_rest/docs/error.html
new file mode 100644
index 0000000..3b8e296
--- /dev/null
+++ b/tests/django_rest/docs/error.html
@@ -0,0 +1,71 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Error Rendering Schema</title>
+    </head>
+    <body>
+        <h1>Error</h1>
+        <pre>
+{{ data }}
+        </pre>
+        {% if debug is True %}
+            <hr />
+            <h2>Additional Information</h2>
+            <p>Note: You are seeing this message because <code>DEBUG==True</code>.</p>
+            <p>Seeing this page is <em>usually</em> a configuration error: are your
+            <code>DEFAULT_AUTHENTICATION_CLASSES</code> or <code>DEFAULT_PERMISSION_CLASSES</code>
+            being applied unexpectedly?</p>
+            <p>Your response status code is: <code>{{ response.status_code }}</code></p>
+            <h3>401 Unauthorised.</h3>
+            <ul>
+                <li>Do you have SessionAuthentication enabled?</li>
+                <li>Are you logged in?</li>
+            </ul>
+            <h3>403 Forbidden.</h3>
+            <ul>
+                <li>Do you have sufficient permissions to access this view?</li>
+                <li>Is you schema non-empty? (An empty schema will lead to a permission denied error being raised.)</li>
+            </ul>
+            <p>Most commonly the intended solution is to disable authentication and permissions
+                when including the docs urls:</p>
+                <pre>
+   path('docs/', include_docs_urls(title='Your API',
+                                    authentication_classes=[],
+                                    permission_classes=[])),
+                </pre>
+                <h2>Overriding this template</h2>
+                <p>
+                    If you wish access to your docs to be authenticated you may override this template
+                    at
+                    <code>
+                    rest_framework/docs/error.html
+                    </code>
+                    .
+                </p>
+                <p>
+                    The available context is:
+                    <code>
+                    data
+                    </code>
+                    the error dict above,
+                    <code>
+                    request
+                    </code>
+                    ,
+                    <code>
+                    response
+                    </code>
+                    and the
+                    <code>
+                    debug
+                    </code>
+                    flag.
+                </p>
+            {% endif %}
+            <script src="{% static 'rest_framework/js/jquery-3.5.1.min.js' %}"></script>
+        </body>
+    </html>
diff --git a/tests/django_rest/docs/index.html b/tests/django_rest/docs/index.html
new file mode 100644
index 0000000..e3476ea
--- /dev/null
+++ b/tests/django_rest/docs/index.html
@@ -0,0 +1,51 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>{{ document.title }}</title>
+        <link href="{% static 'rest_framework/css/bootstrap.min.css' %}" rel="stylesheet">
+        <link href="{% static 'rest_framework/css/bootstrap-theme.min.css' %}" rel="stylesheet">
+        <link href="{% static 'rest_framework/css/font-awesome-4.0.3.css' %}" rel="stylesheet">
+        <link href="{% static 'rest_framework/docs/css/base.css' %}" rel="stylesheet">
+        <link href="{% static 'rest_framework/docs/css/jquery.json-view.min.css' %}" rel="stylesheet">
+        <link href="{% static 'rest_framework/docs/img/favicon.ico' %}" rel="shortcut icon">
+        {% if code_style %}
+            <style>
+{{ code_style }}
+            </style>
+        {% endif %}
+        <script src="{% static 'rest_framework/js/coreapi-0.1.1.js' %}"></script>
+        <script src="{% url 'api-docs:schema-js' %}"></script>
+    </head>
+    <body data-spy="scroll" data-target="#sidebar-nav" data-offset="50">
+        {% include "rest_framework/docs/sidebar.html" %}
+        <div class="container" id="main">
+            <div class="row">
+                <div class="col-md-12 main-container">
+                    {% include "rest_framework/docs/document.html" %}
+                </div>
+            </div>
+        </div>
+        {% include "rest_framework/docs/auth/token.html" %}
+        {% include "rest_framework/docs/auth/basic.html" %}
+        {% include "rest_framework/docs/auth/session.html" %}
+        <script src="{% static 'rest_framework/js/jquery-3.5.1.min.js' %}"></script>
+        <script src="{% static 'rest_framework/js/bootstrap.min.js' %}"></script>
+        <script src="{% static 'rest_framework/docs/js/jquery.json-view.min.js' %}"></script>
+        <script src="{% static 'rest_framework/docs/js/api.js' %}"></script>
+        <script>
+            {% if user.is_authenticated %}
+                window.auth = {
+                    'type': 'session',
+                };
+                $('#selected-authentication').text('session');
+                $('#auth-control').children().removeClass('active');
+                $('#auth-control').find("[data-auth='session']").closest('li').addClass('active');
+            {% endif %}
+	    $('pre.highlight').filter('[data-language="{{ langs | first }}"]').removeClass('hide');
+        </script>
+    </body>
+</html>
diff --git a/tests/django_rest/docs/interact.html b/tests/django_rest/docs/interact.html
new file mode 100644
index 0000000..699b46d
--- /dev/null
+++ b/tests/django_rest/docs/interact.html
@@ -0,0 +1,59 @@
+{% load rest_framework %}
+<!-- Modal -->
+<div class="modal fade api-modal"
+     id="{{ section_key }}_{{ link_key|slugify }}_modal"
+     tabindex="-1"
+     role="dialog"
+     aria-labelledby="api explorer modal">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="toggle-view hide">
+                    <div class="btn-group" role="group">
+                        <button type="button" data-display-toggle="data" class="btn btn-sm btn-info">
+                            Data
+                        </button>
+                        <button type="button" data-display-toggle="raw" class="btn btn-sm">
+                            Raw
+                        </button>
+                    </div>
+                </div>
+                <h3 class="modal-title">
+                    <i class="fa fa-exchange"></i>
+                    {{ link.title|default:link_key }}
+                </h3>
+            </div>
+            <form data-key='["{{ section_key }}", "{{ link_key }}"]' class="api-interaction">
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-lg-6 request">
+                            {% form_for_link link %}
+                            </div>
+                            <hr class="hidden-lg hidden-xl" />
+                            <div class="col-lg-6 response" id="response">
+                                <div class="request-awaiting">
+                                    Awaiting request
+                                </div>
+                                <div class="meta hide">
+                                    <span class="label label-primary request-method"></span>
+                                    <code class="request-url"></code>
+                                    <label class="label label-lg response-status-code pull-right"></label>
+                                </div>
+                                <pre class="well response-data hide"></pre>
+                                <pre class="well response-raw hide"><div class="response-raw-request"></div><div class="response-raw-response"></div>
+                            </pre>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">
+                        Close
+                    </button>
+                    <button type="submit" class="btn btn-primary">
+                        Send Request
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/tests/django_rest/docs/langs/javascript-intro.html b/tests/django_rest/docs/langs/javascript-intro.html
new file mode 100644
index 0000000..0f1fa7d
--- /dev/null
+++ b/tests/django_rest/docs/langs/javascript-intro.html
@@ -0,0 +1,7 @@
+{% load rest_framework %}
+{% load static %}
+<pre class="highlight javascript hide" data-language="javascript">
+    <code>{% code html %}<!-- Load the JavaScript client library -->
+    <script src="{% static 'rest_framework/js/coreapi-0.1.1.js' %}"></script>
+    <script src="{% url 'api-docs:schema-js' %}"></script>{% endcode %}</code>
+</pre>
diff --git a/tests/django_rest/docs/langs/javascript.html b/tests/django_rest/docs/langs/javascript.html
new file mode 100644
index 0000000..ae7b84b
--- /dev/null
+++ b/tests/django_rest/docs/langs/javascript.html
@@ -0,0 +1,17 @@
+{% load rest_framework %}
+<pre class="highlight javascript hide" data-language="javascript">
+<code>{% code javascript %}var coreapi = window.coreapi  // Loaded by `coreapi.js`
+var schema = window.schema    // Loaded by `schema.js`
+
+// Initialize a client
+var client = new coreapi.Client()
+
+// Interact with the API endpoint
+var action = [{% if section_key %}"{{ section_key }}", {% endif %}"{{ link_key }}"]
+{% if link.fields %}var params = {
+{% for field in link.fields %}    {{ field.name }}: ...{% if not loop.last %},{% endif %}
+{% endfor % }}
+{% endif %}client.action(schema, action{% if link.fields %}, params{% endif %}).then(function(result) {
+    // Return value is in 'result'
+}){% endcode %}</code>
+</pre>
diff --git a/tests/django_rest/docs/langs/python-intro.html b/tests/django_rest/docs/langs/python-intro.html
new file mode 100644
index 0000000..50e3769
--- /dev/null
+++ b/tests/django_rest/docs/langs/python-intro.html
@@ -0,0 +1,5 @@
+{% load rest_framework %}
+<pre class="highlight python hide" data-language="python">
+<code>{% code bash %}# Install the Python client library
+$ pip install coreapi{% endcode %}</code>
+</pre>
diff --git a/tests/django_rest/docs/langs/python.html b/tests/django_rest/docs/langs/python.html
new file mode 100644
index 0000000..8c358e2
--- /dev/null
+++ b/tests/django_rest/docs/langs/python.html
@@ -0,0 +1,15 @@
+{% load rest_framework %}
+<pre class="highlight python hide" data-language="python">
+<code>{% code python %}import coreapi
+
+# Initialize a client & load the schema document
+client = coreapi.Client()
+schema = client.get("{{ document.url }}"{% if schema_format %}, format="{{ schema_format }}"{% endif %})
+
+# Interact with the API endpoint
+action = [{% if section_key %}"{{ section_key }}", {% endif %}"{{ link_key }}"]
+{% if link.fields %}params = {
+{% for field in link.fields %}    "{{ field.name }}": ...{% if not loop.last %},{% endif %}
+{% endfor % }}
+{% endif %}result = client.action(schema, action{% if link.fields %}, params=params{% endif %}){% endcode %}</code>
+</pre>
diff --git a/tests/django_rest/docs/langs/shell-intro.html b/tests/django_rest/docs/langs/shell-intro.html
new file mode 100644
index 0000000..9a32f9d
--- /dev/null
+++ b/tests/django_rest/docs/langs/shell-intro.html
@@ -0,0 +1,5 @@
+{% load rest_framework %}
+<pre class="highlight shell hide" data-language="shell">
+<code>{% code bash %}# Install the command line client
+$ pip install coreapi-cli{% endcode %}</code>
+</pre>
diff --git a/tests/django_rest/docs/langs/shell.html b/tests/django_rest/docs/langs/shell.html
new file mode 100644
index 0000000..c7dc781
--- /dev/null
+++ b/tests/django_rest/docs/langs/shell.html
@@ -0,0 +1,8 @@
+{% load rest_framework %}
+<pre class="highlight shell hide" data-language="shell">
+<code>{% code bash %}# Load the schema document
+$ coreapi get {{ document.url }}{% if schema_format %}--format {{ schema_format }}{% endif %}
+
+# Interact with the API endpoint
+$ coreapi action {% if section_key %}{{ section_key }} {% endif %}{{ link_key|cut:"> " }}{% for field in link.fields %}-p {{ field.name }}=...{% endfor %}{% endcode %}</code>
+</pre>
diff --git a/tests/django_rest/docs/link.html b/tests/django_rest/docs/link.html
new file mode 100644
index 0000000..e962b94
--- /dev/null
+++ b/tests/django_rest/docs/link.html
@@ -0,0 +1,194 @@
+{% load rest_framework %}
+<div class="row coredocs-link">
+    <div class="col-md-6 docs-content">
+        <button class="btn btn-sm btn-success"
+                style="float: right; margin-top: 20px"
+                data-toggle="modal"
+                data-target="#{{ section_key }}_{{ link_key|slugify }}_modal">
+            <i class="fa fa-exchange"></i>
+            Interact
+        </button>
+        <h3 id="{{ section_key }}-{{ link_key|slugify }}" class="coredocs-link-title">
+            {{ link.title|default:link_key }}
+            <a href="#{{ section_key }}-{{ link_key|slugify }}">
+                <i class="fa fa-link" aria-hidden="true"></i>
+            </a>
+        </h3>
+        <div class="meta">
+            <span class="label label-primary">{{ link.action|upper }}</span>
+            <code>
+            {{ link.url }}
+            </code>
+        </div>
+        <p>
+            {% render_markdown link.description %}
+        </p>
+        {% if link.fields|with_location:'path' %}
+            <h4>Path Parameters</h4>
+            <p>
+                The following parameters should be included in the URL path.
+            </p>
+            <table class="parameters table table-bordered table-striped">
+                <thead>
+                    <tr>
+                        <th>Parameter</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for field in link.fields|with_location:'path' %}
+                        <tr>
+                            <td class="parameter-name">
+                                <code>
+                                {{ field.name }}
+                                </code>
+                                {% if field.required %}<span class="label label-warning">required</span>{% endif %}
+                            </td>
+                            <td>
+                                {% if field.schema.description %}{{ field.schema.description|safe }}{% endif %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% endif %}
+        {% if link.fields|with_location:'query' %}
+            <h4>Query Parameters</h4>
+            <p>
+                The following parameters should be included as part of a URL query string.
+            </p>
+            <table class="parameters table table-bordered table-striped">
+                <thead>
+                    <tr>
+                        <th>Parameter</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for field in link.fields|with_location:'query' %}
+                        <tr>
+                            <td class="parameter-name">
+                                <code>
+                                {{ field.name }}
+                                </code>
+                                {% if field.required %}<span class="label label-warning">required</span>{% endif %}
+                            </td>
+                            <td>
+                                {% if field.schema.description %}{{ field.schema.description|safe }}{% endif %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% endif %}
+        {% if link.fields|with_location:'header' %}
+            <h4>Header Parameters</h4>
+            <p>
+                The following parameters should be included as HTTP headers.
+            </p>
+            <table class="parameters table table-bordered table-striped">
+                <thead>
+                    <tr>
+                        <th>Parameter</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for field in link.fields|with_location:'header' %}
+                        <tr>
+                            <td class="parameter-name">
+                                <code>
+                                {{ field.name }}
+                                </code>
+                                {% if field.required %}<span class="label label-warning">required</span>{% endif %}
+                            </td>
+                            <td>
+                                {% if field.schema.description %}{{ field.schema.description|safe }}{% endif %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% endif %}
+        {% if link.fields|with_location:'body' %}
+            <h4>Request Body</h4>
+            <p>
+                The request body should be
+                <code>
+                "{{ link.encoding }}"
+                </code>
+                encoded, and should contain a single item.
+            </p>
+            <table class="parameters table table-bordered table-striped">
+                <thead>
+                    <tr>
+                        <th>
+                            Parameter
+                        </th>
+                        <th>
+                            Description
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for field in link.fields|with_location:'body' %}
+                        <tr>
+                            <td class="parameter-name">
+                                <code>
+                                {{ field.name }}
+                                </code>
+                                {% if field.required %}<span class="label label-warning">required</span>{% endif %}
+                            </td>
+                            <td>
+                                {% if field.schema.description %}{{ field.schema.description|safe }}{% endif %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% elif link.fields|with_location:'form' %}
+            <h4>
+                Request Body
+            </h4>
+            <p>
+                The request body should be a
+                <code>
+                "{{ link.encoding }}"
+                </code>
+                encoded object, containing the following&nbsp;items.
+            </p>
+            <table class="parameters table table-bordered table-striped">
+                <thead>
+                    <tr>
+                        <th>
+                            Parameter
+                        </th>
+                        <th>
+                            Description
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for field in link.fields|with_location:'form' %}
+                        <tr>
+                            <td class="parameter-name">
+                                <code>
+                                {{ field.name }}
+                                </code>
+                                {% if field.required %}<span class="label label-warning">required</span>{% endif %}
+                            </td>
+                            <td>
+                                {% if field.schema.description %}{{ field.schema.description|safe }}{% endif %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% endif %}
+    </div>
+    <div class="col-md-6 code-samples">
+        {% for html in lang_htmls %}
+            {% include html %}{% endfor %}
+        </div>
+    </div>
+    {% include "rest_framework/docs/interact.html" with link=link %}
diff --git a/tests/django_rest/docs/sidebar.html b/tests/django_rest/docs/sidebar.html
new file mode 100644
index 0000000..b51bc2e
--- /dev/null
+++ b/tests/django_rest/docs/sidebar.html
@@ -0,0 +1,89 @@
+{% load rest_framework %}
+<div class="sidebar">
+    <h3 class="brand">
+        <a href="#">{{ document.title }}</a>
+    </h3>
+    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
+    <div class="menu-list">
+        <ul id="menu-content" class="menu-content collapse out">
+            {% if document|data %}
+                {% for section_key, section in document|data|items %}
+                    <li data-toggle="collapse" data-target="#{{ section_key }}-dropdown" class="collapsed">
+                        <a>
+                            <i class="fa fa-dot-circle-o fa-lg"></i>
+                            {% if section_key %}
+                                {{ section_key }}
+                            {% else %}
+                                API Endpoints
+                            {% endif %}
+                            <span class="arrow"></span>
+                        </a>
+                        <ul class="sub-menu {% if section_key %}collapse{% endif %}" id="{{ section_key }}-dropdown">
+                        {% for link_key, link in section|schema_links|items %}
+                            <li>
+                                <a href="#{{ section_key }}-{{ link_key|slugify }}">
+                                    {{ link.title|default:link_key }}
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </li>
+            {% endfor %}
+        {% endif %}
+    </ul>
+    <ul class="menu-list menu-list-bottom">
+        <li data-toggle="collapse" data-target="#auth-control" class="collapsed">
+            <a>
+                <i class="fa fa-user fa-lg"></i>
+                Authentication
+            </a>
+            <span id="selected-authentication">
+                {% if user.is_authenticated %}
+                    session
+                {% else %}
+                    none
+                {% endif %}
+            </span>
+        </li>
+        <ul class="sub-menu collapse out" id="auth-control">
+            <li
+                {% if not user.is_authenticated %}class="active"{% endif %}
+                >
+                <a data-auth="none" href="#">none</a>
+            </li>
+            <li>
+                <a data-auth="token" data-toggle="modal" data-target="#auth_token_modal" href="#">
+                    token
+                </a>
+            </li>
+            <li>
+                <a data-auth="basic" data-toggle="modal" data-target="#auth_basic_modal" href="#">
+                    basic
+                </a>
+            </li>
+            <li
+                {% if user.is_authenticated %}class="active"{% endif %}>
+                <a data-auth="session" data-toggle="modal" data-target="#auth_session_modal" href="#">
+                    session
+                </a>
+            </li>
+        </ul>
+        <li data-toggle="collapse" data-target="#language-control" class="collapsed">
+            <a>
+                <i class="fa fa-code fa-lg"></i>
+                Source Code
+            </a>
+            <span id="selected-language">{{ langs | first }}</span>
+        </li>
+        <ul class="sub-menu collapse out" id="language-control">
+            {% for lang in langs %}
+                <li{% if loop.first %}class="active"{% endif %}>
+                <a href="#" data-language="{{ lang }}">
+                    {{ lang }}
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+</ul>
+</div>
+</div>
diff --git a/tests/django_rest/filters/base.html b/tests/django_rest/filters/base.html
new file mode 100644
index 0000000..34e79d3
--- /dev/null
+++ b/tests/django_rest/filters/base.html
@@ -0,0 +1,18 @@
+<div class="modal fade" id="filtersModal" tabindex="-1" role="dialog" aria-labelledby="filters" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title">Filters</h4>
+            </div>
+            <div class="modal-body">
+                {% for element in elements %}
+                    {% if not forloop.first %}<hr/>{% endif %}
+                    {{ element }}
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/tests/django_rest/filters/ordering.html b/tests/django_rest/filters/ordering.html
new file mode 100644
index 0000000..a18da19
--- /dev/null
+++ b/tests/django_rest/filters/ordering.html
@@ -0,0 +1,17 @@
+{% load rest_framework %}
+{% load i18n %}
+<h2>{% trans "Ordering" %}</h2>
+<div class="list-group">
+    {% for key, label in options %}
+        {% if key == current %}
+            <a href="{% add_query_param request param key %}" class="list-group-item active">
+                <span class="glyphicon glyphicon-ok" style="float: right" aria-hidden="true"></span>
+                {{ label }}
+            </a>
+        {% else %}
+            <a href="{% add_query_param request param key %}" class="list-group-item">
+                {{ label }}
+            </a>
+        {% endif %}
+    {% endfor %}
+</div>
diff --git a/tests/django_rest/filters/search.html b/tests/django_rest/filters/search.html
new file mode 100644
index 0000000..32d07f5
--- /dev/null
+++ b/tests/django_rest/filters/search.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+<h2>{% trans "Search" %}</h2>
+<form class="form-inline">
+    <div class="form-group">
+        <div class="input-group">
+            <input type="text" class="form-control" style="width: 350px" name="{{ param }}" value="{{ term }}">
+            <span class="input-group-btn">
+                <button class="btn btn-default" type="submit">
+                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+                    {% trans "Search" %}
+                </button>
+            </span>
+        </div>
+    </div>
+</form>
diff --git a/tests/django_rest/horizontal/checkbox.html b/tests/django_rest/horizontal/checkbox.html
new file mode 100644
index 0000000..a612393
--- /dev/null
+++ b/tests/django_rest/horizontal/checkbox.html
@@ -0,0 +1,18 @@
+<div class="form-group horizontal-checkbox {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    {{ field.label }}
+</label>
+{% endif %}
+<div class="col-sm-10">
+<input type="checkbox" name="{{ field.name }}" value="true"
+{% if field.value %}checked{% endif %}
+>
+{% if field.errors %}
+    {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+{% endif %}
+{% if field.help_text %}
+    <span class="help-block">{{ field.help_text|safe }}</span>
+{% endif %}
+</div>
+</div>
diff --git a/tests/django_rest/horizontal/checkbox_multiple.html b/tests/django_rest/horizontal/checkbox_multiple.html
new file mode 100644
index 0000000..84ff98d
--- /dev/null
+++ b/tests/django_rest/horizontal/checkbox_multiple.html
@@ -0,0 +1,41 @@
+{% load rest_framework %}
+<div class="form-group">
+    {% if field.label %}
+        <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+        {{ field.label }}
+    </label>
+{% endif %}
+<div class="col-sm-10">
+    {% if style.inline %}
+        {% for key, text in field.choices|items %}
+            <label class="checkbox-inline">
+                <input type="checkbox" name="{{ field.name }}" value="{{ key }}"
+                {% if key|as_string in field.value|as_list_of_strings %}
+                    checked
+                {% endif %}
+                >
+                {{ text }}
+            </label>
+        {% endfor %}
+    {% else %}
+        {% for key, text in field.choices|items %}
+            <div class="checkbox">
+                <label>
+                    <input type="checkbox" name="{{ field.name }}" value="{{ key }}"
+                    {% if key|as_string in field.value|as_list_of_strings %}
+                        checked
+                    {% endif %}
+                    >
+                    {{ text }}
+                </label>
+            </div>
+        {% endfor %}
+    {% endif %}
+    {% if field.errors %}
+        {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+    {% endif %}
+    {% if field.help_text %}
+        <span class="help-block">{{ field.help_text|safe }}</span>
+    {% endif %}
+</div>
+</div>
diff --git a/tests/django_rest/horizontal/dict_field.html b/tests/django_rest/horizontal/dict_field.html
new file mode 100644
index 0000000..2a79d8f
--- /dev/null
+++ b/tests/django_rest/horizontal/dict_field.html
@@ -0,0 +1,12 @@
+<div class="form-group">
+    {% if field.label %}
+        <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+        {{ field.label }}
+    </label>
+{% endif %}
+<div class="col-sm-10">
+    <p class="form-control-static">
+        Dictionaries are not currently supported in HTML input.
+    </p>
+</div>
+</div>
diff --git a/tests/django_rest/horizontal/fieldset.html b/tests/django_rest/horizontal/fieldset.html
new file mode 100644
index 0000000..f845107
--- /dev/null
+++ b/tests/django_rest/horizontal/fieldset.html
@@ -0,0 +1,16 @@
+{% load rest_framework %}
+<fieldset>
+    {% if field.label %}
+        <div class="form-group" style="border-bottom: 1px solid #e5e5e5">
+            <legend class="control-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}"
+                    style="border-bottom: 0">
+            {{ field.label }}
+        </legend>
+    </div>
+{% endif %}
+{% for nested_field in field %}
+    {% if not nested_field.read_only %}
+        {% render_field nested_field style=style %}
+    {% endif %}
+{% endfor %}
+</fieldset>
diff --git a/tests/django_rest/horizontal/form.html b/tests/django_rest/horizontal/form.html
new file mode 100644
index 0000000..fa969e7
--- /dev/null
+++ b/tests/django_rest/horizontal/form.html
@@ -0,0 +1,6 @@
+{% load rest_framework %}
+{% for field in form %}
+    {% if not field.read_only %}
+        {% render_field field style=style %}
+    {% endif %}
+{% endfor %}
diff --git a/tests/django_rest/horizontal/input.html b/tests/django_rest/horizontal/input.html
new file mode 100644
index 0000000..c5f0185
--- /dev/null
+++ b/tests/django_rest/horizontal/input.html
@@ -0,0 +1,21 @@
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    {{ field.label }}
+</label>
+{% endif %}
+<div class="col-sm-10">
+<input name="{{ field.name }}"
+{% if style.input_type != "file" %}class="form-control"{% endif %}
+type="{{ style.input_type }}"
+{% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %}
+{% if field.value is not None %}value="{{ field.value }}"{% endif %}
+{% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
+{% if field.errors %}
+    {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+{% endif %}
+{% if field.help_text %}
+    <span class="help-block">{{ field.help_text|safe }}</span>
+{% endif %}
+</div>
+</div>
diff --git a/tests/django_rest/horizontal/list_field.html b/tests/django_rest/horizontal/list_field.html
new file mode 100644
index 0000000..a2e8c7b
--- /dev/null
+++ b/tests/django_rest/horizontal/list_field.html
@@ -0,0 +1,12 @@
+<div class="form-group">
+    {% if field.label %}
+        <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+        {{ field.label }}
+    </label>
+{% endif %}
+<div class="col-sm-10">
+    <p class="form-control-static">
+        Lists are not currently supported in HTML input.
+    </p>
+</div>
+</div>
diff --git a/tests/django_rest/horizontal/list_fieldset.html b/tests/django_rest/horizontal/list_fieldset.html
new file mode 100644
index 0000000..b4b8806
--- /dev/null
+++ b/tests/django_rest/horizontal/list_fieldset.html
@@ -0,0 +1,14 @@
+{% load rest_framework %}
+<fieldset>
+    {% if field.label %}
+        <div class="form-group" style="border-bottom: 1px solid #e5e5e5">
+            <legend class="control-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}"
+                    style="border-bottom: 0">
+            {{ field.label }}
+        </legend>
+    </div>
+{% endif %}
+<p>
+    Lists are not currently supported in HTML input.
+</p>
+</fieldset>
diff --git a/tests/django_rest/horizontal/radio.html b/tests/django_rest/horizontal/radio.html
new file mode 100644
index 0000000..614926d
--- /dev/null
+++ b/tests/django_rest/horizontal/radio.html
@@ -0,0 +1,60 @@
+{% load i18n %}
+{% load rest_framework %}
+{% trans "None" as none_choice %}
+<div class="form-group">
+    {% if field.label %}
+        <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+        {{ field.label }}
+    </label>
+{% endif %}
+<div class="col-sm-10">
+    {% if style.inline %}
+        {% if field.allow_null or field.allow_blank %}
+            <label class="radio-inline">
+                <input type="radio" name="{{ field.name }}" value=""
+                {% if not field.value %}checked{% endif %}
+                />
+                {{ none_choice }}
+            </label>
+        {% endif %}
+        {% for key, text in field.choices|items %}
+            <label class="radio-inline">
+                <input type="radio" name="{{ field.name }}" value="{{ key }}"
+                {% if key|as_string == field.value|as_string %}
+                    checked
+                {% endif %}
+                />
+                {{ text }}
+            </label>
+        {% endfor %}
+    {% else %}
+        {% if field.allow_null or field.allow_blank %}
+            <div class="radio">
+                <label>
+                    <input type="radio" name="{{ field.name }}" value=""
+                    {% if not field.value %}checked{% endif %}
+                    />
+                    {{ none_choice }}
+                </label>
+            </div>
+        {% endif %}
+        {% for key, text in field.choices|items %}
+            <div class="radio">
+                <label>
+                    <input type="radio" name="{{ field.name }}" value="{{ key }}"
+                    {% if key|as_string == field.value|as_string %}
+                        checked{% endif %}
+                        />
+                        {{ text }}
+                    </label>
+                </div>
+            {% endfor %}
+        {% endif %}
+        {% if field.errors %}
+            {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+        {% endif %}
+        {% if field.help_text %}
+            <span class="help-block">{{ field.help_text|safe }}</span>
+        {% endif %}
+    </div>
+</div>
diff --git a/tests/django_rest/horizontal/select.html b/tests/django_rest/horizontal/select.html
new file mode 100644
index 0000000..35ca394
--- /dev/null
+++ b/tests/django_rest/horizontal/select.html
@@ -0,0 +1,41 @@
+{% load rest_framework %}
+<div class="form-group">
+    {% if field.label %}
+        <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+        {{ field.label }}
+    </label>
+{% endif %}
+<div class="col-sm-10">
+    <select class="form-control" name="{{ field.name }}">
+        {% if field.allow_null or field.allow_blank %}
+            <option value=""
+                {% if not field.value %}selected{% endif %}
+                >
+                --------
+            </option>
+        {% endif %}
+        {% for select in field.iter_options %}
+            {% if select.start_option_group %}
+                <optgroup label="{{ select.label }}">
+                {% elif select.end_option_group %}
+                </optgroup>
+            {% else %}
+                <option value="{{ select.value }}"
+                    {% if select.value|as_string == field.value|as_string %}
+                        selected
+                    {% endif %}
+                    {% if select.disabled %}disabled{% endif %}
+                    >
+                    {{ select.display_text }}
+                </option>
+            {% endif %}
+        {% endfor %}
+    </select>
+    {% if field.errors %}
+        {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+    {% endif %}
+    {% if field.help_text %}
+        <span class="help-block">{{ field.help_text|safe }}</span>
+    {% endif %}
+</div>
+</div>
diff --git a/tests/django_rest/horizontal/select_multiple.html b/tests/django_rest/horizontal/select_multiple.html
new file mode 100644
index 0000000..58bd017
--- /dev/null
+++ b/tests/django_rest/horizontal/select_multiple.html
@@ -0,0 +1,40 @@
+{% load i18n %}
+{% load rest_framework %}
+{% trans "No items to select." as no_items %}
+<div class="form-group">
+    {% if field.label %}
+        <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+        {{ field.label }}
+    </label>
+{% endif %}
+<div class="col-sm-10">
+    <select multiple {{ field.choices|yesno:",disabled" }} class="form-control" name="{{ field.name }}">
+        {% for select in field.iter_options %}
+            {% if select.start_option_group %}
+                <optgroup label="{{ select.label }}">
+                {% elif select.end_option_group %}
+                </optgroup>
+            {% else %}
+                <option value="{{ select.value }}"
+                    {% if select.value|as_string in field.value|as_list_of_strings %}
+                        selected
+                    {% endif %}
+                    {% if select.disabled %}disabled{% endif %}
+                    >
+                    {{ select.display_text }}
+                </option>
+            {% endif %}
+            {% empty %}
+            <option>
+                {{ no_items }}
+            </option>
+        {% endfor %}
+    </select>
+    {% if field.errors %}
+        {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+    {% endif %}
+    {% if field.help_text %}
+        <span class="help-block">{{ field.help_text|safe }}</span>
+    {% endif %}
+</div>
+</div>
diff --git a/tests/django_rest/horizontal/textarea.html b/tests/django_rest/horizontal/textarea.html
new file mode 100644
index 0000000..ec56c49
--- /dev/null
+++ b/tests/django_rest/horizontal/textarea.html
@@ -0,0 +1,21 @@
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    {{ field.label }}
+</label>
+{% endif %}
+<div class="col-sm-10">
+<textarea name="{{ field.name }}" class="form-control"
+{% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %}
+{% if style.rows %}rows="{{ style.rows }}"{% endif %}
+>
+{% if field.value %}{{ field.value }}{% endif %}
+</textarea>
+{% if field.errors %}
+    {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+{% endif %}
+{% if field.help_text %}
+    <span class="help-block">{{ field.help_text|safe }}</span>
+{% endif %}
+</div>
+</div>
diff --git a/tests/django_rest/inline/checkbox.html b/tests/django_rest/inline/checkbox.html
new file mode 100644
index 0000000..5bd809f
--- /dev/null
+++ b/tests/django_rest/inline/checkbox.html
@@ -0,0 +1,10 @@
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+<div class="checkbox">
+    <label>
+        <input type="checkbox" name="{{ field.name }}" value="true"
+        {% if field.value %}checked{% endif %}
+        >
+        {% if field.label %}{{ field.label }}{% endif %}
+    </label>
+</div>
+</div>
diff --git a/tests/django_rest/inline/checkbox_multiple.html b/tests/django_rest/inline/checkbox_multiple.html
new file mode 100644
index 0000000..4e4bcef
--- /dev/null
+++ b/tests/django_rest/inline/checkbox_multiple.html
@@ -0,0 +1,20 @@
+{% load rest_framework %}
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label class="sr-only">
+        {{ field.label }}
+    </label>
+{% endif %}
+{% for key, text in field.choices|items %}
+    <div class="checkbox">
+        <label>
+            <input type="checkbox" name="{{ field.name }}" value="{{ key }}"
+            {% if key|as_string in field.value|as_list_of_strings %}
+                checked
+            {% endif %}
+            >
+            {{ text }}
+        </label>
+    </div>
+{% endfor %}
+</div>
diff --git a/tests/django_rest/inline/dict_field.html b/tests/django_rest/inline/dict_field.html
new file mode 100644
index 0000000..a9dd2b1
--- /dev/null
+++ b/tests/django_rest/inline/dict_field.html
@@ -0,0 +1,10 @@
+<div class="form-group">
+    {% if field.label %}
+        <label class="sr-only">
+            {{ field.label }}
+        </label>
+    {% endif %}
+    <p class="form-control-static">
+        Dictionaries are not currently supported in HTML input.
+    </p>
+</div>
diff --git a/tests/django_rest/inline/fieldset.html b/tests/django_rest/inline/fieldset.html
new file mode 100644
index 0000000..e49b42f
--- /dev/null
+++ b/tests/django_rest/inline/fieldset.html
@@ -0,0 +1,6 @@
+{% load rest_framework %}
+{% for nested_field in field %}
+    {% if not nested_field.read_only %}
+        {% render_field nested_field style=style %}
+    {% endif %}
+{% endfor %}
diff --git a/tests/django_rest/inline/form.html b/tests/django_rest/inline/form.html
new file mode 100644
index 0000000..fa969e7
--- /dev/null
+++ b/tests/django_rest/inline/form.html
@@ -0,0 +1,6 @@
+{% load rest_framework %}
+{% for field in form %}
+    {% if not field.read_only %}
+        {% render_field field style=style %}
+    {% endif %}
+{% endfor %}
diff --git a/tests/django_rest/inline/input.html b/tests/django_rest/inline/input.html
new file mode 100644
index 0000000..1068bc9
--- /dev/null
+++ b/tests/django_rest/inline/input.html
@@ -0,0 +1,16 @@
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label class="sr-only">
+        {{ field.label }}
+    </label>
+{% endif %}
+<input name="{{ field.name }}"
+{% if style.input_type != "file" %}class="form-control"{% endif %}
+type="{{ style.input_type }}"
+{% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %}
+{% if field.value is not None %}value="{{ field.value }}"{% endif %}
+{% if style.autofocus and style.input_type != "hidden" %}
+    autofocus
+{% endif %}
+>
+</div>
diff --git a/tests/django_rest/inline/list_field.html b/tests/django_rest/inline/list_field.html
new file mode 100644
index 0000000..9cdb6b5
--- /dev/null
+++ b/tests/django_rest/inline/list_field.html
@@ -0,0 +1,10 @@
+<div class="form-group">
+    {% if field.label %}
+        <label class="sr-only">
+            {{ field.label }}
+        </label>
+    {% endif %}
+    <p class="form-control-static">
+        Lists are not currently supported in HTML input.
+    </p>
+</div>
diff --git a/tests/django_rest/inline/list_fieldset.html b/tests/django_rest/inline/list_fieldset.html
new file mode 100644
index 0000000..2ae56d7
--- /dev/null
+++ b/tests/django_rest/inline/list_fieldset.html
@@ -0,0 +1 @@
+<span>Lists are not currently supported in HTML input.</span>
diff --git a/tests/django_rest/inline/radio.html b/tests/django_rest/inline/radio.html
new file mode 100644
index 0000000..97718d5
--- /dev/null
+++ b/tests/django_rest/inline/radio.html
@@ -0,0 +1,32 @@
+{% load i18n %}
+{% load rest_framework %}
+{% trans "None" as none_choice %}
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label class="sr-only">
+        {{ field.label }}
+    </label>
+{% endif %}
+{% if field.allow_null or field.allow_blank %}
+    <div class="radio">
+        <label>
+            <input type="radio" name="{{ field.name }}" value=""
+            {% if not field.value %}checked{% endif %}
+            >
+            {{ none_choice }}
+        </label>
+    </div>
+{% endif %}
+{% for key, text in field.choices|items %}
+    <div class="radio">
+        <label>
+            <input type="radio" name="{{ field.name }}" value="{{ key }}"
+            {% if key|as_string == field.value|as_string %}
+                checked
+            {% endif %}
+            >
+            {{ text }}
+        </label>
+    </div>
+{% endfor %}
+</div>
diff --git a/tests/django_rest/inline/select.html b/tests/django_rest/inline/select.html
new file mode 100644
index 0000000..2b42ae8
--- /dev/null
+++ b/tests/django_rest/inline/select.html
@@ -0,0 +1,33 @@
+{% load rest_framework %}
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label class="sr-only">
+        {{ field.label }}
+    </label>
+{% endif %}
+<select class="form-control" name="{{ field.name }}">
+    {% if field.allow_null or field.allow_blank %}
+        <option value=""
+            {% if not field.value %}selected{% endif %}
+            >
+            --------
+        </option>
+    {% endif %}
+    {% for select in field.iter_options %}
+        {% if select.start_option_group %}
+            <optgroup label="{{ select.label }}">
+            {% elif select.end_option_group %}
+            </optgroup>
+        {% else %}
+            <option value="{{ select.value }}"
+                {% if select.value|as_string == field.value|as_string %}
+                    selected
+                {% endif %}
+                {% if select.disabled %}disabled{% endif %}
+                >
+                {{ select.display_text }}
+            </option>
+        {% endif %}
+    {% endfor %}
+</select>
+</div>
diff --git a/tests/django_rest/inline/select_multiple.html b/tests/django_rest/inline/select_multiple.html
new file mode 100644
index 0000000..62bd975
--- /dev/null
+++ b/tests/django_rest/inline/select_multiple.html
@@ -0,0 +1,32 @@
+{% load i18n %}
+{% load rest_framework %}
+{% trans "No items to select." as no_items %}
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label class="sr-only">
+        {{ field.label }}
+    </label>
+{% endif %}
+<select multiple {{ field.choices|yesno:",disabled" }} class="form-control" name="{{ field.name }}">
+    {% for select in field.iter_options %}
+        {% if select.start_option_group %}
+            <optgroup label="{{ select.label }}">
+            {% elif select.end_option_group %}
+            </optgroup>
+        {% else %}
+            <option value="{{ select.value }}"
+                {% if select.value|as_string in field.value|as_list_of_strings %}
+                    selected
+                {% endif %}
+                {% if select.disabled %}disabled{% endif %}
+                >
+                {{ select.display_text }}
+            </option>
+        {% endif %}
+        {% empty %}
+        <option>
+            {{ no_items }}
+        </option>
+    {% endfor %}
+</select>
+</div>
diff --git a/tests/django_rest/inline/textarea.html b/tests/django_rest/inline/textarea.html
new file mode 100644
index 0000000..c491b26
--- /dev/null
+++ b/tests/django_rest/inline/textarea.html
@@ -0,0 +1,11 @@
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label class="sr-only">
+        {{ field.label }}
+    </label>
+{% endif %}
+<input name="{{ field.name }}" type="text" class="form-control"
+{% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %}
+{% if field.value %}value="{{ field.value }}"{% endif %}
+>
+</div>
diff --git a/tests/django_rest/login.html b/tests/django_rest/login.html
new file mode 100644
index 0000000..6c8d589
--- /dev/null
+++ b/tests/django_rest/login.html
@@ -0,0 +1,2 @@
+{% extends "rest_framework/login_base.html" %}
+{# Override this template in your own templates directory to customize #}
diff --git a/tests/django_rest/login_base.html b/tests/django_rest/login_base.html
new file mode 100644
index 0000000..f47f089
--- /dev/null
+++ b/tests/django_rest/login_base.html
@@ -0,0 +1,83 @@
+{% extends "rest_framework/base.html" %}
+{% load rest_framework %}
+{% block body %}
+    <body class="container">
+        <div class="container-fluid" style="margin-top: 30px">
+            <div class="row-fluid">
+                <div class="well" style="width: 320px; margin-left: auto; margin-right: auto">
+                    <div class="row-fluid">
+                        <div>
+                            {% block branding %}
+                                <h3 style="margin: 0 0 20px;">Django REST framework</h3>
+                            {% endblock %}
+                        </div>
+                    </div>
+                    <!-- /row fluid -->
+                    <div class="row-fluid">
+                        <div>
+                            <form action="{% url 'rest_framework:login' %}" role="form" method="post">
+                                {% csrf_token %}
+                                <input type="hidden" name="next" value="{{ next }}" />
+                                <div id="div_id_username"
+                                     class="clearfix control-group {% if form.username.errors %}error{% endif %}">
+                                <div class="form-group">
+                                    <label for="id_username">
+                                        {{ form.username.label }}:
+                                    </label>
+                                    <input type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off" class="form-control textinput textInput" id="id_username" required autofocus
+                                    {% if form.username.value %}value="{{ form.username.value }}"{% endif %}
+                                    >
+                                    {% if form.username.errors %}
+                                        <p class="text-error">
+                                            {{ form.username.errors|striptags }}
+                                        </p>
+                                    {% endif %}
+                                </div>
+                            </div>
+                            <div id="div_id_password"
+                                 class="clearfix control-group {% if form.password.errors %}error{% endif %}">
+                            <div class="form-group">
+                                <label for="id_password">
+                                    {{ form.password.label }}:
+                                </label>
+                                <input type="password"
+                                       name="password"
+                                       maxlength="100"
+                                       autocapitalize="off"
+                                       autocorrect="off"
+                                       class="form-control textinput textInput"
+                                       id="id_password"
+                                       required>
+                                {% if form.password.errors %}
+                                    <p class="text-error">
+                                        {{ form.password.errors|striptags }}
+                                    </p>
+                                {% endif %}
+                            </div>
+                        </div>
+                        {% if form.non_field_errors %}
+                            {% for error in form.non_field_errors %}
+                                <div class="well well-small text-error" style="border: none">
+                                    {{ error }}
+                                </div>
+                            {% endfor %}
+                        {% endif %}
+                        <div class="form-actions-no-box">
+                            <input type="submit"
+                                   name="submit"
+                                   value="Log in"
+                                   class="btn btn-primary form-control"
+                                   id="submit-id-submit">
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <!-- /.row-fluid -->
+        </div>
+        <!--/.well-->
+    </div>
+    <!-- /.row-fluid -->
+</div>
+<!-- /.container-fluid -->
+</body>
+{% endblock %}
diff --git a/tests/django_rest/pagination/numbers.html b/tests/django_rest/pagination/numbers.html
new file mode 100644
index 0000000..137a198
--- /dev/null
+++ b/tests/django_rest/pagination/numbers.html
@@ -0,0 +1,47 @@
+<ul class="pagination" style="margin: 5px 0 10px 0">
+    {% if previous_url %}
+        <li>
+            <a href="{{ previous_url }}" aria-label="Previous">
+                <span aria-hidden="true">&laquo;</span>
+            </a>
+        </li>
+    {% else %}
+        <li class="disabled">
+            <a href="#" aria-label="Previous">
+                <span aria-hidden="true">&laquo;</span>
+            </a>
+        </li>
+    {% endif %}
+    {% for page_link in page_links %}
+        {% if page_link.is_break %}
+            <li class="disabled">
+                <a href="#">
+                    <span aria-hidden="true">&hellip;</span>
+                </a>
+            </li>
+        {% else %}
+            {% if page_link.is_active %}
+                <li class="active">
+                    <a href="{{ page_link.url }}">{{ page_link.number }}</a>
+                </li>
+            {% else %}
+                <li>
+                    <a href="{{ page_link.url }}">{{ page_link.number }}</a>
+                </li>
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+    {% if next_url %}
+        <li>
+            <a href="{{ next_url }}" aria-label="Next">
+                <span aria-hidden="true">&raquo;</span>
+            </a>
+        </li>
+    {% else %}
+        <li class="disabled">
+            <a href="#" aria-label="Next">
+                <span aria-hidden="true">&raquo;</span>
+            </a>
+        </li>
+    {% endif %}
+</ul>
diff --git a/tests/django_rest/pagination/previous_and_next.html b/tests/django_rest/pagination/previous_and_next.html
new file mode 100644
index 0000000..42c96e0
--- /dev/null
+++ b/tests/django_rest/pagination/previous_and_next.html
@@ -0,0 +1,20 @@
+<ul class="pager">
+    {% if previous_url %}
+        <li class="previous">
+            <a href="{{ previous_url }}">&laquo; Previous</a>
+        </li>
+    {% else %}
+        <li class="previous disabled">
+            <a href="#">&laquo; Previous</a>
+        </li>
+    {% endif %}
+    {% if next_url %}
+        <li class="next">
+            <a href="{{ next_url }}">Next &raquo;</a>
+        </li>
+    {% else %}
+        <li class="next disabled">
+            <a href="#">Next &raquo;</a>
+        </li>
+    {% endif %}
+</ul>
diff --git a/tests/django_rest/raw_data_form.html b/tests/django_rest/raw_data_form.html
new file mode 100644
index 0000000..f3c27d4
--- /dev/null
+++ b/tests/django_rest/raw_data_form.html
@@ -0,0 +1,11 @@
+{% load rest_framework %}
+{{ form.non_field_errors }}
+{% for field in form %}
+    <div class="form-group">
+        {{ field.label_tag|add_class:"col-sm-2 control-label" }}
+        <div class="col-sm-10">
+            {{ field|add_class:"form-control" }}
+            <span class="help-block">{{ field.help_text|safe }}</span>
+        </div>
+    </div>
+{% endfor %}
diff --git a/tests/django_rest/schema.js b/tests/django_rest/schema.js
new file mode 100644
index 0000000..692cb90
--- /dev/null
+++ b/tests/django_rest/schema.js
@@ -0,0 +1,3 @@
+var codec = new window.coreapi.codecs.CoreJSONCodec()
+var coreJSON = window.atob('{{ schema }}')
+window.schema = codec.decode(coreJSON)
diff --git a/tests/django_rest/vertical/checkbox.html b/tests/django_rest/vertical/checkbox.html
new file mode 100644
index 0000000..d0f9f67
--- /dev/null
+++ b/tests/django_rest/vertical/checkbox.html
@@ -0,0 +1,16 @@
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+<div class="checkbox">
+    <label>
+        <input type="checkbox" name="{{ field.name }}" value="true"
+        {% if field.value %}checked{% endif %}
+        >
+        {% if field.label %}{{ field.label }}{% endif %}
+    </label>
+</div>
+{% if field.errors %}
+    {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+{% endif %}
+{% if field.help_text %}
+    <span class="help-block">{{ field.help_text|safe }}</span>
+{% endif %}
+</div>
diff --git a/tests/django_rest/vertical/checkbox_multiple.html b/tests/django_rest/vertical/checkbox_multiple.html
new file mode 100644
index 0000000..127a14b
--- /dev/null
+++ b/tests/django_rest/vertical/checkbox_multiple.html
@@ -0,0 +1,43 @@
+{% load rest_framework %}
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label
+        {% if style.hide_label %}class="sr-only"{% endif %}
+        >
+        {{ field.label }}
+    </label>
+{% endif %}
+{% if style.inline %}
+    <div>
+        {% for key, text in field.choices|items %}
+            <label class="checkbox-inline">
+                <input type="checkbox" name="{{ field.name }}" value="{{ key }}"
+                {% if key|as_string in field.value|as_list_of_strings %}
+                    checked
+                {% endif %}
+                >
+                {{ text }}
+            </label>
+        {% endfor %}
+    </div>
+{% else %}
+    {% for key, text in field.choices|items %}
+        <div class="checkbox">
+            <label>
+                <input type="checkbox" name="{{ field.name }}" value="{{ key }}"
+                {% if key|as_string in field.value|as_list_of_strings %}
+                    checked
+                {% endif %}
+                >
+                {{ text }}
+            </label>
+        </div>
+    {% endfor %}
+{% endif %}
+{% if field.errors %}
+    {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+{% endif %}
+{% if field.help_text %}
+    <span class="help-block">{{ field.help_text|safe }}</span>
+{% endif %}
+</div>
diff --git a/tests/django_rest/vertical/dict_field.html b/tests/django_rest/vertical/dict_field.html
new file mode 100644
index 0000000..75ffb16
--- /dev/null
+++ b/tests/django_rest/vertical/dict_field.html
@@ -0,0 +1,12 @@
+<div class="form-group">
+    {% if field.label %}
+        <label
+            {% if style.hide_label %}class="sr-only"{% endif %}
+            >
+            {{ field.label }}
+        </label>
+    {% endif %}
+    <p class="form-control-static">
+        Dictionaries are not currently supported in HTML input.
+    </p>
+</div>
diff --git a/tests/django_rest/vertical/fieldset.html b/tests/django_rest/vertical/fieldset.html
new file mode 100644
index 0000000..5c11108
--- /dev/null
+++ b/tests/django_rest/vertical/fieldset.html
@@ -0,0 +1,15 @@
+{% load rest_framework %}
+<fieldset>
+    {% if field.label %}
+        <legend
+            {% if style.hide_label %}class="sr-only"{% endif %}
+            >
+            {{ field.label }}
+        </legend>
+    {% endif %}
+    {% for nested_field in field %}
+        {% if not nested_field.read_only %}
+            {% render_field nested_field style=style %}
+        {% endif %}
+    {% endfor %}
+</fieldset>
diff --git a/tests/django_rest/vertical/form.html b/tests/django_rest/vertical/form.html
new file mode 100644
index 0000000..fa969e7
--- /dev/null
+++ b/tests/django_rest/vertical/form.html
@@ -0,0 +1,6 @@
+{% load rest_framework %}
+{% for field in form %}
+    {% if not field.read_only %}
+        {% render_field field style=style %}
+    {% endif %}
+{% endfor %}
diff --git a/tests/django_rest/vertical/input.html b/tests/django_rest/vertical/input.html
new file mode 100644
index 0000000..39c50f3
--- /dev/null
+++ b/tests/django_rest/vertical/input.html
@@ -0,0 +1,21 @@
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label
+        {% if style.hide_label %}class="sr-only"{% endif %}
+        >
+        {{ field.label }}
+    </label>
+{% endif %}
+<input name="{{ field.name }}"
+{% if style.input_type != "file" %}class="form-control"{% endif %}
+type="{{ style.input_type }}"
+{% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %}
+{% if field.value is not None %}value="{{ field.value }}"{% endif %}
+{% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
+{% if field.errors %}
+    {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+{% endif %}
+{% if field.help_text %}
+    <span class="help-block">{{ field.help_text|safe }}</span>
+{% endif %}
+</div>
diff --git a/tests/django_rest/vertical/list_field.html b/tests/django_rest/vertical/list_field.html
new file mode 100644
index 0000000..d562ff5
--- /dev/null
+++ b/tests/django_rest/vertical/list_field.html
@@ -0,0 +1,12 @@
+<div class="form-group">
+    {% if field.label %}
+        <label
+            {% if style.hide_label %}class="sr-only"{% endif %}
+            >
+            {{ field.label }}
+        </label>
+    {% endif %}
+    <p class="form-control-static">
+        Lists are not currently supported in HTML input.
+    </p>
+</div>
diff --git a/tests/django_rest/vertical/list_fieldset.html b/tests/django_rest/vertical/list_fieldset.html
new file mode 100644
index 0000000..e834558
--- /dev/null
+++ b/tests/django_rest/vertical/list_fieldset.html
@@ -0,0 +1,12 @@
+<fieldset>
+    {% if field.label %}
+        <legend
+            {% if style.hide_label %}class="sr-only"{% endif %}
+            >
+            {{ field.label }}
+        </legend>
+    {% endif %}
+    <p>
+        Lists are not currently supported in HTML input.
+    </p>
+</fieldset>
diff --git a/tests/django_rest/vertical/radio.html b/tests/django_rest/vertical/radio.html
new file mode 100644
index 0000000..045a6f5
--- /dev/null
+++ b/tests/django_rest/vertical/radio.html
@@ -0,0 +1,62 @@
+{% load i18n %}
+{% load rest_framework %}
+{% trans "None" as none_choice %}
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label
+        {% if style.hide_label %}class="sr-only"{% endif %}
+        >
+        {{ field.label }}
+    </label>
+{% endif %}
+{% if style.inline %}
+    <div>
+        {% if field.allow_null or field.allow_blank %}
+            <label class="radio-inline">
+                <input type="radio" name="{{ field.name }}" value=""
+                {% if not field.value %}checked{% endif %}
+                />
+                {{ none_choice }}
+            </label>
+        {% endif %}
+        {% for key, text in field.choices|items %}
+            <label class="radio-inline">
+                <input type="radio" name="{{ field.name }}" value="{{ key }}"
+                {% if key|as_string == field.value|as_string %}
+                    checked
+                {% endif %}
+                >
+                {{ text }}
+            </label>
+        {% endfor %}
+    </div>
+{% else %}
+    {% if field.allow_null or field.allow_blank %}
+        <div class="radio">
+            <label>
+                <input type="radio" name="{{ field.name }}" value=""
+                {% if not field.value %}checked{% endif %}
+                />
+                {{ none_choice }}
+            </label>
+        </div>
+    {% endif %}
+    {% for key, text in field.choices|items %}
+        <div class="radio">
+            <label>
+                <input type="radio"
+                       name="{{ field.name }}"
+                       value="{{ key }}"
+                       checked>
+                {{ text }}
+            </label>
+        </div>
+    {% endfor %}
+{% endif %}
+{% if field.errors %}
+    {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+{% endif %}
+{% if field.help_text %}
+    <span class="help-block">{{ field.help_text|safe }}</span>
+{% endif %}
+</div>
diff --git a/tests/django_rest/vertical/select.html b/tests/django_rest/vertical/select.html
new file mode 100644
index 0000000..80cccb5
--- /dev/null
+++ b/tests/django_rest/vertical/select.html
@@ -0,0 +1,41 @@
+{% load rest_framework %}
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label
+        {% if style.hide_label %}class="sr-only"{% endif %}
+        >
+        {{ field.label }}
+    </label>
+{% endif %}
+<select class="form-control" name="{{ field.name }}">
+    {% if field.allow_null or field.allow_blank %}
+        <option value=""
+            {% if not field.value %}selected{% endif %}
+            >
+            --------
+        </option>
+    {% endif %}
+    {% for select in field.iter_options %}
+        {% if select.start_option_group %}
+            <optgroup label="{{ select.label }}">
+            {% elif select.end_option_group %}
+            </optgroup>
+        {% else %}
+            <option value="{{ select.value }}"
+                {% if select.value|as_string == field.value|as_string %}
+                    selected
+                {% endif %}
+                {% if select.disabled %}disabled{% endif %}
+                >
+                {{ select.display_text }}
+            </option>
+        {% endif %}
+    {% endfor %}
+</select>
+{% if field.errors %}
+    {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+{% endif %}
+{% if field.help_text %}
+    <span class="help-block">{{ field.help_text|safe }}</span>
+{% endif %}
+</div>
diff --git a/tests/django_rest/vertical/select_multiple.html b/tests/django_rest/vertical/select_multiple.html
new file mode 100644
index 0000000..c055f56
--- /dev/null
+++ b/tests/django_rest/vertical/select_multiple.html
@@ -0,0 +1,40 @@
+{% load i18n %}
+{% load rest_framework %}
+{% trans "No items to select." as no_items %}
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label
+        {% if style.hide_label %}class="sr-only"{% endif %}
+        >
+        {{ field.label }}
+    </label>
+{% endif %}
+<select multiple {{ field.choices|yesno:",disabled" }} class="form-control" name="{{ field.name }}">
+    {% for select in field.iter_options %}
+        {% if select.start_option_group %}
+            <optgroup label="{{ select.label }}">
+            {% elif select.end_option_group %}
+            </optgroup>
+        {% else %}
+            <option value="{{ select.value }}"
+                {% if select.value|as_string in field.value|as_list_of_strings %}
+                    selected
+                {% endif %}
+                {% if select.disabled %}disabled{% endif %}
+                >
+                {{ select.display_text }}
+            </option>
+        {% endif %}
+        {% empty %}
+        <option>
+            {{ no_items }}
+        </option>
+    {% endfor %}
+</select>
+{% if field.errors %}
+    {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+{% endif %}
+{% if field.help_text %}
+    <span class="help-block">{{ field.help_text|safe }}</span>
+{% endif %}
+</div>
diff --git a/tests/django_rest/vertical/textarea.html b/tests/django_rest/vertical/textarea.html
new file mode 100644
index 0000000..0b6e6b1
--- /dev/null
+++ b/tests/django_rest/vertical/textarea.html
@@ -0,0 +1,21 @@
+<div class="form-group {% if field.errors %}has-error{% endif %}">
+{% if field.label %}
+    <label
+        {% if style.hide_label %}class="sr-only"{% endif %}
+        >
+        {{ field.label }}
+    </label>
+{% endif %}
+<textarea name="{{ field.name }}" class="form-control"
+{% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %}
+{% if style.rows %}rows="{{ style.rows }}"{% endif %}
+>
+{% if field.value %}{{ field.value }}{% endif %}
+</textarea>
+{% if field.errors %}
+    {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+{% endif %}
+{% if field.help_text %}
+    <span class="help-block">{{ field.help_text|safe }}</span>
+{% endif %}
+</div>
diff --git a/tests/flask_admin/bootstrap2/admin/actions.html b/tests/flask_admin/bootstrap2/admin/actions.html
new file mode 100644
index 0000000..ee0d23c
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/actions.html
@@ -0,0 +1,40 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% macro dropdown(actions, btn_class='dropdown-toggle') - %}
+<a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
+    {{ _gettext('With selected') }}
+    <b class="caret"></b>
+</a>
+<ul class="dropdown-menu">
+    {% for p in actions %}
+        <li>
+            <a href="javascript:void(0)" onclick="return modelActions.execute('{{ p[0] }}');">
+                {{ _gettext(p[1]) }}
+            </a>
+        </li>
+    {% endfor %}
+</ul>
+{% endmacro %}
+{% macro form(actions, url) %}
+{% if actions %}
+<form id="action_form" action="{{ url }}" method="POST" style="display: none">
+    {% if action_form.csrf_token %}
+        {{ action_form.csrf_token }}
+    {% elif csrf_token %}
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+    {% endif %}
+    {{ action_form.url(value=return_url) }}
+    {{ action_form.action() }}
+</form>
+{% endif %}
+{% endmacro %}
+{% macro script(message, actions, actions_confirmation) %}
+{% if actions %}
+<div id="actions-confirmation-data" style="display:none;">
+{{ actions_confirmation|tojson|safe }}
+</div>
+<div id="message-data" style="display:none;">
+{{ message|tojson|safe }}
+</div>
+<script src="{{ admin_static.url(filename='admin/js/actions.js', v='1.0.0') }}"></script>
+{% endif %}
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap2/admin/base.html b/tests/flask_admin/bootstrap2/admin/base.html
new file mode 100644
index 0000000..82d0113
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/base.html
@@ -0,0 +1,79 @@
+{% import 'admin/layout.html' as layout with context - %}
+{% import 'admin/static.html' as admin_static with context %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+        {% block title %}
+            {% if admin_view.category %}{{ admin_view.category }} - {% endif %}
+            {{ admin_view.name }} - {{ admin_view.admin.name }}
+        {% endblock %}
+        </title>
+        {% block head_meta %}
+            <meta charset="UTF-8">
+            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <meta name="description" content="">
+            <meta name="author" content="">
+        {% endblock %}
+        {% block head_css %}
+            <link href="{{ admin_static.url(filename='bootstrap/bootstrap2/swatch/{swatch}/bootstrap.min.css'.format(swatch=config.get('FLASK_ADMIN_SWATCH', 'default')), v='2.3.2') }}"
+                  rel="stylesheet">
+            <link href="{{ admin_static.url(filename='bootstrap/bootstrap2/css/bootstrap-responsive.css', v='2.3.2') }}"
+                  rel="stylesheet">
+            <link href="{{ admin_static.url(filename='admin/css/bootstrap2/admin.css', v='1.1.1') }}" rel="stylesheet">
+            {% if admin_view.extra_css %}
+                {% for css_url in admin_view.extra_css %}
+                    <link href="{{ css_url }}" rel="stylesheet">
+                {% endfor %}
+            {% endif %}
+            <style>
+        body {
+            padding-top: 4px;
+        }
+            </style>
+        {% endblock %}
+        {% block head %}{% endblock %}
+        {% block head_tail %}{% endblock %}
+    </head>
+    <body>
+        {% block page_body %}
+            <div class="container{% if config.get('FLASK_ADMIN_FLUID_LAYOUT', False) %}-fluid{% endif %}">
+                <div class="navbar">
+                    <div class="navbar-inner">
+                        {% block brand %}
+                            <a class="brand" href="{{ admin_view.admin.url }}">
+                                {{ admin_view.admin.name }}
+                            </a>
+                        {% endblock %}
+                        {% block main_menu %}
+                            <ul class="nav">
+                                {{ layout.menu() }}
+                            </ul>
+                        {% endblock %}
+                        {% block menu_links %}
+                            <ul class="nav pull-right">
+                                {{ layout.menu_links() }}
+                            </ul>
+                        {% endblock %}
+                        {% block access_control %}{% endblock %}
+                    </div>
+                </div>
+                {% block messages %}{{ layout.messages() }}{% endblock %}
+                {# store the jinja2 context for form_rules rendering logic #}
+                {% set render_ctx = h.resolve_ctx() %}
+                {% block body %}{% endblock %}</div>{% endblock %}
+                {% block tail_js %}
+                    <script src="{{ admin_static.url(filename='vendor/jquery.min.js', v='3.3.1') }}" type="text/javascript"></script>
+                    <script src="{{ admin_static.url(filename='bootstrap/bootstrap2/js/bootstrap.min.js', v='2.3.2') }}" type="text/javascript"></script>
+                    <script src="{{ admin_static.url(filename='vendor/moment.min.js', v='2.22.2') }}" type="text/javascript"></script>
+                    <script src="{{ admin_static.url(filename='vendor/select2/select2.min.js', v='3.5.2') }}" type="text/javascript"></script>
+                    {% if admin_view.extra_js %}
+                        {% for js_url in admin_view.extra_js %}
+                            <script src="{{ js_url }}" type="text/javascript"></script>
+                        {% endfor %}
+                    {% endif %}
+                {% endblock %}
+                {% block tail %}{% endblock %}
+            </body>
+        </html>
diff --git a/tests/flask_admin/bootstrap2/admin/file/form.html b/tests/flask_admin/bootstrap2/admin/file/form.html
new file mode 100644
index 0000000..3052310
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/file/form.html
@@ -0,0 +1,6 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    {% block header %}<h3>{{ header_text }}</h3>{% endblock %}
+    {% block fa_form %}{{ lib.render_form(form, dir_url) }}{% endblock %}
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/file/list.html b/tests/flask_admin/bootstrap2/admin/file/list.html
new file mode 100644
index 0000000..64af028
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/file/list.html
@@ -0,0 +1,215 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% import 'admin/actions.html' as actionslib with context %}
+{% block body %}
+    {% block breadcrums %}
+        <ul class="breadcrumb">
+            <li>
+                <a href="{{ get_dir_url('.index_view', path=None) }}">
+                    {{ _gettext('Root') }}
+                </a>
+            </li>
+            {% for name, path in breadcrumbs[:-1] %}
+                <li>
+                    <span class="divider">/</span>
+                    <a href="{{ get_dir_url('.index_view', path=path) }}">
+                        {{ name }}
+                    </a>
+                </li>
+            {% endfor %}
+            {% if breadcrumbs %}
+                <li>
+                    <span class="divider">/</span>
+                    <a href="{{ get_dir_url('.index_view', path=breadcrumbs[-1][1]) }}">
+                        {{ breadcrumbs[-1][0] }}
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+    {% endblock %}
+    {% block file_list_table %}
+        <div id="no-more-tables">
+            <table class="table table-striped table-bordered model-list">
+                <thead>
+                    <tr>
+                        {% block list_header scoped %}
+                            {% if actions %}
+                                <th class="span1">
+                                    <input type="checkbox" name="rowtoggle" class="action-rowtoggle" />
+                                </th>
+                            {% endif %}
+                            <th class="span1">&nbsp;</th>
+                            {% for column in admin_view.column_list %}
+                                <th>
+                                    {% if admin_view.is_column_sortable(column) %}
+                                        {% if sort_column == column %}
+                                            <a href="{{ sort_url(column, dir_path, True) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=column) }}">
+                                                {{ admin_view.column_label(column) }}
+                                                {% if sort_desc %}
+                                                    <i class="fa fa-chevron-up icon-chevron-up"></i>
+                                                {% else %}
+                                                    <i class="fa fa-chevron-down icon-chevron-down"></i>
+                                                {% endif %}
+                                            </a>
+                                        {% else %}
+                                            <a href="{{ sort_url(column, dir_path) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=column) }}">
+                                                {{ admin_view.column_label(column) }}
+                                            </a>
+                                        {% endif %}
+                                    {% else %}
+                                        {{ _gettext(admin_view.column_label(column)) }}
+                                    {% endif %}
+                                </th>
+                            {% endfor %}
+                        {% endblock %}
+                    </tr>
+                </thead>
+                {% for name, path, is_dir, size, date in items %}
+                    <tr>
+                        {% block list_row scoped %}
+                            {% if actions %}
+                                <td>
+                                    {% if not is_dir %}
+                                        <input type="checkbox"
+                                               name="rowid"
+                                               class="action-checkbox"
+                                               value="{{ path }}"/>
+                                    {% endif %}
+                                </td>
+                            {% endif %}
+                            <td>
+                                {% block list_row_actions scoped %}
+                                    {% if admin_view.can_rename and path and name != '..' %}
+                                        {%- if admin_view.rename_modal - %}
+                                        {{ lib.add_modal_button(url=get_url('.rename', path=path, modal=True),
+                                        title=_gettext('Rename File'),
+                                        content='
+                                        <i class="fa fa-pencil icon-pencil"></i>
+                                        ') }}
+                                    {% else %}
+                                        <a class="icon"
+                                           href="{{ get_url('.rename', path=path) }}"
+                                           title="{{ _gettext('Rename File') }}">
+                                            <i class="fa fa-pencil icon-pencil"></i>
+                                        </a>
+                                        {%- endif - %}
+                                    {% endif %}
+                                    {%- if admin_view.can_delete and path - %}
+                                    {% if is_dir %}
+                                        {% if name != '..' and admin_view.can_delete_dirs %}
+                                            <form class="icon" method="POST" action="{{ get_url('.delete') }}">
+                                                {{ delete_form.path(value=path) }}
+                                                {% if delete_form.csrf_token %}
+                                                    {{ delete_form.csrf_token }}
+                                                {% elif csrf_token %}
+                                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                                                {% endif %}
+                                                <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\' recursively?', name=name) }}')">
+                                                    <i class="fa fa-times icon-remove"></i>
+                                                </button>
+                                            </form>
+                                        {% endif %}
+                                    {% else %}
+                                        <form class="icon" method="POST" action="{{ get_url('.delete') }}">
+                                            {{ delete_form.path(value=path) }}
+                                            {% if delete_form.csrf_token %}
+                                                {{ delete_form.csrf_token }}
+                                            {% elif csrf_token %}
+                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                                            {% endif %}
+                                            <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\'?', name=name) }}')">
+                                                <i class="fa fa-times icon-remove"></i>
+                                            </button>
+                                        </form>
+                                    {% endif %}
+                                    {%- endif - %}
+                                {% endblock %}
+                            </td>
+                            {% if is_dir %}
+                                <td colspan="2" data-title="{{ _gettext('Name') }}">
+                                    <a href="{{ get_dir_url('.index_view', path)|safe }}">
+                                        <i class="fa fa-folder-o icon-folder-close"></i>
+                                        <span>{{ name }}</span>
+                                    </a>
+                                </td>
+                            {% else %}
+                                <td data-title="{{ _gettext('Name') }}">
+                                    {% if admin_view.can_download %}
+                                        {%- if admin_view.edit_modal and admin_view.is_file_editable(path) - %}
+                                        {{ lib.add_modal_button(url=get_file_url(path, modal=True)|safe,
+                                        btn_class='', content=name) }}
+                                    {% else %}
+                                        <a href="{{ get_file_url(path)|safe }}">
+                                            {{ name }}
+                                        </a>
+                                        {%- endif - %}
+                                    {% else %}
+                                        {{ name }}
+                                    {% endif %}
+                                </td>
+                                {% if admin_view.is_column_visible('size') %}
+                                    <td data-title="{{ _gettext('Size') }}">
+                                        {{ size|filesizeformat }}
+                                    </td>
+                                {% endif %}
+                                {% if admin_view.is_column_visible('date') %}
+                                    <td>{{ timestamp_format(date) }}</td>
+                                {% endif %}
+                            {% endif %}
+                        {% endblock %}
+                    </tr>
+                {% endfor %}
+            </table>
+        </div>
+    {% endblock %}
+    {% block toolbar %}
+        <div class="btn-toolbar">
+            {% if admin_view.can_upload %}
+                <div class="btn-group">
+                    {%- if admin_view.upload_modal - %}
+                    {{ lib.add_modal_button(url=get_dir_url('.upload', path=dir_path, modal=True),
+                    btn_class="btn btn-large",
+                    content=_gettext('Upload File')) }}
+                {% else %}
+                    <a class="btn btn-large" href="{{ get_dir_url('.upload', path=dir_path) }}">
+                        {{ _gettext('Upload File') }}
+                    </a>
+                    {%- endif - %}
+                </div>
+            {% endif %}
+            {% if admin_view.can_mkdir %}
+                <div class="btn-group">
+                    {%- if admin_view.mkdir_modal - %}
+                    {{ lib.add_modal_button(url=get_dir_url('.mkdir', path=dir_path, modal=True),
+                    btn_class="btn btn-large",
+                    content=_gettext('Create Directory')) }}
+                {% else %}
+                    <a class="btn btn-large" href="{{ get_dir_url('.mkdir', path=dir_path) }}">
+                        {{ _gettext('Create Directory') }}
+                    </a>
+                    {%- endif - %}
+                </div>
+            {% endif %}
+            {% if actions %}
+                <div class="btn-group">
+                    {{ actionslib.dropdown(actions, 'dropdown-toggle btn btn-large') }}
+                </div>
+            {% endif %}
+        </div>
+    {% endblock %}
+    {% block actions %}
+        {{ actionslib.form(actions, get_url('.action_view')) }}
+    {% endblock %}
+    {%- if admin_view.rename_modal or admin_view.mkdir_modal
+    or admin_view.upload_modal or admin_view.edit_modal -%}
+    {{ lib.add_modal_window() }}
+    {%- endif - %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    {{ actionslib.script(_gettext('Please select at least one file.'),
+    actions,
+    actions_confirmation) }}
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/file/modals/form.html b/tests/flask_admin/bootstrap2/admin/file/modals/form.html
new file mode 100644
index 0000000..c9efe92
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/file/modals/form.html
@@ -0,0 +1,15 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    {# content added to modal-content #}
+    {% block fa_form %}
+        {{ lib.render_form(form, dir_url, action=request.url, is_modal=True) }}
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    <script src="{{ admin_static.url(filename='admin/js/bs2_modal.js', v='1.0.0') }}"></script>
+    <script>
+  // fill the header of modal dynamically
+  $('.modal-header h3').html('{% block header %}{{ header_text }}{% endblock %}');
+    </script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/index.html b/tests/flask_admin/bootstrap2/admin/index.html
new file mode 100644
index 0000000..6c4bda4
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/index.html
@@ -0,0 +1,2 @@
+{% extends 'admin/master.html' %}
+{% block body %}{% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/layout.html b/tests/flask_admin/bootstrap2/admin/layout.html
new file mode 100644
index 0000000..dfb9128
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/layout.html
@@ -0,0 +1,104 @@
+{% macro menu_icon(item) - %}
+{% set icon_type = item.get_icon_type() %}
+{%- if icon_type %}
+{% set icon_value = item.get_icon_value() %}
+{% if icon_type == 'glyph' %}
+    <i class="{{ icon_value }}"></i>
+{% elif icon_type == 'fa' %}
+    <i class="fa fa-{{ icon_value }}"></i>
+{% elif icon_type == 'image' %}
+    <img src="{{ url_for('static', filename=icon_value) }}" alt="menu image">
+    {% elif icon_type == 'image-url' %}
+        <img src="item.icon_value" alt="menu image">
+        {% endif %}
+    {% endif %}
+    {%- endmacro %}
+    {% macro menu(menu_root=None) %}
+    {% if menu_root is none %}
+        {% set menu_root = admin_view.admin.menu() %}
+    {% endif %}
+    {%- for item in menu_root %}
+    {%- if item.is_category() - %}
+    {% set children = item.get_children() %}
+    {%- if children %}
+    {% set class_name = item.get_class_name() or '' %}
+    {%- if item.is_active(admin_view) %}
+    <li class="active dropdown{% if class_name %}{{ class_name }}{% endif %}">
+{% else - %}
+    <li class="dropdown{% if class_name %}{{ class_name }}{% endif %}">
+    {%- endif %}
+    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
+        {% if item.class_name %}<i class="{{ item.class_name }}"></i>{% endif %}
+        {{ menu_icon(item) }}{{ item.name }}
+        {%- if 'dropdown-submenu' not in class_name - %}
+        <b class="caret"></b>
+        {%- endif - %}
+    </a>
+    <ul class="dropdown-menu">
+        {%- for child in children - %}
+        {%- if child.is_category() - %}
+        {{ menu(menu_root=[child]) }}
+    {% else %}
+        {% set class_name = child.get_class_name() %}
+        {%- if child.is_active(admin_view) %}
+        <li class="active{% if class_name %}{{ class_name }}{% endif %}">
+    {% else %}
+        <li
+            {% if class_name %}class="{{ class_name }}"{% endif %}
+            >
+            {%- endif %}
+            <a href="{{ child.get_url() }}"
+                {% if child.target %}target="{{ child.target }}"{% endif %}>
+                {{ menu_icon(child) }}{{ child.name }}
+            </a>
+        </li>
+        {%- endif %}
+        {%- endfor %}
+    </ul>
+</li>
+{% endif %}
+{%- else %}
+{%- if item.is_accessible() and item.is_visible() - %}
+{% set class_name = item.get_class_name() %}
+{%- if item.is_active(admin_view) %}
+<li class="active{% if class_name %}{{ class_name }}{% endif %}">
+{%- else %}
+<li{% if class_name %}class="{{ class_name }}"{% endif %}>
+{%- endif %}
+<a href="{{ item.get_url() }}"{% if item.target %}target="{{ item.target }}"{% endif %}>
+{{ menu_icon(item) }}{{ item.name }}
+</a>
+</li>
+{%- endif - %}
+{% endif - %}
+{% endfor %}
+{% endmacro %}
+{% macro menu_links(links=None) %}
+{% if links is none %}{% set links = admin_view.admin.menu_links() %}{% endif %}
+{% for item in links %}
+{% set class_name = item.get_class_name() %}
+{% if item.is_accessible() and item.is_visible() %}
+<li{% if class_name %}class="{{ class_name }}"{% endif %}>
+<a href="{{ item.get_url() }}">{{ menu_icon(item) }}{{ item.name }}</a>
+</li>
+{% endif %}
+{% endfor %}
+{% endmacro %}
+{% macro messages() %}
+{% with messages = get_flashed_messages(with_categories=True) %}
+{% if messages %}
+{% for category, m in messages %}
+{% if category %}
+<div class="alert alert-{{ category }}">
+{% else %}
+<div class="alert">
+{% endif %}
+<a href="javascript:void(0)" class="close" data-dismiss="alert">
+x
+</a>
+{{ m }}
+</div>
+{% endfor %}
+{% endif %}
+{% endwith %}
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap2/admin/lib.html b/tests/flask_admin/bootstrap2/admin/lib.html
new file mode 100644
index 0000000..3b7995c
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/lib.html
@@ -0,0 +1,267 @@
+{% import 'admin/static.html' as admin_static with context %}
+{# ---------------------- Pager -------------------------- #}
+{% macro pager(page, pages, generator) - %}
+{% if pages > 1 %}
+    <div class="pagination">
+        <ul>
+            {% set min = page - 3 %}
+            {% set max = page + 3 + 1 %}
+            {% if min < 0 %}
+                {% set max = max - min %}
+            {% endif %}
+            {% if max >= pages %}
+                {% set min = min - max + pages %}
+            {% endif %}
+            {% if min < 0 %}
+                {% set min = 0 %}
+            {% endif %}
+            {% if max >= pages %}
+                {% set max = pages %}
+            {% endif %}
+            {% if min > 0 %}
+                <li>
+                    <a href="{{ generator(0) }}">&laquo;</a>
+                </li>
+            {% else %}
+                <li class="disabled">
+                    <a href="javascript:void(0)">&laquo;</a>
+                </li>
+            {% endif %}
+            {% if page > 0 %}
+                <li>
+                    <a href="{{ generator(page-1) }}">&lt;</a>
+                </li>
+            {% else %}
+                <li class="disabled">
+                    <a href="javascript:void(0)">&lt;</a>
+                </li>
+            {% endif %}
+            {% for p in range(min, max) %}
+                {% if page == p %}
+                    <li class="active">
+                        <a href="javascript:void(0)">{{ p + 1 }}</a>
+                    </li>
+                {% else %}
+                    <li>
+                        <a href="{{ generator(p) }}">{{ p + 1 }}</a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+            {% if page + 1 < pages %}
+                <li>
+                    <a href="{{ generator(page + 1) }}">
+                        &gt;
+                    </a>
+                </li>
+            {% else %}
+                <li class="disabled">
+                    <a href="javascript:void(0)">&gt;</a>
+                </li>
+            {% endif %}
+            {% if max < pages %}
+                <li>
+                    <a href="{{ generator(pages - 1) }}">
+                        &raquo;
+                    </a>
+                </li>
+            {% else %}
+                <li class="disabled">
+                    <a href="javascript:void(0)">&raquo;</a>
+                </li>
+            {% endif %}
+        </ul>
+    </div>
+{% endif %}
+{%- endmacro %}
+{% macro simple_pager(page, have_next, generator) - %}
+<div class="pagination">
+    <ul>
+        {% if page > 0 %}
+            <li>
+                <a href="{{ generator(page - 1) }}">
+                    &lt;
+                </a>
+            </li>
+        {% else %}
+            <li class="disabled">
+                <a href="{{ generator(0) }}">&lt;</a>
+            </li>
+        {% endif %}
+        {% if have_next %}
+            <li>
+                <a href="{{ generator(page + 1) }}">
+                    &gt;
+                </a>
+            </li>
+        {% else %}
+            <li class="disabled">
+                <a href="{{ generator(page) }}">&gt;</a>
+            </li>
+        {% endif %}
+    </ul>
+</div>
+{%- endmacro %}
+{# ---------------------- Modal Window -------------------------- #}
+{% macro add_modal_window(modal_window_id='fa_modal_window') %}
+<div id="{{ modal_window_id }}" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+            ×
+        </button>
+        <h3>Loading...</h3>
+    </div>
+    <div class="modal-body"></div>
+</div>
+{% endmacro %}
+{% macro add_modal_button(url='', title='', content='', modal_window_id='fa_modal_window', btn_class='icon') %}
+<a class="{{ btn_class }}"
+   href="#"
+   data-toggle="modal"
+   title="{{ title }}"
+   data-target="#{{ modal_window_id }}"
+   data-remote="{{ url }}">
+{{ content|safe }}
+</a>
+{% endmacro %}
+{# ---------------------- Forms -------------------------- #}
+{% macro render_field(form, field, kwargs={}, caller=None) %}
+{% set direct_error = h.is_field_error(field.errors) %}
+<div class="control-group{{ ' error' if direct_error else '' }}">
+<div class="control-label">
+<label for="{{ field.id }}">
+    {{ field.label.text }}
+    {% if h.is_required_form_field(field) %}
+        <strong style="color: red">
+        &#42;
+        </strong>
+        {%- else - %}
+        &nbsp;
+        {%- endif %}
+    </label>
+</div>
+<div class="controls">
+    <div>
+        {{ field(**kwargs)|safe }}
+    </div>
+    {% if field.description %}
+        <p class="help-block">
+            {{ field.description|safe }}
+        </p>
+    {% endif %}
+    {% if direct_error %}
+        <ul class="input-errors">
+            {% for e in field.errors if e is string %}
+                <li>
+                    {{ e }}
+                </li>
+            {% endfor %}
+        </ul>
+    {% endif %}
+</div>
+{% if caller %}{{ caller(form, field, direct_error, kwargs) }}{% endif %}
+</div>
+{% endmacro %}
+{% macro render_header(form, text) %}
+<h3>{{ text }}</h3>
+{% endmacro %}
+{% macro render_form_fields(form, form_opts=None) %}
+{% if form.hidden_tag is defined %}
+{{ form.hidden_tag() }}
+{% else %}
+{% if csrf_token %}
+<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+{% endif %}
+{% for f in form if f.widget.input_type == 'hidden' %}
+{{ f }}
+{% endfor %}
+{% endif %}
+{% if form_opts and form_opts.form_rules %}
+{% for r in form_opts.form_rules %}{{ r(form, form_opts=form_opts) }}{% endfor %}
+{% else %}
+{% for f in form if f.widget.input_type != 'hidden' %}
+{% if form_opts %}
+{% set kwargs = form_opts.widget_args.get(f.short_name, {}) %}
+{% else %}
+{% set kwargs = {} %}
+{% endif %}
+{{ render_field(form, f, kwargs) }}
+{% endfor %}
+{% endif %}
+{% endmacro %}
+{% macro form_tag(form=None, action=None) %}
+<form action="{{ action or '' }}" method="POST" class="admin-form form-horizontal" enctype="multipart/form-data">
+<fieldset>
+{{ caller() }}
+</fieldset>
+</form>
+{% endmacro %}
+{% macro render_form_buttons(cancel_url, extra=None, is_modal=False) %}
+<hr>
+<div class="control-group">
+<div class="controls">
+<input type="submit" class="btn btn-primary" value="{{ _gettext('Save') }}" />
+{% if extra %}{{ extra }}{% endif %}
+{% if cancel_url %}
+<a href="{{ cancel_url }}" class="btn btn-danger"
+{% if is_modal %}data-dismiss="modal"{% endif %}
+>
+{{ _gettext('Cancel') }}
+</a>
+{% endif %}
+</div>
+</div>
+{% endmacro %}
+{% macro render_form(form, cancel_url, extra=None, form_opts=None, action=None, is_modal=False) - %}
+{% call form_tag(action=action) %}
+{{ render_form_fields(form, form_opts=form_opts) }}
+{{ render_form_buttons(cancel_url, extra, is_modal) }}
+{% endcall %}
+{% endmacro %}
+{% macro form_css() %}
+<link href="{{ admin_static.url(filename='vendor/select2/select2.css', v='3.5.2') }}" rel="stylesheet">
+<link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs2.css', v='1.3.22') }}"
+      rel="stylesheet">
+{% if config.MAPBOX_MAP_ID %}
+<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='1.0.2') }}" rel="stylesheet">
+<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.4.6') }}" rel="stylesheet">
+{% endif %}
+{% if editable_columns %}
+<link href="{{ admin_static.url(filename='vendor/x-editable/css/bootstrap2-editable.css', v='1.5.1.1') }}"
+      rel="stylesheet">
+{% endif %}
+{% endmacro %}
+{% macro form_js() %}
+{% if config.MAPBOX_MAP_ID %}
+<script>
+  window.MAPBOX_MAP_ID = "{{ config.MAPBOX_MAP_ID }}";
+  {% if config.MAPBOX_ACCESS_TOKEN %}
+  window.MAPBOX_ACCESS_TOKEN = "{{ config.MAPBOX_ACCESS_TOKEN }}";
+  {% endif %}
+  {% if config.DEFAULT_CENTER_LAT and config.DEFAULT_CENTER_LONG %}
+  window.DEFAULT_CENTER_LAT = "{{ config.DEFAULT_CENTER_LAT }}";
+  window.DEFAULT_CENTER_LONG = "{{ config.DEFAULT_CENTER_LONG }}";
+  {% endif %}
+</script>
+<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.js', v='1.0.2') }}"></script>
+<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.js', v='0.4.6') }}"></script>
+{% if config.MAPBOX_SEARCH %}
+<script>
+  window.MAPBOX_SEARCH = "{{ config.MAPBOX_SEARCH }}";
+</script>
+<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key={{ config.get('GOOGLE_MAPS_API_KEY') }}"></script>
+{% endif %}
+{% endif %}
+<script src="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker.js', v='1.3.22') }}"></script>
+{% if editable_columns %}
+<script src="{{ admin_static.url(filename='vendor/x-editable/js/bootstrap2-editable.min.js', v='1.5.1.1') }}"></script>
+{% endif %}
+<script src="{{ admin_static.url(filename='admin/js/form.js', v='1.0.1') }}"></script>
+{% endmacro %}
+{% macro extra() %}
+{% if admin_view.can_create %}
+<input name="_add_another" type="submit" class="btn" value="{{ _gettext('Save and Add Another') }}" />
+{% endif %}
+{% if admin_view.can_edit %}
+<input name="_continue_editing" type="submit" class="btn" value="{{ _gettext('Save and Continue Editing') }}" />
+{% endif %}
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap2/admin/master.html b/tests/flask_admin/bootstrap2/admin/master.html
new file mode 100644
index 0000000..8f27dad
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/master.html
@@ -0,0 +1 @@
+{% extends admin_base_template %}
diff --git a/tests/flask_admin/bootstrap2/admin/model/create.html b/tests/flask_admin/bootstrap2/admin/model/create.html
new file mode 100644
index 0000000..697a38e
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/create.html
@@ -0,0 +1,26 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% from 'admin/lib.html' import extra with context %} {# backward compatible #}
+{% block head %}
+    {{ super() }}
+    {{ lib.form_css() }}
+{% endblock %}
+{% block body %}
+    {% block navlinks %}
+        <ul class="nav nav-tabs">
+            <li>
+                <a href="{{ return_url }}">{{ _gettext('List') }}</a>
+            </li>
+            <li class="active">
+                <a href="javascript:void(0)">{{ _gettext('Create') }}</a>
+            </li>
+        </ul>
+    {% endblock %}
+    {% block create_form %}
+        {{ lib.render_form(form, return_url, extra(), form_opts) }}
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    {{ lib.form_js() }}
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/model/details.html b/tests/flask_admin/bootstrap2/admin/model/details.html
new file mode 100644
index 0000000..2627da8
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/details.html
@@ -0,0 +1,54 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    {% block navlinks %}
+        <ul class="nav nav-tabs">
+            <li>
+                <a href="{{ return_url }}">{{ _gettext('List') }}</a>
+            </li>
+            {%- if admin_view.can_create - %}
+            <li>
+                <a href="{{ get_url('.create_view', url=return_url) }}">
+                    {{ _gettext('Create') }}
+                </a>
+            </li>
+            {%- endif - %}
+            {%- if admin_view.can_edit - %}
+            <li>
+                <a href="{{ get_url('.edit_view', id=request.args.get('id'), url=return_url) }}">
+                    {{ _gettext('Edit') }}
+                </a>
+            </li>
+            {%- endif - %}
+            <li class="active">
+                <a href="javascript:void(0)">{{ _gettext('Details') }}</a>
+            </li>
+        </ul>
+    {% endblock %}
+    {% block details_search %}
+        <div class="row-fluid">
+            <div class="input-prepend fa_filter_container">
+                <span class="add-on">{{ _gettext('Filter') }}</span>
+                <input id="fa_filter" id="prependedInput" type="text">
+            </div>
+        </div>
+    {% endblock %}
+    {% block details_table %}
+        <table class="table table-hover table-bordered searchable">
+            {% for c, name in details_columns %}
+                <tr>
+                    <td>
+                        <b>
+                        {{ name }}
+                        </b>
+                    </td>
+                    <td>{{ get_value(model, c) }}</td>
+                </tr>
+            {% endfor %}
+        </table>
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/model/edit.html b/tests/flask_admin/bootstrap2/admin/model/edit.html
new file mode 100644
index 0000000..9eef6a7
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/edit.html
@@ -0,0 +1,40 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% from 'admin/lib.html' import extra with context %} {# backward compatible #}
+{% block head %}
+    {{ super() }}
+    {{ lib.form_css() }}
+{% endblock %}
+{% block body %}
+    {% block navlinks %}
+        <ul class="nav nav-tabs">
+            <li>
+                <a href="{{ return_url }}">{{ _gettext('List') }}</a>
+            </li>
+            {%- if admin_view.can_create - %}
+            <li>
+                <a href="{{ get_url('.create_view', url=return_url) }}">
+                    {{ _gettext('Create') }}
+                </a>
+            </li>
+            {%- endif - %}
+            <li class="active">
+                <a href="javascript:void(0)">{{ _gettext('Edit') }}</a>
+            </li>
+            {%- if admin_view.can_view_details - %}
+            <li>
+                <a href="{{ get_url('.details_view', id=request.args.get('id'), url=return_url) }}">
+                    {{ _gettext('Details') }}
+                </a>
+            </li>
+            {%- endif - %}
+        </ul>
+    {% endblock %}
+    {% block edit_form %}
+        {{ lib.render_form(form, return_url, extra(), form_opts) }}
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    {{ lib.form_js() }}
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/model/inline_field_list.html b/tests/flask_admin/bootstrap2/admin/model/inline_field_list.html
new file mode 100644
index 0000000..c46db1b
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/inline_field_list.html
@@ -0,0 +1,14 @@
+{% import 'admin/model/inline_list_base.html' as base with context %}
+{% macro render_field(field) %}
+{{ field }}
+{% if h.is_field_error(field.errors) %}
+    <ul class="input-errors">
+        {% for e in field.errors if e is string %}
+            <li>
+                {{ e }}
+            </li>
+        {% endfor %}
+    </ul>
+{% endif %}
+{% endmacro %}
+{{ base.render_inline_fields(field, template, render_field, check) }}
diff --git a/tests/flask_admin/bootstrap2/admin/model/inline_form.html b/tests/flask_admin/bootstrap2/admin/model/inline_form.html
new file mode 100644
index 0000000..9a4b9fa
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/inline_form.html
@@ -0,0 +1,4 @@
+{% import 'admin/lib.html' as lib with context %}
+<div class="inline-form-field">
+    {{ lib.render_form_fields(field.form, form_opts=form_opts) }}
+</div>
diff --git a/tests/flask_admin/bootstrap2/admin/model/inline_list_base.html b/tests/flask_admin/bootstrap2/admin/model/inline_list_base.html
new file mode 100644
index 0000000..66327b8
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/inline_list_base.html
@@ -0,0 +1,55 @@
+{% macro render_inline_fields(field, template, render, check=None) %}
+<div class="inline-field" id="{{ field.id }}">
+    {# existing inline form fields #}
+    <div class="inline-field-list">
+        {% for subfield in field %}
+            <div id="{{ subfield.id }}" class="inline-field well well-small">
+                {%- if not check or check(subfield) %}
+                <legend>
+                    {{ field.label.text }} #{{ loop.index }}
+                    <div class="pull-right">
+                        {% if subfield.get_pk and subfield.get_pk() %}
+                            <input type="checkbox" name="del-{{ subfield.id }}" id="del-{{ subfield.id }}" />
+                            <label for="del-{{ subfield.id }}" style="display: inline">
+                                {{ _gettext('Delete?') }}
+                            </label>
+                        {% else %}
+                            <a href="javascript:void(0)"
+                               value="{{ _gettext('Are you sure you want to delete this record?') }}"
+                               class="inline-remove-field">
+                                <i class="fa fa-times icon-remove"></i>
+                            </a>
+                        {% endif %}
+                    </div>
+                </legend>
+                {%- endif - %}
+                {{ render(subfield) }}
+            </div>
+        {% endfor %}
+    </div>
+    {# template for new inline form fields #}
+    <div class="inline-field-template hide">
+        {% filter forceescape %}
+        <div class="inline-field well well-small">
+            <legend>
+                {{ _gettext('New') }} {{ field.label.text }}
+                <div class="pull-right">
+                    <a href="javascript:void(0)"
+                       value="{{ _gettext('Are you sure you want to delete this record?') }}"
+                       class="inline-remove-field">
+                        <i class="fa fa-times icon-remove"></i>
+                    </a>
+                </div>
+            </legend>
+            {{ render(template) }}
+        </div>
+    {% endfilter %}
+</div>
+<a id="{{ field.id }}-button"
+   href="javascript:void(0)"
+   class="btn"
+   onclick="faForm.addInlineField(this, '{{ field.id }}');">
+    {{ _gettext('Add') }} {{ field.label.text }}
+</a>
+</div>
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap2/admin/model/layout.html b/tests/flask_admin/bootstrap2/admin/model/layout.html
new file mode 100644
index 0000000..ac6c849
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/layout.html
@@ -0,0 +1,130 @@
+{% macro filter_options(btn_class='dropdown-toggle') %}
+<a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
+    {{ _gettext('Add Filter') }}
+    <b class="caret"></b>
+</a>
+<ul class="dropdown-menu field-filters">
+    {% for k in filter_groups %}
+        <li>
+            <a href="javascript:void(0)" class="filter" onclick="return false;">
+                {{ k }}
+            </a>
+        </li>
+    {% endfor %}
+</ul>
+{% endmacro %}
+{% macro export_options(btn_class='dropdown-toggle') %}
+{% if admin_view.export_types|length > 1 %}
+<li class="dropdown">
+    <a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
+        {{ _gettext('Export') }}
+        <b class="caret"></b>
+    </a>
+    <ul class="dropdown-menu field-filters">
+        {% for export_type in admin_view.export_types %}
+            <li>
+                <a href="{{ get_url('.export', export_type=export_type, **request.args) }}"
+                   title="{{ _gettext('Export') }}">
+                    {{ _gettext('Export') + ' ' + export_type|upper }}
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+</li>
+{% else %}
+<li>
+    <a href="{{ get_url('.export', export_type=admin_view.export_types[0], **request.args) }}"
+       title="{{ _gettext('Export') }}">
+        {{ _gettext('Export') }}
+    </a>
+</li>
+{% endif %}
+{% endmacro %}
+{% macro filter_form() %}
+<form id="filter_form" method="GET" action="{{ return_url }}">
+{% for arg_name, arg_value in extra_args.items() %}
+<input type="hidden" name="{{ arg_name }}" value="{{ arg_value }}">
+{% endfor %}
+{% if sort_column is not none %}
+<input type="hidden" name="sort" value="{{ sort_column }}">
+{% endif %}
+{% if sort_desc %}
+<input type="hidden" name="desc" value="{{ sort_desc }}">
+{% endif %}
+{% if search %}
+<input type="hidden" name="search" value="{{ search }}">
+{% endif %}
+{% if page_size != default_page_size %}
+<input type="hidden" name="page_size" value="{{ page_size }}">
+{% endif %}
+<div class="pull-right">
+<button type="submit" class="btn btn-primary" style="display: none">
+    {{ _gettext('Apply') }}
+</button>
+{% if active_filters %}
+    <a href="{{ clear_search_url }}" class="btn">
+        {{ _gettext('Reset Filters') }}
+    </a>
+{% endif %}
+</div>
+<table class="filters"></table>
+</form>
+<div class="clearfix"></div>
+{% endmacro %}
+{% macro search_form(input_class=None) %}
+<form method="GET" action="{{ return_url }}" class="search-form">
+{% for flt_name, flt_value in filter_args.items() %}
+<input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}">
+{% endfor %}
+{% for arg_name, arg_value in extra_args.items() %}
+<input type="hidden" name="{{ arg_name }}" value="{{ arg_value }}">
+{% endfor %}
+{% if page_size != default_page_size %}
+<input type="hidden" name="page_size" value="{{ page_size }}">
+{% endif %}
+{% if sort_column is not none %}
+<input type="hidden" name="sort" value="{{ sort_column }}">
+{% endif %}
+{% if sort_desc %}
+<input type="hidden" name="desc" value="{{ sort_desc }}">
+{% endif %}
+{%- set full_search_placeholder = _gettext('Search') %}
+{%- if search_placeholder %}{% set full_search_placeholder = [full_search_placeholder, search_placeholder] | join(": ") %}
+{% endif %}
+{% if search %}
+<div class="input-append">
+<input type="search"
+       name="search"
+       class="input-xlarge{% if input_class %}{{ input_class }}{% endif %}"
+       value="{{ search }}"
+       placeholder="{{ full_search_placeholder }}">
+<a href="{{ clear_search_url }}" class="clear add-on">
+<i class="fa fa-times icon-remove"></i>
+</a>
+</div>
+{% else %}
+<input type="search"
+       name="search"
+       class="input-xlarge{% if input_class %}{{ input_class }}{% endif %}"
+       value=""
+       placeholder="{{ full_search_placeholder }}">
+{% endif %}
+</form>
+{% endmacro %}
+{% macro page_size_form(generator, btn_class='dropdown-toggle') %}
+<a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
+{{ page_size }} {{ _gettext('items') }}
+<b class="caret"></b>
+</a>
+<ul class="dropdown-menu">
+<li>
+<a href="{{ generator(20) }}">20 {{ _gettext('items') }}</a>
+</li>
+<li>
+<a href="{{ generator(50) }}">50 {{ _gettext('items') }}</a>
+</li>
+<li>
+<a href="{{ generator(100) }}">100 {{ _gettext('items') }}</a>
+</li>
+</ul>
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap2/admin/model/list.html b/tests/flask_admin/bootstrap2/admin/model/list.html
new file mode 100755
index 0000000..a9185d1
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/list.html
@@ -0,0 +1,194 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/model/layout.html' as model_layout with context %}
+{% import 'admin/actions.html' as actionlib with context %}
+{% import 'admin/model/row_actions.html' as row_actions with context %}
+{% block head %}
+    {{ super() }}
+    {{ lib.form_css() }}
+{% endblock %}
+{% block body %}
+    {% block model_menu_bar %}
+        <ul class="nav nav-tabs actions-nav">
+            <li class="active">
+                <a href="javascript:void(0)">
+                    {{ _gettext('List') }}
+                    {% if count %}({{ count }}){% endif %}
+                </a>
+            </li>
+            {% if admin_view.can_create %}
+                <li>
+                    {%- if admin_view.create_modal - %}
+                    {{ lib.add_modal_button(url=get_url('.create_view', url=return_url, modal=True), title=_gettext('Create New Record'), content=_gettext('Create')) }}
+                {% else %}
+                    <a href="{{ get_url('.create_view', url=return_url) }}"
+                       title="{{ _gettext('Create New Record') }}">
+                        {{ _gettext('Create') }}
+                    </a>
+                    {%- endif - %}
+                </li>
+            {% endif %}
+            {% if admin_view.can_export %}{{ model_layout.export_options() }}{% endif %}
+            {% block model_menu_bar_before_filters %}{% endblock %}
+            {% if filters %}
+                <li class="dropdown">
+                    {{ model_layout.filter_options() }}
+                </li>
+            {% endif %}
+            {% if can_set_page_size %}
+                <li class="dropdown">
+                    {{ model_layout.page_size_form(page_size_url) }}
+                </li>
+            {% endif %}
+            {% if actions %}
+                <li class="dropdown">
+                    {{ actionlib.dropdown(actions) }}
+                </li>
+            {% endif %}
+            {% if search_supported %}
+                <li>
+                    {{ model_layout.search_form() }}
+                </li>
+            {% endif %}
+            {% block model_menu_bar_after_filters %}{% endblock %}
+        </ul>
+    {% endblock %}
+    {% if filters %}
+        {{ model_layout.filter_form() }}
+        <div class="clearfix"></div>
+    {% endif %}
+    {% block model_list_table %}
+        <div id="no-more-tables">
+            <table class="table table-striped table-bordered table-hover model-list cf">
+                <thead class="cf">
+                    <tr>
+                        {% block list_header scoped %}
+                            {% if actions %}
+                                <th class="list-checkbox-column">
+                                    <input type="checkbox"
+                                           name="rowtoggle"
+                                           class="action-rowtoggle"
+                                           title="{{ _gettext('Select all records') }}"/>
+                                </th>
+                            {% endif %}
+                            {% block list_row_actions_header %}
+                                {% if admin_view.column_display_actions %}
+                                    <th class="span1">&nbsp;</th>
+                                {% endif %}
+                            {% endblock %}
+                            {% for c, name in list_columns %}
+                                {% set column = loop.index0 %}
+                                <th class="column-header col-{{c}}">
+                                    {% if admin_view.is_sortable(c) %}
+                                        {% if sort_column == column %}
+                                            <a href="{{ sort_url(column, True) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=name) }}">
+                                                {{ name }}
+                                                {% if sort_desc %}
+                                                    <i class="fa fa-chevron-up icon-chevron-up"></i>
+                                                {% else %}
+                                                    <i class="fa fa-chevron-down icon-chevron-down"></i>
+                                                {% endif %}
+                                            </a>
+                                        {% else %}
+                                            <a href="{{ sort_url(column) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=name) }}">
+                                                {{ name }}
+                                            </a>
+                                        {% endif %}
+                                    {% else %}
+                                        {{ name }}
+                                    {% endif %}
+                                    {% if admin_view.column_descriptions.get(c) %}
+                                        <a class="fa fa-question-circle icon-question-sign"
+                                           title="{{ admin_view.column_descriptions[c] }}"
+                                           href="javascript:void(0)"
+                                           data-role="tooltip"></a>
+                                    {% endif %}
+                                </th>
+                            {% endfor %}
+                        {% endblock %}
+                    </tr>
+                </thead>
+                {% for row in data %}
+                    <tr>
+                        {% block list_row scoped %}
+                            {% if actions %}
+                                <td>
+                                    <input type="checkbox"
+                                           name="rowid"
+                                           class="action-checkbox"
+                                           value="{{ get_pk_value(row) }}"
+                                           title="{{ _gettext('Select record') }}"/>
+                                </td>
+                            {% endif %}
+                            {% block list_row_actions_column scoped %}
+                                {% if admin_view.column_display_actions %}
+                                    <td class="list-buttons-column">
+                                        {% block list_row_actions scoped %}
+                                            {% for action in list_row_actions %}{{ action.render_ctx(get_pk_value(row), row) }}{% endfor %}
+                                        {% endblock %}
+                                    </td>
+                                    {%- endif - %}
+                                {% endblock %}
+                                {% for c, name in list_columns %}
+                                    <td class="col-{{c}}" data-title="{{ name }}">
+                                        {% if admin_view.is_editable(c) %}
+                                            {% set form = list_forms[get_pk_value(row)] %}
+                                            {% if form.csrf_token %}
+                                                {{ form[c](pk=get_pk_value(row), display_value=get_value(row, c), csrf=form.csrf_token._value()) }}
+                                            {% elif csrf_token %}
+                                                {{ form[c](pk=get_pk_value(row), display_value=get_value(row, c), csrf=csrf_token()) }}
+                                            {% else %}
+                                                {{ form[c](pk=get_pk_value(row), display_value=get_value(row, c)) }}
+                                            {% endif %}
+                                        {% else %}
+                                            {{ get_value(row, c) }}
+                                        {% endif %}
+                                    </td>
+                                {% endfor %}
+                            {% endblock %}
+                        </tr>
+                    {% else %}
+                        <tr>
+                            <td colspan="999">
+                                {% block empty_list_message %}
+                                    <div class="text-center">
+                                        {{ admin_view.get_empty_list_message() }}
+                                    </div>
+                                {% endblock %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </table>
+            </div>
+            {% block list_pager %}
+                {% if num_pages is not none %}
+                    {{ lib.pager(page, num_pages, pager_url) }}
+                {% else %}
+                    {{ lib.simple_pager(page, data|length == page_size, pager_url) }}
+                {% endif %}
+            {% endblock %}
+        {% endblock %}
+        {{ actionlib.form(actions, get_url('.action_view')) }}
+        {%- if admin_view.edit_modal or admin_view.create_modal or admin_view.details_modal - %}
+        {{ lib.add_modal_window() }}
+        {%- endif - %}
+    {% endblock %}
+    {% block tail %}
+        {{ super() }}
+        {% if filter_groups %}
+            <div id="filter-groups-data" style="display:none;">
+                {{ filter_groups|tojson|safe }}
+            </div>
+            <div id="active-filters-data" style="display:none;">
+                {{ active_filters|tojson|safe }}
+            </div>
+        {% endif %}
+        {{ lib.form_js() }}
+        <script src="{{ admin_static.url(filename='admin/js/filters.js', v='1.0.0') }}"></script>
+        {{ actionlib.script(_gettext('Please select at least one record.'),
+        actions,
+        actions_confirmation) }}
+    {% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/model/modals/create.html b/tests/flask_admin/bootstrap2/admin/model/modals/create.html
new file mode 100644
index 0000000..b0b961b
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/modals/create.html
@@ -0,0 +1,21 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{# store the jinja2 context for form_rules rendering logic #}
+{% set render_ctx = h.resolve_ctx() %}
+{% block body %}
+    {# "save and add" button is removed from modal (it won't function properly) #}
+    {% block create_form %}
+        {{ lib.render_form(form, return_url, extra=None, form_opts=form_opts,
+        action=url_for('.create_view', url=return_url),
+        is_modal=True) }}
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    <script src="{{ admin_static.url(filename='admin/js/bs2_modal.js', v='1.0.0') }}"></script>
+    <script>
+  // fill the header of modal dynamically
+  $('.modal-header h3').html('{% block header_text - %}
+    <h3>{{ _gettext('Create New Record') }}</h3>
+  {%- endblock %}');
+    </script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/model/modals/details.html b/tests/flask_admin/bootstrap2/admin/model/modals/details.html
new file mode 100755
index 0000000..47894df
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/modals/details.html
@@ -0,0 +1,36 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    {% block details_search %}
+        <div class="row-fluid">
+            <div class="input-prepend fa_filter_container">
+                <span class="add-on">{{ _gettext('Filter') }}</span>
+                <input id="fa_filter" id="prependedInput" type="text">
+            </div>
+        </div>
+    {% endblock %}
+    {% block details_table %}
+        <table class="table table-hover table-bordered searchable">
+            {% for c, name in details_columns %}
+                <tr>
+                    <td>
+                        <b>
+                        {{ name }}
+                        </b>
+                    </td>
+                    <td>{{ get_value(model, c) }}</td>
+                </tr>
+            {% endfor %}
+        </table>
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
+    <script src="{{ admin_static.url(filename='admin/js/bs2_modal.js', v='1.0.0') }}"></script>
+    <script>
+  // fill the header of modal dynamically
+  $('.modal-header h3').html('{% block header_text - %}
+    {{ _gettext('View Record') + ' #' + request.args.get('id') }}
+  {%- endblock %}');
+    </script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/model/modals/edit.html b/tests/flask_admin/bootstrap2/admin/model/modals/edit.html
new file mode 100644
index 0000000..7d4f3e3
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/modals/edit.html
@@ -0,0 +1,21 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{# store the jinja2 context for form_rules rendering logic #}
+{% set render_ctx = h.resolve_ctx() %}
+{% block body %}
+    {# "save and continue" button is removed from modal (it won't function properly) #}
+    {% block edit_form %}
+        {{ lib.render_form(form, return_url, extra=None, form_opts=form_opts,
+        action=url_for('.edit_view', id=request.args.get('id'), url=return_url),
+        is_modal=True) }}
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    <script src="{{ admin_static.url(filename='admin/js/bs2_modal.js', v='1.0.0') }}"></script>
+    <script>
+  // fill the header of modal dynamically
+  $('.modal-header h3').html('{% block header_text - %}
+    {{ _gettext('Edit Record') + ' #' + request.args.get('id') }}
+  {%- endblock %}');
+    </script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/model/row_actions.html b/tests/flask_admin/bootstrap2/admin/model/row_actions.html
new file mode 100644
index 0000000..01e248c
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/model/row_actions.html
@@ -0,0 +1,37 @@
+{% import 'admin/lib.html' as lib with context %}
+{% macro link(action, url, icon_class=None) %}
+<a class="icon" href="{{ url }}" title="{{ action.title or '' }}">
+    <span class="{{ icon_class or action.icon_class }}"></span>
+</a>
+{% endmacro %}
+{% macro view_row(action, row_id, row) %}
+{{ link(action, get_url('.details_view', id=row_id, url=return_url), 'fa fa-eye glyphicon icon-eye-open') }}
+{% endmacro %}
+{% macro view_row_popup(action, row_id, row) %}
+{{ lib.add_modal_button(url=get_url('.details_view', id=row_id, url=return_url, modal=True), title=action.title, content='
+<span class="fa fa-eye glyphicon icon-eye-open"></span>
+') }}
+{% endmacro %}
+{% macro edit_row(action, row_id, row) %}
+{{ link(action, get_url('.edit_view', id=row_id, url=return_url), 'fa fa-pencil glyphicon icon-pencil') }}
+{% endmacro %}
+{% macro edit_row_popup(action, row_id, row) %}
+{{ lib.add_modal_button(url=get_url('.edit_view', id=row_id, url=return_url, modal=True), title=action.title, content='
+<span class="fa fa-pencil glyphicon icon-pencil"></span>
+') }}
+{% endmacro %}
+{% macro delete_row(action, row_id, row) %}
+<form class="icon" method="POST" action="{{ get_url('.delete_view') }}">
+{{ delete_form.id(value=get_pk_value(row)) }}
+{{ delete_form.url(value=return_url) }}
+{% if delete_form.csrf_token %}
+{{ delete_form.csrf_token }}
+{% elif csrf_token %}
+<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+{% endif %}
+<button onclick="return confirm('{{ _gettext('Are you sure you want to delete this record?') }}');"
+        title="Delete record">
+<span class="fa fa-trash glyphicon icon-trash"></span>
+</button>
+</form>
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap2/admin/rediscli/console.html b/tests/flask_admin/bootstrap2/admin/rediscli/console.html
new file mode 100644
index 0000000..441c5ce
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/rediscli/console.html
@@ -0,0 +1,24 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% import 'admin/static.html' as admin_static with context %}
+{% block head %}
+    {{ super() }}
+    <link href="{{ admin_static.url(filename='admin/css/bootstrap2/rediscli.css', v='1.0.0') }}" rel="stylesheet">
+{% endblock %}
+{% block body %}
+    <div class="console">
+        <div class="console-container"></div>
+        <div class="console-line">
+            <form action="#">
+                <input type="text"></input>
+            </form>
+        </div>
+    </div>
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    <div id="execute-view-data" style="display:none;">
+        {{ admin_view.get_url('.execute_view')|tojson|safe }}
+    </div>
+    <script src="{{ admin_static.url(filename='admin/js/rediscli.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap2/admin/rediscli/response.html b/tests/flask_admin/bootstrap2/admin/rediscli/response.html
new file mode 100644
index 0000000..661852c
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/rediscli/response.html
@@ -0,0 +1,35 @@
+{% macro render(item, depth=0) %}
+{% set type = type_name(item) %}
+{% if type == 'tuple' or type == 'list' %}
+    {% if not item %}
+        Empty {{ type }}.
+    {% else %}
+        {% for n in item %}
+            {{ loop.index }}) {{ render(n, depth + 1) }}
+            <br/>
+        {% endfor %}
+    {% endif %}
+{% elif type == 'bool' %}
+    {% if depth == 0 and item %}
+        OK
+    {% else %}
+        <span class="type-bool">{{ item }}</span>
+    {% endif %}
+{% elif type == 'str' or type == 'unicode' %}
+    "{{ item }}"
+{% elif type == 'bytes' %}
+    "{{ item.decode('utf-8') }}"
+{% elif type == 'TextWrapper' %}
+    <pre>
+{{ item }}
+    </pre>
+{% elif type == 'dict' %}
+    {% for k, v in item.items() %}
+        {{ loop.index }}) {{ k }} - {{ render(v, depth + 1) }}
+        <br/>
+    {% endfor %}
+{% else %}
+    {{ item }}
+{% endif %}
+{% endmacro %}
+{{ render(result) }}
diff --git a/tests/flask_admin/bootstrap2/admin/static.html b/tests/flask_admin/bootstrap2/admin/static.html
new file mode 100644
index 0000000..811f9ba
--- /dev/null
+++ b/tests/flask_admin/bootstrap2/admin/static.html
@@ -0,0 +1,3 @@
+{% macro url() - %}
+{{ get_url('{admin_endpoint}.static'.format(admin_endpoint=admin_view.admin.endpoint), *varargs, **kwargs) }}
+{%- endmacro %}
diff --git a/tests/flask_admin/bootstrap3/admin/actions.html b/tests/flask_admin/bootstrap3/admin/actions.html
new file mode 100644
index 0000000..d91a83d
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/actions.html
@@ -0,0 +1,40 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% macro dropdown(actions, btn_class='btn dropdown-toggle') - %}
+<a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
+    {{ _gettext('With selected') }}
+    <b class="caret"></b>
+</a>
+<ul class="dropdown-menu">
+    {% for p in actions %}
+        <li>
+            <a href="javascript:void(0)" onclick="return modelActions.execute('{{ p[0] }}');">
+                {{ _gettext(p[1]) }}
+            </a>
+        </li>
+    {% endfor %}
+</ul>
+{% endmacro %}
+{% macro form(actions, url) %}
+{% if actions %}
+<form id="action_form" action="{{ url }}" method="POST" style="display: none">
+    {% if action_form.csrf_token %}
+        {{ action_form.csrf_token }}
+    {% elif csrf_token %}
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+    {% endif %}
+    {{ action_form.url(value=return_url) }}
+    {{ action_form.action() }}
+</form>
+{% endif %}
+{% endmacro %}
+{% macro script(message, actions, actions_confirmation) %}
+{% if actions %}
+<div id="actions-confirmation-data" style="display:none;">
+{{ actions_confirmation|tojson|safe }}
+</div>
+<div id="message-data" style="display:none;">
+{{ message|tojson|safe }}
+</div>
+<script src="{{ admin_static.url(filename='admin/js/actions.js', v='1.0.0') }}"></script>
+{% endif %}
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap3/admin/base.html b/tests/flask_admin/bootstrap3/admin/base.html
new file mode 100644
index 0000000..ff272eb
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/base.html
@@ -0,0 +1,96 @@
+{% import 'admin/layout.html' as layout with context - %}
+{% import 'admin/static.html' as admin_static with context %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+        {% block title %}
+            {% if admin_view.category %}{{ admin_view.category }} - {% endif %}
+            {{ admin_view.name }} - {{ admin_view.admin.name }}
+        {% endblock %}
+        </title>
+        {% block head_meta %}
+            <meta charset="UTF-8">
+            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <meta name="description" content="">
+            <meta name="author" content="">
+        {% endblock %}
+        {% block head_css %}
+            <link href="{{ admin_static.url(filename='bootstrap/bootstrap3/swatch/{swatch}/bootstrap.min.css'.format(swatch=config.get('FLASK_ADMIN_SWATCH', 'default')), v='3.3.5') }}"
+                  rel="stylesheet">
+            {% if config.get('FLASK_ADMIN_SWATCH', 'default') == 'default' %}
+            <link href="{{ admin_static.url(filename='bootstrap/bootstrap3/css/bootstrap-theme.min.css', v='3.3.5') }}"
+                  rel="stylesheet">
+            {% endif %}
+            <link href="{{ admin_static.url(filename='admin/css/bootstrap3/admin.css', v='1.1.1') }}" rel="stylesheet">
+            <link href="{{ admin_static.url(filename='admin/css/bootstrap3/submenu.css') }}" rel="stylesheet">
+            {% if admin_view.extra_css %}
+                {% for css_url in admin_view.extra_css %}
+                    <link href="{{ css_url }}" rel="stylesheet">
+                {% endfor %}
+            {% endif %}
+            <style>
+        body {
+            padding-top: 4px;
+        }
+            </style>
+        {% endblock %}
+        {% block head %}{% endblock %}
+        {% block head_tail %}{% endblock %}
+    </head>
+    <body>
+        {% block page_body %}
+            <div class="container{% if config.get('FLASK_ADMIN_FLUID_LAYOUT', False) %}-fluid{% endif %}">
+                <nav class="navbar navbar-default" role="navigation">
+                    <!-- Brand and toggle get grouped for better mobile display -->
+                    <div class="navbar-header">
+                        <button type="button"
+                                class="navbar-toggle"
+                                data-toggle="collapse"
+                                data-target="#admin-navbar-collapse">
+                            <span class="sr-only">Toggle navigation</span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                        </button>
+                        {% block brand %}
+                            <a class="navbar-brand" href="{{ admin_view.admin.url }}">
+                                {{ admin_view.admin.name }}
+                            </a>
+                        {% endblock %}
+                    </div>
+                    <!-- navbar content -->
+                    <div class="collapse navbar-collapse" id="admin-navbar-collapse">
+                        {% block main_menu %}
+                            <ul class="nav navbar-nav">
+                                {{ layout.menu() }}
+                            </ul>
+                        {% endblock %}
+                        {% block menu_links %}
+                            <ul class="nav navbar-nav navbar-right">
+                                {{ layout.menu_links() }}
+                            </ul>
+                        {% endblock %}
+                        {% block access_control %}{% endblock %}
+                    </div>
+                </nav>
+                {% block messages %}{{ layout.messages() }}{% endblock %}
+                {# store the jinja2 context for form_rules rendering logic #}
+                {% set render_ctx = h.resolve_ctx() %}
+                {% block body %}{% endblock %}</div>{% endblock %}
+                {% block tail_js %}
+                    <script src="{{ admin_static.url(filename='vendor/jquery.min.js', v='3.3.1') }}" type="text/javascript"></script>
+                    <script src="{{ admin_static.url(filename='bootstrap/bootstrap3/js/bootstrap.min.js', v='3.3.5') }}" type="text/javascript"></script>
+                    <script src="{{ admin_static.url(filename='vendor/moment.min.js', v='2.22.2') }}" type="text/javascript"></script>
+                    <script src="{{ admin_static.url(filename='vendor/select2/select2.min.js', v='3.5.2') }}" type="text/javascript"></script>
+                    <script src="{{ admin_static.url(filename='admin/js/helpers.js', v='1.0.0') }}" type="text/javascript"></script>
+                    {% if admin_view.extra_js %}
+                        {% for js_url in admin_view.extra_js %}
+                            <script src="{{ js_url }}" type="text/javascript"></script>
+                        {% endfor %}
+                    {% endif %}
+                {% endblock %}
+                {% block tail %}{% endblock %}
+            </body>
+        </html>
diff --git a/tests/flask_admin/bootstrap3/admin/file/form.html b/tests/flask_admin/bootstrap3/admin/file/form.html
new file mode 100644
index 0000000..3052310
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/file/form.html
@@ -0,0 +1,6 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    {% block header %}<h3>{{ header_text }}</h3>{% endblock %}
+    {% block fa_form %}{{ lib.render_form(form, dir_url) }}{% endblock %}
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/file/list.html b/tests/flask_admin/bootstrap3/admin/file/list.html
new file mode 100644
index 0000000..67da4ed
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/file/list.html
@@ -0,0 +1,211 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% import 'admin/actions.html' as actionslib with context %}
+{% block body %}
+    {% block breadcrums %}
+        <ul class="breadcrumb">
+            <li>
+                <a href="{{ get_dir_url('.index_view', path=None) }}">
+                    {{ _gettext('Root') }}
+                </a>
+            </li>
+            {% for name, path in breadcrumbs[:-1] %}
+                <li>
+                    <a href="{{ get_dir_url('.index_view', path=path) }}">
+                        {{ name }}
+                    </a>
+                </li>
+            {% endfor %}
+            {% if breadcrumbs %}
+                <li>
+                    <a href="{{ get_dir_url('.index_view', path=breadcrumbs[-1][1]) }}">
+                        {{ breadcrumbs[-1][0] }}
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+    {% endblock %}
+    {% block file_list_table %}
+        <div class="table-responsive">
+            <table class="table table-striped table-bordered model-list">
+                <thead>
+                    <tr>
+                        {% block list_header scoped %}
+                            {% if actions %}
+                                <th class="list-checkbox-column">
+                                    <input type="checkbox" name="rowtoggle" class="action-rowtoggle" />
+                                </th>
+                            {% endif %}
+                            <th class="col-md-1">&nbsp;</th>
+                            {% for column in admin_view.column_list %}
+                                <th>
+                                    {% if admin_view.is_column_sortable(column) %}
+                                        {% if sort_column == column %}
+                                            <a href="{{ sort_url(column, dir_path, True) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=column) }}">
+                                                {{ admin_view.column_label(column) }}
+                                                {% if sort_desc %}
+                                                    <span class="fa fa-chevron-up glyphicon glyphicon-chevron-up"></span>
+                                                {% else %}
+                                                    <span class="fa fa-chevron-down glyphicon glyphicon-chevron-down"></span>
+                                                {% endif %}
+                                            </a>
+                                        {% else %}
+                                            <a href="{{ sort_url(column, dir_path) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=column) }}">
+                                                {{ admin_view.column_label(column) }}
+                                            </a>
+                                        {% endif %}
+                                    {% else %}
+                                        {{ _gettext(admin_view.column_label(column)) }}
+                                    {% endif %}
+                                </th>
+                            {% endfor %}
+                        {% endblock %}
+                    </tr>
+                </thead>
+                {% for name, path, is_dir, size, date in items %}
+                    <tr>
+                        {% block list_row scoped %}
+                            {% if actions %}
+                                <td>
+                                    {% if not is_dir %}
+                                        <input type="checkbox"
+                                               name="rowid"
+                                               class="action-checkbox"
+                                               value="{{ path }}"/>
+                                    {% endif %}
+                                </td>
+                            {% endif %}
+                            <td>
+                                {% block list_row_actions scoped %}
+                                    {% if admin_view.can_rename and path and name != '..' %}
+                                        {%- if admin_view.rename_modal - %}
+                                        {{ lib.add_modal_button(url=get_url('.rename', path=path, modal=True),
+                                        title=_gettext('Rename File'),
+                                        content='
+                                        <i class="fa fa-pencil glyphicon glyphicon-pencil"></i>
+                                        ') }}
+                                    {% else %}
+                                        <a class="icon"
+                                           href="{{ get_url('.rename', path=path) }}"
+                                           title="{{ _gettext('Rename File') }}">
+                                            <i class="fa fa-pencil glyphicon glyphicon-pencil"></i>
+                                        </a>
+                                        {%- endif - %}
+                                    {% endif %}
+                                    {%- if admin_view.can_delete and path - %}
+                                    {% if is_dir %}
+                                        {% if name != '..' and admin_view.can_delete_dirs %}
+                                            <form class="icon" method="POST" action="{{ get_url('.delete') }}">
+                                                {{ delete_form.path(value=path) }}
+                                                {% if delete_form.csrf_token %}
+                                                    {{ delete_form.csrf_token }}
+                                                {% elif csrf_token %}
+                                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                                                {% endif %}
+                                                <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\' recursively?', name=name) }}')">
+                                                    <i class="fa fa-times glyphicon glyphicon-remove"></i>
+                                                </button>
+                                            </form>
+                                        {% endif %}
+                                    {% else %}
+                                        <form class="icon" method="POST" action="{{ get_url('.delete') }}">
+                                            {{ delete_form.path(value=path) }}
+                                            {% if delete_form.csrf_token %}
+                                                {{ delete_form.csrf_token }}
+                                            {% elif csrf_token %}
+                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                                            {% endif %}
+                                            <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\'?', name=name) }}')">
+                                                <i class="fa fa-trash glyphicon glyphicon-trash"></i>
+                                            </button>
+                                        </form>
+                                    {% endif %}
+                                    {%- endif - %}
+                                {% endblock %}
+                            </td>
+                            {% if is_dir %}
+                                <td colspan="2">
+                                    <a href="{{ get_dir_url('.index_view', path)|safe }}">
+                                        <i class="fa fa-folder-o glyphicon glyphicon-folder-close"></i>
+                                        <span>{{ name }}</span>
+                                    </a>
+                                </td>
+                            {% else %}
+                                <td>
+                                    {% if admin_view.can_download %}
+                                        {%- if admin_view.edit_modal and admin_view.is_file_editable(path) - %}
+                                        {{ lib.add_modal_button(url=get_file_url(path, modal=True)|safe,
+                                        btn_class='', content=name) }}
+                                    {% else %}
+                                        <a href="{{ get_file_url(path)|safe }}">
+                                            {{ name }}
+                                        </a>
+                                        {%- endif - %}
+                                    {% else %}
+                                        {{ name }}
+                                    {% endif %}
+                                </td>
+                                {% if admin_view.is_column_visible('size') %}
+                                    <td>{{ size|filesizeformat }}</td>
+                                {% endif %}
+                            {% endif %}
+                            {% if admin_view.is_column_visible('date') %}
+                                <td>{{ timestamp_format(date) }}</td>
+                            {% endif %}
+                        {% endblock %}
+                    </tr>
+                {% endfor %}
+            </table>
+        </div>
+    {% endblock %}
+    {% block toolbar %}
+        <div class="btn-toolbar">
+            {% if admin_view.can_upload %}
+                <div class="btn-group">
+                    {%- if admin_view.upload_modal - %}
+                    {{ lib.add_modal_button(url=get_dir_url('.upload', path=dir_path, modal=True),
+                    btn_class="btn btn-default btn-large",
+                    content=_gettext('Upload File')) }}
+                {% else %}
+                    <a class="btn btn-default btn-large" href="{{ get_dir_url('.upload', path=dir_path) }}">
+                        {{ _gettext('Upload File') }}
+                    </a>
+                    {%- endif - %}
+                </div>
+            {% endif %}
+            {% if admin_view.can_mkdir %}
+                <div class="btn-group">
+                    {%- if admin_view.mkdir_modal - %}
+                    {{ lib.add_modal_button(url=get_dir_url('.mkdir', path=dir_path, modal=True),
+                    btn_class="btn btn-default btn-large",
+                    content=_gettext('Create Directory')) }}
+                {% else %}
+                    <a class="btn btn-default btn-large" href="{{ get_dir_url('.mkdir', path=dir_path) }}">
+                        {{ _gettext('Create Directory') }}
+                    </a>
+                    {%- endif - %}
+                </div>
+            {% endif %}
+            {% if actions %}
+                <div class="btn-group">
+                    {{ actionslib.dropdown(actions, 'dropdown-toggle btn btn-default btn-large') }}
+                </div>
+            {% endif %}
+        </div>
+    {% endblock %}
+    {% block actions %}
+        {{ actionslib.form(actions, get_url('.action_view')) }}
+    {% endblock %}
+    {%- if admin_view.rename_modal or admin_view.mkdir_modal
+    or admin_view.upload_modal or admin_view.edit_modal -%}
+    {{ lib.add_modal_window() }}
+    {%- endif - %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    {{ actionslib.script(_gettext('Please select at least one file.'),
+    actions,
+    actions_confirmation) }}
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/file/modals/form.html b/tests/flask_admin/bootstrap3/admin/file/modals/form.html
new file mode 100644
index 0000000..6937032
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/file/modals/form.html
@@ -0,0 +1,19 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    {# content added to modal-content #}
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        {% block header %}<h3>{{ header_text }}</h3>{% endblock %}
+    </div>
+    <div class="modal-body">
+        {% block fa_form %}
+            {{ lib.render_form(form, dir_url, action=request.url, is_modal=True) }}
+        {% endblock %}
+    </div>
+{% endblock %}
+{% block tail %}
+    <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/index.html b/tests/flask_admin/bootstrap3/admin/index.html
new file mode 100644
index 0000000..6c4bda4
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/index.html
@@ -0,0 +1,2 @@
+{% extends 'admin/master.html' %}
+{% block body %}{% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/layout.html b/tests/flask_admin/bootstrap3/admin/layout.html
new file mode 100644
index 0000000..c4b5e45
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/layout.html
@@ -0,0 +1,108 @@
+{% macro menu_icon(item) - %}
+{% set icon_type = item.get_icon_type() %}
+{%- if icon_type %}
+{% set icon_value = item.get_icon_value() %}
+{% if icon_type == 'glyph' %}
+    <i class="glyphicon {{ icon_value }}"></i>
+{% elif icon_type == 'fa' %}
+    <i class="fa {{ icon_value }}"></i>
+{% elif icon_type == 'image' %}
+    <img src="{{ url_for('static', filename=icon_value) }}" alt="menu image">
+    {% elif icon_type == 'image-url' %}
+        <img src="{{ icon_value }}" alt="menu image">
+        {% endif %}
+    {% endif %}
+    {%- endmacro %}
+    {% macro menu(menu_root=None) %}
+    {% if menu_root is none %}
+        {% set menu_root = admin_view.admin.menu() %}
+    {% endif %}
+    {%- for item in menu_root %}
+    {%- if item.is_category() - %}
+    {% set children = item.get_children() %}
+    {%- if children %}
+    {% set class_name = item.get_class_name() or '' %}
+    {%- if item.is_active(admin_view) %}
+    <li class="active dropdown{% if class_name %}{{ class_name }}{% endif %}">
+{% else - %}
+    <li class="dropdown{% if class_name %}{{ class_name }}{% endif %}">
+    {%- endif %}
+    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
+        {% if item.class_name %}<span class="{{ item.class_name }}"></span>{% endif %}
+        {{ menu_icon(item) }}{{ item.name }}
+        {%- if 'dropdown-submenu' in class_name - %}
+        <i class="glyphicon glyphicon-chevron-right small"></i>
+        {%- else - %}
+        <i class="glyphicon glyphicon-chevron-down small"></i>
+        {%- endif - %}
+    </a>
+    <ul class="dropdown-menu">
+        {%- for child in children - %}
+        {%- if child.is_category() - %}
+        {{ menu(menu_root=[child]) }}
+    {% else %}
+        {% set class_name = child.get_class_name() %}
+        {%- if child.is_active(admin_view) %}
+        <li class="active{% if class_name %}{{ class_name }}{% endif %}">
+    {% else %}
+        <li
+            {% if class_name %}class="{{ class_name }}"{% endif %}
+            >
+            {%- endif %}
+            <a href="{{ child.get_url() }}"
+                {% if child.target %}target="{{ child.target }}"{% endif %}>
+                {{ menu_icon(child) }}{{ child.name }}
+            </a>
+        </li>
+        {%- endif %}
+        {%- endfor %}
+    </ul>
+</li>
+{% endif %}
+{%- else %}
+{%- if item.is_accessible() and item.is_visible() - %}
+{% set class_name = item.get_class_name() %}
+{%- if item.is_active(admin_view) %}
+<li class="active{% if class_name %}{{ class_name }}{% endif %}">
+{%- else %}
+<li{% if class_name %}class="{{ class_name }}"{% endif %}>
+{%- endif %}
+<a href="{{ item.get_url() }}"{% if item.target %}target="{{ item.target }}"{% endif %}>
+{{ menu_icon(item) }}{{ item.name }}
+</a>
+</li>
+{%- endif - %}
+{% endif - %}
+{% endfor %}
+{% endmacro %}
+{% macro menu_links(links=None) %}
+{% if links is none %}{% set links = admin_view.admin.menu_links() %}{% endif %}
+{% for item in links %}
+{% set class_name = item.get_class_name() %}
+{% if item.is_accessible() and item.is_visible() %}
+<li{% if class_name %}class="{{ class_name }}"{% endif %}>
+<a href="{{ item.get_url() }}">{{ menu_icon(item) }}{{ item.name }}</a>
+</li>
+{% endif %}
+{% endfor %}
+{% endmacro %}
+{% macro messages() %}
+{% with messages = get_flashed_messages(with_categories=True) %}
+{% if messages %}
+{% for category, m in messages %}
+{% if category %}
+{# alert-error changed to alert-danger in bootstrap 3, mapping is for backwards compatibility #}
+{% set mapping = {'message': 'info', 'error': 'danger'} %}
+<div class="alert alert-{{ mapping.get(category, category) }} alert-dismissable">
+{% else %}
+<div class="alert alert-dismissable">
+{% endif %}
+<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
+&times;
+</button>
+{{ m }}
+</div>
+{% endfor %}
+{% endif %}
+{% endwith %}
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap3/admin/lib.html b/tests/flask_admin/bootstrap3/admin/lib.html
new file mode 100644
index 0000000..6af5105
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/lib.html
@@ -0,0 +1,262 @@
+{% import 'admin/static.html' as admin_static with context %}
+{# ---------------------- Pager -------------------------- #}
+{% macro pager(page, pages, generator) - %}
+{% if pages > 1 %}
+    <ul class="pagination">
+        {% set min = page - 3 %}
+        {% set max = page + 3 + 1 %}
+        {% if min < 0 %}
+            {% set max = max - min %}
+        {% endif %}
+        {% if max >= pages %}
+            {% set min = min - max + pages %}
+        {% endif %}
+        {% if min < 0 %}
+            {% set min = 0 %}
+        {% endif %}
+        {% if max >= pages %}
+            {% set max = pages %}
+        {% endif %}
+        {% if min > 0 %}
+            <li>
+                <a href="{{ generator(0) }}">&laquo;</a>
+            </li>
+        {% else %}
+            <li class="disabled">
+                <a href="javascript:void(0)">&laquo;</a>
+            </li>
+        {% endif %}
+        {% if page > 0 %}
+            <li>
+                <a href="{{ generator(page-1) }}">&lt;</a>
+            </li>
+        {% else %}
+            <li class="disabled">
+                <a href="javascript:void(0)">&lt;</a>
+            </li>
+        {% endif %}
+        {% for p in range(min, max) %}
+            {% if page == p %}
+                <li class="active">
+                    <a href="javascript:void(0)">{{ p + 1 }}</a>
+                </li>
+            {% else %}
+                <li>
+                    <a href="{{ generator(p) }}">{{ p + 1 }}</a>
+                </li>
+            {% endif %}
+        {% endfor %}
+        {% if page + 1 < pages %}
+            <li>
+                <a href="{{ generator(page + 1) }}">
+                    &gt;
+                </a>
+            </li>
+        {% else %}
+            <li class="disabled">
+                <a href="javascript:void(0)">&gt;</a>
+            </li>
+        {% endif %}
+        {% if max < pages %}
+            <li>
+                <a href="{{ generator(pages - 1) }}">
+                    &raquo;
+                </a>
+            </li>
+        {% else %}
+            <li class="disabled">
+                <a href="javascript:void(0)">&raquo;</a>
+            </li>
+        {% endif %}
+    </ul>
+{% endif %}
+{%- endmacro %}
+{% macro simple_pager(page, have_next, generator) - %}
+<ul class="pagination">
+    {% if page > 0 %}
+        <li>
+            <a href="{{ generator(page - 1) }}">
+                &lt;
+            </a>
+        </li>
+    {% else %}
+        <li class="disabled">
+            <a href="{{ generator(0) }}">&lt;</a>
+        </li>
+    {% endif %}
+    {% if have_next %}
+        <li>
+            <a href="{{ generator(page + 1) }}">
+                &gt;
+            </a>
+        </li>
+    {% else %}
+        <li class="disabled">
+            <a href="{{ generator(page) }}">&gt;</a>
+        </li>
+    {% endif %}
+</ul>
+{%- endmacro %}
+{# ---------------------- Modal Window ------------------- #}
+{% macro add_modal_window(modal_window_id='fa_modal_window', modal_label_id='fa_modal_label') %}
+<div class="modal fade" id="{{ modal_window_id }}" tabindex="-1" role="dialog" aria-labelledby="{{ modal_label_id }}">
+    <div class="modal-dialog" role="document">
+        {# bootstrap version > 3.1.0 required for this to work #}
+        <div class="modal-content"></div>
+    </div>
+</div>
+{% endmacro %}
+{% macro add_modal_button(url='', title='', content='', modal_window_id='fa_modal_window', btn_class='icon') %}
+<a class="{{ btn_class }}"
+   data-target="#{{ modal_window_id }}"
+   title="{{ title }}"
+   href="{{ url }}"
+   data-toggle="modal">
+{{ content|safe }}
+</a>
+{% endmacro %}
+{# ---------------------- Forms -------------------------- #}
+{% macro render_field(form, field, kwargs={}, caller=None) %}
+{% set direct_error = h.is_field_error(field.errors) %}
+<div class="form-group{{ ' has-error' if direct_error else '' }}">
+<label for="{{ field.id }}" class="col-md-2 control-label">
+{{ field.label.text }}
+{% if h.is_required_form_field(field) %}
+    <strong style="color: red">
+    &#42;
+    </strong>
+    {%- else - %}
+    &nbsp;
+    {%- endif %}
+</label>
+<div class="{{ kwargs.get('column_class', 'col-md-10') }}">
+    {% set _dummy = kwargs.setdefault('class', 'form-control') %}
+    {{ field(**kwargs)|safe }}
+    {% if field.description %}
+        <p class="help-block">
+            {{ field.description|safe }}
+        </p>
+    {% endif %}
+    {% if direct_error %}
+        <ul class="help-block input-errors">
+            {% for e in field.errors if e is string %}
+                <li>
+                    {{ e }}
+                </li>
+            {% endfor %}
+        </ul>
+    {% endif %}
+</div>
+{% if caller %}{{ caller(form, field, direct_error, kwargs) }}{% endif %}
+</div>
+{% endmacro %}
+{% macro render_header(form, text) %}
+<h3>{{ text }}</h3>
+{% endmacro %}
+{% macro render_form_fields(form, form_opts=None) %}
+{% if form.hidden_tag is defined %}
+{{ form.hidden_tag() }}
+{% else %}
+{% if csrf_token %}
+<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+{% endif %}
+{% for f in form if f.widget.input_type == 'hidden' %}
+{{ f }}
+{% endfor %}
+{% endif %}
+{% if form_opts and form_opts.form_rules %}
+{% for r in form_opts.form_rules %}{{ r(form, form_opts=form_opts) }}{% endfor %}
+{% else %}
+{% for f in form if f.widget.input_type != 'hidden' %}
+{% if form_opts %}
+{% set kwargs = form_opts.widget_args.get(f.short_name, {}) %}
+{% else %}
+{% set kwargs = {} %}
+{% endif %}
+{{ render_field(form, f, kwargs) }}
+{% endfor %}
+{% endif %}
+{% endmacro %}
+{% macro form_tag(form=None, action=None) %}
+<form action="{{ action or '' }}"
+      method="POST"
+      role="form"
+      class="admin-form form-horizontal"
+      enctype="multipart/form-data">
+{{ caller() }}
+</form>
+{% endmacro %}
+{% macro render_form_buttons(cancel_url, extra=None, is_modal=False) %}
+<hr>
+<div class="form-group">
+<div class="col-md-offset-2 col-md-10 submit-row">
+<input type="submit" class="btn btn-primary" value="{{ _gettext('Save') }}" />
+{% if extra %}{{ extra }}{% endif %}
+{% if cancel_url %}
+<a href="{{ cancel_url }}" class="btn btn-danger" role="button"
+{% if is_modal %}data-dismiss="modal"{% endif %}
+>
+{{ _gettext('Cancel') }}
+</a>
+{% endif %}
+</div>
+</div>
+{% endmacro %}
+{% macro render_form(form, cancel_url, extra=None, form_opts=None, action=None, is_modal=False) - %}
+{% call form_tag(action=action) %}
+{{ render_form_fields(form, form_opts=form_opts) }}
+{{ render_form_buttons(cancel_url, extra, is_modal) }}
+{% endcall %}
+{% endmacro %}
+{% macro form_css() %}
+<link href="{{ admin_static.url(filename='vendor/select2/select2.css', v='3.5.2') }}" rel="stylesheet">
+<link href="{{ admin_static.url(filename='vendor/select2/select2-bootstrap3.css', v='1.4.6') }}" rel="stylesheet">
+<link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs3.css', v='1.3.22') }}"
+      rel="stylesheet">
+{% if config.MAPBOX_MAP_ID %}
+<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='1.0.2') }}" rel="stylesheet">
+<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.4.6') }}" rel="stylesheet">
+{% endif %}
+{% if editable_columns %}
+<link href="{{ admin_static.url(filename='vendor/x-editable/css/bootstrap3-editable.css', v='1.5.1.1') }}"
+      rel="stylesheet">
+{% endif %}
+{% endmacro %}
+{% macro form_js() %}
+{% if config.MAPBOX_MAP_ID %}
+<script>
+  window.MAPBOX_MAP_ID = "{{ config.MAPBOX_MAP_ID }}";
+  {% if config.MAPBOX_ACCESS_TOKEN %}
+  window.MAPBOX_ACCESS_TOKEN = "{{ config.MAPBOX_ACCESS_TOKEN }}";
+  {% endif %}
+  {% if config.DEFAULT_CENTER_LAT and config.DEFAULT_CENTER_LONG %}
+  window.DEFAULT_CENTER_LAT = "{{ config.DEFAULT_CENTER_LAT }}";
+  window.DEFAULT_CENTER_LONG = "{{ config.DEFAULT_CENTER_LONG }}";
+  {% endif %}
+</script>
+<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.js', v='1.0.2') }}"></script>
+<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.js', v='0.4.6') }}"></script>
+{% if config.MAPBOX_SEARCH %}
+<script>
+  window.MAPBOX_SEARCH = "{{ config.MAPBOX_SEARCH }}";
+</script>
+<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key={{ config.get('GOOGLE_MAPS_API_KEY') }}"></script>
+{% endif %}
+{% endif %}
+<script src="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker.js', v='1.3.22') }}"></script>
+{% if editable_columns %}
+<script src="{{ admin_static.url(filename='vendor/x-editable/js/bootstrap3-editable.min.js', v='1.5.1.1') }}"></script>
+{% endif %}
+<script src="{{ admin_static.url(filename='admin/js/form.js', v='1.0.1') }}"></script>
+{% endmacro %}
+{% macro extra() %}
+{% if admin_view.can_create %}
+<input name="_add_another" type="submit" class="btn btn-default" value="{{ _gettext('Save and Add Another') }}" />
+{% endif %}
+{% if admin_view.can_edit %}
+<input name="_continue_editing"
+       type="submit"
+       class="btn btn-default"
+       value="{{ _gettext('Save and Continue Editing') }}"/>
+{% endif %}
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap3/admin/master.html b/tests/flask_admin/bootstrap3/admin/master.html
new file mode 100644
index 0000000..8f27dad
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/master.html
@@ -0,0 +1 @@
+{% extends admin_base_template %}
diff --git a/tests/flask_admin/bootstrap3/admin/model/create.html b/tests/flask_admin/bootstrap3/admin/model/create.html
new file mode 100644
index 0000000..697a38e
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/create.html
@@ -0,0 +1,26 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% from 'admin/lib.html' import extra with context %} {# backward compatible #}
+{% block head %}
+    {{ super() }}
+    {{ lib.form_css() }}
+{% endblock %}
+{% block body %}
+    {% block navlinks %}
+        <ul class="nav nav-tabs">
+            <li>
+                <a href="{{ return_url }}">{{ _gettext('List') }}</a>
+            </li>
+            <li class="active">
+                <a href="javascript:void(0)">{{ _gettext('Create') }}</a>
+            </li>
+        </ul>
+    {% endblock %}
+    {% block create_form %}
+        {{ lib.render_form(form, return_url, extra(), form_opts) }}
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    {{ lib.form_js() }}
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/model/details.html b/tests/flask_admin/bootstrap3/admin/model/details.html
new file mode 100644
index 0000000..de674a8
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/details.html
@@ -0,0 +1,52 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    {% block navlinks %}
+        <ul class="nav nav-tabs">
+            <li>
+                <a href="{{ return_url }}">{{ _gettext('List') }}</a>
+            </li>
+            {%- if admin_view.can_create - %}
+            <li>
+                <a href="{{ get_url('.create_view', url=return_url) }}">
+                    {{ _gettext('Create') }}
+                </a>
+            </li>
+            {%- endif - %}
+            {%- if admin_view.can_edit - %}
+            <li>
+                <a href="{{ get_url('.edit_view', id=request.args.get('id'), url=return_url) }}">
+                    {{ _gettext('Edit') }}
+                </a>
+            </li>
+            {%- endif - %}
+            <li class="active">
+                <a href="javascript:void(0)">{{ _gettext('Details') }}</a>
+            </li>
+        </ul>
+    {% endblock %}
+    {% block details_search %}
+        <div class="input-group fa_filter_container col-lg-6">
+            <span class="input-group-addon">{{ _gettext('Filter') }}</span>
+            <input id="fa_filter" type="text" class="form-control">
+        </div>
+    {% endblock %}
+    {% block details_table %}
+        <table class="table table-hover table-bordered searchable">
+            {% for c, name in details_columns %}
+                <tr>
+                    <td>
+                        <b>
+                        {{ name }}
+                        </b>
+                    </td>
+                    <td>{{ get_value(model, c) }}</td>
+                </tr>
+            {% endfor %}
+        </table>
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/model/edit.html b/tests/flask_admin/bootstrap3/admin/model/edit.html
new file mode 100644
index 0000000..9eef6a7
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/edit.html
@@ -0,0 +1,40 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% from 'admin/lib.html' import extra with context %} {# backward compatible #}
+{% block head %}
+    {{ super() }}
+    {{ lib.form_css() }}
+{% endblock %}
+{% block body %}
+    {% block navlinks %}
+        <ul class="nav nav-tabs">
+            <li>
+                <a href="{{ return_url }}">{{ _gettext('List') }}</a>
+            </li>
+            {%- if admin_view.can_create - %}
+            <li>
+                <a href="{{ get_url('.create_view', url=return_url) }}">
+                    {{ _gettext('Create') }}
+                </a>
+            </li>
+            {%- endif - %}
+            <li class="active">
+                <a href="javascript:void(0)">{{ _gettext('Edit') }}</a>
+            </li>
+            {%- if admin_view.can_view_details - %}
+            <li>
+                <a href="{{ get_url('.details_view', id=request.args.get('id'), url=return_url) }}">
+                    {{ _gettext('Details') }}
+                </a>
+            </li>
+            {%- endif - %}
+        </ul>
+    {% endblock %}
+    {% block edit_form %}
+        {{ lib.render_form(form, return_url, extra(), form_opts) }}
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    {{ lib.form_js() }}
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/model/inline_field_list.html b/tests/flask_admin/bootstrap3/admin/model/inline_field_list.html
new file mode 100644
index 0000000..347977c
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/inline_field_list.html
@@ -0,0 +1,14 @@
+{% import 'admin/model/inline_list_base.html' as base with context %}
+{% macro render_field(field) %}
+{{ field }}
+{% if h.is_field_error(field.errors) %}
+    <ul class="help-block input-errors">
+        {% for e in field.errors if e is string %}
+            <li>
+                {{ e }}
+            </li>
+        {% endfor %}
+    </ul>
+{% endif %}
+{% endmacro %}
+{{ base.render_inline_fields(field, template, render_field, check) }}
diff --git a/tests/flask_admin/bootstrap3/admin/model/inline_form.html b/tests/flask_admin/bootstrap3/admin/model/inline_form.html
new file mode 100644
index 0000000..9a4b9fa
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/inline_form.html
@@ -0,0 +1,4 @@
+{% import 'admin/lib.html' as lib with context %}
+<div class="inline-form-field">
+    {{ lib.render_form_fields(field.form, form_opts=form_opts) }}
+</div>
diff --git a/tests/flask_admin/bootstrap3/admin/model/inline_list_base.html b/tests/flask_admin/bootstrap3/admin/model/inline_list_base.html
new file mode 100644
index 0000000..fac497e
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/inline_list_base.html
@@ -0,0 +1,61 @@
+{% macro render_inline_fields(field, template, render, check=None) %}
+<div class="inline-field" id="{{ field.id }}">
+    {# existing inline form fields #}
+    <div class="inline-field-list">
+        {% for subfield in field %}
+            <div id="{{ subfield.id }}" class="inline-field well well-sm">
+                {%- if not check or check(subfield) %}
+                <legend>
+                    <small>
+                    {{ field.label.text }} #{{ loop.index }}
+                    <div class="pull-right">
+                        {% if subfield.get_pk and subfield.get_pk() %}
+                            <input type="checkbox" name="del-{{ subfield.id }}" id="del-{{ subfield.id }}" />
+                            <label for="del-{{ subfield.id }}" style="display: inline">
+                                {{ _gettext('Delete?') }}
+                            </label>
+                        {% else %}
+                            <a href="javascript:void(0)"
+                               value="{{ _gettext('Are you sure you want to delete this record?') }}"
+                               class="inline-remove-field">
+                                <i class="fa fa-times glyphicon glyphicon-remove"></i>
+                            </a>
+                        {% endif %}
+                    </div>
+                    </small>
+                </legend>
+                <div class='clearfix'></div>
+                {%- endif - %}
+                {{ render(subfield) }}
+            </div>
+        {% endfor %}
+    </div>
+    {# template for new inline form fields #}
+    <div class="inline-field-template hide">
+        {% filter forceescape %}
+        <div class="inline-field well well-sm">
+            <legend>
+                <small>
+                {{ _gettext('New') }} {{ field.label.text }}
+                </small>
+                <div class="pull-right">
+                    <a href="javascript:void(0)"
+                       value="{{ _gettext('Are you sure you want to delete this record?') }}"
+                       class="inline-remove-field">
+                        <span class="fa fa-times glyphicon glyphicon-remove"></span>
+                    </a>
+                </div>
+            </legend>
+            <div class='clearfix'></div>
+            {{ render(template) }}
+        </div>
+    {% endfilter %}
+</div>
+<a id="{{ field.id }}-button"
+   href="javascript:void(0)"
+   class="btn btn-default"
+   onclick="faForm.addInlineField(this, '{{ field.id }}');">
+    {{ _gettext('Add') }} {{ field.label.text }}
+</a>
+</div>
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap3/admin/model/layout.html b/tests/flask_admin/bootstrap3/admin/model/layout.html
new file mode 100644
index 0000000..fb61a35
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/layout.html
@@ -0,0 +1,136 @@
+{% macro filter_options(btn_class='dropdown-toggle') %}
+<a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
+    {{ _gettext('Add Filter') }}
+    <b class="caret"></b>
+</a>
+<ul class="dropdown-menu field-filters">
+    {% for k in filter_groups %}
+        <li>
+            <a href="javascript:void(0)" class="filter" onclick="return false;">
+                {{ k }}
+            </a>
+        </li>
+    {% endfor %}
+</ul>
+{% endmacro %}
+{% macro export_options(btn_class='dropdown-toggle') %}
+{% if admin_view.export_types|length > 1 %}
+<li class="dropdown">
+    <a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
+        {{ _gettext('Export') }}
+        <b class="caret"></b>
+    </a>
+    <ul class="dropdown-menu field-filters">
+        {% for export_type in admin_view.export_types %}
+            <li>
+                <a href="{{ get_url('.export', export_type=export_type, **request.args) }}"
+                   title="{{ _gettext('Export') }}">
+                    {{ _gettext('Export') + ' ' + export_type|upper }}
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+</li>
+{% else %}
+<li>
+    <a href="{{ get_url('.export', export_type=admin_view.export_types[0], **request.args) }}"
+       title="{{ _gettext('Export') }}">
+        {{ _gettext('Export') }}
+    </a>
+</li>
+{% endif %}
+{% endmacro %}
+{% macro filter_form() %}
+<form id="filter_form" method="GET" action="{{ return_url }}">
+{% for arg_name, arg_value in extra_args.items() %}
+<input type="hidden" name="{{ arg_name }}" value="{{ arg_value }}">
+{% endfor %}
+{% if sort_column is not none %}
+<input type="hidden" name="sort" value="{{ sort_column }}">
+{% endif %}
+{% if sort_desc %}
+<input type="hidden" name="desc" value="{{ sort_desc }}">
+{% endif %}
+{% if search %}
+<input type="hidden" name="search" value="{{ search }}">
+{% endif %}
+{% if page_size != default_page_size %}
+<input type="hidden" name="page_size" value="{{ page_size }}">
+{% endif %}
+<div class="pull-right">
+<button type="submit" class="btn btn-primary" style="display: none">
+    {{ _gettext('Apply') }}
+</button>
+{% if active_filters %}
+    <a href="{{ clear_search_url }}" class="btn btn-default">
+        {{ _gettext('Reset Filters') }}
+    </a>
+{% endif %}
+</div>
+<table class="filters"></table>
+</form>
+<div class="clearfix"></div>
+{% endmacro %}
+{% macro search_form(input_class=None) %}
+<form method="GET" action="{{ return_url }}" class="navbar-form navbar-left" role="search">
+{% for flt_name, flt_value in filter_args.items() %}
+<input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}">
+{% endfor %}
+{% for arg_name, arg_value in extra_args.items() %}
+<input type="hidden" name="{{ arg_name }}" value="{{ arg_value }}">
+{% endfor %}
+{% if page_size != default_page_size %}
+<input type="hidden" name="page_size" value="{{ page_size }}">
+{% endif %}
+{% if sort_column is not none %}
+<input type="hidden" name="sort" value="{{ sort_column }}">
+{% endif %}
+{% if sort_desc %}
+<input type="hidden" name="desc" value="{{ sort_desc }}">
+{% endif %}
+{%- set full_search_placeholder = _gettext('Search') %}
+{%- set max_size = config.get('FLASK_ADMIN_SEARCH_SIZE_MAX', 100) %}
+{%- if search_placeholder %}{% set full_search_placeholder = [full_search_placeholder, search_placeholder] | join(": ") %}
+{% endif %}
+{%- set input_size = [[full_search_placeholder | length, 30] | max, max_size] | min %}
+{% if search %}
+<div class="input-group">
+<input type="search"
+       name="search"
+       value="{{ search }}"
+       class="form-control{% if input_class %}{{ input_class }}{% endif %}"
+       size="{{ input_size }}"
+       placeholder="{{ full_search_placeholder }}">
+<a href="{{ clear_search_url }}" class="input-group-addon clear">
+<span class="fa fa-times glyphicon glyphicon-remove"></span>
+</a>
+</div>
+{% else %}
+<div class="form-group">
+<input type="search"
+       name="search"
+       value=""
+       class="form-control{% if input_class %}{{ input_class }}{% endif %}"
+       size="{{ input_size }}"
+       placeholder="{{ full_search_placeholder }}">
+</div>
+{% endif %}
+</form>
+{% endmacro %}
+{% macro page_size_form(generator, btn_class='dropdown-toggle') %}
+<a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
+{{ page_size }} {{ _gettext('items') }}
+<b class="caret"></b>
+</a>
+<ul class="dropdown-menu">
+<li>
+<a href="{{ generator(20) }}">20 {{ _gettext('items') }}</a>
+</li>
+<li>
+<a href="{{ generator(50) }}">50 {{ _gettext('items') }}</a>
+</li>
+<li>
+<a href="{{ generator(100) }}">100 {{ _gettext('items') }}</a>
+</li>
+</ul>
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap3/admin/model/list.html b/tests/flask_admin/bootstrap3/admin/model/list.html
new file mode 100755
index 0000000..4ad7d02
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/list.html
@@ -0,0 +1,196 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/model/layout.html' as model_layout with context %}
+{% import 'admin/actions.html' as actionlib with context %}
+{% import 'admin/model/row_actions.html' as row_actions with context %}
+{% block head %}
+    {{ super() }}
+    {{ lib.form_css() }}
+{% endblock %}
+{% block body %}
+    {% block model_menu_bar %}
+        <ul class="nav nav-tabs actions-nav">
+            <li class="active">
+                <a href="javascript:void(0)">
+                    {{ _gettext('List') }}
+                    {% if count %}({{ count }}){% endif %}
+                </a>
+            </li>
+            {% if admin_view.can_create %}
+                <li>
+                    {%- if admin_view.create_modal - %}
+                    {{ lib.add_modal_button(url=get_url('.create_view', url=return_url, modal=True), title=_gettext('Create New Record'), content=_gettext('Create')) }}
+                {% else %}
+                    <a href="{{ get_url('.create_view', url=return_url) }}"
+                       title="{{ _gettext('Create New Record') }}">
+                        {{ _gettext('Create') }}
+                    </a>
+                    {%- endif - %}
+                </li>
+            {% endif %}
+            {% if admin_view.can_export %}{{ model_layout.export_options() }}{% endif %}
+            {% block model_menu_bar_before_filters %}{% endblock %}
+            {% if filters %}
+                <li class="dropdown">
+                    {{ model_layout.filter_options() }}
+                </li>
+            {% endif %}
+            {% if can_set_page_size %}
+                <li class="dropdown">
+                    {{ model_layout.page_size_form(page_size_url) }}
+                </li>
+            {% endif %}
+            {% if actions %}
+                <li class="dropdown">
+                    {{ actionlib.dropdown(actions) }}
+                </li>
+            {% endif %}
+            {% if search_supported %}
+                <li>
+                    {{ model_layout.search_form() }}
+                </li>
+            {% endif %}
+            {% block model_menu_bar_after_filters %}{% endblock %}
+        </ul>
+    {% endblock %}
+    {% if filters %}
+        {{ model_layout.filter_form() }}
+        <div class="clearfix"></div>
+    {% endif %}
+    {% block model_list_table %}
+        <div class="table-responsive">
+            <table class="table table-striped table-bordered table-hover model-list">
+                <thead>
+                    <tr>
+                        {% block list_header scoped %}
+                            {% if actions %}
+                                <th class="list-checkbox-column">
+                                    <input type="checkbox"
+                                           name="rowtoggle"
+                                           class="action-rowtoggle"
+                                           title="{{ _gettext('Select all records') }}"/>
+                                </th>
+                            {% endif %}
+                            {% block list_row_actions_header %}
+                                {% if admin_view.column_display_actions %}
+                                    <th class="col-md-1">&nbsp;</th>
+                                {% endif %}
+                            {% endblock %}
+                            {% for c, name in list_columns %}
+                                {% set column = loop.index0 %}
+                                <th class="column-header col-{{c}}">
+                                    {% if admin_view.is_sortable(c) %}
+                                        {% if sort_column == column %}
+                                            <a href="{{ sort_url(column, True) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=name) }}">
+                                                {{ name }}
+                                                {% if sort_desc %}
+                                                    <span class="fa fa-chevron-up glyphicon glyphicon-chevron-up"></span>
+                                                {% else %}
+                                                    <span class="fa fa-chevron-down glyphicon glyphicon-chevron-down"></span>
+                                                {% endif %}
+                                            </a>
+                                        {% else %}
+                                            <a href="{{ sort_url(column) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=name) }}">
+                                                {{ name }}
+                                            </a>
+                                        {% endif %}
+                                    {% else %}
+                                        {{ name }}
+                                    {% endif %}
+                                    {% if admin_view.column_descriptions.get(c) %}
+                                        <a class="fa fa-question-circle glyphicon glyphicon-question-sign"
+                                           title="{{ admin_view.column_descriptions[c] }}"
+                                           href="javascript:void(0)"
+                                           data-role="tooltip"></a>
+                                    {% endif %}
+                                </th>
+                            {% endfor %}
+                        {% endblock %}
+                    </tr>
+                </thead>
+                {% for row in data %}
+                    <tr>
+                        {% block list_row scoped %}
+                            {% if actions %}
+                                <td>
+                                    <input type="checkbox"
+                                           name="rowid"
+                                           class="action-checkbox"
+                                           value="{{ get_pk_value(row) }}"
+                                           title="{{ _gettext('Select record') }}"/>
+                                </td>
+                            {% endif %}
+                            {% block list_row_actions_column scoped %}
+                                {% if admin_view.column_display_actions %}
+                                    <td class="list-buttons-column">
+                                        {% block list_row_actions scoped %}
+                                            {% for action in list_row_actions %}{{ action.render_ctx(get_pk_value(row), row) }}{% endfor %}
+                                        {% endblock %}
+                                    </td>
+                                    {%- endif - %}
+                                {% endblock %}
+                                {% for c, name in list_columns %}
+                                    <td class="col-{{c}}">
+                                        {% if admin_view.is_editable(c) %}
+                                            {% set form = list_forms[get_pk_value(row)] %}
+                                            {% if form.csrf_token %}
+                                                {{ form[c](pk=get_pk_value(row), display_value=get_value(row, c), csrf=form.csrf_token._value()) }}
+                                            {% elif csrf_token %}
+                                                {{ form[c](pk=get_pk_value(row), display_value=get_value(row, c), csrf=csrf_token()) }}
+                                            {% else %}
+                                                {{ form[c](pk=get_pk_value(row), display_value=get_value(row, c)) }}
+                                            {% endif %}
+                                        {% else %}
+                                            {{ get_value(row, c) }}
+                                        {% endif %}
+                                    </td>
+                                {% endfor %}
+                            {% endblock %}
+                        </tr>
+                    {% else %}
+                        <tr>
+                            <td colspan="999">
+                                {% block empty_list_message %}
+                                    <div class="text-center">
+                                        {{ admin_view.get_empty_list_message() }}
+                                    </div>
+                                {% endblock %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </table>
+            </div>
+            {% block list_pager %}
+                {% if num_pages is not none %}
+                    {{ lib.pager(page, num_pages, pager_url) }}
+                {% else %}
+                    {{ lib.simple_pager(page, data|length == page_size, pager_url) }}
+                {% endif %}
+            {% endblock %}
+        {% endblock %}
+        {% block actions %}
+            {{ actionlib.form(actions, get_url('.action_view')) }}
+        {% endblock %}
+        {%- if admin_view.edit_modal or admin_view.create_modal or admin_view.details_modal - %}
+        {{ lib.add_modal_window() }}
+        {%- endif - %}
+    {% endblock %}
+    {% block tail %}
+        {{ super() }}
+        {% if filter_groups %}
+            <div id="filter-groups-data" style="display:none;">
+                {{ filter_groups|tojson|safe }}
+            </div>
+            <div id="active-filters-data" style="display:none;">
+                {{ active_filters|tojson|safe }}
+            </div>
+        {% endif %}
+        {{ lib.form_js() }}
+        <script src="{{ admin_static.url(filename='admin/js/filters.js', v='1.0.0') }}"></script>
+        {{ actionlib.script(_gettext('Please select at least one record.'),
+        actions,
+        actions_confirmation) }}
+    {% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/model/modals/create.html b/tests/flask_admin/bootstrap3/admin/model/modals/create.html
new file mode 100644
index 0000000..bc3f9a8
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/modals/create.html
@@ -0,0 +1,23 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{# store the jinja2 context for form_rules rendering logic #}
+{% set render_ctx = h.resolve_ctx() %}
+{% block body %}
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        {% block header_text %}<h3>{{ _gettext('Create New Record') }}</h3>{% endblock %}
+    </div>
+    <div class="modal-body">
+        {# "save and add" button is removed from modal (it won't function properly) #}
+        {% block create_form %}
+            {{ lib.render_form(form, return_url, extra=None, form_opts=form_opts,
+            action=url_for('.create_view', url=return_url),
+            is_modal=True) }}
+        {% endblock %}
+    </div>
+{% endblock %}
+{% block tail %}
+    <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/model/modals/details.html b/tests/flask_admin/bootstrap3/admin/model/modals/details.html
new file mode 100755
index 0000000..a0e8e32
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/modals/details.html
@@ -0,0 +1,38 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        {% block header_text %}
+            <h3>{{ _gettext('View Record') + ' #' + request.args.get('id') }}</h3>
+        {% endblock %}
+    </div>
+    <div class="modal-body">
+        {% block details_search %}
+            <div class="input-group fa_filter_container col-lg-6">
+                <span class="input-group-addon">{{ _gettext('Filter') }}</span>
+                <input id="fa_filter" type="text" class="form-control">
+            </div>
+        {% endblock %}
+        {% block details_table %}
+            <table class="table table-hover table-bordered searchable">
+                {% for c, name in details_columns %}
+                    <tr>
+                        <td>
+                            <b>
+                            {{ name }}
+                            </b>
+                        </td>
+                        <td>{{ get_value(model, c) }}</td>
+                    </tr>
+                {% endfor %}
+            </table>
+        {% endblock %}
+    </div>
+{% endblock %}
+{% block tail %}
+    <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
+    <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/model/modals/edit.html b/tests/flask_admin/bootstrap3/admin/model/modals/edit.html
new file mode 100644
index 0000000..bdfe7f9
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/modals/edit.html
@@ -0,0 +1,25 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{# store the jinja2 context for form_rules rendering logic #}
+{% set render_ctx = h.resolve_ctx() %}
+{% block body %}
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        {% block header_text %}
+            <h3>{{ _gettext('Edit Record') + ' #' + request.args.get('id') }}</h3>
+        {% endblock %}
+    </div>
+    <div class="modal-body">
+        {# "save and continue" button is removed from modal (it won't function properly) #}
+        {% block edit_form %}
+            {{ lib.render_form(form, return_url, extra=None, form_opts=form_opts,
+            action=url_for('.edit_view', id=request.args.get('id'), url=return_url),
+            is_modal=True) }}
+        {% endblock %}
+    </div>
+{% endblock %}
+{% block tail %}
+    <script src="{{ admin_static.url(filename='admin/js/bs3_modal.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/model/row_actions.html b/tests/flask_admin/bootstrap3/admin/model/row_actions.html
new file mode 100644
index 0000000..816b509
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/model/row_actions.html
@@ -0,0 +1,37 @@
+{% import 'admin/lib.html' as lib with context %}
+{% macro link(action, url, icon_class=None) %}
+<a class="icon" href="{{ url }}" title="{{ action.title or '' }}">
+    <span class="{{ icon_class or action.icon_class }}"></span>
+</a>
+{% endmacro %}
+{% macro view_row(action, row_id, row) %}
+{{ link(action, get_url('.details_view', id=row_id, url=return_url), 'fa fa-eye glyphicon glyphicon-eye-open') }}
+{% endmacro %}
+{% macro view_row_popup(action, row_id, row) %}
+{{ lib.add_modal_button(url=get_url('.details_view', id=row_id, url=return_url, modal=True), title=action.title, content='
+<span class="fa fa-eye glyphicon glyphicon-eye-open"></span>
+') }}
+{% endmacro %}
+{% macro edit_row(action, row_id, row) %}
+{{ link(action, get_url('.edit_view', id=row_id, url=return_url), 'fa fa-pencil glyphicon glyphicon-pencil') }}
+{% endmacro %}
+{% macro edit_row_popup(action, row_id, row) %}
+{{ lib.add_modal_button(url=get_url('.edit_view', id=row_id, url=return_url, modal=True), title=action.title, content='
+<span class="fa fa-pencil glyphicon glyphicon-pencil"></span>
+') }}
+{% endmacro %}
+{% macro delete_row(action, row_id, row) %}
+<form class="icon" method="POST" action="{{ get_url('.delete_view') }}">
+{{ delete_form.id(value=get_pk_value(row)) }}
+{{ delete_form.url(value=return_url) }}
+{% if delete_form.csrf_token %}
+{{ delete_form.csrf_token }}
+{% elif csrf_token %}
+<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+{% endif %}
+<button onclick="return faHelpers.safeConfirm('{{ _gettext('Are you sure you want to delete this record?') }}');"
+        title="{{ _gettext('Delete record') }}">
+<span class="fa fa-trash glyphicon glyphicon-trash"></span>
+</button>
+</form>
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap3/admin/rediscli/console.html b/tests/flask_admin/bootstrap3/admin/rediscli/console.html
new file mode 100644
index 0000000..e7e3c0e
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/rediscli/console.html
@@ -0,0 +1,24 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% import 'admin/static.html' as admin_static with context %}
+{% block head %}
+    {{ super() }}
+    <link href="{{ admin_static.url(filename='admin/css/bootstrap3/rediscli.css', v='1.0.0') }}" rel="stylesheet">
+{% endblock %}
+{% block body %}
+    <div class="console">
+        <div class="console-container"></div>
+        <div class="console-line">
+            <form action="#">
+                <input type="text"></input>
+            </form>
+        </div>
+    </div>
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    <div id="execute-view-data" style="display:none;">
+        {{ admin_view.get_url('.execute_view')|tojson|safe }}
+    </div>
+    <script src="{{ admin_static.url(filename='admin/js/rediscli.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap3/admin/rediscli/response.html b/tests/flask_admin/bootstrap3/admin/rediscli/response.html
new file mode 100644
index 0000000..661852c
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/rediscli/response.html
@@ -0,0 +1,35 @@
+{% macro render(item, depth=0) %}
+{% set type = type_name(item) %}
+{% if type == 'tuple' or type == 'list' %}
+    {% if not item %}
+        Empty {{ type }}.
+    {% else %}
+        {% for n in item %}
+            {{ loop.index }}) {{ render(n, depth + 1) }}
+            <br/>
+        {% endfor %}
+    {% endif %}
+{% elif type == 'bool' %}
+    {% if depth == 0 and item %}
+        OK
+    {% else %}
+        <span class="type-bool">{{ item }}</span>
+    {% endif %}
+{% elif type == 'str' or type == 'unicode' %}
+    "{{ item }}"
+{% elif type == 'bytes' %}
+    "{{ item.decode('utf-8') }}"
+{% elif type == 'TextWrapper' %}
+    <pre>
+{{ item }}
+    </pre>
+{% elif type == 'dict' %}
+    {% for k, v in item.items() %}
+        {{ loop.index }}) {{ k }} - {{ render(v, depth + 1) }}
+        <br/>
+    {% endfor %}
+{% else %}
+    {{ item }}
+{% endif %}
+{% endmacro %}
+{{ render(result) }}
diff --git a/tests/flask_admin/bootstrap3/admin/static.html b/tests/flask_admin/bootstrap3/admin/static.html
new file mode 100644
index 0000000..811f9ba
--- /dev/null
+++ b/tests/flask_admin/bootstrap3/admin/static.html
@@ -0,0 +1,3 @@
+{% macro url() - %}
+{{ get_url('{admin_endpoint}.static'.format(admin_endpoint=admin_view.admin.endpoint), *varargs, **kwargs) }}
+{%- endmacro %}
diff --git a/tests/flask_admin/bootstrap4/admin/actions.html b/tests/flask_admin/bootstrap4/admin/actions.html
new file mode 100644
index 0000000..53da13b
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/actions.html
@@ -0,0 +1,43 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% macro dropdown(actions, btn_class='nav-link dropdown-toggle') - %}
+<a class="{{ btn_class }}"
+   data-toggle="dropdown"
+   href="javascript:void(0)"
+   role="button"
+   aria-haspopup="true"
+   aria-expanded="false">
+    {{ _gettext('With selected') }}
+    <b class="caret"></b>
+</a>
+<div class="dropdown-menu">
+    {% for p in actions %}
+        <a class="dropdown-item" href="javascript:void(0)" onclick="return modelActions.execute('{{ p[0] }}');">
+            {{ _gettext(p[1]) }}
+        </a>
+    {% endfor %}
+</div>
+{% endmacro %}
+{% macro form(actions, url) %}
+{% if actions %}
+<form id="action_form" action="{{ url }}" method="POST" style="display: none">
+    {% if action_form.csrf_token %}
+        {{ action_form.csrf_token }}
+    {% elif csrf_token %}
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+    {% endif %}
+    {{ action_form.url(value=return_url) }}
+    {{ action_form.action() }}
+</form>
+{% endif %}
+{% endmacro %}
+{% macro script(message, actions, actions_confirmation) %}
+{% if actions %}
+<div id="actions-confirmation-data" style="display:none;">
+{{ actions_confirmation|tojson|safe }}
+</div>
+<div id="message-data" style="display:none;">
+{{ message|tojson|safe }}
+</div>
+<script src="{{ admin_static.url(filename='admin/js/actions.js', v='1.0.0') }}"></script>
+{% endif %}
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap4/admin/base.html b/tests/flask_admin/bootstrap4/admin/base.html
new file mode 100644
index 0000000..157f3d2
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/base.html
@@ -0,0 +1,99 @@
+{% import 'admin/layout.html' as layout with context - %}
+{% import 'admin/static.html' as admin_static with context %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+        {% block title %}
+            {% if admin_view.category %}{{ admin_view.category }} - {% endif %}
+            {{ admin_view.name }} - {{ admin_view.admin.name }}
+        {% endblock %}
+        </title>
+        {% block head_meta %}
+            <meta charset="UTF-8">
+            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <meta name="description" content="">
+            <meta name="author" content="">
+        {% endblock %}
+        {% block head_css %}
+            <link href="{{ admin_static.url(filename='bootstrap/bootstrap4/swatch/{swatch}/bootstrap.min.css'.format(swatch=config.get('FLASK_ADMIN_SWATCH', 'default')), v='4.2.1') }}"
+                  rel="stylesheet">
+            {% if config.get('FLASK_ADMIN_SWATCH', 'default') == 'default' %}
+                <link href="{{ admin_static.url(filename='bootstrap/bootstrap4/css/bootstrap.min.css', v='4.2.1') }}"
+                      rel="stylesheet">
+            {% endif %}
+            <link href="{{ admin_static.url(filename='admin/css/bootstrap4/admin.css', v='1.1.1') }}" rel="stylesheet">
+            <link href="{{ admin_static.url(filename='bootstrap/bootstrap4/css/font-awesome.min.css', v='4.7.0') }}"
+                  rel="stylesheet">
+            {% if admin_view.extra_css %}
+                {% for css_url in admin_view.extra_css %}
+                    <link href="{{ css_url }}" rel="stylesheet">
+                {% endfor %}
+            {% endif %}
+            <style>
+            .hide {
+                display: none;
+            }
+            </style>
+        {% endblock %}
+        {% block head %}{% endblock %}
+        {% block head_tail %}{% endblock %}
+    </head>
+    <body>
+        {% block page_body %}
+            <div class="container{% if config.get('FLASK_ADMIN_FLUID_LAYOUT', False) %}-fluid{% endif %}">
+            <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-2" role="navigation">
+                <!-- Brand and toggle get grouped for better mobile display -->
+                <button class="navbar-toggler"
+                        type="button"
+                        data-toggle="collapse"
+                        data-target="#admin-navbar-collapse"
+                        aria-controls="admin-navbar-collapse"
+                        aria-expanded="false"
+                        aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <!-- navbar content -->
+                <div class="collapse navbar-collapse" id="admin-navbar-collapse">
+                    {% block brand %}
+                        <a class="navbar-brand" href="{{ admin_view.admin.url }}">
+                            {{ admin_view.admin.name }}
+                        </a>
+                    {% endblock %}
+                    {% block main_menu %}
+                        <ul class="navbar-nav mr-auto">
+                            {{ layout.menu() }}
+                        </ul>
+                    {% endblock %}
+                    {% block menu_links %}
+                        <ul class="nav navbar-nav navbar-right">
+                            {{ layout.menu_links() }}
+                        </ul>
+                    {% endblock %}
+                    {% block access_control %}{% endblock %}
+                </div>
+            </nav>
+            {% block messages %}{{ layout.messages() }}{% endblock %}
+            {# store the jinja2 context for form_rules rendering logic #}
+            {% set render_ctx = h.resolve_ctx() %}
+            {% block body %}{% endblock %}</div>{% endblock %}
+            {% block tail_js %}
+                <script src="{{ admin_static.url(filename='vendor/jquery.min.js', v='2.1.4') }}" type="text/javascript"></script>
+                <script src="{{ admin_static.url(filename='bootstrap/bootstrap4/js/popper.min.js') }}" type="text/javascript"></script>
+                <script src="{{ admin_static.url(filename='bootstrap/bootstrap4/js/bootstrap.min.js', v='4.2.1') }}" type="text/javascript"></script>
+                <script src="{{ admin_static.url(filename='vendor/moment.min.js', v='2.9.0') }}" type="text/javascript"></script>
+                <script src="{{ admin_static.url(filename='vendor/bootstrap4/util.js', v='4.3.1') }}" type="text/javascript"></script>
+                <script src="{{ admin_static.url(filename='vendor/bootstrap4/dropdown.js', v='4.3.1') }}" type="text/javascript"></script>
+                <script src="{{ admin_static.url(filename='vendor/select2/select2.min.js', v='4.2.1') }}" type="text/javascript"></script>
+                <script src="{{ admin_static.url(filename='vendor/multi-level-dropdowns-bootstrap/bootstrap4-dropdown-ml-hack.js') }}" type="text/javascript"></script>
+                <script src="{{ admin_static.url(filename='admin/js/helpers.js', v='1.0.0') }}" type="text/javascript"></script>
+                {% if admin_view.extra_js %}
+                    {% for js_url in admin_view.extra_js %}
+                        <script src="{{ js_url }}" type="text/javascript"></script>
+                    {% endfor %}
+                {% endif %}
+            {% endblock %}
+            {% block tail %}{% endblock %}
+        </body>
+    </html>
diff --git a/tests/flask_admin/bootstrap4/admin/file/form.html b/tests/flask_admin/bootstrap4/admin/file/form.html
new file mode 100644
index 0000000..3052310
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/file/form.html
@@ -0,0 +1,6 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    {% block header %}<h3>{{ header_text }}</h3>{% endblock %}
+    {% block fa_form %}{{ lib.render_form(form, dir_url) }}{% endblock %}
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/file/list.html b/tests/flask_admin/bootstrap4/admin/file/list.html
new file mode 100644
index 0000000..9f3252a
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/file/list.html
@@ -0,0 +1,206 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% import 'admin/actions.html' as actionslib with context %}
+{% block body %}
+    {% block breadcrums %}
+        <nav area-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="{{ get_dir_url('.index_view', path=None) }}">
+                        {{ _gettext('Root') }}
+                    </a>
+                </li>
+                {% for name, path in breadcrumbs[:-1] %}
+                    <li class="breadcrumb-item">
+                        <a href="{{ get_dir_url('.index_view', path=path) }}">
+                            {{ name }}
+                        </a>
+                    </li>
+                {% endfor %}
+                {% if breadcrumbs %}
+                    <li class="breadcrumb-item">
+                        <a href="{{ get_dir_url('.index_view', path=breadcrumbs[-1][1]) }}">
+                            {{ breadcrumbs[-1][0] }}
+                        </a>
+                    </li>
+                {% endif %}
+            </ol>
+        </nav>
+    {% endblock %}
+    {% block file_list_table %}
+        <div class="table-responsive">
+            <table class="table table-striped table-bordered model-list">
+                <thead>
+                    <tr>
+                        {% block list_header scoped %}
+                            {% if actions %}
+                                <th class="list-checkbox-column">
+                                    <input type="checkbox" name="rowtoggle" class="action-rowtoggle" />
+                                </th>
+                            {% endif %}
+                            <th class="">&nbsp;</th>
+                            {% for column in admin_view.column_list %}
+                                <th>
+                                    {% if admin_view.is_column_sortable(column) %}
+                                        {% if sort_column == column %}
+                                            <a href="{{ sort_url(column, dir_path, True) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=column) }}">
+                                                {{ admin_view.column_label(column) }}
+                                                {% if sort_desc %}
+                                                    <span class="fa fa-chevron-up glyphicon glyphicon-chevron-up"></span>
+                                                {% else %}
+                                                    <span class="fa fa-chevron-down glyphicon glyphicon-chevron-down"></span>
+                                                {% endif %}
+                                            </a>
+                                        {% else %}
+                                            <a href="{{ sort_url(column, dir_path) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=column) }}">
+                                                {{ admin_view.column_label(column) }}
+                                            </a>
+                                        {% endif %}
+                                    {% else %}
+                                        {{ _gettext(admin_view.column_label(column)) }}
+                                    {% endif %}
+                                </th>
+                            {% endfor %}
+                        {% endblock %}
+                    </tr>
+                </thead>
+                {% for name, path, is_dir, size, date in items %}
+                    <tr>
+                        {% block list_row scoped %}
+                            {% if actions %}
+                                <td>
+                                    {% if not is_dir %}
+                                        <input type="checkbox"
+                                               name="rowid"
+                                               class="action-checkbox"
+                                               value="{{ path }}"/>
+                                    {% endif %}
+                                </td>
+                            {% endif %}
+                            <td>
+                                {% block list_row_actions scoped %}
+                                    {% if admin_view.can_rename and path and name != '..' %}
+                                        {%- if admin_view.rename_modal - %}
+                                        {{ lib.add_modal_button(url=get_url('.rename', path=path, modal=True),
+                                        title=_gettext('Rename File'),
+                                        content='
+                                        <i class="fa fa-pencil glyphicon glyphicon-pencil"></i>
+                                        ') }}
+                                    {% else %}
+                                        <a class="icon"
+                                           href="{{ get_url('.rename', path=path) }}"
+                                           title="{{ _gettext('Rename File') }}">
+                                            <i class="fa fa-pencil glyphicon glyphicon-pencil"></i>
+                                        </a>
+                                        {%- endif - %}
+                                    {% endif %}
+                                    {%- if admin_view.can_delete and path - %}
+                                    {% if is_dir %}
+                                        {% if name != '..' and admin_view.can_delete_dirs %}
+                                            <form class="icon" method="POST" action="{{ get_url('.delete') }}">
+                                                {{ delete_form.path(value=path) }}
+                                                {{ delete_form.csrf_token }}
+                                                <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\' recursively?', name=name) }}')">
+                                                    <i class="fa fa-times glyphicon glyphicon-remove"></i>
+                                                </button>
+                                            </form>
+                                        {% endif %}
+                                    {% else %}
+                                        <form class="icon" method="POST" action="{{ get_url('.delete') }}">
+                                            {{ delete_form.path(value=path) }}
+                                            {{ delete_form.csrf_token }}
+                                            <button onclick="return confirm('{{ _gettext('Are you sure you want to delete \\\'%(name)s\\\'?', name=name) }}')">
+                                                <i class="fa fa-trash glyphicon glyphicon-trash"></i>
+                                            </button>
+                                        </form>
+                                    {% endif %}
+                                    {%- endif - %}
+                                {% endblock %}
+                            </td>
+                            {% if is_dir %}
+                                <td colspan="2">
+                                    <a href="{{ get_dir_url('.index_view', path)|safe }}">
+                                        <i class="fa fa-folder-o glyphicon glyphicon-folder-close"></i>
+                                        <span>{{ name }}</span>
+                                    </a>
+                                </td>
+                            {% else %}
+                                <td>
+                                    {% if admin_view.can_download %}
+                                        {%- if admin_view.edit_modal and admin_view.is_file_editable(path) - %}
+                                        {{ lib.add_modal_button(url=get_file_url(path, modal=True)|safe,
+                                        btn_class='', content=name) }}
+                                    {% else %}
+                                        <a href="{{ get_file_url(path)|safe }}">
+                                            {{ name }}
+                                        </a>
+                                        {%- endif - %}
+                                    {% else %}
+                                        {{ name }}
+                                    {% endif %}
+                                </td>
+                                {% if admin_view.is_column_visible('size') %}
+                                    <td>{{ size|filesizeformat }}</td>
+                                {% endif %}
+                            {% endif %}
+                            {% if admin_view.is_column_visible('date') %}
+                                <td>{{ timestamp_format(date) }}</td>
+                            {% endif %}
+                        {% endblock %}
+                    </tr>
+                {% endfor %}
+            </table>
+        </div>
+    {% endblock %}
+    {% block toolbar %}
+        <div class="btn-toolbar">
+            {% if admin_view.can_upload %}
+                <div class="btn-group">
+                    {%- if admin_view.upload_modal - %}
+                    {{ lib.add_modal_button(url=get_dir_url('.upload', path=dir_path, modal=True),
+                    btn_class="btn btn-secondary",
+                    content=_gettext('Upload File')) }}
+                {% else %}
+                    <a class="btn btn-secondary" href="{{ get_dir_url('.upload', path=dir_path) }}">
+                        {{ _gettext('Upload File') }}
+                    </a>
+                    {%- endif - %}
+                </div>
+            {% endif %}
+            {% if admin_view.can_mkdir %}
+                <div class="mx-1">
+                    {%- if admin_view.mkdir_modal - %}
+                    {{ lib.add_modal_button(url=get_dir_url('.mkdir', path=dir_path, modal=True),
+                    btn_class="btn btn-secondary",
+                    content=_gettext('Create Directory')) }}
+                {% else %}
+                    <a class="btn btn-secondary" href="{{ get_dir_url('.mkdir', path=dir_path) }}">
+                        {{ _gettext('Create Directory') }}
+                    </a>
+                    {%- endif - %}
+                </div>
+            {% endif %}
+            {% if actions %}
+                <div class="mx-1">
+                    {{ actionslib.dropdown(actions, 'dropdown-toggle btn btn-secondary') }}
+                </div>
+            {% endif %}
+        </div>
+    {% endblock %}
+    {% block actions %}
+        {{ actionslib.form(actions, get_url('.action_view')) }}
+    {% endblock %}
+    {%- if admin_view.rename_modal or admin_view.mkdir_modal
+    or admin_view.upload_modal or admin_view.edit_modal -%}
+    {{ lib.add_modal_window() }}
+    {%- endif - %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    {{ actionslib.script(_gettext('Please select at least one file.'),
+    actions,
+    actions_confirmation) }}
+    <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/file/modals/form.html b/tests/flask_admin/bootstrap4/admin/file/modals/form.html
new file mode 100644
index 0000000..7ed7708
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/file/modals/form.html
@@ -0,0 +1,19 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    {# content added to modal-content #}
+    <div class="modal-header">
+        {% block header %}<h3>{{ header_text }}</h3>{% endblock %}
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        {% block fa_form %}
+            {{ lib.render_form(form, dir_url, action=request.url, is_modal=True) }}
+        {% endblock %}
+    </div>
+{% endblock %}
+{% block tail %}
+    <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/index.html b/tests/flask_admin/bootstrap4/admin/index.html
new file mode 100644
index 0000000..6c4bda4
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/index.html
@@ -0,0 +1,2 @@
+{% extends 'admin/master.html' %}
+{% block body %}{% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/layout.html b/tests/flask_admin/bootstrap4/admin/layout.html
new file mode 100644
index 0000000..b91b988
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/layout.html
@@ -0,0 +1,116 @@
+{% macro menu_icon(item) - %}
+{% set icon_type = item.get_icon_type() %}
+{%- if icon_type %}
+{% set icon_value = item.get_icon_value() %}
+{% if icon_type == 'glyph' %}
+    <i class="glyphicon {{ icon_value }}"></i>
+{% elif icon_type == 'fa' %}
+    <i class="fa {{ icon_value }}"></i>
+{% elif icon_type == 'image' %}
+    <img src="{{ url_for('static', filename=icon_value) }}" alt="menu image">
+    {% elif icon_type == 'image-url' %}
+        <img src="{{ icon_value }}" alt="menu image">
+        {% endif %}
+    {% endif %}
+    {%- endmacro %}
+    {% macro menu(menu_root=None) %}
+    {% set is_main_nav = menu_root == None %}
+    {% if menu_root is none %}
+        {% set menu_root = admin_view.admin.menu() %}
+    {% endif %}
+    {%- for item in menu_root %}
+    {%- if item.is_category() - %}
+    {% set children = item.get_children() %}
+    {%- if children %}
+    {% set class_name = item.get_class_name() or '' %}
+    {%- if item.is_active(admin_view) %}
+    <li class="active dropdown{% if class_name %}{{ class_name }}{% endif %}">
+{% else - %}
+    <li class="dropdown{% if class_name %}{{ class_name }}{% endif %}">
+    {%- endif %}
+    <a class="dropdown-toggle {% if is_main_nav %}nav-link{% else %}dropdown-item{% endif %}"
+       data-toggle="dropdown"
+       href="javascript:void(0)">
+    {% if item.class_name %}<span class="{{ item.class_name }}"></span>{% endif %}
+    {{ menu_icon(item) }}{{ item.name }}
+    {%- if 'dropdown-submenu' in class_name - %}
+    <i class="glyphicon glyphicon-chevron-right small"></i>
+    {%- else - %}
+    <i class="glyphicon glyphicon-chevron-down small"></i>
+    {%- endif - %}
+</a>
+<ul class="dropdown-menu">
+    {%- for child in children - %}
+    {%- if child.is_category() - %}
+    {{ menu(menu_root=[child]) }}
+{% else %}
+    {% set class_name = child.get_class_name() %}
+    <li
+        {% if class_name %}class="{{ class_name }}"{% endif %}
+        >
+        {%- if child.is_active(admin_view) %}
+        <a class="dropdown-item active"
+           href="{{ child.get_url() }}"
+           {% if child.target %}target="{{ child.target }}">
+        {{ menu_icon(child) }}{{ child.name }}
+    </a>
+{% else %}
+    <a class="dropdown-item" href="{{ child.get_url() }}"{% if child.target %}target="{{ child.target }}"{% endif %}>
+    {{ menu_icon(child) }}{{ child.name }}
+</a>
+{%- endif %}
+</li>
+{%- endif %}
+{%- endfor %}
+</ul>
+</li>
+{% endif %}
+{%- else %}
+{%- if item.is_accessible() and item.is_visible() - %}
+{% set class_name = item.get_class_name() %}
+{%- if item.is_active(admin_view) %}
+<li class="active{% if class_name %}{{ class_name }}{% endif %}">
+{%- else %}
+<li{% if class_name %}class="{{ class_name }}"{% endif %}>
+{%- endif %}
+<a class="nav-link" href="{{ item.get_url() }}"{% if item.target %}target="{{ item.target }}"{% endif %}>
+{{ menu_icon(item) }}{{ item.name }}
+</a>
+</li>
+{%- endif - %}
+{% endif - %}
+{% endfor %}
+{% endmacro %}
+{% macro menu_links(links=None) %}
+{% if links is none %}{% set links = admin_view.admin.menu_links() %}{% endif %}
+{% for item in links %}
+{% set class_name = item.get_class_name() %}
+{% if item.is_accessible() and item.is_visible() %}
+<li{% if class_name %} class="{{ class_name }}"{% endif %}>
+<a class="nav-link" href="{{ item.get_url() }}">
+{{ menu_icon(item) }}{{ item.name }}
+</a>
+</li>
+{% endif %}
+{% endfor %}
+{% endmacro %}
+{% macro messages() %}
+{% with messages = get_flashed_messages(with_categories=True) %}
+{% if messages %}
+{% for category, m in messages %}
+{% if category %}
+{# alert-error changed to alert-danger in bootstrap 3, mapping is for backwards compatibility #}
+{% set mapping = {'message': 'info', 'error': 'danger'} %}
+<div class="alert alert-{{ mapping.get(category, category) }} alert-dismissable">
+{% else %}
+<div class="alert alert-dismissable">
+{% endif %}
+<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
+&times;
+</button>
+{{ m }}
+</div>
+{% endfor %}
+{% endif %}
+{% endwith %}
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap4/admin/lib.html b/tests/flask_admin/bootstrap4/admin/lib.html
new file mode 100644
index 0000000..7e78ab6
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/lib.html
@@ -0,0 +1,313 @@
+{% import 'admin/static.html' as admin_static with context %}
+{# ---------------------- Pager -------------------------- #}
+{% macro pager(page, pages, generator) - %}
+{% if pages > 1 %}
+    <ul class="pagination">
+        {% set min = page - 3 %}
+        {% set max = page + 3 + 1 %}
+        {% if min < 0 %}
+            {% set max = max - min %}
+        {% endif %}
+        {% if max >= pages %}
+            {% set min = min - max + pages %}
+        {% endif %}
+        {% if min < 0 %}
+            {% set min = 0 %}
+        {% endif %}
+        {% if max >= pages %}
+            {% set max = pages %}
+        {% endif %}
+        {% if min > 0 %}
+            <li class="page-item">
+                <a class="page-link" href="{{ generator(0) }}">
+                    &laquo;
+                </a>
+            </li>
+        {% else %}
+            <li class="page-item disabled">
+                <a class="page-link" href="javascript:void(0)">
+                    &laquo;
+                </a>
+            </li>
+        {% endif %}
+        {% if page > 0 %}
+            <li class="page-item">
+                <a class="page-link" href="{{ generator(page-1) }}">
+                    &lt;
+                </a>
+            </li>
+        {% else %}
+            <li class="page-item disabled">
+                <a class="page-link" href="javascript:void(0)">
+                    &lt;
+                </a>
+            </li>
+        {% endif %}
+        {% for p in range(min, max) %}
+            {% if page == p %}
+                <li class="page-item active">
+                    <a class="page-link" href="javascript:void(0)">
+                        {{ p + 1 }}
+                    </a>
+                </li>
+            {% else %}
+                <li class="page-item">
+                    <a class="page-link" href="{{ generator(p) }}">
+                        {{ p + 1 }}
+                    </a>
+                </li>
+            {% endif %}
+        {% endfor %}
+        {% if page + 1 < pages %}
+            <li class="page-item">
+                <a class="page-link" href="{{ generator(page + 1) }}">
+                    &gt;
+                </a>
+            </li>
+        {% else %}
+            <li class="page-item disabled">
+                <a class="page-link" href="javascript:void(0)">
+                    &gt;
+                </a>
+            </li>
+        {% endif %}
+        {% if max < pages %}
+            <li class="page-item">
+                <a class="page-link" href="{{ generator(pages - 1) }}">
+                    &raquo;
+                </a>
+            </li>
+        {% else %}
+            <li class="page-item disabled">
+                <a class="page-link" href="javascript:void(0)">
+                    &raquo;
+                </a>
+            </li>
+        {% endif %}
+    </ul>
+{% endif %}
+{%- endmacro %}
+{% macro simple_pager(page, have_next, generator) - %}
+<ul class="pagination">
+    {% if page > 0 %}
+        <li class="page-item">
+            <a href="{{ generator(page - 1) }}">
+                &lt;
+            </a>
+        </li>
+    {% else %}
+        <li class="page-item disabled">
+            <a href="{{ generator(0) }}">&lt;</a>
+        </li>
+    {% endif %}
+    {% if have_next %}
+        <li class="page-item">
+            <a href="{{ generator(page + 1) }}">
+                &gt;
+            </a>
+        </li>
+    {% else %}
+        <li class="page-item disabled">
+            <a href="{{ generator(page) }}">&gt;</a>
+        </li>
+    {% endif %}
+</ul>
+{%- endmacro %}
+{# ---------------------- Modal Window ------------------- #}
+{% macro add_modal_window(modal_window_id='fa_modal_window', modal_label_id='fa_modal_label') %}
+<div class="modal fade" id="{{ modal_window_id }}" tabindex="-1" role="dialog" aria-labelledby="{{ modal_label_id }}">
+    <div class="modal-dialog modal-xl" role="document">
+        {# bootstrap version > 3.1.0 required for this to work #}
+        <div class="modal-content"></div>
+    </div>
+</div>
+{% endmacro %}
+{% macro add_modal_button(url='', title='', content='', modal_window_id='fa_modal_window', btn_class='icon') %}
+<a class="{{ btn_class }}"
+   data-target="#{{ modal_window_id }}"
+   title="{{ title }}"
+   href="{{ url }}"
+   data-toggle="modal">
+{{ content|safe }}
+</a>
+{% endmacro %}
+{# ---------------------- Forms -------------------------- #}
+{% macro render_field(form, field, kwargs={}, caller=None) %}
+{% set direct_error = h.is_field_error(field.errors) %}
+{% set prepend = kwargs.pop('prepend', None) %}
+{% set append = kwargs.pop('append', None) %}
+<div class="form-group {{ kwargs.get('column_class', '') }}">
+<label for="{{ field.id }}" class="control-label"
+{% if field.widget.input_type == 'checkbox' %}
+    style="display: block"
+{% endif %}
+>
+{{ field.label.text }}
+{% if h.is_required_form_field(field) %}
+    <strong style="color: red">&#42;</strong>
+    {%- else - %}
+    &nbsp;
+    {%- endif %}
+</label>
+{% if prepend or append %}
+    <div class="input-group">
+        {%- if prepend - %}
+        <div class="input-group-prepend">
+            {{ prepend }}
+        </div>
+        {%- endif - %}
+    {% endif %}
+    {% if field.widget.input_type == 'checkbox' %}
+        {% set _class = kwargs.setdefault('class', 'form-control-lg') %}
+    {% elif field.widget.input_type == 'file' %}
+        {% set _class = kwargs.setdefault('class', 'form-control-file') %}
+    {% else %}
+        {% set _class = kwargs.setdefault('class', 'form-control') %}
+    {% endif %}
+    {%- if direct_error %} {% set _ = kwargs.update({'class': kwargs['class'] ~ ' is-invalid'}) %}
+{% endif - %}
+{{ field(**kwargs) | safe }}
+{%- if append - %}
+<div class="input-group-append">
+    {{ append }}
+</div>
+{%- endif - %}
+{% if direct_error %}
+    <div class="invalid-feedback">
+        <ul class="help-block">
+            {% for e in field.errors if e is string %}
+                <li>
+                    {{ e }}
+                </li>
+            {% endfor %}
+        </ul>
+    </div>
+{% elif field.description %}
+    <div class="help-block">
+        {{ field.description|safe }}
+    </div>
+{% endif %}
+{% if prepend or append %}</div>{% endif %}
+{% if caller %}{{ caller(form, field, direct_error, kwargs) }}{% endif %}
+</div>
+{% endmacro %}
+{% macro render_header(form, text) %}
+<h3>{{ text }}</h3>
+{% endmacro %}
+{% macro render_form_fields(form, form_opts=None) %}
+{% if form.hidden_tag is defined %}
+{{ form.hidden_tag() }}
+{% else %}
+{% if csrf_token %}
+<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+{% endif %}
+{% for f in form if f.widget.input_type == 'hidden' %}
+{{ f }}
+{% endfor %}
+{% endif %}
+{% if form_opts and form_opts.form_rules %}
+{% for r in form_opts.form_rules %}{{ r(form, form_opts=form_opts) }}{% endfor %}
+{% else %}
+{% for f in form if f.widget.input_type != 'hidden' %}
+{% if form_opts %}
+{% set kwargs = form_opts.widget_args.get(f.short_name, {}) %}
+{% else %}
+{% set kwargs = {} %}
+{% endif %}
+{{ render_field(form, f, kwargs) }}
+{% endfor %}
+{% endif %}
+{% endmacro %}
+{% macro form_tag(form=None, action=None) %}
+<form action="{{ action or '' }}" method="POST" role="form" class="admin-form" enctype="multipart/form-data">
+<fieldset>
+{{ caller() }}
+</fieldset>
+</form>
+{% endmacro %}
+{% macro render_form_buttons(cancel_url, extra=None, is_modal=False) %}
+{% if is_modal %}
+<input type="submit" class="btn btn-primary" value="{{ _gettext('Save') }}" />
+{% if extra %}{{ extra }}{% endif %}
+{% if cancel_url %}
+<a href="{{ cancel_url }}" class="btn btn-danger" role="button"
+{% if is_modal %}data-dismiss="modal"{% endif %}
+>
+{{ _gettext('Cancel') }}
+</a>
+{% endif %}
+{% else %}
+<hr>
+<div class="form-group">
+<div class="col-md-offset-2 col-md-10 submit-row">
+<input type="submit" class="btn btn-primary" value="{{ _gettext('Save') }}" />
+{% if extra %}{{ extra }}{% endif %}
+{% if cancel_url %}
+<a href="{{ cancel_url }}" class="btn btn-danger" role="button"
+{% if is_modal %}data-dismiss="modal"{% endif %}
+>
+{{ _gettext('Cancel') }}
+</a>
+{% endif %}
+</div>
+</div>
+{% endif %}
+{% endmacro %}
+{% macro render_form(form, cancel_url, extra=None, form_opts=None, action=None, is_modal=False) - %}
+{% call form_tag(action=action) %}
+{{ render_form_fields(form, form_opts=form_opts) }}
+{{ render_form_buttons(cancel_url, extra, is_modal) }}
+{% endcall %}
+{% endmacro %}
+{% macro form_css() %}
+<link href="{{ admin_static.url(filename='vendor/select2/select2.css', v='4.2.1') }}" rel="stylesheet">
+<link href="{{ admin_static.url(filename='vendor/select2/select2-bootstrap4.css', v='1.4.6') }}" rel="stylesheet">
+<link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs4.css', v='1.3.22') }}"
+      rel="stylesheet">
+{% if config.MAPBOX_MAP_ID %}
+<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css', v='1.0.2') }}" rel="stylesheet">
+<link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css', v='0.4.6') }}" rel="stylesheet">
+{% endif %}
+{% if editable_columns %}
+<link href="{{ admin_static.url(filename='vendor/x-editable/css/bootstrap4-editable.css', v='1.5.1.1') }}"
+      rel="stylesheet">
+{% endif %}
+{% endmacro %}
+{% macro form_js() %}
+{% if config.MAPBOX_MAP_ID %}
+<script>
+  window.MAPBOX_MAP_ID = "{{ config.MAPBOX_MAP_ID }}";
+  {% if config.MAPBOX_ACCESS_TOKEN %}
+  window.MAPBOX_ACCESS_TOKEN = "{{ config.MAPBOX_ACCESS_TOKEN }}";
+  {% endif %}
+  {% if config.DEFAULT_CENTER_LAT and config.DEFAULT_CENTER_LONG %}
+  window.DEFAULT_CENTER_LAT = "{{ config.DEFAULT_CENTER_LAT }}";
+  window.DEFAULT_CENTER_LONG = "{{ config.DEFAULT_CENTER_LONG }}";
+  {% endif %}
+</script>
+<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.js', v='1.0.2') }}"></script>
+<script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.js', v='0.4.6') }}"></script>
+{% if config.MAPBOX_SEARCH %}
+<script>
+  window.MAPBOX_SEARCH = "{{ config.MAPBOX_SEARCH }}";
+</script>
+<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key={{ config.get('GOOGLE_MAPS_API_KEY') }}"></script>
+{% endif %}
+{% endif %}
+<script src="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker.js', v='1.3.22') }}"></script>
+{% if editable_columns %}
+<script src="{{ admin_static.url(filename='vendor/x-editable/js/bootstrap4-editable.min.js', v='1.5.1.1') }}"></script>
+{% endif %}
+<script src="{{ admin_static.url(filename='admin/js/form.js', v='1.0.1') }}"></script>
+{% endmacro %}
+{% macro extra() %}
+{% if admin_view.can_create %}
+<input name="_add_another" type="submit" class="btn btn-secondary" value="{{ _gettext('Save and Add Another') }}" />
+{% endif %}
+{% if admin_view.can_edit %}
+<input name="_continue_editing"
+       type="submit"
+       class="btn btn-secondary"
+       value="{{ _gettext('Save and Continue Editing') }}"/>
+{% endif %}
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap4/admin/master.html b/tests/flask_admin/bootstrap4/admin/master.html
new file mode 100644
index 0000000..8f27dad
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/master.html
@@ -0,0 +1 @@
+{% extends admin_base_template %}
diff --git a/tests/flask_admin/bootstrap4/admin/model/create.html b/tests/flask_admin/bootstrap4/admin/model/create.html
new file mode 100644
index 0000000..01ba57b
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/create.html
@@ -0,0 +1,30 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% from 'admin/lib.html' import extra with context %} {# backward compatible #}
+{% block head %}
+    {{ super() }}
+    {{ lib.form_css() }}
+{% endblock %}
+{% block body %}
+    {% block navlinks %}
+        <ul class="nav nav-tabs">
+            <li class="nav-item">
+                <a href="{{ return_url }}" class="nav-link">
+                    {{ _gettext('List') }}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a href="javascript:void(0)" class="nav-link active">
+                    {{ _gettext('Create') }}
+                </a>
+            </li>
+        </ul>
+    {% endblock %}
+    {% block create_form %}
+        {{ lib.render_form(form, return_url, extra(), form_opts) }}
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    {{ lib.form_js() }}
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/model/details.html b/tests/flask_admin/bootstrap4/admin/model/details.html
new file mode 100644
index 0000000..2e416f9
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/details.html
@@ -0,0 +1,58 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    {% block navlinks %}
+        <ul class="nav nav-tabs">
+            <li class="nav-item">
+                <a class="nav-link" href="{{ return_url }}">
+                    {{ _gettext('List') }}
+                </a>
+            </li>
+            {%- if admin_view.can_create - %}
+            <li class="nav-item">
+                <a class="nav-link" href="{{ get_url('.create_view', url=return_url) }}">
+                    {{ _gettext('Create') }}
+                </a>
+            </li>
+            {%- endif - %}
+            {%- if admin_view.can_edit - %}
+            <li class="nav-item">
+                <a class="nav-link" href="{{ get_url('.edit_view', id=request.args.get('id'), url=return_url) }}">
+                    {{ _gettext('Edit') }}
+                </a>
+            </li>
+            {%- endif - %}
+            <li class="nav-item">
+                <a class="nav-link active disabled" href="javascript:void(0)">
+                    {{ _gettext('Details') }}
+                </a>
+            </li>
+        </ul>
+    {% endblock %}
+    {% block details_search %}
+        <div class="form-inline fa_filter_container col-lg-6">
+            <label for="fa_filter">
+                {{ _gettext('Filter') }}
+            </label>
+            <input id="fa_filter" type="text" class="ml-3 form-control">
+        </div>
+    {% endblock %}
+    {% block details_table %}
+        <table class="table table-hover table-bordered searchable">
+            {% for c, name in details_columns %}
+                <tr>
+                    <td>
+                        <b>
+                        {{ name }}
+                        </b>
+                    </td>
+                    <td>{{ get_value(model, c) }}</td>
+                </tr>
+            {% endfor %}
+        </table>
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/model/edit.html b/tests/flask_admin/bootstrap4/admin/model/edit.html
new file mode 100644
index 0000000..781751e
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/edit.html
@@ -0,0 +1,44 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% from 'admin/lib.html' import extra with context %} {# backward compatible #}
+{% block head %}
+    {{ super() }}
+    {{ lib.form_css() }}
+{% endblock %}
+{% block body %}
+    {% block navlinks %}
+        <ul class="nav nav-tabs">
+            <li class="nav-item">
+                <a href="{{ return_url }}" class="nav-link">
+                    {{ _gettext('List') }}
+                </a>
+            </li>
+            {%- if admin_view.can_create - %}
+            <li class="nav-item">
+                <a href="{{ get_url('.create_view', url=return_url) }}" class="nav-link">
+                    {{ _gettext('Create') }}
+                </a>
+            </li>
+            {%- endif - %}
+            <li class="nav-item">
+                <a href="javascript:void(0)" class="nav-link active">
+                    {{ _gettext('Edit') }}
+                </a>
+            </li>
+            {%- if admin_view.can_view_details - %}
+            <li class="nav-item">
+                <a class="nav-link" href="{{ get_url('.details_view', id=request.args.get('id'), url=return_url) }}">
+                    {{ _gettext('Details') }}
+                </a>
+            </li>
+            {%- endif - %}
+        </ul>
+    {% endblock %}
+    {% block edit_form %}
+        {{ lib.render_form(form, return_url, extra(), form_opts) }}
+    {% endblock %}
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    {{ lib.form_js() }}
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/model/inline_field_list.html b/tests/flask_admin/bootstrap4/admin/model/inline_field_list.html
new file mode 100644
index 0000000..347977c
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/inline_field_list.html
@@ -0,0 +1,14 @@
+{% import 'admin/model/inline_list_base.html' as base with context %}
+{% macro render_field(field) %}
+{{ field }}
+{% if h.is_field_error(field.errors) %}
+    <ul class="help-block input-errors">
+        {% for e in field.errors if e is string %}
+            <li>
+                {{ e }}
+            </li>
+        {% endfor %}
+    </ul>
+{% endif %}
+{% endmacro %}
+{{ base.render_inline_fields(field, template, render_field, check) }}
diff --git a/tests/flask_admin/bootstrap4/admin/model/inline_form.html b/tests/flask_admin/bootstrap4/admin/model/inline_form.html
new file mode 100644
index 0000000..9a4b9fa
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/inline_form.html
@@ -0,0 +1,4 @@
+{% import 'admin/lib.html' as lib with context %}
+<div class="inline-form-field">
+    {{ lib.render_form_fields(field.form, form_opts=form_opts) }}
+</div>
diff --git a/tests/flask_admin/bootstrap4/admin/model/inline_list_base.html b/tests/flask_admin/bootstrap4/admin/model/inline_list_base.html
new file mode 100644
index 0000000..3a9a442
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/inline_list_base.html
@@ -0,0 +1,62 @@
+{% macro render_inline_fields(field, template, render, check=None) %}
+<div class="inline-field" id="{{ field.id }}">
+    {# existing inline form fields #}
+    <div class="inline-field-list">
+        {% for subfield in field %}
+            <div id="{{ subfield.id }}" class="inline-field card card-body bg-light">
+                {%- if not check or check(subfield) %}
+                <legend>
+                    <small>
+                    {{ field.label.text }} #{{ loop.index }}
+                    <div class="pull-right">
+                        {% if subfield.get_pk and subfield.get_pk() %}
+                            <input type="checkbox" name="del-{{ subfield.id }}" id="del-{{ subfield.id }}" />
+                            <label for="del-{{ subfield.id }}" style="display: inline">
+                                {{ _gettext('Delete?') }}
+                            </label>
+                        {% else %}
+                            <a href="javascript:void(0)"
+                               value="{{ _gettext('Are you sure you want to delete this record?') }}"
+                               class="inline-remove-field">
+                                <i class="fa fa-times glyphicon glyphicon-remove"></i>
+                            </a>
+                        {% endif %}
+                    </div>
+                    </small>
+                </legend>
+                <div class='clearfix'></div>
+                {%- endif - %}
+                {{ render(subfield) }}
+            </div>
+        {% endfor %}
+    </div>
+    {# template for new inline form fields #}
+    <div class="inline-field-template hide">
+        {% filter forceescape %}
+        <div class="inline-field card card-body bg-light">
+            <legend>
+                <small>
+                {{ _gettext('New') }} {{ field.label.text }}
+                </small>
+                <div class="pull-right">
+                    <a href="javascript:void(0)"
+                       value="{{ _gettext('Are you sure you want to delete this record?') }}"
+                       class="inline-remove-field">
+                        <span class="fa fa-times glyphicon glyphicon-remove"></span>
+                    </a>
+                </div>
+            </legend>
+            <div class='clearfix'></div>
+            {{ render(template) }}
+        </div>
+    {% endfilter %}
+</div>
+<a id="{{ field.id }}-button"
+   href="javascript:void(0)"
+   class="btn btn-primary"
+   role="button"
+   onclick="faForm.addInlineField(this, '{{ field.id }}');">
+    {{ _gettext('Add') }} {{ field.label.text }}
+</a>
+</div>
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap4/admin/model/layout.html b/tests/flask_admin/bootstrap4/admin/model/layout.html
new file mode 100644
index 0000000..e6470aa
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/layout.html
@@ -0,0 +1,138 @@
+{% macro filter_options(btn_class='dropdown-toggle') %}
+<a class="nav-link {{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
+    {{ _gettext('Add Filter') }}
+    <b class="caret"></b>
+</a>
+<div class="dropdown-menu field-filters">
+    {% for k in filter_groups %}
+        <a href="javascript:void(0)" class="dropdown-item filter" onclick="return false;">
+            {{ k }}
+        </a>
+    {% endfor %}
+</div>
+{% endmacro %}
+{% macro export_options(btn_class='dropdown-toggle') %}
+{% if admin_view.export_types|length > 1 %}
+<li class="dropdown">
+    <a class="nav-link {{ btn_class }}"
+       data-toggle="dropdown"
+       href="javascript:void(0)"
+       role="button"
+       aria-haspopup="true"
+       aria-expanded="false">
+        {{ _gettext('Export') }}
+        <b class="caret"></b>
+    </a>
+    <div class="dropdown-menu">
+        {% for export_type in admin_view.export_types %}
+            <a class="dropdown-item"
+               href="{{ get_url('.export', export_type=export_type, **request.args) }}"
+               title="{{ _gettext('Export') }}">
+                {{ _gettext('Export') + ' ' + export_type|upper }}
+            </a>
+        {% endfor %}
+    </div>
+</li>
+{% else %}
+<li>
+    <a class="nav-link"
+       href="{{ get_url('.export', export_type=admin_view.export_types[0], **request.args) }}"
+       title="{{ _gettext('Export') }}">
+        {{ _gettext('Export') }}
+    </a>
+</li>
+{% endif %}
+{% endmacro %}
+{% macro filter_form() %}
+<form id="filter_form" method="GET" action="{{ return_url }}">
+{% if sort_column is not none %}
+<input type="hidden" name="sort" value="{{ sort_column }}">
+{% endif %}
+{% if sort_desc %}
+<input type="hidden" name="desc" value="{{ sort_desc }}">
+{% endif %}
+{% if search %}
+<input type="hidden" name="search" value="{{ search }}">
+{% endif %}
+{% if page_size != default_page_size %}
+<input type="hidden" name="page_size" value="{{ page_size }}">
+{% endif %}
+<div class="pull-right">
+<button type="submit" class="btn btn-primary" style="display: none">
+    {{ _gettext('Apply') }}
+</button>
+{% if active_filters %}
+    <a href="{{ clear_search_url }}" class="btn btn-secondary">
+        {{ _gettext('Reset Filters') }}
+    </a>
+{% endif %}
+</div>
+<table class="filters"></table>
+</form>
+<div class="clearfix"></div>
+{% endmacro %}
+{% macro search_form(input_class="col-auto") %}
+<form method="GET" action="{{ return_url }}" class="form-inline my-2 my-lg-0" role="search">
+{% for flt_name, flt_value in filter_args.items() %}
+<input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}">
+{% endfor %}
+{% if page_size != default_page_size %}
+<input type="hidden" name="page_size" value="{{ page_size }}">
+{% endif %}
+{% if sort_column is not none %}
+<input type="hidden" name="sort" value="{{ sort_column }}">
+{% endif %}
+{% if sort_desc %}
+<input type="hidden" name="desc" value="{{ sort_desc }}">
+{% endif %}
+{% if search %}
+<div class="form-inline input-group">
+<input class="form-control {{ input_class }}"
+       size="30"
+       type="text"
+       name="search"
+       value="{{ search }}"
+       placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
+<div class="input-group-append">
+    <span class="input-group-text">
+        <a href="{{ clear_search_url }}" class="align-middle">
+            <span class="fa fa-times glyphicon glyphicon-remove"></span>
+        </a>
+    </span>
+</div>
+<button class="btn btn-secondary my-2 my-sm-0 ml-2" type="submit">
+    {{ _gettext('Search') }}
+</button>
+</div>
+{% else %}
+<div class="form-inline">
+<input class="form-control {{ input_class }}"
+       size="30"
+       type="text"
+       name="search"
+       value=""
+       placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
+<button class="btn btn-secondary my-2 my-sm-0 ml-2" type="submit">
+    {{ _gettext('Search') }}
+</button>
+</div>
+{% endif %}
+</form>
+{% endmacro %}
+{% macro page_size_form(generator, btn_class='nav-link dropdown-toggle') %}
+<a class="{{ btn_class }}" data-toggle="dropdown" href="javascript:void(0)">
+{{ page_size }} {{ _gettext('items') }}
+<b class="caret"></b>
+</a>
+<div class="dropdown-menu">
+<a class="dropdown-item{% if page_size == 20 %}active{% endif %}" href="{{ generator(20) }}">
+20 {{ _gettext('items') }}
+</a>
+<a class="dropdown-item{% if page_size == 50 %}active{% endif %}" href="{{ generator(50) }}">
+50 {{ _gettext('items') }}
+</a>
+<a class="dropdown-item{% if page_size == 100 %}active{% endif %}" href="{{ generator(100) }}">
+100 {{ _gettext('items') }}
+</a>
+</div>
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap4/admin/model/list.html b/tests/flask_admin/bootstrap4/admin/model/list.html
new file mode 100755
index 0000000..f5aa267
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/list.html
@@ -0,0 +1,198 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/model/layout.html' as model_layout with context %}
+{% import 'admin/actions.html' as actionlib with context %}
+{% import 'admin/model/row_actions.html' as row_actions with context %}
+{% block head %}
+    {{ super() }}
+    {{ lib.form_css() }}
+{% endblock %}
+{% block body %}
+    {% block model_menu_bar %}
+        <ul class="nav nav-tabs">
+            <li class="nav-item">
+                <a href="javascript:void(0)" class="nav-link active">
+                    {{ _gettext('List') }}
+                    {% if count %}({{ count }}){% endif %}
+                </a>
+            </li>
+            {% if admin_view.can_create %}
+                <li class="nav-item">
+                    {%- if admin_view.create_modal - %}
+                    {{ lib.add_modal_button(url=get_url('.create_view', url=return_url, modal=True), btn_class='nav-link', title=_gettext('Create New Record'), content=_gettext('Create')) }}
+                {% else %}
+                    <a href="{{ get_url('.create_view', url=return_url) }}"
+                       title="{{ _gettext('Create New Record') }}"
+                       class="nav-link">
+                        {{ _gettext('Create') }}
+                    </a>
+                    {%- endif - %}
+                </li>
+            {% endif %}
+            {% if admin_view.can_export %}{{ model_layout.export_options() }}{% endif %}
+            {% block model_menu_bar_before_filters %}{% endblock %}
+            {% if filters %}
+                <li class="nav-item dropdown">
+                    {{ model_layout.filter_options() }}
+                </li>
+            {% endif %}
+            {% if can_set_page_size %}
+                <li class="nav-item dropdown">
+                    {{ model_layout.page_size_form(page_size_url) }}
+                </li>
+            {% endif %}
+            {% if actions %}
+                <li class="nav-item dropdown">
+                    {{ actionlib.dropdown(actions) }}
+                </li>
+            {% endif %}
+            {% if search_supported %}
+                <li class="nav-item ml-2">
+                    {{ model_layout.search_form() }}
+                </li>
+            {% endif %}
+            {% block model_menu_bar_after_filters %}{% endblock %}
+        </ul>
+    {% endblock %}
+    {% if filters %}
+        {{ model_layout.filter_form() }}
+        <div class="clearfix"></div>
+    {% endif %}
+    {% block model_list_table %}
+        <div class="table-responsive">
+            <table class="table table-striped table-bordered table-hover model-list">
+                <thead>
+                    <tr>
+                        {% block list_header scoped %}
+                            {% if actions %}
+                                <th class="list-checkbox-column">
+                                    <input type="checkbox"
+                                           name="rowtoggle"
+                                           class="action-rowtoggle"
+                                           title="{{ _gettext('Select all records') }}"/>
+                                </th>
+                            {% endif %}
+                            {% block list_row_actions_header %}
+                                {% if admin_view.column_display_actions %}
+                                    <th class="">&nbsp;</th>
+                                {% endif %}
+                            {% endblock %}
+                            {% for c, name in list_columns %}
+                                {% set column = loop.index0 %}
+                                <th class="column-header col-{{c}}">
+                                    {% if admin_view.is_sortable(c) %}
+                                        {% if sort_column == column %}
+                                            <a href="{{ sort_url(column, True) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=name) }}">
+                                                {{ name }}
+                                                {% if sort_desc %}
+                                                    <span class="fa fa-chevron-up glyphicon glyphicon-chevron-up"></span>
+                                                {% else %}
+                                                    <span class="fa fa-chevron-down glyphicon glyphicon-chevron-down"></span>
+                                                {% endif %}
+                                            </a>
+                                        {% else %}
+                                            <a href="{{ sort_url(column) }}"
+                                               title="{{ _gettext('Sort by %(name)s', name=name) }}">
+                                                {{ name }}
+                                            </a>
+                                        {% endif %}
+                                    {% else %}
+                                        {{ name }}
+                                    {% endif %}
+                                    {% if admin_view.column_descriptions.get(c) %}
+                                        <a class="fa fa-question-circle glyphicon glyphicon-question-sign"
+                                           title="{{ admin_view.column_descriptions[c] }}"
+                                           href="javascript:void(0)"
+                                           data-role="tooltip"></a>
+                                    {% endif %}
+                                </th>
+                            {% endfor %}
+                        {% endblock %}
+                    </tr>
+                </thead>
+                {% for row in data %}
+                    <tr>
+                        {% block list_row scoped %}
+                            {% if actions %}
+                                <td>
+                                    <input type="checkbox"
+                                           name="rowid"
+                                           class="action-checkbox"
+                                           value="{{ get_pk_value(row) }}"
+                                           title="{{ _gettext('Select record') }}"/>
+                                </td>
+                            {% endif %}
+                            {% block list_row_actions_column scoped %}
+                                {% if admin_view.column_display_actions %}
+                                    <td class="list-buttons-column">
+                                        {% block list_row_actions scoped %}
+                                            {% for action in list_row_actions %}{{ action.render_ctx(get_pk_value(row), row) }}{% endfor %}
+                                        {% endblock %}
+                                    </td>
+                                    {%- endif - %}
+                                {% endblock %}
+                                {% for c, name in list_columns %}
+                                    <td class="col-{{c}}">
+                                        {% if admin_view.is_editable(c) %}
+                                            {% set form = list_forms[get_pk_value(row)] %}
+                                            {% if form.csrf_token %}
+                                                {{ form[c](pk=get_pk_value(row), display_value=get_value(row, c), csrf=form.csrf_token._value()) }}
+                                            {% elif csrf_token %}
+                                                {{ form[c](pk=get_pk_value(row), display_value=get_value(row, c), csrf=csrf_token()) }}
+                                            {% else %}
+                                                {{ form[c](pk=get_pk_value(row), display_value=get_value(row, c)) }}
+                                            {% endif %}
+                                        {% else %}
+                                            {{ get_value(row, c) }}
+                                        {% endif %}
+                                    </td>
+                                {% endfor %}
+                            {% endblock %}
+                        </tr>
+                    {% else %}
+                        <tr>
+                            <td colspan="999">
+                                {% block empty_list_message %}
+                                    <div class="text-center">
+                                        {{ admin_view.get_empty_list_message() }}
+                                    </div>
+                                {% endblock %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </table>
+            </div>
+            {% block list_pager %}
+                {% if num_pages is not none %}
+                    {{ lib.pager(page, num_pages, pager_url) }}
+                {% else %}
+                    {{ lib.simple_pager(page, data|length == page_size, pager_url) }}
+                {% endif %}
+            {% endblock %}
+        {% endblock %}
+        {% block actions %}
+            {{ actionlib.form(actions, get_url('.action_view')) }}
+        {% endblock %}
+        {%- if admin_view.edit_modal or admin_view.create_modal or admin_view.details_modal - %}
+        {{ lib.add_modal_window() }}
+        {%- endif - %}
+    {% endblock %}
+    {% block tail %}
+        {{ super() }}
+        {% if filter_groups %}
+            <div id="filter-groups-data" style="display:none;">
+                {{ filter_groups|tojson|safe }}
+            </div>
+            <div id="active-filters-data" style="display:none;">
+                {{ active_filters|tojson|safe }}
+            </div>
+        {% endif %}
+        {{ lib.form_js() }}
+        <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
+        <script src="{{ admin_static.url(filename='admin/js/bs4_filters.js', v='1.0.0') }}"></script>
+        {{ actionlib.script(_gettext('Please select at least one record.'),
+        actions,
+        actions_confirmation) }}
+    {% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/model/modals/create.html b/tests/flask_admin/bootstrap4/admin/model/modals/create.html
new file mode 100644
index 0000000..3eba723
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/modals/create.html
@@ -0,0 +1,31 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{# store the jinja2 context for form_rules rendering logic #}
+{% set render_ctx = h.resolve_ctx() %}
+{% block body %}
+    <div class="modal-header">
+        {% block header_text %}
+            <h5 class="modal-title">{{ _gettext('Create New Record') }}</h5>
+        {% endblock %}
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    {% call lib.form_tag(action=url_for('.create_view', url=return_url)) %}
+    <div class="modal-body">
+        {{ lib.render_form_fields(form, form_opts=form_opts) }}
+    </div>
+    <div class="modal-footer">
+        {{ lib.render_form_buttons(return_url, extra=None, is_modal=True) }}
+    </div>
+{% endcall %}
+{# "save and add" button is removed from modal (it won't function properly) #}
+    {# % block create_form %}
+{{ lib.render_form(form, return_url, extra=None, form_opts=form_opts,
+action=url_for('.create_view', url=return_url),
+is_modal=True) }}
+{% endblock % #}
+{% endblock %}
+{% block tail %}
+<script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/model/modals/details.html b/tests/flask_admin/bootstrap4/admin/model/modals/details.html
new file mode 100755
index 0000000..4d816a1
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/modals/details.html
@@ -0,0 +1,40 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{% block body %}
+    <div class="modal-header">
+        {% block header_text %}
+            <h3>{{ _gettext('View Record') + ' #' + request.args.get('id') }}</h3>
+        {% endblock %}
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        {% block details_search %}
+            <div class="form-inline fa_filter_container col-lg-6">
+                <label for="fa_filter">
+                    {{ _gettext('Filter') }}
+                </label>
+                <input id="fa_filter" type="text" class="ml-3 form-control">
+            </div>
+        {% endblock %}
+        {% block details_table %}
+            <table class="table table-hover table-bordered searchable">
+                {% for c, name in details_columns %}
+                    <tr>
+                        <td>
+                            <b>
+                            {{ name }}
+                            </b>
+                        </td>
+                        <td>{{ get_value(model, c) }}</td>
+                    </tr>
+                {% endfor %}
+            </table>
+        {% endblock %}
+    </div>
+{% endblock %}
+{% block tail %}
+    <script src="{{ admin_static.url(filename='admin/js/details_filter.js', v='1.0.0') }}"></script>
+    <script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/model/modals/edit.html b/tests/flask_admin/bootstrap4/admin/model/modals/edit.html
new file mode 100644
index 0000000..fd62e4c
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/modals/edit.html
@@ -0,0 +1,27 @@
+{% import 'admin/static.html' as admin_static with context %}
+{% import 'admin/lib.html' as lib with context %}
+{# store the jinja2 context for form_rules rendering logic #}
+{% set render_ctx = h.resolve_ctx() %}
+{% block body %}
+    <div class="modal-header">
+        {% block header_text %}
+            <h5 class="modal-title">
+                {{ _gettext('Edit Record') + ' #' + request.args.get('id') }}
+            </h5>
+        {% endblock %}
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    {% call lib.form_tag(action=url_for('.edit_view', id=request.args.get('id'), url=return_url)) %}
+    <div class="modal-body">
+        {{ lib.render_form_fields(form, form_opts=form_opts) }}
+    </div>
+    <div class="modal-footer">
+        {{ lib.render_form_buttons(return_url, extra=None, is_modal=True) }}
+    </div>
+{% endcall %}
+{% endblock %}
+{% block tail %}
+<script src="{{ admin_static.url(filename='admin/js/bs4_modal.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/model/row_actions.html b/tests/flask_admin/bootstrap4/admin/model/row_actions.html
new file mode 100644
index 0000000..816b509
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/model/row_actions.html
@@ -0,0 +1,37 @@
+{% import 'admin/lib.html' as lib with context %}
+{% macro link(action, url, icon_class=None) %}
+<a class="icon" href="{{ url }}" title="{{ action.title or '' }}">
+    <span class="{{ icon_class or action.icon_class }}"></span>
+</a>
+{% endmacro %}
+{% macro view_row(action, row_id, row) %}
+{{ link(action, get_url('.details_view', id=row_id, url=return_url), 'fa fa-eye glyphicon glyphicon-eye-open') }}
+{% endmacro %}
+{% macro view_row_popup(action, row_id, row) %}
+{{ lib.add_modal_button(url=get_url('.details_view', id=row_id, url=return_url, modal=True), title=action.title, content='
+<span class="fa fa-eye glyphicon glyphicon-eye-open"></span>
+') }}
+{% endmacro %}
+{% macro edit_row(action, row_id, row) %}
+{{ link(action, get_url('.edit_view', id=row_id, url=return_url), 'fa fa-pencil glyphicon glyphicon-pencil') }}
+{% endmacro %}
+{% macro edit_row_popup(action, row_id, row) %}
+{{ lib.add_modal_button(url=get_url('.edit_view', id=row_id, url=return_url, modal=True), title=action.title, content='
+<span class="fa fa-pencil glyphicon glyphicon-pencil"></span>
+') }}
+{% endmacro %}
+{% macro delete_row(action, row_id, row) %}
+<form class="icon" method="POST" action="{{ get_url('.delete_view') }}">
+{{ delete_form.id(value=get_pk_value(row)) }}
+{{ delete_form.url(value=return_url) }}
+{% if delete_form.csrf_token %}
+{{ delete_form.csrf_token }}
+{% elif csrf_token %}
+<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+{% endif %}
+<button onclick="return faHelpers.safeConfirm('{{ _gettext('Are you sure you want to delete this record?') }}');"
+        title="{{ _gettext('Delete record') }}">
+<span class="fa fa-trash glyphicon glyphicon-trash"></span>
+</button>
+</form>
+{% endmacro %}
diff --git a/tests/flask_admin/bootstrap4/admin/rediscli/console.html b/tests/flask_admin/bootstrap4/admin/rediscli/console.html
new file mode 100644
index 0000000..82cb982
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/rediscli/console.html
@@ -0,0 +1,24 @@
+{% extends 'admin/master.html' %}
+{% import 'admin/lib.html' as lib with context %}
+{% import 'admin/static.html' as admin_static with context %}
+{% block head %}
+    {{ super() }}
+    <link href="{{ admin_static.url(filename='admin/css/bootstrap4/rediscli.css', v='1.0.0') }}" rel="stylesheet">
+{% endblock %}
+{% block body %}
+    <div class="console">
+        <div class="console-container"></div>
+        <div class="console-line mb-4">
+            <form action="#">
+                <input type="text"></input>
+            </form>
+        </div>
+    </div>
+{% endblock %}
+{% block tail %}
+    {{ super() }}
+    <div id="execute-view-data" style="display:none;">
+        {{ admin_view.get_url('.execute_view')|tojson|safe }}
+    </div>
+    <script src="{{ admin_static.url(filename='admin/js/rediscli.js', v='1.0.0') }}"></script>
+{% endblock %}
diff --git a/tests/flask_admin/bootstrap4/admin/rediscli/response.html b/tests/flask_admin/bootstrap4/admin/rediscli/response.html
new file mode 100644
index 0000000..661852c
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/rediscli/response.html
@@ -0,0 +1,35 @@
+{% macro render(item, depth=0) %}
+{% set type = type_name(item) %}
+{% if type == 'tuple' or type == 'list' %}
+    {% if not item %}
+        Empty {{ type }}.
+    {% else %}
+        {% for n in item %}
+            {{ loop.index }}) {{ render(n, depth + 1) }}
+            <br/>
+        {% endfor %}
+    {% endif %}
+{% elif type == 'bool' %}
+    {% if depth == 0 and item %}
+        OK
+    {% else %}
+        <span class="type-bool">{{ item }}</span>
+    {% endif %}
+{% elif type == 'str' or type == 'unicode' %}
+    "{{ item }}"
+{% elif type == 'bytes' %}
+    "{{ item.decode('utf-8') }}"
+{% elif type == 'TextWrapper' %}
+    <pre>
+{{ item }}
+    </pre>
+{% elif type == 'dict' %}
+    {% for k, v in item.items() %}
+        {{ loop.index }}) {{ k }} - {{ render(v, depth + 1) }}
+        <br/>
+    {% endfor %}
+{% else %}
+    {{ item }}
+{% endif %}
+{% endmacro %}
+{{ render(result) }}
diff --git a/tests/flask_admin/bootstrap4/admin/static.html b/tests/flask_admin/bootstrap4/admin/static.html
new file mode 100644
index 0000000..811f9ba
--- /dev/null
+++ b/tests/flask_admin/bootstrap4/admin/static.html
@@ -0,0 +1,3 @@
+{% macro url() - %}
+{{ get_url('{admin_endpoint}.static'.format(admin_endpoint=admin_view.admin.endpoint), *varargs, **kwargs) }}
+{%- endmacro %}
diff --git a/tests/jinja_adminlte/calendar.html b/tests/jinja_adminlte/calendar.html
new file mode 100644
index 0000000..526c4f4
--- /dev/null
+++ b/tests/jinja_adminlte/calendar.html
@@ -0,0 +1,345 @@
+{% extends "layouts/base.html" %}
+{% block title %}Blank Page {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- fullCalendar -->
+        <link rel="stylesheet" href="/static/assets/plugins/fullcalendar/main.min.css">
+        <link rel="stylesheet" href="/static/assets/plugins/fullcalendar-daygrid/main.min.css">
+        <link rel="stylesheet" href="/static/assets/plugins/fullcalendar-timegrid/main.min.css">
+        <link rel="stylesheet" href="/static/assets/plugins/fullcalendar-bootstrap/main.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>Calendar</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Calendar
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="sticky-top mb-3">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h4 class="card-title">Draggable Events</h4>
+                                    </div>
+                                    <div class="card-body">
+                                        <!-- the events -->
+                                        <div id="external-events">
+                                            <div class="external-event bg-success">
+                                                Lunch
+                                            </div>
+                                            <div class="external-event bg-warning">
+                                                Go home
+                                            </div>
+                                            <div class="external-event bg-info">
+                                                Do homework
+                                            </div>
+                                            <div class="external-event bg-primary">
+                                                Work on UI design
+                                            </div>
+                                            <div class="external-event bg-danger">
+                                                Sleep tight
+                                            </div>
+                                            <div class="checkbox">
+                                                <label for="drop-remove">
+                                                    <input type="checkbox" id="drop-remove">
+                                                    remove after drop
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!-- /.card-body -->
+                                </div>
+                                <!-- /.card -->
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Create Event</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
+                                            <ul class="fc-color-picker" id="color-chooser">
+                                                <li>
+                                                    <a class="text-primary" href="#">
+                                                        <i class="fas fa-square"></i>
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a class="text-warning" href="#">
+                                                        <i class="fas fa-square"></i>
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a class="text-success" href="#">
+                                                        <i class="fas fa-square"></i>
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a class="text-danger" href="#">
+                                                        <i class="fas fa-square"></i>
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a class="text-muted" href="#">
+                                                        <i class="fas fa-square"></i>
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <!-- /btn-group -->
+                                        <div class="input-group">
+                                            <input id="new-event"
+                                                   type="text"
+                                                   class="form-control"
+                                                   placeholder="Event Title">
+                                            <div class="input-group-append">
+                                                <button id="add-new-event" type="button" class="btn btn-primary">
+                                                    Add
+                                                </button>
+                                            </div>
+                                            <!-- /btn-group -->
+                                        </div>
+                                        <!-- /input-group -->
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-9">
+                            <div class="card card-primary">
+                                <div class="card-body p-0">
+                                    <!-- THE CALENDAR -->
+                                    <div id="calendar"></div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- /.content -->
+        </div>
+        <!-- /.content-wrapper -->
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <!-- jQuery UI -->
+        <script src="/static/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
+        <!-- AdminLTE App -->
+        <script src="/static/assets/js/adminlte.min.js"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="/static/assets/js/demo.js"></script>
+        <!-- fullCalendar 2.2.5 -->
+        <script src="/static/assets/plugins/moment/moment.min.js"></script>
+        <script src="/static/assets/plugins/fullcalendar/main.min.js"></script>
+        <script src="/static/assets/plugins/fullcalendar-daygrid/main.min.js"></script>
+        <script src="/static/assets/plugins/fullcalendar-timegrid/main.min.js"></script>
+        <script src="/static/assets/plugins/fullcalendar-interaction/main.min.js"></script>
+        <script src="/static/assets/plugins/fullcalendar-bootstrap/main.min.js"></script>
+        <!-- Page specific script -->
+        <script>
+    $(function () {
+
+      /* initialize the external events
+      -----------------------------------------------------------------*/
+      function ini_events(ele) {
+        ele.each(function () {
+
+          // create an Event Object (https://fullcalendar.io/docs/event-object)
+          // it doesn't need to have a start or end
+          var eventObject = {
+            title: $.trim($(this).text()) // use the element's text as the event title
+          }
+
+          // store the Event Object in the DOM element so we can get to it later
+          $(this).data('eventObject', eventObject)
+
+          // make the event draggable using jQuery UI
+          $(this).draggable({
+            zIndex        : 1070,
+            revert        : true, // will cause the event to go back to its
+            revertDuration: 0  //  original position after the drag
+          })
+
+        })
+      }
+
+      ini_events($('#external-events div.external-event'))
+
+      /* initialize the calendar
+      -----------------------------------------------------------------*/
+      //Date for the calendar events (dummy data)
+      var date = new Date()
+      var d    = date.getDate(),
+          m    = date.getMonth(),
+          y    = date.getFullYear()
+
+      var Calendar = FullCalendar.Calendar;
+      var Draggable = FullCalendarInteraction.Draggable;
+
+      var containerEl = document.getElementById('external-events');
+      var checkbox = document.getElementById('drop-remove');
+      var calendarEl = document.getElementById('calendar');
+
+      // initialize the external events
+      // -----------------------------------------------------------------
+
+      new Draggable(containerEl, {
+        itemSelector: '.external-event',
+        eventData: function(eventEl) {
+          console.log(eventEl);
+          return {
+            title: eventEl.innerText,
+            backgroundColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
+            borderColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
+            textColor: window.getComputedStyle( eventEl ,null).getPropertyValue('color'),
+          };
+        }
+      });
+
+      var calendar = new Calendar(calendarEl, {
+        plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
+        header    : {
+          left  : 'prev,next today',
+          center: 'title',
+          right : 'dayGridMonth,timeGridWeek,timeGridDay'
+        },
+        'themeSystem': 'bootstrap',
+        //Random default events
+        events    : [
+          {
+            title          : 'All Day Event',
+            start          : new Date(y, m, 1),
+            backgroundColor: '#f56954', //red
+            borderColor    : '#f56954', //red
+            allDay         : true
+          },
+          {
+            title          : 'Long Event',
+            start          : new Date(y, m, d - 5),
+            end            : new Date(y, m, d - 2),
+            backgroundColor: '#f39c12', //yellow
+            borderColor    : '#f39c12' //yellow
+          },
+          {
+            title          : 'Meeting',
+            start          : new Date(y, m, d, 10, 30),
+            allDay         : false,
+            backgroundColor: '#0073b7', //Blue
+            borderColor    : '#0073b7' //Blue
+          },
+          {
+            title          : 'Lunch',
+            start          : new Date(y, m, d, 12, 0),
+            end            : new Date(y, m, d, 14, 0),
+            allDay         : false,
+            backgroundColor: '#00c0ef', //Info (aqua)
+            borderColor    : '#00c0ef' //Info (aqua)
+          },
+          {
+            title          : 'Birthday Party',
+            start          : new Date(y, m, d + 1, 19, 0),
+            end            : new Date(y, m, d + 1, 22, 30),
+            allDay         : false,
+            backgroundColor: '#00a65a', //Success (green)
+            borderColor    : '#00a65a' //Success (green)
+          },
+          {
+            title          : 'Click for Google',
+            start          : new Date(y, m, 28),
+            end            : new Date(y, m, 29),
+            url            : 'https://www.google.com/',
+            backgroundColor: '#3c8dbc', //Primary (light-blue)
+            borderColor    : '#3c8dbc' //Primary (light-blue)
+          }
+        ],
+        editable  : true,
+        droppable : true, // this allows things to be dropped onto the calendar !!!
+        drop      : function(info) {
+          // is the "remove after drop" checkbox checked?
+          if (checkbox.checked) {
+            // if so, remove the element from the "Draggable Events" list
+            info.draggedEl.parentNode.removeChild(info.draggedEl);
+          }
+        }
+      });
+
+      calendar.render();
+      // $('#calendar').fullCalendar()
+
+      /* ADDING EVENTS */
+      var currColor = '#3c8dbc' //Red by default
+      //Color chooser button
+      $('#color-chooser > li > a').click(function (e) {
+        e.preventDefault()
+        //Save color
+        currColor = $(this).css('color')
+        //Add color effect to button
+        $('#add-new-event').css({
+          'background-color': currColor,
+          'border-color'    : currColor
+        })
+      })
+      $('#add-new-event').click(function (e) {
+        e.preventDefault()
+        //Get value and make sure it is not null
+        var val = $('#new-event').val()
+        if (val.length == 0) {
+          return
+        }
+
+        //Create events
+        var event = $('<div />')
+        event.css({
+          'background-color': currColor,
+          'border-color'    : currColor,
+          'color'           : '#fff'
+        }).addClass('external-event')
+        event.html(val)
+        $('#external-events').prepend(event)
+
+        //Add draggable funtionality
+        ini_events(event)
+
+        //Remove event from text input
+        $('#new-event').val('')
+      })
+    })
+        </script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/charts-chartjs.html b/tests/jinja_adminlte/charts-chartjs.html
new file mode 100644
index 0000000..53ce15f
--- /dev/null
+++ b/tests/jinja_adminlte/charts-chartjs.html
@@ -0,0 +1,383 @@
+{% extends "layouts/base.html" %}
+{% block title %}ChartsJS {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>ChartJS</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                ChartJS
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-md-6">
+                        <!-- AREA CHART -->
+                        <div class="card card-primary">
+                            <div class="card-header">
+                                <h3 class="card-title">Area Chart</h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div class="chart">
+                                    <canvas id="areaChart"
+                                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
+                                </div>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <!-- DONUT CHART -->
+                        <div class="card card-danger">
+                            <div class="card-header">
+                                <h3 class="card-title">Donut Chart</h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <canvas id="donutChart"
+                                        style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <!-- PIE CHART -->
+                        <div class="card card-danger">
+                            <div class="card-header">
+                                <h3 class="card-title">Pie Chart</h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <canvas id="pieChart"
+                                        style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col (LEFT) -->
+                    <div class="col-md-6">
+                        <!-- LINE CHART -->
+                        <div class="card card-info">
+                            <div class="card-header">
+                                <h3 class="card-title">Line Chart</h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div class="chart">
+                                    <canvas id="lineChart"
+                                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
+                                </div>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <!-- BAR CHART -->
+                        <div class="card card-success">
+                            <div class="card-header">
+                                <h3 class="card-title">Bar Chart</h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div class="chart">
+                                    <canvas id="barChart"
+                                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
+                                </div>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <!-- STACKED BAR CHART -->
+                        <div class="card card-success">
+                            <div class="card-header">
+                                <h3 class="card-title">Stacked Bar Chart</h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div class="chart">
+                                    <canvas id="stackedBarChart"
+                                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
+                                </div>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col (RIGHT) -->
+                </div>
+                <!-- /.row -->
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- ChartJS -->
+    <script src="/static/assets/plugins/chart.js/Chart.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+    <!-- page script -->
+    <script>
+    $(function () {
+      /* ChartJS
+      * -------
+      * Here we will create a few charts using ChartJS
+      */
+
+      //--------------
+      //- AREA CHART -
+      //--------------
+
+      // Get context with jQuery - using jQuery's .get() method.
+      var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
+
+      var areaChartData = {
+        labels  : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+          {
+            label               : 'Digital Goods',
+            backgroundColor     : 'rgba(60,141,188,0.9)',
+            borderColor         : 'rgba(60,141,188,0.8)',
+            pointRadius          : false,
+            pointColor          : '#3b8bba',
+            pointStrokeColor    : 'rgba(60,141,188,1)',
+            pointHighlightFill  : '#fff',
+            pointHighlightStroke: 'rgba(60,141,188,1)',
+            data                : [28, 48, 40, 19, 86, 27, 90]
+          },
+          {
+            label               : 'Electronics',
+            backgroundColor     : 'rgba(210, 214, 222, 1)',
+            borderColor         : 'rgba(210, 214, 222, 1)',
+            pointRadius         : false,
+            pointColor          : 'rgba(210, 214, 222, 1)',
+            pointStrokeColor    : '#c1c7d1',
+            pointHighlightFill  : '#fff',
+            pointHighlightStroke: 'rgba(220,220,220,1)',
+            data                : [65, 59, 80, 81, 56, 55, 40]
+          },
+        ]
+      }
+
+      var areaChartOptions = {
+        maintainAspectRatio : false,
+        responsive : true,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            gridLines : {
+              display : false,
+            }
+          }],
+          yAxes: [{
+            gridLines : {
+              display : false,
+            }
+          }]
+        }
+      }
+
+      // This will get the first returned node in the jQuery collection.
+      var areaChart       = new Chart(areaChartCanvas, {
+        type: 'line',
+        data: areaChartData,
+        options: areaChartOptions
+      })
+
+      //-------------
+      //- LINE CHART -
+      //--------------
+      var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
+      var lineChartOptions = $.extend(true, {}, areaChartOptions)
+      var lineChartData = $.extend(true, {}, areaChartData)
+      lineChartData.datasets[0].fill = false;
+      lineChartData.datasets[1].fill = false;
+      lineChartOptions.datasetFill = false
+
+      var lineChart = new Chart(lineChartCanvas, {
+        type: 'line',
+        data: lineChartData,
+        options: lineChartOptions
+      })
+
+      //-------------
+      //- DONUT CHART -
+      //-------------
+      // Get context with jQuery - using jQuery's .get() method.
+      var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
+      var donutData        = {
+        labels: [
+            'Chrome',
+            'IE',
+            'FireFox',
+            'Safari',
+            'Opera',
+            'Navigator',
+        ],
+        datasets: [
+          {
+            data: [700,500,400,600,300,100],
+            backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
+          }
+        ]
+      }
+      var donutOptions     = {
+        maintainAspectRatio : false,
+        responsive : true,
+      }
+      //Create pie or douhnut chart
+      // You can switch between pie and douhnut using the method below.
+      var donutChart = new Chart(donutChartCanvas, {
+        type: 'doughnut',
+        data: donutData,
+        options: donutOptions
+      })
+
+      //-------------
+      //- PIE CHART -
+      //-------------
+      // Get context with jQuery - using jQuery's .get() method.
+      var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
+      var pieData        = donutData;
+      var pieOptions     = {
+        maintainAspectRatio : false,
+        responsive : true,
+      }
+      //Create pie or douhnut chart
+      // You can switch between pie and douhnut using the method below.
+      var pieChart = new Chart(pieChartCanvas, {
+        type: 'pie',
+        data: pieData,
+        options: pieOptions
+      })
+
+      //-------------
+      //- BAR CHART -
+      //-------------
+      var barChartCanvas = $('#barChart').get(0).getContext('2d')
+      var barChartData = $.extend(true, {}, areaChartData)
+      var temp0 = areaChartData.datasets[0]
+      var temp1 = areaChartData.datasets[1]
+      barChartData.datasets[0] = temp1
+      barChartData.datasets[1] = temp0
+
+      var barChartOptions = {
+        responsive              : true,
+        maintainAspectRatio     : false,
+        datasetFill             : false
+      }
+
+      var barChart = new Chart(barChartCanvas, {
+        type: 'bar',
+        data: barChartData,
+        options: barChartOptions
+      })
+
+      //---------------------
+      //- STACKED BAR CHART -
+      //---------------------
+      var stackedBarChartCanvas = $('#stackedBarChart').get(0).getContext('2d')
+      var stackedBarChartData = $.extend(true, {}, barChartData)
+
+      var stackedBarChartOptions = {
+        responsive              : true,
+        maintainAspectRatio     : false,
+        scales: {
+          xAxes: [{
+            stacked: true,
+          }],
+          yAxes: [{
+            stacked: true
+          }]
+        }
+      }
+
+      var stackedBarChart = new Chart(stackedBarChartCanvas, {
+        type: 'bar',
+        data: stackedBarChartData,
+        options: stackedBarChartOptions
+      })
+    })
+    </script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/charts-flot.html b/tests/jinja_adminlte/charts-flot.html
new file mode 100644
index 0000000..ac30b16
--- /dev/null
+++ b/tests/jinja_adminlte/charts-flot.html
@@ -0,0 +1,483 @@
+{% extends "layouts/base.html" %}
+{% block title %}Flot Charts {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Flot Charts</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Flot
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-12">
+                        <!-- interactive chart -->
+                        <div class="card card-primary card-outline">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    <i class="far fa-chart-bar"></i>
+                                    Interactive Area Chart
+                                </h3>
+                                <div class="card-tools">
+                                    Real time
+                                    <div class="btn-group" id="realtime" data-toggle="btn-toggle">
+                                        <button type="button" class="btn btn-default btn-sm active" data-toggle="on">
+                                            On
+                                        </button>
+                                        <button type="button" class="btn btn-default btn-sm" data-toggle="off">
+                                            Off
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="interactive" style="height: 300px;"></div>
+                            </div>
+                            <!-- /.card-body-->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+                <div class="row">
+                    <div class="col-md-6">
+                        <!-- Line chart -->
+                        <div class="card card-primary card-outline">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    <i class="far fa-chart-bar"></i>
+                                    Line Chart
+                                </h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="line-chart" style="height: 300px;"></div>
+                            </div>
+                            <!-- /.card-body-->
+                        </div>
+                        <!-- /.card -->
+                        <!-- Area chart -->
+                        <div class="card card-primary card-outline">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    <i class="far fa-chart-bar"></i>
+                                    Area Chart
+                                </h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="area-chart" style="height: 338px;" class="full-width-chart"></div>
+                            </div>
+                            <!-- /.card-body-->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col -->
+                    <div class="col-md-6">
+                        <!-- Bar chart -->
+                        <div class="card card-primary card-outline">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    <i class="far fa-chart-bar"></i>
+                                    Bar Chart
+                                </h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="bar-chart" style="height: 300px;"></div>
+                            </div>
+                            <!-- /.card-body-->
+                        </div>
+                        <!-- /.card -->
+                        <!-- Donut chart -->
+                        <div class="card card-primary card-outline">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    <i class="far fa-chart-bar"></i>
+                                    Donut Chart
+                                </h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div id="donut-chart" style="height: 300px;"></div>
+                            </div>
+                            <!-- /.card-body-->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- jQuery UI -->
+    <script src="/static/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+    <!-- FLOT CHARTS -->
+    <script src="/static/assets/plugins/flot/jquery.flot.js"></script>
+    <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
+    <script src="/static/assets/plugins/flot-old/jquery.flot.resize.min.js"></script>
+    <!-- FLOT PIE PLUGIN - also used to draw donut charts -->
+    <script src="/static/assets/plugins/flot-old/jquery.flot.pie.min.js"></script>
+    <!-- Page script -->
+    <script>
+    $(function () {
+      /*
+      * Flot Interactive Chart
+      * -----------------------
+      */
+      // We use an inline data source in the example, usually data would
+      // be fetched from a server
+      var data        = [],
+          totalPoints = 100
+
+      function getRandomData() {
+
+        if (data.length > 0) {
+          data = data.slice(1)
+        }
+
+        // Do a random walk
+        while (data.length < totalPoints) {
+
+          var prev = data.length > 0 ? data[data.length - 1] : 50,
+              y    = prev + Math.random() * 10 - 5
+
+          if (y < 0) {
+            y = 0
+          } else if (y > 100) {
+            y = 100
+          }
+
+          data.push(y)
+        }
+
+        // Zip the generated y values with the x values
+        var res = []
+        for (var i = 0; i < data.length; ++i) {
+          res.push([i, data[i]])
+        }
+
+        return res
+      }
+
+      var interactive_plot = $.plot('#interactive', [
+          {
+            data: getRandomData(),
+          }
+        ],
+        {
+          grid: {
+            borderColor: '#f3f3f3',
+            borderWidth: 1,
+            tickColor: '#f3f3f3'
+          },
+          series: {
+            color: '#3c8dbc',
+            lines: {
+              lineWidth: 2,
+              show: true,
+              fill: true,
+            },
+          },
+          yaxis: {
+            min: 0,
+            max: 100,
+            show: true
+          },
+          xaxis: {
+            show: true
+          }
+        }
+      )
+
+      var updateInterval = 500 //Fetch data ever x milliseconds
+      var realtime       = 'on' //If == to on then fetch data every x seconds. else stop fetching
+      function update() {
+
+        interactive_plot.setData([getRandomData()])
+
+        // Since the axes don't change, we don't need to call plot.setupGrid()
+        interactive_plot.draw()
+        if (realtime === 'on') {
+          setTimeout(update, updateInterval)
+        }
+      }
+
+      //INITIALIZE REALTIME DATA FETCHING
+      if (realtime === 'on') {
+        update()
+      }
+      //REALTIME TOGGLE
+      $('#realtime .btn').click(function () {
+        if ($(this).data('toggle') === 'on') {
+          realtime = 'on'
+        }
+        else {
+          realtime = 'off'
+        }
+        update()
+      })
+      /*
+      * END INTERACTIVE CHART
+      */
+
+
+      /*
+      * LINE CHART
+      * ----------
+      */
+      //LINE randomly generated data
+
+      var sin = [],
+          cos = []
+      for (var i = 0; i < 14; i += 0.5) {
+        sin.push([i, Math.sin(i)])
+        cos.push([i, Math.cos(i)])
+      }
+      var line_data1 = {
+        data : sin,
+        color: '#3c8dbc'
+      }
+      var line_data2 = {
+        data : cos,
+        color: '#00c0ef'
+      }
+      $.plot('#line-chart', [line_data1, line_data2], {
+        grid  : {
+          hoverable  : true,
+          borderColor: '#f3f3f3',
+          borderWidth: 1,
+          tickColor  : '#f3f3f3'
+        },
+        series: {
+          shadowSize: 0,
+          lines     : {
+            show: true
+          },
+          points    : {
+            show: true
+          }
+        },
+        lines : {
+          fill : false,
+          color: ['#3c8dbc', '#f56954']
+        },
+        yaxis : {
+          show: true
+        },
+        xaxis : {
+          show: true
+        }
+      })
+      //Initialize tooltip on hover
+      $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
+        position: 'absolute',
+        display : 'none',
+        opacity : 0.8
+      }).appendTo('body')
+      $('#line-chart').bind('plothover', function (event, pos, item) {
+
+        if (item) {
+          var x = item.datapoint[0].toFixed(2),
+              y = item.datapoint[1].toFixed(2)
+
+          $('#line-chart-tooltip').html(item.series.label + ' of ' + x + ' = ' + y)
+            .css({
+              top : item.pageY + 5,
+              left: item.pageX + 5
+            })
+            .fadeIn(200)
+        } else {
+          $('#line-chart-tooltip').hide()
+        }
+
+      })
+      /* END LINE CHART */
+
+      /*
+      * FULL WIDTH STATIC AREA CHART
+      * -----------------
+      */
+      var areaData = [[2, 88.0], [3, 93.3], [4, 102.0], [5, 108.5], [6, 115.7], [7, 115.6],
+        [8, 124.6], [9, 130.3], [10, 134.3], [11, 141.4], [12, 146.5], [13, 151.7], [14, 159.9],
+        [15, 165.4], [16, 167.8], [17, 168.7], [18, 169.5], [19, 168.0]]
+      $.plot('#area-chart', [areaData], {
+        grid  : {
+          borderWidth: 0
+        },
+        series: {
+          shadowSize: 0, // Drawing is faster without shadows
+          color     : '#00c0ef',
+          lines : {
+            fill: true //Converts the line chart to area chart
+          },
+        },
+        yaxis : {
+          show: false
+        },
+        xaxis : {
+          show: false
+        }
+      })
+
+      /* END AREA CHART */
+
+      /*
+      * BAR CHART
+      * ---------
+      */
+
+      var bar_data = {
+        data : [[1,10], [2,8], [3,4], [4,13], [5,17], [6,9]],
+        bars: { show: true }
+      }
+      $.plot('#bar-chart', [bar_data], {
+        grid  : {
+          borderWidth: 1,
+          borderColor: '#f3f3f3',
+          tickColor  : '#f3f3f3'
+        },
+        series: {
+          bars: {
+            show: true, barWidth: 0.5, align: 'center',
+          },
+        },
+        colors: ['#3c8dbc'],
+        xaxis : {
+          ticks: [[1,'January'], [2,'February'], [3,'March'], [4,'April'], [5,'May'], [6,'June']]
+        }
+      })
+      /* END BAR CHART */
+
+      /*
+      * DONUT CHART
+      * -----------
+      */
+
+      var donutData = [
+        {
+          label: 'Series2',
+          data : 30,
+          color: '#3c8dbc'
+        },
+        {
+          label: 'Series3',
+          data : 20,
+          color: '#0073b7'
+        },
+        {
+          label: 'Series4',
+          data : 50,
+          color: '#00c0ef'
+        }
+      ]
+      $.plot('#donut-chart', donutData, {
+        series: {
+          pie: {
+            show       : true,
+            radius     : 1,
+            innerRadius: 0.5,
+            label      : {
+              show     : true,
+              radius   : 2 / 3,
+              formatter: labelFormatter,
+              threshold: 0.1
+            }
+
+          }
+        },
+        legend: {
+          show: false
+        }
+      })
+      /*
+      * END DONUT CHART
+      */
+
+    })
+
+    /*
+    * Custom Label formatter
+    * ----------------------
+    */
+    function labelFormatter(label, series) {
+      return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">'
+        + label
+        + '<br>'
+        + Math.round(series.percent) + '%</div>'
+    }
+    </script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/charts-inline.html b/tests/jinja_adminlte/charts-inline.html
new file mode 100644
index 0000000..9847af7
--- /dev/null
+++ b/tests/jinja_adminlte/charts-inline.html
@@ -0,0 +1,611 @@
+{% extends "layouts/base.html" %}
+{% block title %}Inline Charts {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Inline Charts</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Inline Charts
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <!-- row -->
+                <div class="row">
+                    <div class="col-12">
+                        <!-- jQuery Knob -->
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    <i class="far fa-chart-bar"></i>
+                                    jQuery Knob
+                                </h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body">
+                                <div class="row">
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="30"
+                                               data-width="90"
+                                               data-height="90"
+                                               data-fgColor="#3c8dbc">
+                                        <div class="knob-label">
+                                            New Visitors
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="70"
+                                               data-width="90"
+                                               data-height="90"
+                                               data-fgColor="#f56954">
+                                        <div class="knob-label">
+                                            Bounce Rate
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="-80"
+                                               data-min="-150"
+                                               data-max="150"
+                                               data-width="90"
+                                               data-height="90"
+                                               data-fgColor="#00a65a">
+                                        <div class="knob-label">
+                                            Server Load
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="40"
+                                               data-width="90"
+                                               data-height="90"
+                                               data-fgColor="#00c0ef">
+                                        <div class="knob-label">
+                                            Disk Space
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                </div>
+                                <!-- /.row -->
+                                <div class="row">
+                                    <div class="col-6 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="90"
+                                               data-width="90"
+                                               data-height="90"
+                                               data-fgColor="#932ab6">
+                                        <div class="knob-label">
+                                            Bandwidth
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-6 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="50"
+                                               data-width="90"
+                                               data-height="90"
+                                               data-fgColor="#39CCCC">
+                                        <div class="knob-label">
+                                            CPU
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                </div>
+                                <!-- /.row -->
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+                <div class="row">
+                    <div class="col-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    <i class="far fa-chart-bar"></i>
+                                    jQuery Knob Different Sizes
+                                </h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body">
+                                <div class="row">
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="30"
+                                               data-width="90"
+                                               data-height="90"
+                                               data-fgColor="#3c8dbc"
+                                               data-readonly="true">
+                                        <div class="knob-label">
+                                            data-width="90"
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="30"
+                                               data-width="120"
+                                               data-height="120"
+                                               data-fgColor="#f56954">
+                                        <div class="knob-label">
+                                            data-width="120"
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="30"
+                                               data-thickness="0.1"
+                                               data-width="90"
+                                               data-height="90"
+                                               data-fgColor="#00a65a">
+                                        <div class="knob-label">
+                                            data-thickness="0.1"
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               data-thickness="0.2"
+                                               data-angleArc="250"
+                                               data-angleOffset="-125"
+                                               value="30"
+                                               data-width="120"
+                                               data-height="120"
+                                               data-fgColor="#00c0ef">
+                                        <div class="knob-label">
+                                            data-angleArc="250"
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                </div>
+                                <!-- /.row -->
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+                <div class="row">
+                    <div class="col-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    <i class="far fa-chart-bar"></i>
+                                    jQuery Knob Tron Style
+                                </h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body">
+                                <div class="row">
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="80"
+                                               data-skin="tron"
+                                               data-thickness="0.2"
+                                               data-width="90"
+                                               data-height="90"
+                                               data-fgColor="#3c8dbc"
+                                               data-readonly="true">
+                                        <div class="knob-label">
+                                            data-width="90"
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="60"
+                                               data-skin="tron"
+                                               data-thickness="0.2"
+                                               data-width="120"
+                                               data-height="120"
+                                               data-fgColor="#f56954">
+                                        <div class="knob-label">
+                                            data-width="120"
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="10"
+                                               data-skin="tron"
+                                               data-thickness="0.1"
+                                               data-width="90"
+                                               data-height="90"
+                                               data-fgColor="#00a65a">
+                                        <div class="knob-label">
+                                            data-thickness="0.1"
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-6 col-md-3 text-center">
+                                        <input type="text"
+                                               class="knob"
+                                               value="100"
+                                               data-skin="tron"
+                                               data-thickness="0.2"
+                                               data-angleArc="250"
+                                               data-angleOffset="-125"
+                                               data-width="120"
+                                               data-height="120"
+                                               data-fgColor="#00c0ef">
+                                        <div class="knob-label">
+                                            data-angleArc="250"
+                                        </div>
+                                    </div>
+                                    <!-- ./col -->
+                                </div>
+                                <!-- /.row -->
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap 4 -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <!-- AdminLTE App -->
+        <script src="/static/assets/js/adminlte.min.js"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="/static/assets/js/demo.js"></script>
+        <!-- jQuery Knob -->
+        <script src="/static/assets/plugins/jquery-knob/jquery.knob.min.js"></script>
+        <!-- Sparkline -->
+        <script src="/static/assets/plugins/sparkline/jquery.sparkline.min.js"></script>
+        <!-- page script -->
+        <script>
+      $(function () {
+        /* jQueryKnob */
+
+        $('.knob').knob({
+          /*change : function (value) {
+          //console.log("change : " + value);
+          },
+          release : function (value) {
+          console.log("release : " + value);
+          },
+          cancel : function () {
+          console.log("cancel : " + this.value);
+          },*/
+          draw: function () {
+
+            // "tron" case
+            if (this.$.data('skin') == 'tron') {
+
+              var a   = this.angle(this.cv)  // Angle
+                ,
+                  sa  = this.startAngle          // Previous start angle
+                ,
+                  sat = this.startAngle         // Start angle
+                ,
+                  ea                            // Previous end angle
+                ,
+                  eat = sat + a                 // End angle
+                ,
+                  r   = true
+
+              this.g.lineWidth = this.lineWidth
+
+              this.o.cursor
+              && (sat = eat - 0.3)
+              && (eat = eat + 0.3)
+
+              if (this.o.displayPrevious) {
+                ea = this.startAngle + this.angle(this.value)
+                this.o.cursor
+                && (sa = ea - 0.3)
+                && (ea = ea + 0.3)
+                this.g.beginPath()
+                this.g.strokeStyle = this.previousColor
+                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false)
+                this.g.stroke()
+              }
+
+              this.g.beginPath()
+              this.g.strokeStyle = r ? this.o.fgColor : this.fgColor
+              this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false)
+              this.g.stroke()
+
+              this.g.lineWidth = 2
+              this.g.beginPath()
+              this.g.strokeStyle = this.o.fgColor
+              this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false)
+              this.g.stroke()
+
+              return false
+            }
+          }
+        })
+        /* END JQUERY KNOB */
+
+        //INITIALIZE SPARKLINE CHARTS
+        $('.sparkline').each(function () {
+          var $this = $(this)
+          $this.sparkline('html', $this.data())
+        })
+
+        /* SPARKLINE DOCUMENTATION EXAMPLES https://omnipotent.net/jquery.sparkline/#s-about */
+        drawDocSparklines()
+        drawMouseSpeedDemo()
+
+      })
+
+      function drawDocSparklines() {
+
+        // Bar + line composite charts
+        $('#compositebar').sparkline('html', {
+          type    : 'bar',
+          barColor: '#aaf'
+        })
+        $('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
+          {
+            composite: true,
+            fillColor: false,
+            lineColor: 'red'
+          })
+
+
+        // Line charts taking their values from the tag
+        $('.sparkline-1').sparkline()
+
+        // Larger line charts for the docs
+        $('.largeline').sparkline('html',
+          {
+            type  : 'line',
+            height: '2.5em',
+            width : '4em'
+          })
+
+        // Customized line chart
+        $('#linecustom').sparkline('html',
+          {
+            height      : '1.5em',
+            width       : '8em',
+            lineColor   : '#f00',
+            fillColor   : '#ffa',
+            minSpotColor: false,
+            maxSpotColor: false,
+            spotColor   : '#77f',
+            spotRadius  : 3
+          })
+
+        // Bar charts using inline values
+        $('.sparkbar').sparkline('html', { type: 'bar' })
+
+        // Tri-state charts using inline values
+        $('.sparktristate').sparkline('html', { type: 'tristate' })
+        $('.sparktristatecols').sparkline('html',
+          {
+            type    : 'tristate',
+            colorMap: {
+              '-2': '#fa7',
+              '2' : '#44f'
+            }
+          })
+
+        // Composite line charts, the second using values supplied via javascript
+        $('#compositeline').sparkline('html', {
+          fillColor     : false,
+          changeRangeMin: 0,
+          chartRangeMax : 10
+        })
+        $('#compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
+          {
+            composite     : true,
+            fillColor     : false,
+            lineColor     : 'red',
+            changeRangeMin: 0,
+            chartRangeMax : 10
+          })
+
+        // Line charts with normal range marker
+        $('#normalline').sparkline('html',
+          {
+            fillColor     : false,
+            normalRangeMin: -1,
+            normalRangeMax: 8
+          })
+        $('#normalExample').sparkline('html',
+          {
+            fillColor       : false,
+            normalRangeMin  : 80,
+            normalRangeMax  : 95,
+            normalRangeColor: '#4f4'
+          })
+
+        // Discrete charts
+        $('.discrete1').sparkline('html',
+          {
+            type     : 'discrete',
+            lineColor: 'blue',
+            xwidth   : 18
+          })
+        $('#discrete2').sparkline('html',
+          {
+            type          : 'discrete',
+            lineColor     : 'blue',
+            thresholdColor: 'red',
+            thresholdValue: 4
+          })
+
+        // Bullet charts
+        $('.sparkbullet').sparkline('html', { type: 'bullet' })
+
+        // Pie charts
+        $('.sparkpie').sparkline('html', {
+          type  : 'pie',
+          height: '1.0em'
+        })
+
+        // Box plots
+        $('.sparkboxplot').sparkline('html', { type: 'box' })
+        $('.sparkboxplotraw').sparkline([1, 3, 5, 8, 10, 15, 18],
+          {
+            type        : 'box',
+            raw         : true,
+            showOutliers: true,
+            target      : 6
+          })
+
+        // Box plot with specific field order
+        $('.boxfieldorder').sparkline('html', {
+          type                     : 'box',
+          tooltipFormatFieldlist   : ['med', 'lq', 'uq'],
+          tooltipFormatFieldlistKey: 'field'
+        })
+
+        // click event demo sparkline
+        $('.clickdemo').sparkline()
+        $('.clickdemo').bind('sparklineClick', function (ev) {
+          var sparkline = ev.sparklines[0],
+              region    = sparkline.getCurrentRegionFields()
+          value         = region.y
+          alert('Clicked on x=' + region.x + ' y=' + region.y)
+        })
+
+        // mouseover event demo sparkline
+        $('.mouseoverdemo').sparkline()
+        $('.mouseoverdemo').bind('sparklineRegionChange', function (ev) {
+          var sparkline = ev.sparklines[0],
+              region    = sparkline.getCurrentRegionFields()
+          value         = region.y
+          $('.mouseoverregion').text('x=' + region.x + ' y=' + region.y)
+        }).bind('mouseleave', function () {
+          $('.mouseoverregion').text('')
+        })
+      }
+
+      /**
+      ** Draw the little mouse speed animated graph
+      ** This just attaches a handler to the mousemove event to see
+      ** (roughly) how far the mouse has moved
+      ** and then updates the display a couple of times a second via
+      ** setTimeout()
+      **/
+      function drawMouseSpeedDemo() {
+        var mrefreshinterval = 500 // update display every 500ms
+        var lastmousex       = -1
+        var lastmousey       = -1
+        var lastmousetime
+        var mousetravel      = 0
+        var mpoints          = []
+        var mpoints_max      = 30
+        $('html').mousemove(function (e) {
+          var mousex = e.pageX
+          var mousey = e.pageY
+          if (lastmousex > -1) {
+            mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey))
+          }
+          lastmousex = mousex
+          lastmousey = mousey
+        })
+        var mdraw = function () {
+          var md      = new Date()
+          var timenow = md.getTime()
+          if (lastmousetime && lastmousetime != timenow) {
+            var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000)
+            mpoints.push(pps)
+            if (mpoints.length > mpoints_max) {
+              mpoints.splice(0, 1)
+            }
+            mousetravel = 0
+            $('#mousespeed').sparkline(mpoints, {
+              width        : mpoints.length * 2,
+              tooltipSuffix: ' pixels per second'
+            })
+          }
+          lastmousetime = timenow
+          setTimeout(mdraw, mrefreshinterval)
+        }
+        // We could use setInterval instead, but I prefer to do it this way
+        setTimeout(mdraw, mrefreshinterval);
+      }
+        </script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-404.html b/tests/jinja_adminlte/examples-404.html
new file mode 100644
index 0000000..88545b6
--- /dev/null
+++ b/tests/jinja_adminlte/examples-404.html
@@ -0,0 +1,85 @@
+{% extends "layouts/base.html" %}
+{% block title %}Error 404 {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>404 Error Page</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                404 Error Page
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="error-page">
+                <h2 class="headline text-warning">404</h2>
+                <div class="error-content">
+                    <h3>
+                        <i class="fas fa-exclamation-triangle text-warning"></i>
+                        Oops! Page not found.
+                    </h3>
+                    <p>
+                        We could not find the page you were looking for.
+                        Meanwhile, you may
+                        <a href="../../index.html">return to dashboard</a>
+                        or try using the search form.
+                    </p>
+                    <form class="search-form">
+                        <div class="input-group">
+                            <input type="text" name="search" class="form-control" placeholder="Search">
+                            <div class="input-group-append">
+                                <button type="submit" name="submit" class="btn btn-warning">
+                                    <i class="fas fa-search"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.input-group -->
+                    </form>
+                </div>
+                <!-- /.error-content -->
+            </div>
+            <!-- /.error-page -->
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-500.html b/tests/jinja_adminlte/examples-500.html
new file mode 100644
index 0000000..f4cf8d7
--- /dev/null
+++ b/tests/jinja_adminlte/examples-500.html
@@ -0,0 +1,83 @@
+{% extends "layouts/base.html" %}
+{% block title %}Error 500 {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>500 Error Page</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                500 Error Page
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="error-page">
+                <h2 class="headline text-danger">500</h2>
+                <div class="error-content">
+                    <h3>
+                        <i class="fas fa-exclamation-triangle text-danger"></i>
+                        Oops! Something went wrong.
+                    </h3>
+                    <p>
+                        We will work on fixing that right away.
+                        Meanwhile, you may
+                        <a href="../../index.html">return to dashboard</a>
+                        or try using the search form.
+                    </p>
+                    <form class="search-form">
+                        <div class="input-group">
+                            <input type="text" name="search" class="form-control" placeholder="Search">
+                            <div class="input-group-append">
+                                <button type="submit" name="submit" class="btn btn-danger">
+                                    <i class="fas fa-search"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.input-group -->
+                    </form>
+                </div>
+            </div>
+            <!-- /.error-page -->
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-blank.html b/tests/jinja_adminlte/examples-blank.html
new file mode 100644
index 0000000..ee51f7c
--- /dev/null
+++ b/tests/jinja_adminlte/examples-blank.html
@@ -0,0 +1,83 @@
+{% extends "layouts/base.html" %}
+{% block title %}Blank Page {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini pace-primary
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- pace-progress -->
+    <link rel="stylesheet" href="/static/assets/plugins/pace-progress/themes/black/pace-theme-flat-top.css">
+    <!-- adminlte-->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Blank Page</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Start
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <!-- Default box -->
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Title</h3>
+                    <div class="card-tools">
+                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
+                            <i class="fas fa-minus"></i>
+                        </button>
+                        <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="card-body">
+                    Start creating your amazing application!
+                </div>
+                <!-- /.card-body -->
+                <div class="card-footer">
+                    Footer
+                </div>
+                <!-- /.card-footer-->
+            </div>
+            <!-- /.card -->
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- pace-progress -->
+    <script src="/static/assets/plugins/pace-progress/pace.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-contacts.html b/tests/jinja_adminlte/examples-contacts.html
new file mode 100644
index 0000000..762934c
--- /dev/null
+++ b/tests/jinja_adminlte/examples-contacts.html
@@ -0,0 +1,572 @@
+{% extends "layouts/base.html" %}
+{% block title %}Contacts {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Contacts</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Contacts
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <!-- Default box -->
+            <div class="card card-solid">
+                <div class="card-body pb-0">
+                    <div class="row d-flex align-items-stretch">
+                        <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch">
+                            <div class="card bg-light">
+                                <div class="card-header text-muted border-bottom-0">
+                                    Digital Strategist
+                                </div>
+                                <div class="card-body pt-0">
+                                    <div class="row">
+                                        <div class="col-7">
+                                            <h2 class="lead">
+                                                <b>
+                                                Nicole Pearson
+                                                </b>
+                                            </h2>
+                                            <p class="text-muted text-sm">
+                                                <b>
+                                                About:
+                                                </b>
+                                                Web Designer / UX / Graphic Artist / Coffee Lover
+                                            </p>
+                                            <ul class="ml-4 mb-0 fa-ul text-muted">
+                                                <li class="small">
+                                                    <span class="fa-li">
+                                                        <i class="fas fa-lg fa-building"></i>
+                                                    </span>
+                                                    Address: Demo Street 123, Demo City 04312, NJ
+                                                </li>
+                                                <li class="small">
+                                                    <span class="fa-li">
+                                                        <i class="fas fa-lg fa-phone"></i>
+                                                    </span>
+                                                    Phone #: + 800 - 12 12 23 52
+                                                </li>
+                                            </ul>
+                                        </div>
+                                        <div class="col-5 text-center">
+                                            <img src="/static/assets/img/user1-128x128.jpg"
+                                                 alt="user-avatar"
+                                                 class="img-circle img-fluid">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="card-footer">
+                                        <div class="text-right">
+                                            <a href="#" class="btn btn-sm bg-teal">
+                                                <i class="fas fa-comments"></i>
+                                            </a>
+                                            <a href="#" class="btn btn-sm btn-primary">
+                                                <i class="fas fa-user"></i>
+                                                View Profile
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch">
+                                <div class="card bg-light">
+                                    <div class="card-header text-muted border-bottom-0">
+                                        Digital Strategist
+                                    </div>
+                                    <div class="card-body pt-0">
+                                        <div class="row">
+                                            <div class="col-7">
+                                                <h2 class="lead">
+                                                    <b>
+                                                    Nicole Pearson
+                                                    </b>
+                                                </h2>
+                                                <p class="text-muted text-sm">
+                                                    <b>
+                                                    About:
+                                                    </b>
+                                                    Web Designer / UX / Graphic Artist / Coffee Lover
+                                                </p>
+                                                <ul class="ml-4 mb-0 fa-ul text-muted">
+                                                    <li class="small">
+                                                        <span class="fa-li">
+                                                            <i class="fas fa-lg fa-building"></i>
+                                                        </span>
+                                                        Address: Demo Street 123, Demo City 04312, NJ
+                                                    </li>
+                                                    <li class="small">
+                                                        <span class="fa-li">
+                                                            <i class="fas fa-lg fa-phone"></i>
+                                                        </span>
+                                                        Phone #: + 800 - 12 12 23 52
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div class="col-5 text-center">
+                                                <img src="/static/assets/img/user2-160x160.jpg"
+                                                     alt="user-avatar"
+                                                     class="img-circle img-fluid">
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="card-footer">
+                                            <div class="text-right">
+                                                <a href="#" class="btn btn-sm bg-teal">
+                                                    <i class="fas fa-comments"></i>
+                                                </a>
+                                                <a href="#" class="btn btn-sm btn-primary">
+                                                    <i class="fas fa-user"></i>
+                                                    View Profile
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch">
+                                    <div class="card bg-light">
+                                        <div class="card-header text-muted border-bottom-0">
+                                            Digital Strategist
+                                        </div>
+                                        <div class="card-body pt-0">
+                                            <div class="row">
+                                                <div class="col-7">
+                                                    <h2 class="lead">
+                                                        <b>
+                                                        Nicole Pearson
+                                                        </b>
+                                                    </h2>
+                                                    <p class="text-muted text-sm">
+                                                        <b>
+                                                        About:
+                                                        </b>
+                                                        Web Designer / UX / Graphic Artist / Coffee Lover
+                                                    </p>
+                                                    <ul class="ml-4 mb-0 fa-ul text-muted">
+                                                        <li class="small">
+                                                            <span class="fa-li">
+                                                                <i class="fas fa-lg fa-building"></i>
+                                                            </span>
+                                                            Address: Demo Street 123, Demo City 04312, NJ
+                                                        </li>
+                                                        <li class="small">
+                                                            <span class="fa-li">
+                                                                <i class="fas fa-lg fa-phone"></i>
+                                                            </span>
+                                                            Phone #: + 800 - 12 12 23 52
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                                <div class="col-5 text-center">
+                                                    <img src="/static/assets/img/user1-128x128.jpg"
+                                                         alt="user-avatar"
+                                                         class="img-circle img-fluid">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="card-footer">
+                                                <div class="text-right">
+                                                    <a href="#" class="btn btn-sm bg-teal">
+                                                        <i class="fas fa-comments"></i>
+                                                    </a>
+                                                    <a href="#" class="btn btn-sm btn-primary">
+                                                        <i class="fas fa-user"></i>
+                                                        View Profile
+                                                    </a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch">
+                                        <div class="card bg-light">
+                                            <div class="card-header text-muted border-bottom-0">
+                                                Digital Strategist
+                                            </div>
+                                            <div class="card-body pt-0">
+                                                <div class="row">
+                                                    <div class="col-7">
+                                                        <h2 class="lead">
+                                                            <b>
+                                                            Nicole Pearson
+                                                            </b>
+                                                        </h2>
+                                                        <p class="text-muted text-sm">
+                                                            <b>
+                                                            About:
+                                                            </b>
+                                                            Web Designer / UX / Graphic Artist / Coffee Lover
+                                                        </p>
+                                                        <ul class="ml-4 mb-0 fa-ul text-muted">
+                                                            <li class="small">
+                                                                <span class="fa-li">
+                                                                    <i class="fas fa-lg fa-building"></i>
+                                                                </span>
+                                                                Address: Demo Street 123, Demo City 04312, NJ
+                                                            </li>
+                                                            <li class="small">
+                                                                <span class="fa-li">
+                                                                    <i class="fas fa-lg fa-phone"></i>
+                                                                </span>
+                                                                Phone #: + 800 - 12 12 23 52
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="col-5 text-center">
+                                                        <img src="/static/assets/img/user2-160x160.jpg"
+                                                             alt="user-avatar"
+                                                             class="img-circle img-fluid">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="card-footer">
+                                                    <div class="text-right">
+                                                        <a href="#" class="btn btn-sm bg-teal">
+                                                            <i class="fas fa-comments"></i>
+                                                        </a>
+                                                        <a href="#" class="btn btn-sm btn-primary">
+                                                            <i class="fas fa-user"></i>
+                                                            View Profile
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch">
+                                            <div class="card bg-light">
+                                                <div class="card-header text-muted border-bottom-0">
+                                                    Digital Strategist
+                                                </div>
+                                                <div class="card-body pt-0">
+                                                    <div class="row">
+                                                        <div class="col-7">
+                                                            <h2 class="lead">
+                                                                <b>
+                                                                Nicole Pearson
+                                                                </b>
+                                                            </h2>
+                                                            <p class="text-muted text-sm">
+                                                                <b>
+                                                                About:
+                                                                </b>
+                                                                Web Designer / UX / Graphic Artist / Coffee Lover
+                                                            </p>
+                                                            <ul class="ml-4 mb-0 fa-ul text-muted">
+                                                                <li class="small">
+                                                                    <span class="fa-li">
+                                                                        <i class="fas fa-lg fa-phone"></i>
+                                                                    </span>
+                                                                    Phone #: + 800 - 12 12 23 52
+                                                                </li>
+                                                            </ul>
+                                                        </div>
+                                                        <div class="col-5 text-center">
+                                                            <img src="/static/assets/img/user1-128x128.jpg"
+                                                                 alt="user-avatar"
+                                                                 class="img-circle img-fluid">
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="card-footer">
+                                                        <div class="text-right">
+                                                            <a href="#" class="btn btn-sm bg-teal">
+                                                                <i class="fas fa-comments"></i>
+                                                            </a>
+                                                            <a href="#" class="btn btn-sm btn-primary">
+                                                                <i class="fas fa-user"></i>
+                                                                View Profile
+                                                            </a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch">
+                                                <div class="card bg-light">
+                                                    <div class="card-header text-muted border-bottom-0">
+                                                        Digital Strategist
+                                                    </div>
+                                                    <div class="card-body pt-0">
+                                                        <div class="row">
+                                                            <div class="col-7">
+                                                                <h2 class="lead">
+                                                                    <b>
+                                                                    Nicole Pearson
+                                                                    </b>
+                                                                </h2>
+                                                                <p class="text-muted text-sm">
+                                                                    <b>
+                                                                    About:
+                                                                    </b>
+                                                                    Web Designer / UX / Graphic Artist / Coffee Lover
+                                                                </p>
+                                                                <ul class="ml-4 mb-0 fa-ul text-muted">
+                                                                    <li class="small">
+                                                                        <span class="fa-li">
+                                                                            <i class="fas fa-lg fa-building"></i>
+                                                                        </span>
+                                                                        Address: Demo Street 123, Demo City 04312, NJ
+                                                                    </li>
+                                                                    <li class="small">
+                                                                        <span class="fa-li">
+                                                                            <i class="fas fa-lg fa-phone"></i>
+                                                                        </span>
+                                                                        Phone #: + 800 - 12 12 23 52
+                                                                    </li>
+                                                                </ul>
+                                                            </div>
+                                                            <div class="col-5 text-center">
+                                                                <img src="/static/assets/img/user1-128x128.jpg"
+                                                                     alt="user-avatar"
+                                                                     class="img-circle img-fluid">
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="card-footer">
+                                                            <div class="text-right">
+                                                                <a href="#" class="btn btn-sm bg-teal">
+                                                                    <i class="fas fa-comments"></i>
+                                                                </a>
+                                                                <a href="#" class="btn btn-sm btn-primary">
+                                                                    <i class="fas fa-user"></i>
+                                                                    View Profile
+                                                                </a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch">
+                                                    <div class="card bg-light">
+                                                        <div class="card-header text-muted border-bottom-0">
+                                                            Digital Strategist
+                                                        </div>
+                                                        <div class="card-body pt-0">
+                                                            <div class="row">
+                                                                <div class="col-7">
+                                                                    <h2 class="lead">
+                                                                        <b>
+                                                                        Nicole Pearson
+                                                                        </b>
+                                                                    </h2>
+                                                                    <p class="text-muted text-sm">
+                                                                        <b>
+                                                                        About:
+                                                                        </b>
+                                                                        Web Designer / UX / Graphic Artist / Coffee Lover
+                                                                    </p>
+                                                                    <ul class="ml-4 mb-0 fa-ul text-muted">
+                                                                        <li class="small">
+                                                                            <span class="fa-li">
+                                                                                <i class="fas fa-lg fa-building"></i>
+                                                                            </span>
+                                                                            Address: Demo Street 123, Demo City 04312, NJ
+                                                                        </li>
+                                                                    </ul>
+                                                                </div>
+                                                                <div class="col-5 text-center">
+                                                                    <img src="/static/assets/img/user1-128x128.jpg"
+                                                                         alt="user-avatar"
+                                                                         class="img-circle img-fluid">
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="card-footer">
+                                                                <div class="text-right">
+                                                                    <a href="#" class="btn btn-sm bg-teal">
+                                                                        <i class="fas fa-comments"></i>
+                                                                    </a>
+                                                                    <a href="#" class="btn btn-sm btn-primary">
+                                                                        <i class="fas fa-user"></i>
+                                                                        View Profile
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch">
+                                                        <div class="card bg-light">
+                                                            <div class="card-header text-muted border-bottom-0">
+                                                                Digital Strategist
+                                                            </div>
+                                                            <div class="card-body pt-0">
+                                                                <div class="row">
+                                                                    <div class="col-7">
+                                                                        <h2 class="lead">
+                                                                            <b>
+                                                                            Nicole Pearson
+                                                                            </b>
+                                                                        </h2>
+                                                                        <p class="text-muted text-sm">
+                                                                            <b>
+                                                                            About:
+                                                                            </b>
+                                                                            Web Designer / UX / Graphic Artist / Coffee Lover
+                                                                        </p>
+                                                                        <ul class="ml-4 mb-0 fa-ul text-muted">
+                                                                            <li class="small">
+                                                                                <span class="fa-li">
+                                                                                    <i class="fas fa-lg fa-building"></i>
+                                                                                </span>
+                                                                                Address: Demo Street 123, Demo City 04312, NJ
+                                                                            </li>
+                                                                            <li class="small">
+                                                                                <span class="fa-li">
+                                                                                    <i class="fas fa-lg fa-phone"></i>
+                                                                                </span>
+                                                                                Phone #: + 800 - 12 12 23 52
+                                                                            </li>
+                                                                        </ul>
+                                                                    </div>
+                                                                    <div class="col-5 text-center">
+                                                                        <img src="/static/assets/img/user1-128x128.jpg"
+                                                                             alt="user-avatar"
+                                                                             class="img-circle img-fluid">
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="card-footer">
+                                                                    <div class="text-right">
+                                                                        <a href="#" class="btn btn-sm bg-teal">
+                                                                            <i class="fas fa-comments"></i>
+                                                                        </a>
+                                                                        <a href="#" class="btn btn-sm btn-primary">
+                                                                            <i class="fas fa-user"></i>
+                                                                            View Profile
+                                                                        </a>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch">
+                                                            <div class="card bg-light">
+                                                                <div class="card-header text-muted border-bottom-0">
+                                                                    Digital Strategist
+                                                                </div>
+                                                                <div class="card-body pt-0">
+                                                                    <div class="row">
+                                                                        <div class="col-7">
+                                                                            <h2 class="lead">
+                                                                                <b>
+                                                                                Nicole Pearson
+                                                                                </b>
+                                                                            </h2>
+                                                                            <p class="text-muted text-sm">
+                                                                                <b>
+                                                                                About:
+                                                                                </b>
+                                                                                Web Designer / UX / Graphic Artist / Coffee Lover
+                                                                            </p>
+                                                                            <ul class="ml-4 mb-0 fa-ul text-muted">
+                                                                                <li class="small">
+                                                                                    <span class="fa-li">
+                                                                                        <i class="fas fa-lg fa-building"></i>
+                                                                                    </span>
+                                                                                    Address: Demo Street 123, Demo City 04312, NJ
+                                                                                </li>
+                                                                                <li class="small">
+                                                                                    <span class="fa-li">
+                                                                                        <i class="fas fa-lg fa-phone"></i>
+                                                                                    </span>
+                                                                                    Phone #: + 800 - 12 12 23 52
+                                                                                </li>
+                                                                            </ul>
+                                                                        </div>
+                                                                        <div class="col-5 text-center">
+                                                                            <img src="/static/assets/img/user2-160x160.jpg"
+                                                                                 alt="user-avatar"
+                                                                                 class="img-circle img-fluid">
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="card-footer">
+                                                                        <div class="text-right">
+                                                                            <a href="#" class="btn btn-sm bg-teal">
+                                                                                <i class="fas fa-comments"></i>
+                                                                            </a>
+                                                                            <a href="#" class="btn btn-sm btn-primary">
+                                                                                <i class="fas fa-user"></i>
+                                                                                View Profile
+                                                                            </a>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <!-- /.card-body -->
+                                                    <div class="card-footer">
+                                                        <nav aria-label="Contacts Page Navigation">
+                                                            <ul class="pagination justify-content-center m-0">
+                                                                <li class="page-item active">
+                                                                    <a class="page-link" href="#">1</a>
+                                                                </li>
+                                                                <li class="page-item">
+                                                                    <a class="page-link" href="#">2</a>
+                                                                </li>
+                                                                <li class="page-item">
+                                                                    <a class="page-link" href="#">3</a>
+                                                                </li>
+                                                                <li class="page-item">
+                                                                    <a class="page-link" href="#">4</a>
+                                                                </li>
+                                                                <li class="page-item">
+                                                                    <a class="page-link" href="#">5</a>
+                                                                </li>
+                                                                <li class="page-item">
+                                                                    <a class="page-link" href="#">6</a>
+                                                                </li>
+                                                                <li class="page-item">
+                                                                    <a class="page-link" href="#">7</a>
+                                                                </li>
+                                                                <li class="page-item">
+                                                                    <a class="page-link" href="#">8</a>
+                                                                </li>
+                                                            </ul>
+                                                        </nav>
+                                                    </div>
+                                                    <!-- /.card-footer -->
+                                                </div>
+                                                <!-- /.card -->
+                                            </section>
+                                            <!-- /.content -->
+                                        </div>
+                                        <!-- /.content-wrapper -->
+                                    {% endblock content %}
+                                    <!-- Specific Page JS goes HERE -->
+                                    {% block javascripts %}
+                                        <!-- jQuery -->
+                                        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                                        <!-- Bootstrap 4 -->
+                                        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                                        <!-- AdminLTE App -->
+                                        <script src="/static/assets/js/adminlte.min.js"></script>
+                                        <!-- AdminLTE for demo purposes -->
+                                        <script src="/static/assets/js/demo.js"></script>
+                                    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-e-commerce.html b/tests/jinja_adminlte/examples-e-commerce.html
new file mode 100644
index 0000000..a9923c9
--- /dev/null
+++ b/tests/jinja_adminlte/examples-e-commerce.html
@@ -0,0 +1,275 @@
+{% extends "layouts/base.html" %}
+{% block title %}eCommerce {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>E-commerce</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                E-commerce
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <!-- Default box -->
+            <div class="card card-solid">
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-12 col-sm-6">
+                            <h3 class="d-inline-block d-sm-none">
+                                LOWA Men’s Renegade GTX Mid Hiking Boots Review
+                            </h3>
+                            <div class="col-12">
+                                <img src="/static/assets/img/prod-1.jpg" class="product-image" alt="Product Image">
+                                </div>
+                                <div class="col-12 product-image-thumbs">
+                                    <div class="product-image-thumb active">
+                                        <img src="/static/assets/img/prod-1.jpg" alt="Product Image">
+                                        </div>
+                                        <div class="product-image-thumb" >
+                                            <img src="/static/assets/img/prod-2.jpg" alt="Product Image">
+                                            </div>
+                                            <div class="product-image-thumb" >
+                                                <img src="/static/assets/img/prod-3.jpg" alt="Product Image">
+                                                </div>
+                                                <div class="product-image-thumb" >
+                                                    <img src="/static/assets/img/prod-4.jpg" alt="Product Image">
+                                                    </div>
+                                                    <div class="product-image-thumb" >
+                                                        <img src="/static/assets/img/prod-5.jpg" alt="Product Image">
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col-12 col-sm-6">
+                                                    <h3 class="my-3">LOWA Men’s Renegade GTX Mid Hiking Boots Review</h3>
+                                                    <p>
+                                                        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terr.
+                                                    </p>
+                                                    <hr>
+                                                    <h4>Available Colors</h4>
+                                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                                                        <label class="btn btn-default text-center active">
+                                                            <input type="radio"
+                                                                   name="color_option"
+                                                                   id="color_option_a1"
+                                                                   autocomplete="off"
+                                                                   checked>
+                                                            Green
+                                                            <br>
+                                                            <i class="fas fa-circle fa-2x text-green"></i>
+                                                        </label>
+                                                        <label class="btn btn-default text-center">
+                                                            <input type="radio"
+                                                                   name="color_option"
+                                                                   id="color_option_a2"
+                                                                   autocomplete="off">
+                                                            Blue
+                                                            <br>
+                                                            <i class="fas fa-circle fa-2x text-blue"></i>
+                                                        </label>
+                                                        <label class="btn btn-default text-center">
+                                                            <input type="radio"
+                                                                   name="color_option"
+                                                                   id="color_option_a3"
+                                                                   autocomplete="off">
+                                                            Purple
+                                                            <br>
+                                                            <i class="fas fa-circle fa-2x text-purple"></i>
+                                                        </label>
+                                                        <label class="btn btn-default text-center">
+                                                            <input type="radio"
+                                                                   name="color_option"
+                                                                   id="color_option_a4"
+                                                                   autocomplete="off">
+                                                            Red
+                                                            <br>
+                                                            <i class="fas fa-circle fa-2x text-red"></i>
+                                                        </label>
+                                                        <label class="btn btn-default text-center">
+                                                            <input type="radio"
+                                                                   name="color_option"
+                                                                   id="color_option_a5"
+                                                                   autocomplete="off">
+                                                            Orange
+                                                            <br>
+                                                            <i class="fas fa-circle fa-2x text-orange"></i>
+                                                        </label>
+                                                    </div>
+                                                    <h4 class="mt-3">
+                                                        Size
+                                                        <small>
+                                                        Please select one
+                                                        </small>
+                                                    </h4>
+                                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                                                        <label class="btn btn-default text-center">
+                                                            <input type="radio"
+                                                                   name="color_option"
+                                                                   id="color_option_b1"
+                                                                   autocomplete="off">
+                                                            <span class="text-xl">S</span>
+                                                            <br>
+                                                            Small
+                                                        </label>
+                                                        <label class="btn btn-default text-center">
+                                                            <input type="radio"
+                                                                   name="color_option"
+                                                                   id="color_option_b2"
+                                                                   autocomplete="off">
+                                                            <span class="text-xl">M</span>
+                                                            <br>
+                                                            Medium
+                                                        </label>
+                                                        <label class="btn btn-default text-center">
+                                                            <input type="radio"
+                                                                   name="color_option"
+                                                                   id="color_option_b3"
+                                                                   autocomplete="off">
+                                                            <span class="text-xl">L</span>
+                                                            <br>
+                                                            Large
+                                                        </label>
+                                                        <label class="btn btn-default text-center">
+                                                            <input type="radio"
+                                                                   name="color_option"
+                                                                   id="color_option_b4"
+                                                                   autocomplete="off">
+                                                            <span class="text-xl">XL</span>
+                                                            <br>
+                                                            Xtra-Large
+                                                        </label>
+                                                    </div>
+                                                    <div class="bg-gray py-2 px-3 mt-4">
+                                                        <h2 class="mb-0">$80.00</h2>
+                                                        <h4 class="mt-0">
+                                                            <small>
+                                                            Ex Tax: $80.00
+                                                            </small>
+                                                        </h4>
+                                                    </div>
+                                                    <div class="mt-4">
+                                                        <div class="btn btn-primary btn-lg btn-flat">
+                                                            <i class="fas fa-cart-plus fa-lg mr-2"></i>
+                                                            Add to Cart
+                                                        </div>
+                                                        <div class="btn btn-default btn-lg btn-flat">
+                                                            <i class="fas fa-heart fa-lg mr-2"></i>
+                                                            Add to Wishlist
+                                                        </div>
+                                                    </div>
+                                                    <div class="mt-4 product-share">
+                                                        <a href="#" class="text-gray">
+                                                            <i class="fab fa-facebook-square fa-2x"></i>
+                                                        </a>
+                                                        <a href="#" class="text-gray">
+                                                            <i class="fab fa-twitter-square fa-2x"></i>
+                                                        </a>
+                                                        <a href="#" class="text-gray">
+                                                            <i class="fas fa-envelope-square fa-2x"></i>
+                                                        </a>
+                                                        <a href="#" class="text-gray">
+                                                            <i class="fas fa-rss-square fa-2x"></i>
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row mt-4">
+                                                <nav class="w-100">
+                                                    <div class="nav nav-tabs" id="product-tab" role="tablist">
+                                                        <a class="nav-item nav-link active"
+                                                           id="product-desc-tab"
+                                                           data-toggle="tab"
+                                                           href="#product-desc"
+                                                           role="tab"
+                                                           aria-controls="product-desc"
+                                                           aria-selected="true">
+                                                            Description
+                                                        </a>
+                                                        <a class="nav-item nav-link"
+                                                           id="product-comments-tab"
+                                                           data-toggle="tab"
+                                                           href="#product-comments"
+                                                           role="tab"
+                                                           aria-controls="product-comments"
+                                                           aria-selected="false">
+                                                            Comments
+                                                        </a>
+                                                        <a class="nav-item nav-link"
+                                                           id="product-rating-tab"
+                                                           data-toggle="tab"
+                                                           href="#product-rating"
+                                                           role="tab"
+                                                           aria-controls="product-rating"
+                                                           aria-selected="false">
+                                                            Rating
+                                                        </a>
+                                                    </div>
+                                                </nav>
+                                                <div class="tab-content p-3" id="nav-tabContent">
+                                                    <div class="tab-pane fade show active"
+                                                         id="product-desc"
+                                                         role="tabpanel"
+                                                         aria-labelledby="product-desc-tab">
+                                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae condimentum erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed posuere, purus at efficitur hendrerit, augue elit lacinia arcu, a eleifend sem elit et nunc. Sed rutrum vestibulum est, sit amet cursus dolor fermentum vel. Suspendisse mi nibh, congue et ante et, commodo mattis lacus. Duis varius finibus purus sed venenatis. Vivamus varius metus quam, id dapibus velit mattis eu. Praesent et semper risus. Vestibulum erat erat, condimentum at elit at, bibendum placerat orci. Nullam gravida velit mauris, in pellentesque urna pellentesque viverra. Nullam non pellentesque justo, et ultricies neque. Praesent vel metus rutrum, tempus erat a, rutrum ante. Quisque interdum efficitur nunc vitae consectetur. Suspendisse venenatis, tortor non convallis interdum, urna mi molestie eros, vel tempor justo lacus ac justo. Fusce id enim a erat fringilla sollicitudin ultrices vel metus.
+                                                    </div>
+                                                    <div class="tab-pane fade"
+                                                         id="product-comments"
+                                                         role="tabpanel"
+                                                         aria-labelledby="product-comments-tab">
+                                                        Vivamus rhoncus nisl sed venenatis luctus. Sed condimentum risus ut tortor feugiat laoreet. Suspendisse potenti. Donec et finibus sem, ut commodo lectus. Cras eget neque dignissim, placerat orci interdum, venenatis odio. Nulla turpis elit, consequat eu eros ac, consectetur fringilla urna. Duis gravida ex pulvinar mauris ornare, eget porttitor enim vulputate. Mauris hendrerit, massa nec aliquam cursus, ex elit euismod lorem, vehicula rhoncus nisl dui sit amet eros. Nulla turpis lorem, dignissim a sapien eget, ultrices venenatis dolor. Curabitur vel turpis at magna elementum hendrerit vel id dui. Curabitur a ex ullamcorper, ornare velit vel, tincidunt ipsum.
+                                                    </div>
+                                                    <div class="tab-pane fade"
+                                                         id="product-rating"
+                                                         role="tabpanel"
+                                                         aria-labelledby="product-rating-tab">
+                                                        Cras ut ipsum ornare, aliquam ipsum non, posuere elit. In hac habitasse platea dictumst. Aenean elementum leo augue, id fermentum risus efficitur vel. Nulla iaculis malesuada scelerisque. Praesent vel ipsum felis. Ut molestie, purus aliquam placerat sollicitudin, mi ligula euismod neque, non bibendum nibh neque et erat. Etiam dignissim aliquam ligula, aliquet feugiat nibh rhoncus ut. Aliquam efficitur lacinia lacinia. Morbi ac molestie lectus, vitae hendrerit nisl. Nullam metus odio, malesuada in vehicula at, consectetur nec justo. Quisque suscipit odio velit, at accumsan urna vestibulum a. Proin dictum, urna ut varius consectetur, sapien justo porta lectus, at mollis nisi orci et nulla. Donec pellentesque tortor vel nisl commodo ullamcorper. Donec varius massa at semper posuere. Integer finibus orci vitae vehicula placerat.
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <!-- /.card-body -->
+                                    </div>
+                                    <!-- /.card -->
+                                </section>
+                                <!-- /.content -->
+                            </div>
+                        {% endblock content %}
+                        <!-- Specific Page JS goes HERE -->
+                        {% block javascripts %}
+                            <!-- jQuery -->
+                            <script src="/static/assets/plugins//jquery/jquery.min.js"></script>
+                            <!-- Bootstrap 4 -->
+                            <script src="/static/assets/plugins//bootstrap/js/bootstrap.bundle.min.js"></script>
+                            <!-- AdminLTE App -->
+                            <script src="/static/assets/js/adminlte.min.js"></script>
+                            <!-- AdminLTE for demo purposes -->
+                            <script src="/static/assets/js/demo.js"></script>
+                        {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-forgot-password.html b/tests/jinja_adminlte/examples-forgot-password.html
new file mode 100644
index 0000000..723aae7
--- /dev/null
+++ b/tests/jinja_adminlte/examples-forgot-password.html
@@ -0,0 +1,72 @@
+{% extends "layouts/base-fullscreen.html" %}
+{% block title %}Forgot Password {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    login-page
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- icheck bootstrap -->
+    <link rel="stylesheet" href="/static/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="login-box">
+        <div class="login-logo">
+            <a href="/">
+                <b>
+                Admin
+                </b>
+                LTE
+            </a>
+        </div>
+        <!-- /.login-logo -->
+        <div class="card">
+            <div class="card-body login-card-body">
+                <p class="login-box-msg">
+                    You forgot your password? Here you can easily retrieve a new password.
+                </p>
+                <form action="recover-password.html" method="post">
+                    <div class="input-group mb-3">
+                        <input type="email" class="form-control" placeholder="Email">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-envelope"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-12">
+                            <button type="submit" class="btn btn-primary btn-block">
+                                Request new password
+                            </button>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                </form>
+                <p class="mt-3 mb-1">
+                    <a href="/login.html">Login</a>
+                </p>
+                <p class="mb-0">
+                    <a href="/register.html" class="text-center">
+                        Register a new membership
+                    </a>
+                </p>
+            </div>
+            <!-- /.login-card-body -->
+        </div>
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-invoice-print.html b/tests/jinja_adminlte/examples-invoice-print.html
new file mode 100644
index 0000000..b8f51d0
--- /dev/null
+++ b/tests/jinja_adminlte/examples-invoice-print.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Jinja2 AdminLTE - Invoice Print | AppSeed </title>
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    </head>
+    <body>
+        <div class="wrapper">
+            <!-- Main content -->
+            <section class="invoice">
+                <!-- title row -->
+                <div class="row">
+                    <div class="col-12">
+                        <h2 class="page-header">
+                            <i class="fas fa-globe"></i>
+                            AdminLTE, Inc.
+                            <small class="float-right">
+                            Date: 2/10/2014
+                            </small>
+                        </h2>
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- info row -->
+                <div class="row invoice-info">
+                    <div class="col-sm-4 invoice-col">
+                        From
+                        <address>
+                            <strong>Admin, Inc.</strong>
+                            <br>
+                            795 Folsom Ave, Suite 600
+                            <br>
+                            San Francisco, CA 94107
+                            <br>
+                            Phone: (804) 123-5432
+                            <br>
+                            Email: info@almasaeedstudio.com
+                        </address>
+                    </div>
+                    <!-- /.col -->
+                    <div class="col-sm-4 invoice-col">
+                        To
+                        <address>
+                            <strong>John Doe</strong>
+                            <br>
+                            795 Folsom Ave, Suite 600
+                            <br>
+                            San Francisco, CA 94107
+                            <br>
+                            Phone: (555) 539-1037
+                            <br>
+                            Email: john.doe@example.com
+                        </address>
+                    </div>
+                    <!-- /.col -->
+                    <div class="col-sm-4 invoice-col">
+                        <b>
+                        Invoice #007612
+                        </b>
+                        <br>
+                        <br>
+                        <b>
+                        Order ID:
+                        </b>
+                        4F3S8J
+                        <br>
+                        <b>
+                        Payment Due:
+                        </b>
+                        2/22/2014
+                        <br>
+                        <b>
+                        Account:
+                        </b>
+                        968-34567
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+                <!-- Table row -->
+                <div class="row">
+                    <div class="col-12 table-responsive">
+                        <table class="table table-striped">
+                            <thead>
+                                <tr>
+                                    <th>Qty</th>
+                                    <th>Product</th>
+                                    <th>Serial #</th>
+                                    <th>Description</th>
+                                    <th>Subtotal</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>1</td>
+                                    <td>Call of Duty</td>
+                                    <td>
+                                        455-981-221
+                                    </td>
+                                    <td>
+                                        El snort testosterone trophy driving gloves handsome
+                                    </td>
+                                    <td>
+                                        $64.50
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        1
+                                    </td>
+                                    <td>
+                                        Need for Speed IV
+                                    </td>
+                                    <td>
+                                        247-925-726
+                                    </td>
+                                    <td>
+                                        Wes Anderson umami biodiesel
+                                    </td>
+                                    <td>
+                                        $50.00
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        1
+                                    </td>
+                                    <td>
+                                        Monsters DVD
+                                    </td>
+                                    <td>
+                                        735-845-642
+                                    </td>
+                                    <td>
+                                        Terry Richardson helvetica tousled street art master
+                                    </td>
+                                    <td>
+                                        $10.70
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        1
+                                    </td>
+                                    <td>
+                                        Grown Ups Blue Ray
+                                    </td>
+                                    <td>
+                                        422-568-642
+                                    </td>
+                                    <td>
+                                        Tousled lomo letterpress
+                                    </td>
+                                    <td>
+                                        $25.99
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+                <div class="row">
+                    <!-- accepted payments column -->
+                    <div class="col-6">
+                        <p class="lead">
+                            Payment Methods:
+                        </p>
+                        <img src="/static/assets/img/credit/visa.png" alt="Visa">
+                            <img src="/static/assets/img/credit/mastercard.png" alt="Mastercard">
+                                <img src="/static/assets/img/credit/american-express.png" alt="American Express">
+                                    <img src="/static/assets/img/credit/paypal2.png" alt="Paypal">
+                                        <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">
+                                            Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg dopplr
+                                            jibjab, movity jajah plickers sifteo edmodo ifttt zimbra.
+                                        </p>
+                                    </div>
+                                    <!-- /.col -->
+                                    <div class="col-6">
+                                        <p class="lead">
+                                            Amount Due 2/22/2014
+                                        </p>
+                                        <div class="table-responsive">
+                                            <table class="table">
+                                                <tr>
+                                                    <th style="width:50%">Subtotal:</th>
+                                                    <td>
+                                                        $250.30
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <th>
+                                                        Tax (9.3%)
+                                                    </th>
+                                                    <td>
+                                                        $10.34
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <th>
+                                                        Shipping:
+                                                    </th>
+                                                    <td>
+                                                        $5.80
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <th>
+                                                        Total:
+                                                    </th>
+                                                    <td>
+                                                        $265.24
+                                                    </td>
+                                                </tr>
+                                            </table>
+                                        </div>
+                                    </div>
+                                    <!-- /.col -->
+                                </div>
+                                <!-- /.row -->
+                            </section>
+                            <!-- /.content -->
+                        </div>
+                        <!-- ./wrapper -->
+                        <script>
+  window.addEventListener("load", window.print());
+                        </script>
+                    </body>
+                </html>
diff --git a/tests/jinja_adminlte/examples-invoice.html b/tests/jinja_adminlte/examples-invoice.html
new file mode 100644
index 0000000..df31e82
--- /dev/null
+++ b/tests/jinja_adminlte/examples-invoice.html
@@ -0,0 +1,313 @@
+{% extends "layouts/base.html" %}
+{% block title %}Invoice {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Invoice</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Invoice
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-12">
+                        <div class="callout callout-info">
+                            <h5>
+                                <i class="fas fa-info"></i>
+                                Note:
+                            </h5>
+                            This page has been enhanced for printing. Click the print button at the bottom of the invoice to test.
+                        </div>
+                        <!-- Main content -->
+                        <div class="invoice p-3 mb-3">
+                            <!-- title row -->
+                            <div class="row">
+                                <div class="col-12">
+                                    <h4>
+                                        <i class="fas fa-globe"></i>
+                                        AdminLTE, Inc.
+                                        <small class="float-right">
+                                        Date: 2/10/2014
+                                        </small>
+                                    </h4>
+                                </div>
+                                <!-- /.col -->
+                            </div>
+                            <!-- info row -->
+                            <div class="row invoice-info">
+                                <div class="col-sm-4 invoice-col">
+                                    From
+                                    <address>
+                                        <strong>Admin, Inc.</strong>
+                                        <br>
+                                        795 Folsom Ave, Suite 600
+                                        <br>
+                                        San Francisco, CA 94107
+                                        <br>
+                                        Phone: (804) 123-5432
+                                        <br>
+                                        Email: info@almasaeedstudio.com
+                                    </address>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 invoice-col">
+                                    To
+                                    <address>
+                                        <strong>John Doe</strong>
+                                        <br>
+                                        795 Folsom Ave, Suite 600
+                                        <br>
+                                        San Francisco, CA 94107
+                                        <br>
+                                        Phone: (555) 539-1037
+                                        <br>
+                                        Email: john.doe@example.com
+                                    </address>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 invoice-col">
+                                    <b>
+                                    Invoice #007612
+                                    </b>
+                                    <br>
+                                    <br>
+                                    <b>
+                                    Order ID:
+                                    </b>
+                                    4F3S8J
+                                    <br>
+                                    <b>
+                                    Payment Due:
+                                    </b>
+                                    2/22/2014
+                                    <br>
+                                    <b>
+                                    Account:
+                                    </b>
+                                    968-34567
+                                </div>
+                                <!-- /.col -->
+                            </div>
+                            <!-- /.row -->
+                            <!-- Table row -->
+                            <div class="row">
+                                <div class="col-12 table-responsive">
+                                    <table class="table table-striped">
+                                        <thead>
+                                            <tr>
+                                                <th>Qty</th>
+                                                <th>Product</th>
+                                                <th>Serial #</th>
+                                                <th>Description</th>
+                                                <th>Subtotal</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>1</td>
+                                                <td>Call of Duty</td>
+                                                <td>
+                                                    455-981-221
+                                                </td>
+                                                <td>
+                                                    El snort testosterone trophy driving gloves handsome
+                                                </td>
+                                                <td>
+                                                    $64.50
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    1
+                                                </td>
+                                                <td>
+                                                    Need for Speed IV
+                                                </td>
+                                                <td>
+                                                    247-925-726
+                                                </td>
+                                                <td>
+                                                    Wes Anderson umami biodiesel
+                                                </td>
+                                                <td>
+                                                    $50.00
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    1
+                                                </td>
+                                                <td>
+                                                    Monsters DVD
+                                                </td>
+                                                <td>
+                                                    735-845-642
+                                                </td>
+                                                <td>
+                                                    Terry Richardson helvetica tousled street art master
+                                                </td>
+                                                <td>
+                                                    $10.70
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    1
+                                                </td>
+                                                <td>
+                                                    Grown Ups Blue Ray
+                                                </td>
+                                                <td>
+                                                    422-568-642
+                                                </td>
+                                                <td>
+                                                    Tousled lomo letterpress
+                                                </td>
+                                                <td>
+                                                    $25.99
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <!-- /.col -->
+                            </div>
+                            <!-- /.row -->
+                            <div class="row">
+                                <!-- accepted payments column -->
+                                <div class="col-6">
+                                    <p class="lead">
+                                        Payment Methods:
+                                    </p>
+                                    <img src="/static/assets/img/credit/visa.png" alt="Visa">
+                                        <img src="/static/assets/img/credit/mastercard.png" alt="Mastercard">
+                                            <img src="/static/assets/img/credit/american-express.png"
+                                                 alt="American Express">
+                                                <img src="/static/assets/img/credit/paypal2.png" alt="Paypal">
+                                                    <p class="text-muted well well-sm shadow-none"
+                                                       style="margin-top: 10px;">
+                                                        Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem
+                                                        plugg
+                                                        dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra.
+                                                    </p>
+                                                </div>
+                                                <!-- /.col -->
+                                                <div class="col-6">
+                                                    <p class="lead">
+                                                        Amount Due 2/22/2014
+                                                    </p>
+                                                    <div class="table-responsive">
+                                                        <table class="table">
+                                                            <tr>
+                                                                <th style="width:50%">Subtotal:</th>
+                                                                <td>
+                                                                    $250.30
+                                                                </td>
+                                                            </tr>
+                                                            <tr>
+                                                                <th>
+                                                                    Tax (9.3%)
+                                                                </th>
+                                                                <td>
+                                                                    $10.34
+                                                                </td>
+                                                            </tr>
+                                                            <tr>
+                                                                <th>
+                                                                    Shipping:
+                                                                </th>
+                                                                <td>
+                                                                    $5.80
+                                                                </td>
+                                                            </tr>
+                                                            <tr>
+                                                                <th>
+                                                                    Total:
+                                                                </th>
+                                                                <td>
+                                                                    $265.24
+                                                                </td>
+                                                            </tr>
+                                                        </table>
+                                                    </div>
+                                                </div>
+                                                <!-- /.col -->
+                                            </div>
+                                            <!-- /.row -->
+                                            <!-- this row will not appear when printing -->
+                                            <div class="row no-print">
+                                                <div class="col-12">
+                                                    <a href="invoice-print.html"
+                                                       rel="noopener"
+                                                       target="_blank"
+                                                       class="btn btn-default">
+                                                        <i class="fas fa-print"></i>
+                                                        Print
+                                                    </a>
+                                                    <button type="button" class="btn btn-success float-right">
+                                                        <i class="far fa-credit-card"></i>
+                                                        Submit
+                                                        Payment
+                                                    </button>
+                                                    <button type="button"
+                                                            class="btn btn-primary float-right"
+                                                            style="margin-right: 5px;">
+                                                        <i class="fas fa-download"></i>
+                                                        Generate PDF
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <!-- /.invoice -->
+                                    </div>
+                                    <!-- /.col -->
+                                </div>
+                                <!-- /.row -->
+                            </div>
+                            <!-- /.container-fluid -->
+                        </section>
+                        <!-- /.content -->
+                    </div>
+                {% endblock content %}
+                <!-- Specific Page JS goes HERE -->
+                {% block javascripts %}
+                    <!-- jQuery -->
+                    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                    <!-- Bootstrap 4 -->
+                    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                    <!-- AdminLTE App -->
+                    <script src="/static/assets/js/adminlte.min.js"></script>
+                    <!-- AdminLTE for demo purposes -->
+                    <script src="/static/assets/js/demo.js"></script>
+                {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-language-menu.html b/tests/jinja_adminlte/examples-language-menu.html
new file mode 100644
index 0000000..3bd9660
--- /dev/null
+++ b/tests/jinja_adminlte/examples-language-menu.html
@@ -0,0 +1,83 @@
+{% extends "layouts/base.html" %}
+{% block title %}Language Menu {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- flag-icon-css -->
+    <link rel="stylesheet" href="/static/assets/plugins/flag-icon-css/css/flag-icon.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Language Menu</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Language Menu
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <!-- Default box -->
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Title</h3>
+                    <div class="card-tools">
+                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
+                            <i class="fas fa-minus"></i>
+                        </button>
+                        <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="card-body">
+                    Start creating your amazing application!
+                </div>
+                <!-- /.card-body -->
+                <div class="card-footer">
+                    Footer
+                </div>
+                <!-- /.card-footer-->
+            </div>
+            <!-- /.card -->
+        </section>
+        <!-- /.content -->
+    </div>
+    <!-- /.content-wrapper -->
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-legacy-user-menu.html b/tests/jinja_adminlte/examples-legacy-user-menu.html
new file mode 100644
index 0000000..cff5ac2
--- /dev/null
+++ b/tests/jinja_adminlte/examples-legacy-user-menu.html
@@ -0,0 +1,81 @@
+{% extends "layouts/base.html" %}
+{% block title %}Legacy User Menu {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Legacy User Menu</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Legacy User Menu
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <!-- Default box -->
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Title</h3>
+                    <div class="card-tools">
+                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
+                            <i class="fas fa-minus"></i>
+                        </button>
+                        <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="card-body">
+                    Start creating your amazing application!
+                </div>
+                <!-- /.card-body -->
+                <div class="card-footer">
+                    Footer
+                </div>
+                <!-- /.card-footer-->
+            </div>
+            <!-- /.card -->
+        </section>
+        <!-- /.content -->
+    </div>
+    <!-- /.content-wrapper -->
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-lockscreen.html b/tests/jinja_adminlte/examples-lockscreen.html
new file mode 100644
index 0000000..6d99ed0
--- /dev/null
+++ b/tests/jinja_adminlte/examples-lockscreen.html
@@ -0,0 +1,77 @@
+{% extends "layouts/base-fullscreen.html" %}
+{% block title %}Lockscreen {% endblock %}
+{% block body_class %}
+    lockscreen
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Automatic element centering -->
+    <div class="lockscreen-wrapper">
+        <div class="lockscreen-logo">
+            <a href="../../index2.html">
+                <b>
+                Admin
+                </b>
+                LTE
+            </a>
+        </div>
+        <!-- User name -->
+        <div class="lockscreen-name">
+            John Doe
+        </div>
+        <!-- START LOCK SCREEN ITEM -->
+        <div class="lockscreen-item">
+            <!-- lockscreen image -->
+            <div class="lockscreen-image">
+                <img src="/static/assets/img/user1-128x128.jpg" alt="User Image">
+                </div>
+                <!-- /.lockscreen-image -->
+                <!-- lockscreen credentials (contains the form) -->
+                <form class="lockscreen-credentials">
+                    <div class="input-group">
+                        <input type="password" class="form-control" placeholder="password">
+                        <div class="input-group-append">
+                            <button type="button" class="btn">
+                                <i class="fas fa-arrow-right text-muted"></i>
+                            </button>
+                        </div>
+                    </div>
+                </form>
+                <!-- /.lockscreen credentials -->
+            </div>
+            <!-- /.lockscreen-item -->
+            <div class="help-block text-center">
+                Enter your password to retrieve your session
+            </div>
+            <div class="text-center">
+                <a href="login.html">Or sign in as a different user</a>
+            </div>
+            <div class="lockscreen-footer text-center">
+                Copyright &copy; 2014-2020
+                <b>
+                <a href="https://adminlte.io" class="text-black">
+                    AdminLTE.io
+                </a>
+                </b>
+                <br>
+                All rights reserved
+            </div>
+        </div>
+        <!-- /.center -->
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap 4 -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-login.html b/tests/jinja_adminlte/examples-login.html
new file mode 100644
index 0000000..e0ff5cf
--- /dev/null
+++ b/tests/jinja_adminlte/examples-login.html
@@ -0,0 +1,105 @@
+{% extends "layouts/base-fullscreen.html" %}
+{% block title %}Login {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    login-page
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- icheck bootstrap -->
+    <link rel="stylesheet" href="/static/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="login-box">
+        <div class="login-logo">
+            <a href="/">
+                <b>
+                Admin
+                </b>
+                LTE
+            </a>
+        </div>
+        <!-- /.login-logo -->
+        <div class="card">
+            <div class="card-body login-card-body">
+                <p class="login-box-msg">
+                    Sign in to start your session
+                </p>
+                <form action="../../index3.html" method="post">
+                    <div class="input-group mb-3">
+                        <input type="email" class="form-control" placeholder="Email">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-envelope"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="password" class="form-control" placeholder="Password">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-lock"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-8">
+                            <div class="icheck-primary">
+                                <input type="checkbox" id="remember">
+                                <label for="remember">
+                                    Remember Me
+                                </label>
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-4">
+                            <button type="submit" class="btn btn-primary btn-block">
+                                Sign In
+                            </button>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                </form>
+                <div class="social-auth-links text-center mb-3">
+                    <p>
+                        - OR -
+                    </p>
+                    <a href="#" class="btn btn-block btn-primary">
+                        <i class="fab fa-facebook mr-2"></i>
+                        Sign in using Facebook
+                    </a>
+                    <a href="#" class="btn btn-block btn-danger">
+                        <i class="fab fa-google-plus mr-2"></i>
+                        Sign in using Google+
+                    </a>
+                </div>
+                <!-- /.social-auth-links -->
+                <p class="mb-1">
+                    <a href="/examples-recover-password.html">
+                        I forgot my password
+                    </a>
+                </p>
+                <p class="mb-0">
+                    <a href="/examples-register.html" class="text-center">
+                        Register a new membership
+                    </a>
+                </p>
+            </div>
+            <!-- /.login-card-body -->
+        </div>
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-profile.html b/tests/jinja_adminlte/examples-profile.html
new file mode 100644
index 0000000..90d000d
--- /dev/null
+++ b/tests/jinja_adminlte/examples-profile.html
@@ -0,0 +1,566 @@
+{% extends "layouts/base.html" %}
+{% block title %}Profile {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Profile</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                User Profile
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-md-3">
+                        <!-- Profile Image -->
+                        <div class="card card-primary card-outline">
+                            <div class="card-body box-profile">
+                                <div class="text-center">
+                                    <img class="profile-user-img img-fluid img-circle"
+                                         src="/static/assets/img/user4-128x128.jpg"
+                                         alt="User profile picture">
+                                    </div>
+                                    <h3 class="profile-username text-center">
+                                        Nina Mcintire
+                                    </h3>
+                                    <p class="text-muted text-center">
+                                        Software Engineer
+                                    </p>
+                                    <ul class="list-group list-group-unbordered mb-3">
+                                        <li class="list-group-item">
+                                            <b>
+                                            Followers
+                                            </b>
+                                            <a class="float-right">1,322</a>
+                                        </li>
+                                        <li class="list-group-item">
+                                            <b>
+                                            Following
+                                            </b>
+                                            <a class="float-right">543</a>
+                                        </li>
+                                        <li class="list-group-item">
+                                            <b>
+                                            Friends
+                                            </b>
+                                            <a class="float-right">13,287</a>
+                                        </li>
+                                    </ul>
+                                    <a href="#" class="btn btn-primary btn-block">
+                                        <b>
+                                        Follow
+                                        </b>
+                                    </a>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                            <!-- About Me Box -->
+                            <div class="card card-primary">
+                                <div class="card-header">
+                                    <h3 class="card-title">About Me</h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <strong>
+                                    <i class="fas fa-book mr-1"></i>
+                                    Education
+                                    </strong>
+                                    <p class="text-muted">
+                                        B.S. in Computer Science from the University of Tennessee at Knoxville
+                                    </p>
+                                    <hr>
+                                    <strong>
+                                    <i class="fas fa-map-marker-alt mr-1"></i>
+                                    Location
+                                    </strong>
+                                    <p class="text-muted">
+                                        Malibu, California
+                                    </p>
+                                    <hr>
+                                    <strong>
+                                    <i class="fas fa-pencil-alt mr-1"></i>
+                                    Skills
+                                    </strong>
+                                    <p class="text-muted">
+                                        <span class="tag tag-danger">UI Design</span>
+                                        <span class="tag tag-success">Coding</span>
+                                        <span class="tag tag-info">Javascript</span>
+                                        <span class="tag tag-warning">PHP</span>
+                                        <span class="tag tag-primary">Node.js</span>
+                                    </p>
+                                    <hr>
+                                    <strong>
+                                    <i class="far fa-file-alt mr-1"></i>
+                                    Notes
+                                    </strong>
+                                    <p class="text-muted">
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.
+                                    </p>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-9">
+                            <div class="card">
+                                <div class="card-header p-2">
+                                    <ul class="nav nav-pills">
+                                        <li class="nav-item">
+                                            <a class="nav-link active" href="#activity" data-toggle="tab">
+                                                Activity
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" href="#timeline" data-toggle="tab">
+                                                Timeline
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" href="#settings" data-toggle="tab">
+                                                Settings
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <div class="tab-content">
+                                        <div class="active tab-pane" id="activity">
+                                            <!-- Post -->
+                                            <div class="post">
+                                                <div class="user-block">
+                                                    <img class="img-circle img-bordered-sm"
+                                                         src="/static/assets/img/user1-128x128.jpg"
+                                                         alt="user image">
+                                                        <span class="username">
+                                                            <a href="#">
+                                                                Jonathan Burke Jr.
+                                                            </a>
+                                                            <a href="#" class="float-right btn-tool">
+                                                                <i class="fas fa-times"></i>
+                                                            </a>
+                                                        </span>
+                                                        <span class="description">
+                                                            Shared publicly - 7:30 PM today
+                                                        </span>
+                                                    </div>
+                                                    <!-- /.user-block -->
+                                                    <p>
+                                                        Lorem ipsum represents a long-held tradition for designers,
+                                                        typographers and the like. Some people hate it and argue for
+                                                        its demise, but others ignore the hate as they create awesome
+                                                        tools to help create filler text for everyone from bacon lovers
+                                                        to Charlie Sheen fans.
+                                                    </p>
+                                                    <p>
+                                                        <a href="#" class="link-black text-sm mr-2">
+                                                            <i class="fas fa-share mr-1"></i>
+                                                            Share
+                                                        </a>
+                                                        <a href="#" class="link-black text-sm">
+                                                            <i class="far fa-thumbs-up mr-1"></i>
+                                                            Like
+                                                        </a>
+                                                        <span class="float-right">
+                                                            <a href="#" class="link-black text-sm">
+                                                                <i class="far fa-comments mr-1"></i>
+                                                                Comments (5)
+                                                            </a>
+                                                        </span>
+                                                    </p>
+                                                    <input class="form-control form-control-sm"
+                                                           type="text"
+                                                           placeholder="Type a comment">
+                                                </div>
+                                                <!-- /.post -->
+                                                <!-- Post -->
+                                                <div class="post clearfix">
+                                                    <div class="user-block">
+                                                        <img class="img-circle img-bordered-sm"
+                                                             src="/static/assets/img/user7-128x128.jpg"
+                                                             alt="User Image">
+                                                            <span class="username">
+                                                                <a href="#">
+                                                                    Sarah Ross
+                                                                </a>
+                                                                <a href="#" class="float-right btn-tool">
+                                                                    <i class="fas fa-times"></i>
+                                                                </a>
+                                                            </span>
+                                                            <span class="description">
+                                                                Sent you a message - 3 days ago
+                                                            </span>
+                                                        </div>
+                                                        <!-- /.user-block -->
+                                                        <p>
+                                                            Lorem ipsum represents a long-held tradition for designers,
+                                                            typographers and the like. Some people hate it and argue for
+                                                            its demise, but others ignore the hate as they create awesome
+                                                            tools to help create filler text for everyone from bacon lovers
+                                                            to Charlie Sheen fans.
+                                                        </p>
+                                                        <form class="form-horizontal">
+                                                            <div class="input-group input-group-sm mb-0">
+                                                                <input class="form-control form-control-sm"
+                                                                       placeholder="Response">
+                                                                <div class="input-group-append">
+                                                                    <button type="submit" class="btn btn-danger">
+                                                                        Send
+                                                                    </button>
+                                                                </div>
+                                                            </div>
+                                                        </form>
+                                                    </div>
+                                                    <!-- /.post -->
+                                                    <!-- Post -->
+                                                    <div class="post">
+                                                        <div class="user-block">
+                                                            <img class="img-circle img-bordered-sm"
+                                                                 src="/static/assets/img/user6-128x128.jpg"
+                                                                 alt="User Image">
+                                                                <span class="username">
+                                                                    <a href="#">
+                                                                        Adam Jones
+                                                                    </a>
+                                                                    <a href="#" class="float-right btn-tool">
+                                                                        <i class="fas fa-times"></i>
+                                                                    </a>
+                                                                </span>
+                                                                <span class="description">
+                                                                    Posted 5 photos - 5 days ago
+                                                                </span>
+                                                            </div>
+                                                            <!-- /.user-block -->
+                                                            <div class="row mb-3">
+                                                                <div class="col-sm-6">
+                                                                    <img class="img-fluid"
+                                                                         src="/static/assets/img/photo1.png"
+                                                                         alt="Photo">
+                                                                    </div>
+                                                                    <!-- /.col -->
+                                                                    <div class="col-sm-6">
+                                                                        <div class="row">
+                                                                            <div class="col-sm-6">
+                                                                                <img class="img-fluid mb-3"
+                                                                                     src="/static/assets/img/photo2.png"
+                                                                                     alt="Photo">
+                                                                                    <img class="img-fluid"
+                                                                                         src="/static/assets/img/photo3.jpg"
+                                                                                         alt="Photo">
+                                                                                    </div>
+                                                                                    <!-- /.col -->
+                                                                                    <div class="col-sm-6">
+                                                                                        <img class="img-fluid mb-3"
+                                                                                             src="/static/assets/img/photo4.jpg"
+                                                                                             alt="Photo">
+                                                                                            <img class="img-fluid"
+                                                                                                 src="/static/assets/img/photo1.png"
+                                                                                                 alt="Photo">
+                                                                                            </div>
+                                                                                            <!-- /.col -->
+                                                                                        </div>
+                                                                                        <!-- /.row -->
+                                                                                    </div>
+                                                                                    <!-- /.col -->
+                                                                                </div>
+                                                                                <!-- /.row -->
+                                                                                <p>
+                                                                                    <a href="#"
+                                                                                       class="link-black text-sm mr-2">
+                                                                                        <i class="fas fa-share mr-1"></i>
+                                                                                        Share
+                                                                                    </a>
+                                                                                    <a href="#"
+                                                                                       class="link-black text-sm">
+                                                                                        <i class="far fa-thumbs-up mr-1"></i>
+                                                                                        Like
+                                                                                    </a>
+                                                                                    <span class="float-right">
+                                                                                        <a href="#"
+                                                                                           class="link-black text-sm">
+                                                                                            <i class="far fa-comments mr-1"></i>
+                                                                                            Comments (5)
+                                                                                        </a>
+                                                                                    </span>
+                                                                                </p>
+                                                                                <input class="form-control form-control-sm"
+                                                                                       type="text"
+                                                                                       placeholder="Type a comment">
+                                                                            </div>
+                                                                            <!-- /.post -->
+                                                                        </div>
+                                                                        <!-- /.tab-pane -->
+                                                                        <div class="tab-pane" id="timeline">
+                                                                            <!-- The timeline -->
+                                                                            <div class="timeline timeline-inverse">
+                                                                                <!-- timeline time label -->
+                                                                                <div class="time-label">
+                                                                                    <span class="bg-danger">
+                                                                                        10 Feb. 2014
+                                                                                    </span>
+                                                                                </div>
+                                                                                <!-- /.timeline-label -->
+                                                                                <!-- timeline item -->
+                                                                                <div>
+                                                                                    <i class="fas fa-envelope bg-primary"></i>
+                                                                                    <div class="timeline-item">
+                                                                                        <span class="time">
+                                                                                            <i class="far fa-clock"></i>
+                                                                                            12:05
+                                                                                        </span>
+                                                                                        <h3 class="timeline-header">
+                                                                                            <a href="#">
+                                                                                                Support Team
+                                                                                            </a>
+                                                                                            sent you an email
+                                                                                        </h3>
+                                                                                        <div class="timeline-body">
+                                                                                            Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
+                                                                                            weebly ning heekya handango imeem plugg dopplr jibjab, movity
+                                                                                            jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
+                                                                                            quora plaxo ideeli hulu weebly balihoo...
+                                                                                        </div>
+                                                                                        <div class="timeline-footer">
+                                                                                            <a href="#"
+                                                                                               class="btn btn-primary btn-sm">
+                                                                                                Read more
+                                                                                            </a>
+                                                                                            <a href="#"
+                                                                                               class="btn btn-danger btn-sm">
+                                                                                                Delete
+                                                                                            </a>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <!-- END timeline item -->
+                                                                                <!-- timeline item -->
+                                                                                <div>
+                                                                                    <i class="fas fa-user bg-info"></i>
+                                                                                    <div class="timeline-item">
+                                                                                        <span class="time">
+                                                                                            <i class="far fa-clock"></i>
+                                                                                            5 mins ago
+                                                                                        </span>
+                                                                                        <h3 class="timeline-header border-0">
+                                                                                            <a href="#">
+                                                                                                Sarah Young
+                                                                                            </a>
+                                                                                            accepted your friend request
+                                                                                        </h3>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <!-- END timeline item -->
+                                                                                <!-- timeline item -->
+                                                                                <div>
+                                                                                    <i class="fas fa-comments bg-warning"></i>
+                                                                                    <div class="timeline-item">
+                                                                                        <span class="time">
+                                                                                            <i class="far fa-clock"></i>
+                                                                                            27 mins ago
+                                                                                        </span>
+                                                                                        <h3 class="timeline-header">
+                                                                                            <a href="#">
+                                                                                                Jay White
+                                                                                            </a>
+                                                                                            commented on your post
+                                                                                        </h3>
+                                                                                        <div class="timeline-body">
+                                                                                            Take me to your leader!
+                                                                                            Switzerland is small and neutral!
+                                                                                            We are more like Germany, ambitious and misunderstood!
+                                                                                        </div>
+                                                                                        <div class="timeline-footer">
+                                                                                            <a href="#"
+                                                                                               class="btn btn-warning btn-flat btn-sm">
+                                                                                                View comment
+                                                                                            </a>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <!-- END timeline item -->
+                                                                                <!-- timeline time label -->
+                                                                                <div class="time-label">
+                                                                                    <span class="bg-success">
+                                                                                        3 Jan. 2014
+                                                                                    </span>
+                                                                                </div>
+                                                                                <!-- /.timeline-label -->
+                                                                                <!-- timeline item -->
+                                                                                <div>
+                                                                                    <i class="fas fa-camera bg-purple"></i>
+                                                                                    <div class="timeline-item">
+                                                                                        <span class="time">
+                                                                                            <i class="far fa-clock"></i>
+                                                                                            2 days ago
+                                                                                        </span>
+                                                                                        <h3 class="timeline-header">
+                                                                                            <a href="#">
+                                                                                                Mina Lee
+                                                                                            </a>
+                                                                                            uploaded new photos
+                                                                                        </h3>
+                                                                                        <div class="timeline-body">
+                                                                                            <img src="https://placehold.it/150x100"
+                                                                                                 alt="...">
+                                                                                                <img src="https://placehold.it/150x100"
+                                                                                                     alt="...">
+                                                                                                    <img src="https://placehold.it/150x100"
+                                                                                                         alt="...">
+                                                                                                        <img src="https://placehold.it/150x100"
+                                                                                                             alt="...">
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                                <!-- END timeline item -->
+                                                                                                <div>
+                                                                                                    <i class="far fa-clock bg-gray"></i>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        </div>
+                                                                                        <!-- /.tab-pane -->
+                                                                                        <div class="tab-pane"
+                                                                                             id="settings">
+                                                                                            <form class="form-horizontal">
+                                                                                                <div class="form-group row">
+                                                                                                    <label for="inputName"
+                                                                                                           class="col-sm-2 col-form-label">
+                                                                                                        Name
+                                                                                                    </label>
+                                                                                                    <div class="col-sm-10">
+                                                                                                        <input type="email"
+                                                                                                               class="form-control"
+                                                                                                               id="inputName"
+                                                                                                               placeholder="Name">
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                                <div class="form-group row">
+                                                                                                    <label for="inputEmail"
+                                                                                                           class="col-sm-2 col-form-label">
+                                                                                                        Email
+                                                                                                    </label>
+                                                                                                    <div class="col-sm-10">
+                                                                                                        <input type="email"
+                                                                                                               class="form-control"
+                                                                                                               id="inputEmail"
+                                                                                                               placeholder="Email">
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                                <div class="form-group row">
+                                                                                                    <label for="inputName2"
+                                                                                                           class="col-sm-2 col-form-label">
+                                                                                                        Name
+                                                                                                    </label>
+                                                                                                    <div class="col-sm-10">
+                                                                                                        <input type="text"
+                                                                                                               class="form-control"
+                                                                                                               id="inputName2"
+                                                                                                               placeholder="Name">
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                                <div class="form-group row">
+                                                                                                    <label for="inputExperience"
+                                                                                                           class="col-sm-2 col-form-label">
+                                                                                                        Experience
+                                                                                                    </label>
+                                                                                                    <div class="col-sm-10">
+                                                                                                        <textarea class="form-control"
+                                                                                                                  id="inputExperience"
+                                                                                                                  placeholder="Experience"></textarea>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                                <div class="form-group row">
+                                                                                                    <label for="inputSkills"
+                                                                                                           class="col-sm-2 col-form-label">
+                                                                                                        Skills
+                                                                                                    </label>
+                                                                                                    <div class="col-sm-10">
+                                                                                                        <input type="text"
+                                                                                                               class="form-control"
+                                                                                                               id="inputSkills"
+                                                                                                               placeholder="Skills">
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                                <div class="form-group row">
+                                                                                                    <div class="offset-sm-2 col-sm-10">
+                                                                                                        <div class="checkbox">
+                                                                                                            <label>
+                                                                                                                <input type="checkbox">
+                                                                                                                I agree to the
+                                                                                                                <a href="#">
+                                                                                                                    terms and conditions
+                                                                                                                </a>
+                                                                                                            </label>
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                                <div class="form-group row">
+                                                                                                    <div class="offset-sm-2 col-sm-10">
+                                                                                                        <button type="submit"
+                                                                                                                class="btn btn-danger">
+                                                                                                            Submit
+                                                                                                        </button>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </form>
+                                                                                        </div>
+                                                                                        <!-- /.tab-pane -->
+                                                                                    </div>
+                                                                                    <!-- /.tab-content -->
+                                                                                </div>
+                                                                                <!-- /.card-body -->
+                                                                            </div>
+                                                                            <!-- /.card -->
+                                                                        </div>
+                                                                        <!-- /.col -->
+                                                                    </div>
+                                                                    <!-- /.row -->
+                                                                </div>
+                                                                <!-- /.container-fluid -->
+                                                            </section>
+                                                            <!-- /.content -->
+                                                        </div>
+                                                    {% endblock content %}
+                                                    <!-- Specific Page JS goes HERE -->
+                                                    {% block javascripts %}
+                                                        <!-- jQuery -->
+                                                        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                                                        <!-- Bootstrap 4 -->
+                                                        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                                                        <!-- AdminLTE App -->
+                                                        <script src="/static/assets/js/adminlte.min.js"></script>
+                                                        <!-- AdminLTE for demo purposes -->
+                                                        <script src="/static/assets/js/demo.js"></script>
+                                                    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-project-add.html b/tests/jinja_adminlte/examples-project-add.html
new file mode 100644
index 0000000..9ef74d8
--- /dev/null
+++ b/tests/jinja_adminlte/examples-project-add.html
@@ -0,0 +1,167 @@
+{% extends "layouts/base.html" %}
+{% block title %}Product Add {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Project Add</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Project Add
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="card card-primary">
+                        <div class="card-header">
+                            <h3 class="card-title">General</h3>
+                            <div class="card-tools">
+                                <button type="button"
+                                        class="btn btn-tool"
+                                        data-card-widget="collapse"
+                                        title="Collapse">
+                                    <i class="fas fa-minus"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body">
+                            <div class="form-group">
+                                <label for="inputName">
+                                    Project Name
+                                </label>
+                                <input type="text" id="inputName" class="form-control">
+                            </div>
+                            <div class="form-group">
+                                <label for="inputDescription">
+                                    Project Description
+                                </label>
+                                <textarea id="inputDescription" class="form-control" rows="4"></textarea>
+                            </div>
+                            <div class="form-group">
+                                <label for="inputStatus">
+                                    Status
+                                </label>
+                                <select id="inputStatus" class="form-control custom-select">
+                                    <option selected disabled>
+                                        Select one
+                                    </option>
+                                    <option>
+                                        On Hold
+                                    </option>
+                                    <option>
+                                        Canceled
+                                    </option>
+                                    <option>
+                                        Success
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="inputClientCompany">
+                                    Client Company
+                                </label>
+                                <input type="text" id="inputClientCompany" class="form-control">
+                            </div>
+                            <div class="form-group">
+                                <label for="inputProjectLeader">
+                                    Project Leader
+                                </label>
+                                <input type="text" id="inputProjectLeader" class="form-control">
+                            </div>
+                        </div>
+                        <!-- /.card-body -->
+                    </div>
+                    <!-- /.card -->
+                </div>
+                <div class="col-md-6">
+                    <div class="card card-secondary">
+                        <div class="card-header">
+                            <h3 class="card-title">Budget</h3>
+                            <div class="card-tools">
+                                <button type="button"
+                                        class="btn btn-tool"
+                                        data-card-widget="collapse"
+                                        title="Collapse">
+                                    <i class="fas fa-minus"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body">
+                            <div class="form-group">
+                                <label for="inputEstimatedBudget">
+                                    Estimated budget
+                                </label>
+                                <input type="number" id="inputEstimatedBudget" class="form-control">
+                            </div>
+                            <div class="form-group">
+                                <label for="inputSpentBudget">
+                                    Total amount spent
+                                </label>
+                                <input type="number" id="inputSpentBudget" class="form-control">
+                            </div>
+                            <div class="form-group">
+                                <label for="inputEstimatedDuration">
+                                    Estimated project duration
+                                </label>
+                                <input type="number" id="inputEstimatedDuration" class="form-control">
+                            </div>
+                        </div>
+                        <!-- /.card-body -->
+                    </div>
+                    <!-- /.card -->
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-12">
+                    <a href="#" class="btn btn-secondary">
+                        Cancel
+                    </a>
+                    <input type="submit" value="Create new Porject" class="btn btn-success float-right">
+                </div>
+            </div>
+        </section>
+        <!-- /.content -->
+    </div>
+    <!-- /.content-wrapper -->
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-project-detail.html b/tests/jinja_adminlte/examples-project-detail.html
new file mode 100644
index 0000000..0dd2e3c
--- /dev/null
+++ b/tests/jinja_adminlte/examples-project-detail.html
@@ -0,0 +1,257 @@
+{% extends "layouts/base.html" %}
+{% block title %}Project Detail {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Project Detail</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Project Detail
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <!-- Default box -->
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Projects Detail</h3>
+                    <div class="card-tools">
+                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
+                            <i class="fas fa-minus"></i>
+                        </button>
+                        <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-12 col-md-12 col-lg-8 order-2 order-md-1">
+                            <div class="row">
+                                <div class="col-12 col-sm-4">
+                                    <div class="info-box bg-light">
+                                        <div class="info-box-content">
+                                            <span class="info-box-text text-center text-muted">
+                                                Estimated budget
+                                            </span>
+                                            <span class="info-box-number text-center text-muted mb-0">
+                                                2300
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-12 col-sm-4">
+                                    <div class="info-box bg-light">
+                                        <div class="info-box-content">
+                                            <span class="info-box-text text-center text-muted">
+                                                Total amount spent
+                                            </span>
+                                            <span class="info-box-number text-center text-muted mb-0">
+                                                2000
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-12 col-sm-4">
+                                    <div class="info-box bg-light">
+                                        <div class="info-box-content">
+                                            <span class="info-box-text text-center text-muted">
+                                                Estimated project duration
+                                            </span>
+                                            <span class="info-box-number text-center text-muted mb-0">
+                                                20
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col-12">
+                                    <h4>Recent Activity</h4>
+                                    <div class="post">
+                                        <div class="user-block">
+                                            <img class="img-circle img-bordered-sm"
+                                                 src="/static/assets/img/user1-128x128.jpg"
+                                                 alt="user image">
+                                                <span class="username">
+                                                    <a href="#">Jonathan Burke Jr.</a>
+                                                </span>
+                                                <span class="description">Shared publicly - 7:45 PM today</span>
+                                            </div>
+                                            <!-- /.user-block -->
+                                            <p>
+                                                Lorem ipsum represents a long-held tradition for designers,
+                                                typographers and the like. Some people hate it and argue for
+                                                its demise, but others ignore.
+                                            </p>
+                                            <p>
+                                                <a href="#" class="link-black text-sm">
+                                                    <i class="fas fa-link mr-1"></i>
+                                                    Demo File 1 v2
+                                                </a>
+                                            </p>
+                                        </div>
+                                        <div class="post clearfix">
+                                            <div class="user-block">
+                                                <img class="img-circle img-bordered-sm"
+                                                     src="/static/assets/img/user7-128x128.jpg"
+                                                     alt="User Image">
+                                                    <span class="username">
+                                                        <a href="#">Sarah Ross</a>
+                                                    </span>
+                                                    <span class="description">Sent you a message - 3 days ago</span>
+                                                </div>
+                                                <!-- /.user-block -->
+                                                <p>
+                                                    Lorem ipsum represents a long-held tradition for designers,
+                                                    typographers and the like. Some people hate it and argue for
+                                                    its demise, but others ignore.
+                                                </p>
+                                                <p>
+                                                    <a href="#" class="link-black text-sm">
+                                                        <i class="fas fa-link mr-1"></i>
+                                                        Demo File 2
+                                                    </a>
+                                                </p>
+                                            </div>
+                                            <div class="post">
+                                                <div class="user-block">
+                                                    <img class="img-circle img-bordered-sm"
+                                                         src="/static/assets/img/user1-128x128.jpg"
+                                                         alt="user image">
+                                                        <span class="username">
+                                                            <a href="#">Jonathan Burke Jr.</a>
+                                                        </span>
+                                                        <span class="description">Shared publicly - 5 days ago</span>
+                                                    </div>
+                                                    <!-- /.user-block -->
+                                                    <p>
+                                                        Lorem ipsum represents a long-held tradition for designers,
+                                                        typographers and the like. Some people hate it and argue for
+                                                        its demise, but others ignore.
+                                                    </p>
+                                                    <p>
+                                                        <a href="#" class="link-black text-sm">
+                                                            <i class="fas fa-link mr-1"></i>
+                                                            Demo File 1 v1
+                                                        </a>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-12 col-md-12 col-lg-4 order-1 order-md-2">
+                                        <h3 class="text-primary">
+                                            <i class="fas fa-paint-brush"></i>
+                                            AdminLTE v3
+                                        </h3>
+                                        <p class="text-muted">
+                                            Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terr.
+                                        </p>
+                                        <br>
+                                        <div class="text-muted">
+                                            <p class="text-sm">
+                                                Client Company
+                                                <b class="d-block">
+                                                Deveint Inc
+                                                </b>
+                                            </p>
+                                            <p class="text-sm">
+                                                Project Leader
+                                                <b class="d-block">
+                                                Tony Chicken
+                                                </b>
+                                            </p>
+                                        </div>
+                                        <h5 class="mt-5 text-muted">Project files</h5>
+                                        <ul class="list-unstyled">
+                                            <li>
+                                                <a href="" class="btn-link text-secondary">
+                                                    <i class="far fa-fw fa-file-word"></i>
+                                                    Functional-requirements.docx
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a href="" class="btn-link text-secondary">
+                                                    <i class="far fa-fw fa-file-pdf"></i>
+                                                    UAT.pdf
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a href="" class="btn-link text-secondary">
+                                                    <i class="far fa-fw fa-envelope"></i>
+                                                    Email-from-flatbal.mln
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a href="" class="btn-link text-secondary">
+                                                    <i class="far fa-fw fa-image "></i>
+                                                    Logo.png
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a href="" class="btn-link text-secondary">
+                                                    <i class="far fa-fw fa-file-word"></i>
+                                                    Contract-10_12_2014.docx
+                                                </a>
+                                            </li>
+                                        </ul>
+                                        <div class="text-center mt-5 mb-3">
+                                            <a href="#" class="btn btn-sm btn-primary">
+                                                Add files
+                                            </a>
+                                            <a href="#" class="btn btn-sm btn-warning">
+                                                Report contact
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                    </section>
+                    <!-- /.content -->
+                </div>
+                <!-- /.content-wrapper -->
+            {% endblock content %}
+            <!-- Specific Page JS goes HERE -->
+            {% block javascripts %}
+                <!-- jQuery -->
+                <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                <!-- Bootstrap 4 -->
+                <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                <!-- AdminLTE App -->
+                <script src="/static/assets/js/adminlte.min.js"></script>
+                <!-- AdminLTE for demo purposes -->
+                <script src="/static/assets/js/demo.js"></script>
+            {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-project-edit.html b/tests/jinja_adminlte/examples-project-edit.html
new file mode 100644
index 0000000..2a43f98
--- /dev/null
+++ b/tests/jinja_adminlte/examples-project-edit.html
@@ -0,0 +1,278 @@
+{% extends "layouts/base.html" %}
+{% block title %}Project Edit {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Project Edit</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Project Edit
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="card card-primary">
+                        <div class="card-header">
+                            <h3 class="card-title">General</h3>
+                            <div class="card-tools">
+                                <button type="button"
+                                        class="btn btn-tool"
+                                        data-card-widget="collapse"
+                                        title="Collapse">
+                                    <i class="fas fa-minus"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body">
+                            <div class="form-group">
+                                <label for="inputName">
+                                    Project Name
+                                </label>
+                                <input type="text" id="inputName" class="form-control" value="AdminLTE">
+                            </div>
+                            <div class="form-group">
+                                <label for="inputDescription">
+                                    Project Description
+                                </label>
+                                <textarea id="inputDescription" class="form-control" rows="4">
+                                Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terr.
+                                </textarea>
+                            </div>
+                            <div class="form-group">
+                                <label for="inputStatus">
+                                    Status
+                                </label>
+                                <select id="inputStatus" class="form-control custom-select">
+                                    <option disabled>
+                                        Select one
+                                    </option>
+                                    <option>
+                                        On Hold
+                                    </option>
+                                    <option>
+                                        Canceled
+                                    </option>
+                                    <option selected>
+                                        Success
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="inputClientCompany">
+                                    Client Company
+                                </label>
+                                <input type="text" id="inputClientCompany" class="form-control" value="Deveint Inc">
+                            </div>
+                            <div class="form-group">
+                                <label for="inputProjectLeader">
+                                    Project Leader
+                                </label>
+                                <input type="text" id="inputProjectLeader" class="form-control" value="Tony Chicken">
+                            </div>
+                        </div>
+                        <!-- /.card-body -->
+                    </div>
+                    <!-- /.card -->
+                </div>
+                <div class="col-md-6">
+                    <div class="card card-secondary">
+                        <div class="card-header">
+                            <h3 class="card-title">Budget</h3>
+                            <div class="card-tools">
+                                <button type="button"
+                                        class="btn btn-tool"
+                                        data-card-widget="collapse"
+                                        title="Collapse">
+                                    <i class="fas fa-minus"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body">
+                            <div class="form-group">
+                                <label for="inputEstimatedBudget">
+                                    Estimated budget
+                                </label>
+                                <input type="number"
+                                       id="inputEstimatedBudget"
+                                       class="form-control"
+                                       value="2300"
+                                       step="1">
+                            </div>
+                            <div class="form-group">
+                                <label for="inputSpentBudget">
+                                    Total amount spent
+                                </label>
+                                <input type="number" id="inputSpentBudget" class="form-control" value="2000" step="1">
+                            </div>
+                            <div class="form-group">
+                                <label for="inputEstimatedDuration">
+                                    Estimated project duration
+                                </label>
+                                <input type="number"
+                                       id="inputEstimatedDuration"
+                                       class="form-control"
+                                       value="20"
+                                       step="0.1">
+                            </div>
+                        </div>
+                        <!-- /.card-body -->
+                    </div>
+                    <!-- /.card -->
+                    <div class="card card-info">
+                        <div class="card-header">
+                            <h3 class="card-title">Files</h3>
+                            <div class="card-tools">
+                                <button type="button"
+                                        class="btn btn-tool"
+                                        data-card-widget="collapse"
+                                        title="Collapse">
+                                    <i class="fas fa-minus"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body p-0">
+                            <table class="table">
+                                <thead>
+                                    <tr>
+                                        <th>File Name</th>
+                                        <th>File Size</th>
+                                        <th></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>Functional-requirements.docx</td>
+                                        <td>49.8005 kb</td>
+                                        <td class="text-right py-0 align-middle">
+                                            <div class="btn-group btn-group-sm">
+                                                <a href="#" class="btn btn-info">
+                                                    <i class="fas fa-eye"></i>
+                                                </a>
+                                                <a href="#" class="btn btn-danger">
+                                                    <i class="fas fa-trash"></i>
+                                                </a>
+                                            </div>
+                                        </td>
+                                        <tr>
+                                            <td>UAT.pdf</td>
+                                            <td>28.4883 kb</td>
+                                            <td class="text-right py-0 align-middle">
+                                                <div class="btn-group btn-group-sm">
+                                                    <a href="#" class="btn btn-info">
+                                                        <i class="fas fa-eye"></i>
+                                                    </a>
+                                                    <a href="#" class="btn btn-danger">
+                                                        <i class="fas fa-trash"></i>
+                                                    </a>
+                                                </div>
+                                            </td>
+                                            <tr>
+                                                <td>Email-from-flatbal.mln</td>
+                                                <td>57.9003 kb</td>
+                                                <td class="text-right py-0 align-middle">
+                                                    <div class="btn-group btn-group-sm">
+                                                        <a href="#" class="btn btn-info">
+                                                            <i class="fas fa-eye"></i>
+                                                        </a>
+                                                        <a href="#" class="btn btn-danger">
+                                                            <i class="fas fa-trash"></i>
+                                                        </a>
+                                                    </div>
+                                                </td>
+                                                <tr>
+                                                    <td>
+                                                        Logo.png
+                                                    </td>
+                                                    <td>
+                                                        50.5190 kb
+                                                    </td>
+                                                    <td class="text-right py-0 align-middle">
+                                                        <div class="btn-group btn-group-sm">
+                                                            <a href="#" class="btn btn-info">
+                                                                <i class="fas fa-eye"></i>
+                                                            </a>
+                                                            <a href="#" class="btn btn-danger">
+                                                                <i class="fas fa-trash"></i>
+                                                            </a>
+                                                        </div>
+                                                    </td>
+                                                    <tr>
+                                                        <td>
+                                                            Contract-10_12_2014.docx
+                                                        </td>
+                                                        <td>
+                                                            44.9715 kb
+                                                        </td>
+                                                        <td class="text-right py-0 align-middle">
+                                                            <div class="btn-group btn-group-sm">
+                                                                <a href="#" class="btn btn-info">
+                                                                    <i class="fas fa-eye"></i>
+                                                                </a>
+                                                                <a href="#" class="btn btn-danger">
+                                                                    <i class="fas fa-trash"></i>
+                                                                </a>
+                                                            </div>
+                                                        </td>
+                                                    </tbody>
+                                                </table>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col-12">
+                                        <a href="#" class="btn btn-secondary">
+                                            Cancel
+                                        </a>
+                                        <input type="submit" value="Save Changes" class="btn btn-success float-right">
+                                    </div>
+                                </div>
+                            </section>
+                            <!-- /.content -->
+                        </div>
+                        <!-- /.content-wrapper -->
+                    {% endblock content %}
+                    <!-- Specific Page JS goes HERE -->
+                    {% block javascripts %}
+                        <!-- jQuery -->
+                        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                        <!-- Bootstrap 4 -->
+                        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                        <!-- AdminLTE App -->
+                        <script src="/static/assets/js/adminlte.min.js"></script>
+                        <!-- AdminLTE for demo purposes -->
+                        <script src="/static/assets/js/demo.js"></script>
+                    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-projects.html b/tests/jinja_adminlte/examples-projects.html
new file mode 100644
index 0000000..10c3ec2
--- /dev/null
+++ b/tests/jinja_adminlte/examples-projects.html
@@ -0,0 +1,679 @@
+{% extends "layouts/base.html" %}
+{% block title %}Projects {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Projects</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Projects
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <!-- Default box -->
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Projects</h3>
+                    <div class="card-tools">
+                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
+                            <i class="fas fa-minus"></i>
+                        </button>
+                        <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="card-body p-0">
+                    <table class="table table-striped projects">
+                        <thead>
+                            <tr>
+                                <th style="width: 1%">#</th>
+                                <th style="width: 20%">Project Name</th>
+                                <th style="width: 30%">Team Members</th>
+                                <th>Project Progress</th>
+                                <th style="width: 8%" class="text-center">
+                                    Status
+                                </th>
+                                <th style="width: 20%"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>#</td>
+                                <td>
+                                    <a>AdminLTE v3</a>
+                                    <br/>
+                                    <small>
+                                    Created 01.01.2019
+                                    </small>
+                                </td>
+                                <td>
+                                    <ul class="list-inline">
+                                        <li class="list-inline-item">
+                                            <img alt="Avatar" class="table-avatar" src="/static/assets/img/avatar.png">
+                                            </li>
+                                            <li class="list-inline-item">
+                                                <img alt="Avatar"
+                                                     class="table-avatar"
+                                                     src="/static/assets/img/avatar2.png">
+                                                </li>
+                                                <li class="list-inline-item">
+                                                    <img alt="Avatar"
+                                                         class="table-avatar"
+                                                         src="/static/assets/img/avatar3.png">
+                                                    </li>
+                                                    <li class="list-inline-item">
+                                                        <img alt="Avatar"
+                                                             class="table-avatar"
+                                                             src="/static/assets/img/avatar4.png">
+                                                        </li>
+                                                    </ul>
+                                                </td>
+                                                <td class="project_progress">
+                                                    <div class="progress progress-sm">
+                                                        <div class="progress-bar bg-green"
+                                                             role="progressbar"
+                                                             aria-valuenow="57"
+                                                             aria-valuemin="0"
+                                                             aria-valuemax="100"
+                                                             style="width: 57%"></div>
+                                                    </div>
+                                                    <small>
+                                                    57% Complete
+                                                    </small>
+                                                </td>
+                                                <td class="project-state">
+                                                    <span class="badge badge-success">Success</span>
+                                                </td>
+                                                <td class="project-actions text-right">
+                                                    <a class="btn btn-primary btn-sm" href="#">
+                                                        <i class="fas fa-folder"></i>
+                                                        View
+                                                    </a>
+                                                    <a class="btn btn-info btn-sm" href="#">
+                                                        <i class="fas fa-pencil-alt"></i>
+                                                        Edit
+                                                    </a>
+                                                    <a class="btn btn-danger btn-sm" href="#">
+                                                        <i class="fas fa-trash"></i>
+                                                        Delete
+                                                    </a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>#</td>
+                                                <td>
+                                                    <a>AdminLTE v3</a>
+                                                    <br/>
+                                                    <small>
+                                                    Created 01.01.2019
+                                                    </small>
+                                                </td>
+                                                <td>
+                                                    <ul class="list-inline">
+                                                        <li class="list-inline-item">
+                                                            <img alt="Avatar"
+                                                                 class="table-avatar"
+                                                                 src="/static/assets/img/avatar.png">
+                                                            </li>
+                                                            <li class="list-inline-item">
+                                                                <img alt="Avatar"
+                                                                     class="table-avatar"
+                                                                     src="/static/assets/img/avatar2.png">
+                                                                </li>
+                                                            </ul>
+                                                        </td>
+                                                        <td class="project_progress">
+                                                            <div class="progress progress-sm">
+                                                                <div class="progress-bar bg-green"
+                                                                     role="progressbar"
+                                                                     aria-valuenow="47"
+                                                                     aria-valuemin="0"
+                                                                     aria-valuemax="100"
+                                                                     style="width: 47%"></div>
+                                                            </div>
+                                                            <small>
+                                                            47% Complete
+                                                            </small>
+                                                        </td>
+                                                        <td class="project-state">
+                                                            <span class="badge badge-success">Success</span>
+                                                        </td>
+                                                        <td class="project-actions text-right">
+                                                            <a class="btn btn-primary btn-sm" href="#">
+                                                                <i class="fas fa-folder"></i>
+                                                                View
+                                                            </a>
+                                                            <a class="btn btn-info btn-sm" href="#">
+                                                                <i class="fas fa-pencil-alt"></i>
+                                                                Edit
+                                                            </a>
+                                                            <a class="btn btn-danger btn-sm" href="#">
+                                                                <i class="fas fa-trash"></i>
+                                                                Delete
+                                                            </a>
+                                                        </td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td>#</td>
+                                                        <td>
+                                                            <a>AdminLTE v3</a>
+                                                            <br/>
+                                                            <small>
+                                                            Created 01.01.2019
+                                                            </small>
+                                                        </td>
+                                                        <td>
+                                                            <ul class="list-inline">
+                                                                <li class="list-inline-item">
+                                                                    <img alt="Avatar"
+                                                                         class="table-avatar"
+                                                                         src="/static/assets/img/avatar.png">
+                                                                    </li>
+                                                                    <li class="list-inline-item">
+                                                                        <img alt="Avatar"
+                                                                             class="table-avatar"
+                                                                             src="/static/assets/img/avatar2.png">
+                                                                        </li>
+                                                                        <li class="list-inline-item">
+                                                                            <img alt="Avatar"
+                                                                                 class="table-avatar"
+                                                                                 src="/static/assets/img/avatar3.png">
+                                                                            </li>
+                                                                        </ul>
+                                                                    </td>
+                                                                    <td class="project_progress">
+                                                                        <div class="progress progress-sm">
+                                                                            <div class="progress-bar bg-green"
+                                                                                 role="progressbar"
+                                                                                 aria-valuenow="77"
+                                                                                 aria-valuemin="0"
+                                                                                 aria-valuemax="100"
+                                                                                 style="width: 77%"></div>
+                                                                        </div>
+                                                                        <small>
+                                                                        77% Complete
+                                                                        </small>
+                                                                    </td>
+                                                                    <td class="project-state">
+                                                                        <span class="badge badge-success">Success</span>
+                                                                    </td>
+                                                                    <td class="project-actions text-right">
+                                                                        <a class="btn btn-primary btn-sm" href="#">
+                                                                            <i class="fas fa-folder"></i>
+                                                                            View
+                                                                        </a>
+                                                                        <a class="btn btn-info btn-sm" href="#">
+                                                                            <i class="fas fa-pencil-alt"></i>
+                                                                            Edit
+                                                                        </a>
+                                                                        <a class="btn btn-danger btn-sm" href="#">
+                                                                            <i class="fas fa-trash"></i>
+                                                                            Delete
+                                                                        </a>
+                                                                    </td>
+                                                                </tr>
+                                                                <tr>
+                                                                    <td>#</td>
+                                                                    <td>
+                                                                        <a>AdminLTE v3</a>
+                                                                        <br/>
+                                                                        <small>
+                                                                        Created 01.01.2019
+                                                                        </small>
+                                                                    </td>
+                                                                    <td>
+                                                                        <ul class="list-inline">
+                                                                            <li class="list-inline-item">
+                                                                                <img alt="Avatar"
+                                                                                     class="table-avatar"
+                                                                                     src="/static/assets/img/avatar.png">
+                                                                                </li>
+                                                                                <li class="list-inline-item">
+                                                                                    <img alt="Avatar"
+                                                                                         class="table-avatar"
+                                                                                         src="/static/assets/img/avatar2.png">
+                                                                                    </li>
+                                                                                    <li class="list-inline-item">
+                                                                                        <img alt="Avatar"
+                                                                                             class="table-avatar"
+                                                                                             src="/static/assets/img/avatar3.png">
+                                                                                        </li>
+                                                                                        <li class="list-inline-item">
+                                                                                            <img alt="Avatar"
+                                                                                                 class="table-avatar"
+                                                                                                 src="/static/assets/img/avatar4.png">
+                                                                                            </li>
+                                                                                        </ul>
+                                                                                    </td>
+                                                                                    <td class="project_progress">
+                                                                                        <div class="progress progress-sm">
+                                                                                            <div class="progress-bar bg-green"
+                                                                                                 role="progressbar"
+                                                                                                 aria-valuenow="60"
+                                                                                                 aria-valuemin="0"
+                                                                                                 aria-valuemax="100"
+                                                                                                 style="width: 60%"></div>
+                                                                                        </div>
+                                                                                        <small>
+                                                                                        60% Complete
+                                                                                        </small>
+                                                                                    </td>
+                                                                                    <td class="project-state">
+                                                                                        <span class="badge badge-success">Success</span>
+                                                                                    </td>
+                                                                                    <td class="project-actions text-right">
+                                                                                        <a class="btn btn-primary btn-sm"
+                                                                                           href="#">
+                                                                                            <i class="fas fa-folder"></i>
+                                                                                            View
+                                                                                        </a>
+                                                                                        <a class="btn btn-info btn-sm"
+                                                                                           href="#">
+                                                                                            <i class="fas fa-pencil-alt"></i>
+                                                                                            Edit
+                                                                                        </a>
+                                                                                        <a class="btn btn-danger btn-sm"
+                                                                                           href="#">
+                                                                                            <i class="fas fa-trash"></i>
+                                                                                            Delete
+                                                                                        </a>
+                                                                                    </td>
+                                                                                </tr>
+                                                                                <tr>
+                                                                                    <td>
+                                                                                        #
+                                                                                    </td>
+                                                                                    <td>
+                                                                                        <a>
+                                                                                            AdminLTE v3
+                                                                                        </a>
+                                                                                        <br/>
+                                                                                        <small>
+                                                                                        Created 01.01.2019
+                                                                                        </small>
+                                                                                    </td>
+                                                                                    <td>
+                                                                                        <ul class="list-inline">
+                                                                                            <li class="list-inline-item">
+                                                                                                <img alt="Avatar"
+                                                                                                     class="table-avatar"
+                                                                                                     src="/static/assets/img/avatar.png">
+                                                                                                </li>
+                                                                                                <li class="list-inline-item">
+                                                                                                    <img alt="Avatar"
+                                                                                                         class="table-avatar"
+                                                                                                         src="/static/assets/img/avatar4.png">
+                                                                                                    </li>
+                                                                                                    <li class="list-inline-item">
+                                                                                                        <img alt="Avatar"
+                                                                                                             class="table-avatar"
+                                                                                                             src="/static/assets/img/avatar5.png">
+                                                                                                        </li>
+                                                                                                    </ul>
+                                                                                                </td>
+                                                                                                <td class="project_progress">
+                                                                                                    <div class="progress progress-sm">
+                                                                                                        <div class="progress-bar bg-green"
+                                                                                                             role="progressbar"
+                                                                                                             aria-valuenow="12"
+                                                                                                             aria-valuemin="0"
+                                                                                                             aria-valuemax="100"
+                                                                                                             style="width: 12%"></div>
+                                                                                                    </div>
+                                                                                                    <small>
+                                                                                                    12% Complete
+                                                                                                    </small>
+                                                                                                </td>
+                                                                                                <td class="project-state">
+                                                                                                    <span class="badge badge-success">
+                                                                                                        Success
+                                                                                                    </span>
+                                                                                                </td>
+                                                                                                <td class="project-actions text-right">
+                                                                                                    <a class="btn btn-primary btn-sm"
+                                                                                                       href="#">
+                                                                                                        <i class="fas fa-folder"></i>
+                                                                                                        View
+                                                                                                    </a>
+                                                                                                    <a class="btn btn-info btn-sm"
+                                                                                                       href="#">
+                                                                                                        <i class="fas fa-pencil-alt"></i>
+                                                                                                        Edit
+                                                                                                    </a>
+                                                                                                    <a class="btn btn-danger btn-sm"
+                                                                                                       href="#">
+                                                                                                        <i class="fas fa-trash"></i>
+                                                                                                        Delete
+                                                                                                    </a>
+                                                                                                </td>
+                                                                                            </tr>
+                                                                                            <tr>
+                                                                                                <td>
+                                                                                                    #
+                                                                                                </td>
+                                                                                                <td>
+                                                                                                    <a>
+                                                                                                        AdminLTE v3
+                                                                                                    </a>
+                                                                                                    <br/>
+                                                                                                    <small>
+                                                                                                    Created 01.01.2019
+                                                                                                    </small>
+                                                                                                </td>
+                                                                                                <td>
+                                                                                                    <ul class="list-inline">
+                                                                                                        <li class="list-inline-item">
+                                                                                                            <img alt="Avatar"
+                                                                                                                 class="table-avatar"
+                                                                                                                 src="/static/assets/img/avatar.png">
+                                                                                                            </li>
+                                                                                                            <li class="list-inline-item">
+                                                                                                                <img alt="Avatar"
+                                                                                                                     class="table-avatar"
+                                                                                                                     src="/static/assets/img/avatar2.png">
+                                                                                                                </li>
+                                                                                                                <li class="list-inline-item">
+                                                                                                                    <img alt="Avatar"
+                                                                                                                         class="table-avatar"
+                                                                                                                         src="/static/assets/img/avatar3.png">
+                                                                                                                    </li>
+                                                                                                                    <li class="list-inline-item">
+                                                                                                                        <img alt="Avatar"
+                                                                                                                             class="table-avatar"
+                                                                                                                             src="/static/assets/img/avatar4.png">
+                                                                                                                        </li>
+                                                                                                                    </ul>
+                                                                                                                </td>
+                                                                                                                <td class="project_progress">
+                                                                                                                    <div class="progress progress-sm">
+                                                                                                                        <div class="progress-bar bg-green"
+                                                                                                                             role="progressbar"
+                                                                                                                             aria-valuenow="35"
+                                                                                                                             aria-valuemin="0"
+                                                                                                                             aria-valuemax="100"
+                                                                                                                             style="width: 35%"></div>
+                                                                                                                    </div>
+                                                                                                                    <small>
+                                                                                                                    35% Complete
+                                                                                                                    </small>
+                                                                                                                </td>
+                                                                                                                <td class="project-state">
+                                                                                                                    <span class="badge badge-success">
+                                                                                                                        Success
+                                                                                                                    </span>
+                                                                                                                </td>
+                                                                                                                <td class="project-actions text-right">
+                                                                                                                    <a class="btn btn-primary btn-sm"
+                                                                                                                       href="#">
+                                                                                                                        <i class="fas fa-folder"></i>
+                                                                                                                        View
+                                                                                                                    </a>
+                                                                                                                    <a class="btn btn-info btn-sm"
+                                                                                                                       href="#">
+                                                                                                                        <i class="fas fa-pencil-alt"></i>
+                                                                                                                        Edit
+                                                                                                                    </a>
+                                                                                                                    <a class="btn btn-danger btn-sm"
+                                                                                                                       href="#">
+                                                                                                                        <i class="fas fa-trash"></i>
+                                                                                                                        Delete
+                                                                                                                    </a>
+                                                                                                                </td>
+                                                                                                            </tr>
+                                                                                                            <tr>
+                                                                                                                <td>
+                                                                                                                    #
+                                                                                                                </td>
+                                                                                                                <td>
+                                                                                                                    <a>
+                                                                                                                        AdminLTE v3
+                                                                                                                    </a>
+                                                                                                                    <br/>
+                                                                                                                    <small>
+                                                                                                                    Created 01.01.2019
+                                                                                                                    </small>
+                                                                                                                </td>
+                                                                                                                <td>
+                                                                                                                    <ul class="list-inline">
+                                                                                                                        <li class="list-inline-item">
+                                                                                                                            <img alt="Avatar"
+                                                                                                                                 class="table-avatar"
+                                                                                                                                 src="/static/assets/img/avatar4.png">
+                                                                                                                            </li>
+                                                                                                                            <li class="list-inline-item">
+                                                                                                                                <img alt="Avatar"
+                                                                                                                                     class="table-avatar"
+                                                                                                                                     src="/static/assets/img/avatar5.png">
+                                                                                                                                </li>
+                                                                                                                            </ul>
+                                                                                                                        </td>
+                                                                                                                        <td class="project_progress">
+                                                                                                                            <div class="progress progress-sm">
+                                                                                                                                <div class="progress-bar bg-green"
+                                                                                                                                     role="progressbar"
+                                                                                                                                     aria-valuenow="87"
+                                                                                                                                     aria-valuemin="0"
+                                                                                                                                     aria-valuemax="100"
+                                                                                                                                     style="width: 87%"></div>
+                                                                                                                            </div>
+                                                                                                                            <small>
+                                                                                                                            87% Complete
+                                                                                                                            </small>
+                                                                                                                        </td>
+                                                                                                                        <td class="project-state">
+                                                                                                                            <span class="badge badge-success">
+                                                                                                                                Success
+                                                                                                                            </span>
+                                                                                                                        </td>
+                                                                                                                        <td class="project-actions text-right">
+                                                                                                                            <a class="btn btn-primary btn-sm"
+                                                                                                                               href="#">
+                                                                                                                                <i class="fas fa-folder"></i>
+                                                                                                                                View
+                                                                                                                            </a>
+                                                                                                                            <a class="btn btn-info btn-sm"
+                                                                                                                               href="#">
+                                                                                                                                <i class="fas fa-pencil-alt"></i>
+                                                                                                                                Edit
+                                                                                                                            </a>
+                                                                                                                            <a class="btn btn-danger btn-sm"
+                                                                                                                               href="#">
+                                                                                                                                <i class="fas fa-trash"></i>
+                                                                                                                                Delete
+                                                                                                                            </a>
+                                                                                                                        </td>
+                                                                                                                    </tr>
+                                                                                                                    <tr>
+                                                                                                                        <td>
+                                                                                                                            #
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <a>
+                                                                                                                                AdminLTE v3
+                                                                                                                            </a>
+                                                                                                                            <br/>
+                                                                                                                            <small>
+                                                                                                                            Created 01.01.2019
+                                                                                                                            </small>
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <ul class="list-inline">
+                                                                                                                                <li class="list-inline-item">
+                                                                                                                                    <img alt="Avatar"
+                                                                                                                                         class="table-avatar"
+                                                                                                                                         src="/static/assets/img/avatar.png">
+                                                                                                                                    </li>
+                                                                                                                                    <li class="list-inline-item">
+                                                                                                                                        <img alt="Avatar"
+                                                                                                                                             class="table-avatar"
+                                                                                                                                             src="/static/assets/img/avatar3.png">
+                                                                                                                                        </li>
+                                                                                                                                        <li class="list-inline-item">
+                                                                                                                                            <img alt="Avatar"
+                                                                                                                                                 class="table-avatar"
+                                                                                                                                                 src="/static/assets/img/avatar4.png">
+                                                                                                                                            </li>
+                                                                                                                                        </ul>
+                                                                                                                                    </td>
+                                                                                                                                    <td class="project_progress">
+                                                                                                                                        <div class="progress progress-sm">
+                                                                                                                                            <div class="progress-bar bg-green"
+                                                                                                                                                 role="progressbar"
+                                                                                                                                                 aria-valuenow="77"
+                                                                                                                                                 aria-valuemin="0"
+                                                                                                                                                 aria-valuemax="100"
+                                                                                                                                                 style="width: 77%"></div>
+                                                                                                                                        </div>
+                                                                                                                                        <small>
+                                                                                                                                        77% Complete
+                                                                                                                                        </small>
+                                                                                                                                    </td>
+                                                                                                                                    <td class="project-state">
+                                                                                                                                        <span class="badge badge-success">
+                                                                                                                                            Success
+                                                                                                                                        </span>
+                                                                                                                                    </td>
+                                                                                                                                    <td class="project-actions text-right">
+                                                                                                                                        <a class="btn btn-primary btn-sm"
+                                                                                                                                           href="#">
+                                                                                                                                            <i class="fas fa-folder"></i>
+                                                                                                                                            View
+                                                                                                                                        </a>
+                                                                                                                                        <a class="btn btn-info btn-sm"
+                                                                                                                                           href="#">
+                                                                                                                                            <i class="fas fa-pencil-alt"></i>
+                                                                                                                                            Edit
+                                                                                                                                        </a>
+                                                                                                                                        <a class="btn btn-danger btn-sm"
+                                                                                                                                           href="#">
+                                                                                                                                            <i class="fas fa-trash"></i>
+                                                                                                                                            Delete
+                                                                                                                                        </a>
+                                                                                                                                    </td>
+                                                                                                                                </tr>
+                                                                                                                                <tr>
+                                                                                                                                    <td>
+                                                                                                                                        #
+                                                                                                                                    </td>
+                                                                                                                                    <td>
+                                                                                                                                        <a>
+                                                                                                                                            AdminLTE v3
+                                                                                                                                        </a>
+                                                                                                                                        <br/>
+                                                                                                                                        <small>
+                                                                                                                                        Created 01.01.2019
+                                                                                                                                        </small>
+                                                                                                                                    </td>
+                                                                                                                                    <td>
+                                                                                                                                        <ul class="list-inline">
+                                                                                                                                            <li class="list-inline-item">
+                                                                                                                                                <img alt="Avatar"
+                                                                                                                                                     class="table-avatar"
+                                                                                                                                                     src="/static/assets/img/avatar.png">
+                                                                                                                                                </li>
+                                                                                                                                                <li class="list-inline-item">
+                                                                                                                                                    <img alt="Avatar"
+                                                                                                                                                         class="table-avatar"
+                                                                                                                                                         src="/static/assets/img/avatar3.png">
+                                                                                                                                                    </li>
+                                                                                                                                                    <li class="list-inline-item">
+                                                                                                                                                        <img alt="Avatar"
+                                                                                                                                                             class="table-avatar"
+                                                                                                                                                             src="/static/assets/img/avatar4.png">
+                                                                                                                                                        </li>
+                                                                                                                                                        <li class="list-inline-item">
+                                                                                                                                                            <img alt="Avatar"
+                                                                                                                                                                 class="table-avatar"
+                                                                                                                                                                 src="/static/assets/img/avatar5.png">
+                                                                                                                                                            </li>
+                                                                                                                                                        </ul>
+                                                                                                                                                    </td>
+                                                                                                                                                    <td class="project_progress">
+                                                                                                                                                        <div class="progress progress-sm">
+                                                                                                                                                            <div class="progress-bar bg-green"
+                                                                                                                                                                 role="progressbar"
+                                                                                                                                                                 aria-valuenow="77"
+                                                                                                                                                                 aria-valuemin="0"
+                                                                                                                                                                 aria-valuemax="100"
+                                                                                                                                                                 style="width: 77%"></div>
+                                                                                                                                                        </div>
+                                                                                                                                                        <small>
+                                                                                                                                                        77% Complete
+                                                                                                                                                        </small>
+                                                                                                                                                    </td>
+                                                                                                                                                    <td class="project-state">
+                                                                                                                                                        <span class="badge badge-success">
+                                                                                                                                                            Success
+                                                                                                                                                        </span>
+                                                                                                                                                    </td>
+                                                                                                                                                    <td class="project-actions text-right">
+                                                                                                                                                        <a class="btn btn-primary btn-sm"
+                                                                                                                                                           href="#">
+                                                                                                                                                            <i class="fas fa-folder"></i>
+                                                                                                                                                            View
+                                                                                                                                                        </a>
+                                                                                                                                                        <a class="btn btn-info btn-sm"
+                                                                                                                                                           href="#">
+                                                                                                                                                            <i class="fas fa-pencil-alt"></i>
+                                                                                                                                                            Edit
+                                                                                                                                                        </a>
+                                                                                                                                                        <a class="btn btn-danger btn-sm"
+                                                                                                                                                           href="#">
+                                                                                                                                                            <i class="fas fa-trash"></i>
+                                                                                                                                                            Delete
+                                                                                                                                                        </a>
+                                                                                                                                                    </td>
+                                                                                                                                                </tr>
+                                                                                                                                            </tbody>
+                                                                                                                                        </table>
+                                                                                                                                    </div>
+                                                                                                                                    <!-- /.card-body -->
+                                                                                                                                </div>
+                                                                                                                                <!-- /.card -->
+                                                                                                                            </section>
+                                                                                                                            <!-- /.content -->
+                                                                                                                        </div>
+                                                                                                                        <!-- /.content-wrapper -->
+                                                                                                                    {% endblock content %}
+                                                                                                                    <!-- Specific Page JS goes HERE -->
+                                                                                                                    {% block javascripts %}
+                                                                                                                        <!-- jQuery -->
+                                                                                                                        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                                                                                                                        <!-- Bootstrap 4 -->
+                                                                                                                        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                                                                                                                        <!-- AdminLTE App -->
+                                                                                                                        <script src="/static/assets/js/adminlte.min.js"></script>
+                                                                                                                        <!-- AdminLTE for demo purposes -->
+                                                                                                                        <script src="/static/assets/js/demo.js"></script>
+                                                                                                                    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-recover-password.html b/tests/jinja_adminlte/examples-recover-password.html
new file mode 100644
index 0000000..5e2af2e
--- /dev/null
+++ b/tests/jinja_adminlte/examples-recover-password.html
@@ -0,0 +1,75 @@
+{% extends "layouts/base-fullscreen.html" %}
+{% block title %}Recover Password {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    login-page
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- icheck bootstrap -->
+    <link rel="stylesheet" href="/static/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="login-box">
+        <div class="login-logo">
+            <a href="/">
+                <b>
+                Admin
+                </b>
+                LTE
+            </a>
+        </div>
+        <!-- /.login-logo -->
+        <div class="card">
+            <div class="card-body login-card-body">
+                <p class="login-box-msg">
+                    You are only one step a way from your new password, recover your password now.
+                </p>
+                <form action="login.html" method="post">
+                    <div class="input-group mb-3">
+                        <input type="password" class="form-control" placeholder="Password">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-lock"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="password" class="form-control" placeholder="Confirm Password">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-lock"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-12">
+                            <button type="submit" class="btn btn-primary btn-block">
+                                Change password
+                            </button>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                </form>
+                <p class="mt-3 mb-1">
+                    <a href="/examples-login.html">Login</a>
+                </p>
+            </div>
+            <!-- /.login-card-body -->
+        </div>
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/examples-register.html b/tests/jinja_adminlte/examples-register.html
new file mode 100644
index 0000000..d6f6c79
--- /dev/null
+++ b/tests/jinja_adminlte/examples-register.html
@@ -0,0 +1,114 @@
+{% extends "layouts/base-fullscreen.html" %}
+{% block title %}Register {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    register-page
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- icheck bootstrap -->
+    <link rel="stylesheet" href="/static/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="register-box">
+        <div class="register-logo">
+            <a href="/">
+                <b>
+                Admin
+                </b>
+                LTE
+            </a>
+        </div>
+        <div class="card">
+            <div class="card-body register-card-body">
+                <p class="login-box-msg">
+                    Register a new membership
+                </p>
+                <form action="../../index.html" method="post">
+                    <div class="input-group mb-3">
+                        <input type="text" class="form-control" placeholder="Full name">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-user"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="email" class="form-control" placeholder="Email">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-envelope"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="password" class="form-control" placeholder="Password">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-lock"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="password" class="form-control" placeholder="Retype password">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-lock"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-8">
+                            <div class="icheck-primary">
+                                <input type="checkbox" id="agreeTerms" name="terms" value="agree">
+                                <label for="agreeTerms">
+                                    I agree to the
+                                    <a href="#">terms</a>
+                                </label>
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-4">
+                            <button type="submit" class="btn btn-primary btn-block">
+                                Register
+                            </button>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                </form>
+                <div class="social-auth-links text-center">
+                    <p>
+                        - OR -
+                    </p>
+                    <a href="#" class="btn btn-block btn-primary">
+                        <i class="fab fa-facebook mr-2"></i>
+                        Sign up using Facebook
+                    </a>
+                    <a href="#" class="btn btn-block btn-danger">
+                        <i class="fab fa-google-plus mr-2"></i>
+                        Sign up using Google+
+                    </a>
+                </div>
+                <a href="/examples-login.html" class="text-center">
+                    I already have a membership
+                </a>
+            </div>
+            <!-- /.form-box -->
+        </div>
+        <!-- /.card -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/forms-advanced.html b/tests/jinja_adminlte/forms-advanced.html
new file mode 100644
index 0000000..026f3d3
--- /dev/null
+++ b/tests/jinja_adminlte/forms-advanced.html
@@ -0,0 +1,1007 @@
+{% extends "layouts/base.html" %}
+{% block title %}Forms Advanced {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- daterange picker -->
+    <link rel="stylesheet" href="/static/assets/plugins/daterangepicker/daterangepicker.css">
+    <!-- iCheck for checkboxes and radio inputs -->
+    <link rel="stylesheet" href="/static/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+    <!-- Bootstrap Color Picker -->
+    <link rel="stylesheet" href="/static/assets/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
+    <!-- Tempusdominus Bootstrap 4 -->
+    <link rel="stylesheet"
+          href="/static/assets/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
+    <!-- Select2 -->
+    <link rel="stylesheet" href="/static/assets/plugins/select2/css/select2.min.css">
+    <link rel="stylesheet" href="/static/assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
+    <!-- Bootstrap4 Duallistbox -->
+    <link rel="stylesheet" href="/static/assets/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Advanced Form</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Advanced Form
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <!-- SELECT2 EXAMPLE -->
+                <div class="card card-default">
+                    <div class="card-header">
+                        <h3 class="card-title">Select2 (Default Theme)</h3>
+                        <div class="card-tools">
+                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                <i class="fas fa-minus"></i>
+                            </button>
+                            <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <!-- /.card-header -->
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label>
+                                        Minimal
+                                    </label>
+                                    <select class="form-control select2" style="width: 100%;">
+                                        <option selected="selected">
+                                            Alabama
+                                        </option>
+                                        <option>
+                                            Alaska
+                                        </option>
+                                        <option>
+                                            California
+                                        </option>
+                                        <option>
+                                            Delaware
+                                        </option>
+                                        <option>
+                                            Tennessee
+                                        </option>
+                                        <option>
+                                            Texas
+                                        </option>
+                                        <option>
+                                            Washington
+                                        </option>
+                                    </select>
+                                </div>
+                                <!-- /.form-group -->
+                                <div class="form-group">
+                                    <label>
+                                        Disabled
+                                    </label>
+                                    <select class="form-control select2" disabled="disabled" style="width: 100%;">
+                                        <option selected="selected">
+                                            Alabama
+                                        </option>
+                                        <option>
+                                            Alaska
+                                        </option>
+                                        <option>
+                                            California
+                                        </option>
+                                        <option>
+                                            Delaware
+                                        </option>
+                                        <option>
+                                            Tennessee
+                                        </option>
+                                        <option>
+                                            Texas
+                                        </option>
+                                        <option>
+                                            Washington
+                                        </option>
+                                    </select>
+                                </div>
+                                <!-- /.form-group -->
+                            </div>
+                            <!-- /.col -->
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label>
+                                        Multiple
+                                    </label>
+                                    <select class="select2"
+                                            multiple="multiple"
+                                            data-placeholder="Select a State"
+                                            style="width: 100%;">
+                                        <option>
+                                            Alabama
+                                        </option>
+                                        <option>
+                                            Alaska
+                                        </option>
+                                        <option>
+                                            California
+                                        </option>
+                                        <option>
+                                            Delaware
+                                        </option>
+                                        <option>
+                                            Tennessee
+                                        </option>
+                                        <option>
+                                            Texas
+                                        </option>
+                                        <option>
+                                            Washington
+                                        </option>
+                                    </select>
+                                </div>
+                                <!-- /.form-group -->
+                                <div class="form-group">
+                                    <label>
+                                        Disabled Result
+                                    </label>
+                                    <select class="form-control select2" style="width: 100%;">
+                                        <option selected="selected">
+                                            Alabama
+                                        </option>
+                                        <option>
+                                            Alaska
+                                        </option>
+                                        <option disabled="disabled">
+                                            California (disabled)
+                                        </option>
+                                        <option>
+                                            Delaware
+                                        </option>
+                                        <option>
+                                            Tennessee
+                                        </option>
+                                        <option>
+                                            Texas
+                                        </option>
+                                        <option>
+                                            Washington
+                                        </option>
+                                    </select>
+                                </div>
+                                <!-- /.form-group -->
+                            </div>
+                            <!-- /.col -->
+                        </div>
+                        <!-- /.row -->
+                        <h5>Custom Color Variants</h5>
+                        <div class="row">
+                            <div class="col-12 col-sm-6">
+                                <div class="form-group">
+                                    <label>
+                                        Minimal (.select2-danger)
+                                    </label>
+                                    <select class="form-control select2 select2-danger"
+                                            data-dropdown-css-class="select2-danger"
+                                            style="width: 100%;">
+                                        <option selected="selected">
+                                            Alabama
+                                        </option>
+                                        <option>
+                                            Alaska
+                                        </option>
+                                        <option>
+                                            California
+                                        </option>
+                                        <option>
+                                            Delaware
+                                        </option>
+                                        <option>
+                                            Tennessee
+                                        </option>
+                                        <option>
+                                            Texas
+                                        </option>
+                                        <option>
+                                            Washington
+                                        </option>
+                                    </select>
+                                </div>
+                                <!-- /.form-group -->
+                            </div>
+                            <!-- /.col -->
+                            <div class="col-12 col-sm-6">
+                                <div class="form-group">
+                                    <label>
+                                        Multiple (.select2-purple)
+                                    </label>
+                                    <div class="select2-purple">
+                                        <select class="select2"
+                                                multiple="multiple"
+                                                data-placeholder="Select a State"
+                                                data-dropdown-css-class="select2-purple"
+                                                style="width: 100%;">
+                                            <option>
+                                                Alabama
+                                            </option>
+                                            <option>
+                                                Alaska
+                                            </option>
+                                            <option>
+                                                California
+                                            </option>
+                                            <option>
+                                                Delaware
+                                            </option>
+                                            <option>
+                                                Tennessee
+                                            </option>
+                                            <option>
+                                                Texas
+                                            </option>
+                                            <option>
+                                                Washington
+                                            </option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <!-- /.form-group -->
+                            </div>
+                            <!-- /.col -->
+                        </div>
+                        <!-- /.row -->
+                    </div>
+                    <!-- /.card-body -->
+                    <div class="card-footer">
+                        Visit
+                        <a href="https://select2.github.io/">
+                            Select2 documentation
+                        </a>
+                        for more examples and information about
+                        the plugin.
+                    </div>
+                </div>
+                <!-- /.card -->
+                <!-- SELECT2 EXAMPLE -->
+                <div class="card card-default">
+                    <div class="card-header">
+                        <h3 class="card-title">Select2 (Bootstrap4 Theme)</h3>
+                        <div class="card-tools">
+                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                <i class="fas fa-minus"></i>
+                            </button>
+                            <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <!-- /.card-header -->
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label>
+                                        Minimal
+                                    </label>
+                                    <select class="form-control select2bs4" style="width: 100%;">
+                                        <option selected="selected">
+                                            Alabama
+                                        </option>
+                                        <option>
+                                            Alaska
+                                        </option>
+                                        <option>
+                                            California
+                                        </option>
+                                        <option>
+                                            Delaware
+                                        </option>
+                                        <option>
+                                            Tennessee
+                                        </option>
+                                        <option>
+                                            Texas
+                                        </option>
+                                        <option>
+                                            Washington
+                                        </option>
+                                    </select>
+                                </div>
+                                <!-- /.form-group -->
+                                <div class="form-group">
+                                    <label>
+                                        Disabled
+                                    </label>
+                                    <select class="form-control select2bs4" disabled="disabled" style="width: 100%;">
+                                        <option selected="selected">
+                                            Alabama
+                                        </option>
+                                        <option>
+                                            Alaska
+                                        </option>
+                                        <option>
+                                            California
+                                        </option>
+                                        <option>
+                                            Delaware
+                                        </option>
+                                        <option>
+                                            Tennessee
+                                        </option>
+                                        <option>
+                                            Texas
+                                        </option>
+                                        <option>
+                                            Washington
+                                        </option>
+                                    </select>
+                                </div>
+                                <!-- /.form-group -->
+                            </div>
+                            <!-- /.col -->
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label>
+                                        Multiple
+                                    </label>
+                                    <select class="select2bs4"
+                                            multiple="multiple"
+                                            data-placeholder="Select a State"
+                                            style="width: 100%;">
+                                        <option>
+                                            Alabama
+                                        </option>
+                                        <option>
+                                            Alaska
+                                        </option>
+                                        <option>
+                                            California
+                                        </option>
+                                        <option>
+                                            Delaware
+                                        </option>
+                                        <option>
+                                            Tennessee
+                                        </option>
+                                        <option>
+                                            Texas
+                                        </option>
+                                        <option>
+                                            Washington
+                                        </option>
+                                    </select>
+                                </div>
+                                <!-- /.form-group -->
+                                <div class="form-group">
+                                    <label>
+                                        Disabled Result
+                                    </label>
+                                    <select class="form-control select2bs4" style="width: 100%;">
+                                        <option selected="selected">
+                                            Alabama
+                                        </option>
+                                        <option>
+                                            Alaska
+                                        </option>
+                                        <option disabled="disabled">
+                                            California (disabled)
+                                        </option>
+                                        <option>
+                                            Delaware
+                                        </option>
+                                        <option>
+                                            Tennessee
+                                        </option>
+                                        <option>
+                                            Texas
+                                        </option>
+                                        <option>
+                                            Washington
+                                        </option>
+                                    </select>
+                                </div>
+                                <!-- /.form-group -->
+                            </div>
+                            <!-- /.col -->
+                        </div>
+                        <!-- /.row -->
+                    </div>
+                    <!-- /.card-body -->
+                    <div class="card-footer">
+                        Visit
+                        <a href="https://select2.github.io/">
+                            Select2 documentation
+                        </a>
+                        for more examples and information about
+                        the plugin.
+                    </div>
+                </div>
+                <!-- /.card -->
+                <div class="card card-default">
+                    <div class="card-header">
+                        <h3 class="card-title">Bootstrap Duallistbox</h3>
+                        <div class="card-tools">
+                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                <i class="fas fa-minus"></i>
+                            </button>
+                            <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <!-- /.card-header -->
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="form-group">
+                                    <label>
+                                        Multiple
+                                    </label>
+                                    <select class="duallistbox" multiple="multiple">
+                                        <option selected>
+                                            Alabama
+                                        </option>
+                                        <option>
+                                            Alaska
+                                        </option>
+                                        <option>
+                                            California
+                                        </option>
+                                        <option>
+                                            Delaware
+                                        </option>
+                                        <option>
+                                            Tennessee
+                                        </option>
+                                        <option>
+                                            Texas
+                                        </option>
+                                        <option>
+                                            Washington
+                                        </option>
+                                    </select>
+                                </div>
+                                <!-- /.form-group -->
+                            </div>
+                            <!-- /.col -->
+                        </div>
+                        <!-- /.row -->
+                    </div>
+                    <!-- /.card-body -->
+                    <div class="card-footer">
+                        Visit
+                        <a href="https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox#readme">
+                            Bootstrap Duallistbox
+                        </a>
+                        for more examples and information about
+                        the plugin.
+                    </div>
+                </div>
+                <!-- /.card -->
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="card card-danger">
+                            <div class="card-header">
+                                <h3 class="card-title">Input masks</h3>
+                            </div>
+                            <div class="card-body">
+                                <!-- Date dd/mm/yyyy -->
+                                <div class="form-group">
+                                    <label>
+                                        Date masks:
+                                    </label>
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">
+                                                <i class="far fa-calendar-alt"></i>
+                                            </span>
+                                        </div>
+                                        <input type="text"
+                                               class="form-control"
+                                               data-inputmask-alias="datetime"
+                                               data-inputmask-inputformat="dd/mm/yyyy">
+                                    </div>
+                                    <!-- /.input group -->
+                                </div>
+                                <!-- /.form group -->
+                                <!-- Date mm/dd/yyyy -->
+                                <div class="form-group">
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">
+                                                <i class="far fa-calendar-alt"></i>
+                                            </span>
+                                        </div>
+                                        <input type="text"
+                                               class="form-control"
+                                               data-inputmask-alias="datetime"
+                                               data-inputmask-inputformat="mm/dd/yyyy">
+                                    </div>
+                                    <!-- /.input group -->
+                                </div>
+                                <!-- /.form group -->
+                                <!-- phone mask -->
+                                <div class="form-group">
+                                    <label>
+                                        US phone mask:
+                                    </label>
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">
+                                                <i class="fas fa-phone"></i>
+                                            </span>
+                                        </div>
+                                        <input type="text"
+                                               class="form-control"
+                                               data-inputmask='"mask": "(999) 999-9999"'>
+                                    </div>
+                                    <!-- /.input group -->
+                                </div>
+                                <!-- /.form group -->
+                                <!-- phone mask -->
+                                <div class="form-group">
+                                    <label>
+                                        Intl US phone mask:
+                                    </label>
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">
+                                                <i class="fas fa-phone"></i>
+                                            </span>
+                                        </div>
+                                        <input type="text"
+                                               class="form-control"
+                                               data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999']">
+                                    </div>
+                                    <!-- /.input group -->
+                                </div>
+                                <!-- /.form group -->
+                                <!-- IP mask -->
+                                <div class="form-group">
+                                    <label>
+                                        IP mask:
+                                    </label>
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">
+                                                <i class="fas fa-laptop"></i>
+                                            </span>
+                                        </div>
+                                        <input type="text"
+                                               class="form-control"
+                                               data-inputmask="'alias': 'ip'">
+                                    </div>
+                                    <!-- /.input group -->
+                                </div>
+                                <!-- /.form group -->
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <div class="card card-info">
+                            <div class="card-header">
+                                <h3 class="card-title">Color & Time Picker</h3>
+                            </div>
+                            <div class="card-body">
+                                <!-- Color Picker -->
+                                <div class="form-group">
+                                    <label>
+                                        Color picker:
+                                    </label>
+                                    <input type="text" class="form-control my-colorpicker1">
+                                </div>
+                                <!-- /.form group -->
+                                <!-- Color Picker -->
+                                <div class="form-group">
+                                    <label>
+                                        Color picker with addon:
+                                    </label>
+                                    <div class="input-group my-colorpicker2">
+                                        <input type="text" class="form-control">
+                                        <div class="input-group-append">
+                                            <span class="input-group-text">
+                                                <i class="fas fa-square"></i>
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <!-- /.input group -->
+                                </div>
+                                <!-- /.form group -->
+                                <!-- time Picker -->
+                                <div class="bootstrap-timepicker">
+                                    <div class="form-group">
+                                        <label>
+                                            Time picker:
+                                        </label>
+                                        <div class="input-group date" id="timepicker" data-target-input="nearest">
+                                            <input type="text"
+                                                   class="form-control datetimepicker-input"
+                                                   data-target="#timepicker"/>
+                                            <div class="input-group-append"
+                                                 data-target="#timepicker"
+                                                 data-toggle="datetimepicker">
+                                                <div class="input-group-text">
+                                                    <i class="far fa-clock"></i>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <!-- /.input group -->
+                                    </div>
+                                    <!-- /.form group -->
+                                </div>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col (left) -->
+                    <div class="col-md-6">
+                        <div class="card card-primary">
+                            <div class="card-header">
+                                <h3 class="card-title">Date picker</h3>
+                            </div>
+                            <div class="card-body">
+                                <!-- Date -->
+                                <div class="form-group">
+                                    <label>
+                                        Date:
+                                    </label>
+                                    <div class="input-group date" id="reservationdate" data-target-input="nearest">
+                                        <input type="text"
+                                               class="form-control datetimepicker-input"
+                                               data-target="#reservationdate"/>
+                                        <div class="input-group-append"
+                                             data-target="#reservationdate"
+                                             data-toggle="datetimepicker">
+                                            <div class="input-group-text">
+                                                <i class="fa fa-calendar"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.form group -->
+                                <!-- Date range -->
+                                <div class="form-group">
+                                    <label>
+                                        Date range:
+                                    </label>
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">
+                                                <i class="far fa-calendar-alt"></i>
+                                            </span>
+                                        </div>
+                                        <input type="text" class="form-control float-right" id="reservation">
+                                    </div>
+                                    <!-- /.input group -->
+                                </div>
+                                <!-- /.form group -->
+                                <!-- Date and time range -->
+                                <div class="form-group">
+                                    <label>
+                                        Date and time range:
+                                    </label>
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">
+                                                <i class="far fa-clock"></i>
+                                            </span>
+                                        </div>
+                                        <input type="text" class="form-control float-right" id="reservationtime">
+                                    </div>
+                                    <!-- /.input group -->
+                                </div>
+                                <!-- /.form group -->
+                                <!-- Date and time range -->
+                                <div class="form-group">
+                                    <label>
+                                        Date range button:
+                                    </label>
+                                    <div class="input-group">
+                                        <button type="button" class="btn btn-default float-right" id="daterange-btn">
+                                            <i class="far fa-calendar-alt"></i>
+                                            Date range picker
+                                            <i class="fas fa-caret-down"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <!-- /.form group -->
+                            </div>
+                            <div class="card-footer">
+                                Visit
+                                <a href="https://tempusdominus.github.io/bootstrap-4/Usage/">
+                                    tempusdominus
+                                </a>
+                                for more examples and information about
+                                the plugin.
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <!-- iCheck -->
+                        <div class="card card-success">
+                            <div class="card-header">
+                                <h3 class="card-title">iCheck Bootstrap - Checkbox &amp; Radio Inputs</h3>
+                            </div>
+                            <div class="card-body">
+                                <!-- Minimal style -->
+                                <div class="row">
+                                    <div class="col-sm-6">
+                                        <!-- checkbox -->
+                                        <div class="form-group clearfix">
+                                            <div class="icheck-primary d-inline">
+                                                <input type="checkbox" id="checkboxPrimary1" checked>
+                                                <label for="checkboxPrimary1"></label>
+                                            </div>
+                                            <div class="icheck-primary d-inline">
+                                                <input type="checkbox" id="checkboxPrimary2">
+                                                <label for="checkboxPrimary2"></label>
+                                            </div>
+                                            <div class="icheck-primary d-inline">
+                                                <input type="checkbox" id="checkboxPrimary3" disabled>
+                                                <label for="checkboxPrimary3">
+                                                    Primary checkbox
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-sm-6">
+                                        <!-- radio -->
+                                        <div class="form-group clearfix">
+                                            <div class="icheck-primary d-inline">
+                                                <input type="radio" id="radioPrimary1" name="r1" checked>
+                                                <label for="radioPrimary1"></label>
+                                            </div>
+                                            <div class="icheck-primary d-inline">
+                                                <input type="radio" id="radioPrimary2" name="r1">
+                                                <label for="radioPrimary2"></label>
+                                            </div>
+                                            <div class="icheck-primary d-inline">
+                                                <input type="radio" id="radioPrimary3" name="r1" disabled>
+                                                <label for="radioPrimary3">
+                                                    Primary radio
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- Minimal red style -->
+                                <div class="row">
+                                    <div class="col-sm-6">
+                                        <!-- checkbox -->
+                                        <div class="form-group clearfix">
+                                            <div class="icheck-danger d-inline">
+                                                <input type="checkbox" checked id="checkboxDanger1">
+                                                <label for="checkboxDanger1"></label>
+                                            </div>
+                                            <div class="icheck-danger d-inline">
+                                                <input type="checkbox" id="checkboxDanger2">
+                                                <label for="checkboxDanger2"></label>
+                                            </div>
+                                            <div class="icheck-danger d-inline">
+                                                <input type="checkbox" disabled id="checkboxDanger3">
+                                                <label for="checkboxDanger3">
+                                                    Danger checkbox
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-sm-6">
+                                        <!-- radio -->
+                                        <div class="form-group clearfix">
+                                            <div class="icheck-danger d-inline">
+                                                <input type="radio" name="r2" checked id="radioDanger1">
+                                                <label for="radioDanger1"></label>
+                                            </div>
+                                            <div class="icheck-danger d-inline">
+                                                <input type="radio" name="r2" id="radioDanger2">
+                                                <label for="radioDanger2"></label>
+                                            </div>
+                                            <div class="icheck-danger d-inline">
+                                                <input type="radio" name="r2" disabled id="radioDanger3">
+                                                <label for="radioDanger3">
+                                                    Danger radio
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- Minimal red style -->
+                                <div class="row">
+                                    <div class="col-sm-6">
+                                        <!-- checkbox -->
+                                        <div class="form-group clearfix">
+                                            <div class="icheck-success d-inline">
+                                                <input type="checkbox" checked id="checkboxSuccess1">
+                                                <label for="checkboxSuccess1"></label>
+                                            </div>
+                                            <div class="icheck-success d-inline">
+                                                <input type="checkbox" id="checkboxSuccess2">
+                                                <label for="checkboxSuccess2"></label>
+                                            </div>
+                                            <div class="icheck-success d-inline">
+                                                <input type="checkbox" disabled id="checkboxSuccess3">
+                                                <label for="checkboxSuccess3">
+                                                    Success checkbox
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-sm-6">
+                                        <!-- radio -->
+                                        <div class="form-group clearfix">
+                                            <div class="icheck-success d-inline">
+                                                <input type="radio" name="r3" checked id="radioSuccess1">
+                                                <label for="radioSuccess1"></label>
+                                            </div>
+                                            <div class="icheck-success d-inline">
+                                                <input type="radio" name="r3" id="radioSuccess2">
+                                                <label for="radioSuccess2"></label>
+                                            </div>
+                                            <div class="icheck-success d-inline">
+                                                <input type="radio" name="r3" disabled id="radioSuccess3">
+                                                <label for="radioSuccess3">
+                                                    Success radio
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- /.card-body -->
+                            <div class="card-footer">
+                                Many more skins available.
+                                <a href="https://bantikyan.github.io/icheck-bootstrap/">
+                                    Documentation
+                                </a>
+                            </div>
+                        </div>
+                        <!-- /.card -->
+                        <!-- Bootstrap Switch -->
+                        <div class="card card-secondary">
+                            <div class="card-header">
+                                <h3 class="card-title">Bootstrap Switch</h3>
+                            </div>
+                            <div class="card-body">
+                                <input type="checkbox" name="my-checkbox" checked data-bootstrap-switch>
+                                <input type="checkbox"
+                                       name="my-checkbox"
+                                       checked data-bootstrap-switch data-off-color="danger"
+                                       data-on-color="success">
+                            </div>
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col (right) -->
+                </div>
+                <!-- /.row -->
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- Select2 -->
+    <script src="/static/assets/plugins/select2/js/select2.full.min.js"></script>
+    <!-- Bootstrap4 Duallistbox -->
+    <script src="/static/assets/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
+    <!-- InputMask -->
+    <script src="/static/assets/plugins/moment/moment.min.js"></script>
+    <script src="/static/assets/plugins/inputmask/jquery.inputmask.min.js"></script>
+    <!-- date-range-picker -->
+    <script src="/static/assets/plugins/daterangepicker/daterangepicker.js"></script>
+    <!-- bootstrap color picker -->
+    <script src="/static/assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
+    <!-- Tempusdominus Bootstrap 4 -->
+    <script src="/static/assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
+    <!-- Bootstrap Switch -->
+    <script src="/static/assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+    <!-- Page script -->
+    <script>
+    $(function () {
+      //Initialize Select2 Elements
+      $('.select2').select2()
+
+      //Initialize Select2 Elements
+      $('.select2bs4').select2({
+        theme: 'bootstrap4'
+      })
+
+      //Datemask dd/mm/yyyy
+      $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
+      //Datemask2 mm/dd/yyyy
+      $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
+      //Money Euro
+      $('[data-mask]').inputmask()
+
+      //Date range picker
+      $('#reservationdate').datetimepicker({
+          format: 'L'
+      });
+      //Date range picker
+      $('#reservation').daterangepicker()
+      //Date range picker with time picker
+      $('#reservationtime').daterangepicker({
+        timePicker: true,
+        timePickerIncrement: 30,
+        locale: {
+          format: 'MM/DD/YYYY hh:mm A'
+        }
+      })
+      //Date range as a button
+      $('#daterange-btn').daterangepicker(
+        {
+          ranges   : {
+            'Today'       : [moment(), moment()],
+            'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+            'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
+            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+            'This Month'  : [moment().startOf('month'), moment().endOf('month')],
+            'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+          },
+          startDate: moment().subtract(29, 'days'),
+          endDate  : moment()
+        },
+        function (start, end) {
+          $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
+        }
+      )
+
+      //Timepicker
+      $('#timepicker').datetimepicker({
+        format: 'LT'
+      })
+
+      //Bootstrap Duallistbox
+      $('.duallistbox').bootstrapDualListbox()
+
+      //Colorpicker
+      $('.my-colorpicker1').colorpicker()
+      //color picker with addon
+      $('.my-colorpicker2').colorpicker()
+
+      $('.my-colorpicker2').on('colorpickerChange', function(event) {
+        $('.my-colorpicker2 .fa-square').css('color', event.color.toString());
+      });
+
+      $("input[data-bootstrap-switch]").each(function(){
+        $(this).bootstrapSwitch('state', $(this).prop('checked'));
+      });
+
+    })
+    </script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/forms-editors.html b/tests/jinja_adminlte/forms-editors.html
new file mode 100644
index 0000000..90edf9a
--- /dev/null
+++ b/tests/jinja_adminlte/forms-editors.html
@@ -0,0 +1,115 @@
+{% extends "layouts/base.html" %}
+{% block title %}Forms Editor {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    <!-- summernote -->
+    <link rel="stylesheet" href="/static/assets/plugins/summernote/summernote-bs4.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Text Editors</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Text Editors
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="card card-outline card-info">
+                        <div class="card-header">
+                            <h3 class="card-title">
+                                Bootstrap WYSIHTML5
+                                <small>
+                                Simple and fast
+                                </small>
+                            </h3>
+                            <!-- tools box -->
+                            <div class="card-tools">
+                                <button type="button"
+                                        class="btn btn-tool btn-sm"
+                                        data-card-widget="collapse"
+                                        title="Collapse">
+                                    <i class="fas fa-minus"></i>
+                                </button>
+                                <button type="button"
+                                        class="btn btn-tool btn-sm"
+                                        data-card-widget="remove"
+                                        title="Remove">
+                                    <i class="fas fa-times"></i>
+                                </button>
+                            </div>
+                            <!-- /. tools -->
+                        </div>
+                        <!-- /.card-header -->
+                        <div class="card-body pad">
+                            <div class="mb-3">
+                                <textarea class="textarea"
+                                          placeholder="Place some text here"
+                                          style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
+                            </div>
+                            <p class="text-sm mb-0">
+                                Editor
+                                <a href="https://github.com/summernote/summernote">
+                                    Documentation and license
+                                    information.
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.col-->
+            </div>
+            <!-- ./row -->
+        </section>
+        <!-- /.content -->
+    </div>
+    <!-- /.content-wrapper -->
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+    <!-- Summernote -->
+    <script src="/static/assets/plugins/summernote/summernote-bs4.min.js"></script>
+    <script>
+    $(function () {
+      // Summernote
+      $('.textarea').summernote()
+    })
+    </script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/forms-general.html b/tests/jinja_adminlte/forms-general.html
new file mode 100644
index 0000000..12ae22b
--- /dev/null
+++ b/tests/jinja_adminlte/forms-general.html
@@ -0,0 +1,874 @@
+{% extends "layouts/base.html" %}
+{% block title %}Forms General {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>General Form</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                General Form
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <!-- left column -->
+                    <div class="col-md-6">
+                        <!-- general form elements -->
+                        <div class="card card-primary">
+                            <div class="card-header">
+                                <h3 class="card-title">Quick Example</h3>
+                            </div>
+                            <!-- /.card-header -->
+                            <!-- form start -->
+                            <form>
+                                <div class="card-body">
+                                    <div class="form-group">
+                                        <label for="exampleInputEmail1">
+                                            Email address
+                                        </label>
+                                        <input type="email"
+                                               class="form-control"
+                                               id="exampleInputEmail1"
+                                               placeholder="Enter email">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="exampleInputPassword1">
+                                            Password
+                                        </label>
+                                        <input type="password"
+                                               class="form-control"
+                                               id="exampleInputPassword1"
+                                               placeholder="Password">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="exampleInputFile">
+                                            File input
+                                        </label>
+                                        <div class="input-group">
+                                            <div class="custom-file">
+                                                <input type="file" class="custom-file-input" id="exampleInputFile">
+                                                <label class="custom-file-label" for="exampleInputFile">
+                                                    Choose file
+                                                </label>
+                                            </div>
+                                            <div class="input-group-append">
+                                                <span class="input-group-text">Upload</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="form-check">
+                                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
+                                        <label class="form-check-label" for="exampleCheck1">
+                                            Check me out
+                                        </label>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                                <div class="card-footer">
+                                    <button type="submit" class="btn btn-primary">
+                                        Submit
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+                        <!-- /.card -->
+                        <!-- Form Element sizes -->
+                        <div class="card card-success">
+                            <div class="card-header">
+                                <h3 class="card-title">Different Height</h3>
+                            </div>
+                            <div class="card-body">
+                                <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
+                                <br>
+                                <input class="form-control" type="text" placeholder="Default input">
+                                <br>
+                                <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <div class="card card-danger">
+                            <div class="card-header">
+                                <h3 class="card-title">Different Width</h3>
+                            </div>
+                            <div class="card-body">
+                                <div class="row">
+                                    <div class="col-3">
+                                        <input type="text" class="form-control" placeholder=".col-3">
+                                    </div>
+                                    <div class="col-4">
+                                        <input type="text" class="form-control" placeholder=".col-4">
+                                    </div>
+                                    <div class="col-5">
+                                        <input type="text" class="form-control" placeholder=".col-5">
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <!-- Input addon -->
+                        <div class="card card-info">
+                            <div class="card-header">
+                                <h3 class="card-title">Input Addon</h3>
+                            </div>
+                            <div class="card-body">
+                                <div class="input-group mb-3">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text">@</span>
+                                    </div>
+                                    <input type="text" class="form-control" placeholder="Username">
+                                </div>
+                                <div class="input-group mb-3">
+                                    <input type="text" class="form-control">
+                                    <div class="input-group-append">
+                                        <span class="input-group-text">.00</span>
+                                    </div>
+                                </div>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text">$</span>
+                                    </div>
+                                    <input type="text" class="form-control">
+                                    <div class="input-group-append">
+                                        <span class="input-group-text">.00</span>
+                                    </div>
+                                </div>
+                                <h4>With icons</h4>
+                                <div class="input-group mb-3">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text">
+                                            <i class="fas fa-envelope"></i>
+                                        </span>
+                                    </div>
+                                    <input type="email" class="form-control" placeholder="Email">
+                                </div>
+                                <div class="input-group mb-3">
+                                    <input type="text" class="form-control">
+                                    <div class="input-group-append">
+                                        <span class="input-group-text">
+                                            <i class="fas fa-check"></i>
+                                        </span>
+                                    </div>
+                                </div>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text">
+                                            <i class="fas fa-dollar-sign"></i>
+                                        </span>
+                                    </div>
+                                    <input type="text" class="form-control">
+                                    <div class="input-group-append">
+                                        <div class="input-group-text">
+                                            <i class="fas fa-ambulance"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <h5 class="mt-4 mb-2">
+                                    With checkbox and radio inputs
+                                </h5>
+                                <div class="row">
+                                    <div class="col-lg-6">
+                                        <div class="input-group">
+                                            <div class="input-group-prepend">
+                                                <span class="input-group-text">
+                                                    <input type="checkbox">
+                                                </span>
+                                            </div>
+                                            <input type="text" class="form-control">
+                                        </div>
+                                        <!-- /input-group -->
+                                    </div>
+                                    <!-- /.col-lg-6 -->
+                                    <div class="col-lg-6">
+                                        <div class="input-group">
+                                            <div class="input-group-prepend">
+                                                <span class="input-group-text">
+                                                    <input type="radio">
+                                                </span>
+                                            </div>
+                                            <input type="text" class="form-control">
+                                        </div>
+                                        <!-- /input-group -->
+                                    </div>
+                                    <!-- /.col-lg-6 -->
+                                </div>
+                                <!-- /.row -->
+                                <h5 class="mt-4 mb-2">
+                                    With buttons
+                                </h5>
+                                <p>
+                                    Large:
+                                    <code>
+                                    .input-group.input-group-lg
+                                    </code>
+                                </p>
+                                <div class="input-group input-group-lg mb-3">
+                                    <div class="input-group-prepend">
+                                        <button type="button"
+                                                class="btn btn-warning dropdown-toggle"
+                                                data-toggle="dropdown">
+                                            Action
+                                        </button>
+                                        <ul class="dropdown-menu">
+                                            <li class="dropdown-item">
+                                                <a href="#">
+                                                    Action
+                                                </a>
+                                            </li>
+                                            <li class="dropdown-item">
+                                                <a href="#">
+                                                    Another action
+                                                </a>
+                                            </li>
+                                            <li class="dropdown-item">
+                                                <a href="#">
+                                                    Something else here
+                                                </a>
+                                            </li>
+                                            <li class="dropdown-divider"></li>
+                                            <li class="dropdown-item">
+                                                <a href="#">
+                                                    Separated link
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <!-- /btn-group -->
+                                    <input type="text" class="form-control">
+                                </div>
+                                <!-- /input-group -->
+                                <p>
+                                    Normal
+                                </p>
+                                <div class="input-group mb-3">
+                                    <div class="input-group-prepend">
+                                        <button type="button" class="btn btn-danger">
+                                            Action
+                                        </button>
+                                    </div>
+                                    <!-- /btn-group -->
+                                    <input type="text" class="form-control">
+                                </div>
+                                <!-- /input-group -->
+                                <p>
+                                    Small
+                                    <code>
+                                    .input-group.input-group-sm
+                                    </code>
+                                </p>
+                                <div class="input-group input-group-sm">
+                                    <input type="text" class="form-control">
+                                    <span class="input-group-append">
+                                        <button type="button" class="btn btn-info btn-flat">
+                                            Go!
+                                        </button>
+                                    </span>
+                                </div>
+                                <!-- /input-group -->
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <!-- Horizontal Form -->
+                        <div class="card card-info">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    Horizontal Form
+                                </h3>
+                            </div>
+                            <!-- /.card-header -->
+                            <!-- form start -->
+                            <form class="form-horizontal">
+                                <div class="card-body">
+                                    <div class="form-group row">
+                                        <label for="inputEmail3" class="col-sm-2 col-form-label">
+                                            Email
+                                        </label>
+                                        <div class="col-sm-10">
+                                            <input type="email"
+                                                   class="form-control"
+                                                   id="inputEmail3"
+                                                   placeholder="Email">
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label for="inputPassword3" class="col-sm-2 col-form-label">
+                                            Password
+                                        </label>
+                                        <div class="col-sm-10">
+                                            <input type="password"
+                                                   class="form-control"
+                                                   id="inputPassword3"
+                                                   placeholder="Password">
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <div class="offset-sm-2 col-sm-10">
+                                            <div class="form-check">
+                                                <input type="checkbox" class="form-check-input" id="exampleCheck2">
+                                                <label class="form-check-label" for="exampleCheck2">
+                                                    Remember me
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                                <div class="card-footer">
+                                    <button type="submit" class="btn btn-info">
+                                        Sign in
+                                    </button>
+                                    <button type="submit" class="btn btn-default float-right">
+                                        Cancel
+                                    </button>
+                                </div>
+                                <!-- /.card-footer -->
+                            </form>
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!--/.col (left) -->
+                    <!-- right column -->
+                    <div class="col-md-6">
+                        <!-- general form elements disabled -->
+                        <div class="card card-warning">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    General Elements
+                                </h3>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body">
+                                <form>
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <!-- text input -->
+                                            <div class="form-group">
+                                                <label>
+                                                    Text
+                                                </label>
+                                                <input type="text" class="form-control" placeholder="Enter ...">
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <div class="form-group">
+                                                <label>
+                                                    Text Disabled
+                                                </label>
+                                                <input type="text"
+                                                       class="form-control"
+                                                       placeholder="Enter ...">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <!-- textarea -->
+                                            <div class="form-group">
+                                                <label>
+                                                    Textarea
+                                                </label>
+                                                <textarea class="form-control"
+                                                          rows="3"
+                                                          placeholder="Enter ..."></textarea>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <div class="form-group">
+                                                <label>
+                                                    Textarea Disabled
+                                                </label>
+                                                <textarea class="form-control"
+                                                          rows="3"
+                                                          placeholder="Enter ..."></textarea>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!-- input states -->
+                                    <div class="form-group">
+                                        <label class="col-form-label" for="inputSuccess">
+                                            <i class="fas fa-check"></i>
+                                            Input with
+                                            success
+                                        </label>
+                                        <input type="text"
+                                               class="form-control is-valid"
+                                               id="inputSuccess"
+                                               placeholder="Enter ...">
+                                    </div>
+                                    <div class="form-group">
+                                        <label class="col-form-label" for="inputWarning">
+                                            <i class="far fa-bell"></i>
+                                            Input with
+                                            warning
+                                        </label>
+                                        <input type="text"
+                                               class="form-control is-warning"
+                                               id="inputWarning"
+                                               placeholder="Enter ...">
+                                    </div>
+                                    <div class="form-group">
+                                        <label class="col-form-label" for="inputError">
+                                            <i class="far fa-times-circle"></i>
+                                            Input with
+                                            error
+                                        </label>
+                                        <input type="text"
+                                               class="form-control is-invalid"
+                                               id="inputError"
+                                               placeholder="Enter ...">
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <!-- checkbox -->
+                                            <div class="form-group">
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="checkbox">
+                                                    <label class="form-check-label">
+                                                        Checkbox
+                                                    </label>
+                                                </div>
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="checkbox" checked>
+                                                    <label class="form-check-label">
+                                                        Checkbox checked
+                                                    </label>
+                                                </div>
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="checkbox" disabled>
+                                                    <label class="form-check-label">
+                                                        Checkbox disabled
+                                                    </label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <!-- radio -->
+                                            <div class="form-group">
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="radio" name="radio1">
+                                                    <label class="form-check-label">
+                                                        Radio
+                                                    </label>
+                                                </div>
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="radio" name="radio1" checked>
+                                                    <label class="form-check-label">
+                                                        Radio checked
+                                                    </label>
+                                                </div>
+                                                <div class="form-check">
+                                                    <input class="form-check-input" type="radio" disabled>
+                                                    <label class="form-check-label">
+                                                        Radio disabled
+                                                    </label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <!-- select -->
+                                            <div class="form-group">
+                                                <label>
+                                                    Select
+                                                </label>
+                                                <select class="form-control">
+                                                    <option>
+                                                        option 1
+                                                    </option>
+                                                    <option>
+                                                        option 2
+                                                    </option>
+                                                    <option>
+                                                        option 3
+                                                    </option>
+                                                    <option>
+                                                        option 4
+                                                    </option>
+                                                    <option>
+                                                        option 5
+                                                    </option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <div class="form-group">
+                                                <label>
+                                                    Select Disabled
+                                                </label>
+                                                <select class="form-control" disabled>
+                                                    <option>
+                                                        option 1
+                                                    </option>
+                                                    <option>
+                                                        option 2
+                                                    </option>
+                                                    <option>
+                                                        option 3
+                                                    </option>
+                                                    <option>
+                                                        option 4
+                                                    </option>
+                                                    <option>
+                                                        option 5
+                                                    </option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <!-- Select multiple-->
+                                            <div class="form-group">
+                                                <label>
+                                                    Select Multiple
+                                                </label>
+                                                <select multiple class="form-control">
+                                                    <option>
+                                                        option 1
+                                                    </option>
+                                                    <option>
+                                                        option 2
+                                                    </option>
+                                                    <option>
+                                                        option 3
+                                                    </option>
+                                                    <option>
+                                                        option 4
+                                                    </option>
+                                                    <option>
+                                                        option 5
+                                                    </option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <div class="form-group">
+                                                <label>
+                                                    Select Multiple Disabled
+                                                </label>
+                                                <select multiple class="form-control" disabled>
+                                                    <option>
+                                                        option 1
+                                                    </option>
+                                                    <option>
+                                                        option 2
+                                                    </option>
+                                                    <option>
+                                                        option 3
+                                                    </option>
+                                                    <option>
+                                                        option 4
+                                                    </option>
+                                                    <option>
+                                                        option 5
+                                                    </option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <!-- general form elements disabled -->
+                        <div class="card card-secondary">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    Custom Elements
+                                </h3>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body">
+                                <form>
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <!-- checkbox -->
+                                            <div class="form-group">
+                                                <div class="custom-control custom-checkbox">
+                                                    <input class="custom-control-input"
+                                                           type="checkbox"
+                                                           id="customCheckbox1"
+                                                           value="option1">
+                                                    <label for="customCheckbox1" class="custom-control-label">
+                                                        Custom Checkbox
+                                                    </label>
+                                                </div>
+                                                <div class="custom-control custom-checkbox">
+                                                    <input class="custom-control-input"
+                                                           type="checkbox"
+                                                           id="customCheckbox2"
+                                                           checked>
+                                                    <label for="customCheckbox2" class="custom-control-label">
+                                                        Custom Checkbox checked
+                                                    </label>
+                                                </div>
+                                                <div class="custom-control custom-checkbox">
+                                                    <input class="custom-control-input"
+                                                           type="checkbox"
+                                                           id="customCheckbox3">
+                                                    <label for="customCheckbox3" class="custom-control-label">
+                                                        Custom Checkbox disabled
+                                                    </label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <!-- radio -->
+                                            <div class="form-group">
+                                                <div class="custom-control custom-radio">
+                                                    <input class="custom-control-input"
+                                                           type="radio"
+                                                           id="customRadio1"
+                                                           name="customRadio">
+                                                    <label for="customRadio1" class="custom-control-label">
+                                                        Custom Radio
+                                                    </label>
+                                                </div>
+                                                <div class="custom-control custom-radio">
+                                                    <input class="custom-control-input"
+                                                           type="radio"
+                                                           id="customRadio2"
+                                                           name="customRadio"
+                                                           checked>
+                                                    <label for="customRadio2" class="custom-control-label">
+                                                        Custom Radio checked
+                                                    </label>
+                                                </div>
+                                                <div class="custom-control custom-radio">
+                                                    <input class="custom-control-input"
+                                                           type="radio"
+                                                           id="customRadio3">
+                                                    <label for="customRadio3" class="custom-control-label">
+                                                        Custom Radio disabled
+                                                    </label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <!-- select -->
+                                            <div class="form-group">
+                                                <label>
+                                                    Custom Select
+                                                </label>
+                                                <select class="custom-select">
+                                                    <option>
+                                                        option 1
+                                                    </option>
+                                                    <option>
+                                                        option 2
+                                                    </option>
+                                                    <option>
+                                                        option 3
+                                                    </option>
+                                                    <option>
+                                                        option 4
+                                                    </option>
+                                                    <option>
+                                                        option 5
+                                                    </option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <div class="form-group">
+                                                <label>
+                                                    Custom Select Disabled
+                                                </label>
+                                                <select class="custom-select" disabled>
+                                                    <option>
+                                                        option 1
+                                                    </option>
+                                                    <option>
+                                                        option 2
+                                                    </option>
+                                                    <option>
+                                                        option 3
+                                                    </option>
+                                                    <option>
+                                                        option 4
+                                                    </option>
+                                                    <option>
+                                                        option 5
+                                                    </option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <!-- Select multiple-->
+                                            <div class="form-group">
+                                                <label>
+                                                    Custom Select Multiple
+                                                </label>
+                                                <select multiple class="custom-select">
+                                                    <option>
+                                                        option 1
+                                                    </option>
+                                                    <option>
+                                                        option 2
+                                                    </option>
+                                                    <option>
+                                                        option 3
+                                                    </option>
+                                                    <option>
+                                                        option 4
+                                                    </option>
+                                                    <option>
+                                                        option 5
+                                                    </option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <div class="form-group">
+                                                <label>
+                                                    Custom Select Multiple Disabled
+                                                </label>
+                                                <select multiple class="custom-select" disabled>
+                                                    <option>
+                                                        option 1
+                                                    </option>
+                                                    <option>
+                                                        option 2
+                                                    </option>
+                                                    <option>
+                                                        option 3
+                                                    </option>
+                                                    <option>
+                                                        option 4
+                                                    </option>
+                                                    <option>
+                                                        option 5
+                                                    </option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <div class="custom-control custom-switch">
+                                            <input type="checkbox" class="custom-control-input" id="customSwitch1">
+                                            <label class="custom-control-label" for="customSwitch1">
+                                                Toggle this custom switch element
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
+                                            <input type="checkbox" class="custom-control-input" id="customSwitch3">
+                                            <label class="custom-control-label" for="customSwitch3">
+                                                Toggle this custom switch element with custom colors danger/success
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <div class="custom-control custom-switch">
+                                            <input type="checkbox"
+                                                   class="custom-control-input"
+                                                   disabled id="customSwitch2">
+                                            <label class="custom-control-label" for="customSwitch2">
+                                                Disabled custom switch element
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="customRange1">
+                                            Custom range
+                                        </label>
+                                        <input type="range" class="custom-range" id="customRange1">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="customRange2">
+                                            Custom range (custom-range-danger)
+                                        </label>
+                                        <input type="range" class="custom-range custom-range-danger" id="customRange2">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="customRange3">
+                                            Custom range (custom-range-teal)
+                                        </label>
+                                        <input type="range" class="custom-range custom-range-teal" id="customRange3">
+                                    </div>
+                                    <div class="form-group">
+                                        <!--
+<label for="customFile">
+Custom File
+</label>
+                                    -->
+                                    <div class="custom-file">
+                                        <input type="file" class="custom-file-input" id="customFile">
+                                        <label class="custom-file-label" for="customFile">
+                                            Choose file
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="form-group"></div>
+                            </form>
+                        </div>
+                        <!-- /.card-body -->
+                    </div>
+                    <!-- /.card -->
+                </div>
+                <!--/.col (right) -->
+            </div>
+            <!-- /.row -->
+        </div>
+        <!-- /.container-fluid -->
+    </section>
+    <!-- /.content -->
+</div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+<!-- jQuery -->
+<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+<!-- Bootstrap 4 -->
+<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+<!-- bs-custom-file-input -->
+<script src="/static/assets/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
+<!-- AdminLTE App -->
+<script src="/static/assets/js/adminlte.min.js"></script>
+<!-- AdminLTE for demo purposes -->
+<script src="/static/assets/js/demo.js"></script>
+<script>
+  $(function () {
+    bsCustomFileInput.init();
+  });
+</script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/forms-validation.html b/tests/jinja_adminlte/forms-validation.html
new file mode 100644
index 0000000..c3b81ae
--- /dev/null
+++ b/tests/jinja_adminlte/forms-validation.html
@@ -0,0 +1,176 @@
+{% extends "layouts/base.html" %}
+{% block title %}Forms Validation {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Validation</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Validation
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <!-- left column -->
+                    <div class="col-md-12">
+                        <!-- jquery validation -->
+                        <div class="card card-primary">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    Quick Example
+                                    <small>
+                                    jQuery Validation
+                                    </small>
+                                </h3>
+                            </div>
+                            <!-- /.card-header -->
+                            <!-- form start -->
+                            <form id="quickForm">
+                                <div class="card-body">
+                                    <div class="form-group">
+                                        <label for="exampleInputEmail1">
+                                            Email address
+                                        </label>
+                                        <input type="email"
+                                               name="email"
+                                               class="form-control"
+                                               id="exampleInputEmail1"
+                                               placeholder="Enter email">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="exampleInputPassword1">
+                                            Password
+                                        </label>
+                                        <input type="password"
+                                               name="password"
+                                               class="form-control"
+                                               id="exampleInputPassword1"
+                                               placeholder="Password">
+                                    </div>
+                                    <div class="form-group mb-0">
+                                        <div class="custom-control custom-checkbox">
+                                            <input type="checkbox"
+                                                   name="terms"
+                                                   class="custom-control-input"
+                                                   id="exampleCheck1">
+                                            <label class="custom-control-label" for="exampleCheck1">
+                                                I agree to the
+                                                <a href="#">terms of service</a>
+                                                .
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                                <div class="card-footer">
+                                    <button type="submit" class="btn btn-primary">
+                                        Submit
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!--/.col (left) -->
+                    <!-- right column -->
+                    <div class="col-md-6"></div>
+                    <!--/.col (right) -->
+                </div>
+                <!-- /.row -->
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- jquery-validation -->
+    <script src="/static/assets/plugins/jquery-validation/jquery.validate.min.js"></script>
+    <script src="/static/assets/plugins/jquery-validation/additional-methods.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+    <script>
+  $(function () {
+    $.validator.setDefaults({
+      submitHandler: function () {
+        alert( "Form successful submitted!" );
+      }
+    });
+    $('#quickForm').validate({
+      rules: {
+        email: {
+          required: true,
+          email: true,
+        },
+        password: {
+          required: true,
+          minlength: 5
+        },
+        terms: {
+          required: true
+        },
+      },
+      messages: {
+        email: {
+          required: "Please enter a email address",
+          email: "Please enter a vaild email address"
+        },
+        password: {
+          required: "Please provide a password",
+          minlength: "Your password must be at least 5 characters long"
+        },
+        terms: "Please accept our terms"
+      },
+      errorElement: 'span',
+      errorPlacement: function (error, element) {
+        error.addClass('invalid-feedback');
+        element.closest('.form-group').append(error);
+      },
+      highlight: function (element, errorClass, validClass) {
+        $(element).addClass('is-invalid');
+      },
+      unhighlight: function (element, errorClass, validClass) {
+        $(element).removeClass('is-invalid');
+      }
+    });
+  });
+    </script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/gallery.html b/tests/jinja_adminlte/gallery.html
new file mode 100644
index 0000000..363e138
--- /dev/null
+++ b/tests/jinja_adminlte/gallery.html
@@ -0,0 +1,404 @@
+{% extends "layouts/base.html" %}
+{% block title %}Gallery {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- Ekko Lightbox -->
+        <link rel="stylesheet" href="/static/assets/plugins/ekko-lightbox/ekko-lightbox.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>Gallery</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Gallery
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="card card-primary">
+                                <div class="card-header">
+                                    <h4 class="card-title">FilterizR Gallery with Ekko Lightbox</h4>
+                                </div>
+                                <div class="card-body">
+                                    <div>
+                                        <div class="btn-group w-100 mb-2">
+                                            <a class="btn btn-info active" href="javascript:void(0)" data-filter="all">
+                                                All items
+                                            </a>
+                                            <a class="btn btn-info" href="javascript:void(0)" data-filter="1">
+                                                Category 1 (WHITE)
+                                            </a>
+                                            <a class="btn btn-info" href="javascript:void(0)" data-filter="2">
+                                                Category 2 (BLACK)
+                                            </a>
+                                            <a class="btn btn-info" href="javascript:void(0)" data-filter="3">
+                                                Category 3 (COLORED)
+                                            </a>
+                                            <a class="btn btn-info" href="javascript:void(0)" data-filter="4">
+                                                Category 4 (COLORED, BLACK)
+                                            </a>
+                                        </div>
+                                        <div class="mb-2">
+                                            <a class="btn btn-secondary" href="javascript:void(0)" data-shuffle>
+                                                Shuffle items
+                                            </a>
+                                            <div class="float-right">
+                                                <select class="custom-select" style="width: auto;" data-sortOrder>
+                                                    <option value="index">
+                                                        Sort by Position
+                                                    </option>
+                                                    <option value="sortData">
+                                                        Sort by Custom Data
+                                                    </option>
+                                                </select>
+                                                <div class="btn-group">
+                                                    <a class="btn btn-default" href="javascript:void(0)" data-sortAsc>
+                                                        Ascending
+                                                    </a>
+                                                    <a class="btn btn-default" href="javascript:void(0)" data-sortDesc>
+                                                        Descending
+                                                    </a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <div class="filter-container p-0 row">
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="1"
+                                                 data-sort="white sample">
+                                                <a href="https://via.placeholder.com/1200/FFFFFF.png?text=1"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 1 - white">
+                                                    <img src="https://via.placeholder.com/300/FFFFFF?text=1"
+                                                         class="img-fluid mb-2"
+                                                         alt="white sample"/>
+                                                </a>
+                                            </div>
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="2, 4"
+                                                 data-sort="black sample">
+                                                <a href="https://via.placeholder.com/1200/000000.png?text=2"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 2 - black">
+                                                    <img src="https://via.placeholder.com/300/000000?text=2"
+                                                         class="img-fluid mb-2"
+                                                         alt="black sample"/>
+                                                </a>
+                                            </div>
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="3, 4"
+                                                 data-sort="red sample">
+                                                <a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=3"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 3 - red">
+                                                    <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=3"
+                                                         class="img-fluid mb-2"
+                                                         alt="red sample"/>
+                                                </a>
+                                            </div>
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="3, 4"
+                                                 data-sort="red sample">
+                                                <a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=4"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 4 - red">
+                                                    <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=4"
+                                                         class="img-fluid mb-2"
+                                                         alt="red sample"/>
+                                                </a>
+                                            </div>
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="2, 4"
+                                                 data-sort="black sample">
+                                                <a href="https://via.placeholder.com/1200/000000.png?text=5"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 5 - black">
+                                                    <img src="https://via.placeholder.com/300/000000?text=5"
+                                                         class="img-fluid mb-2"
+                                                         alt="black sample"/>
+                                                </a>
+                                            </div>
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="1"
+                                                 data-sort="white sample">
+                                                <a href="https://via.placeholder.com/1200/FFFFFF.png?text=6"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 6 - white">
+                                                    <img src="https://via.placeholder.com/300/FFFFFF?text=6"
+                                                         class="img-fluid mb-2"
+                                                         alt="white sample"/>
+                                                </a>
+                                            </div>
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="1"
+                                                 data-sort="white sample">
+                                                <a href="https://via.placeholder.com/1200/FFFFFF.png?text=7"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 7 - white">
+                                                    <img src="https://via.placeholder.com/300/FFFFFF?text=7"
+                                                         class="img-fluid mb-2"
+                                                         alt="white sample"/>
+                                                </a>
+                                            </div>
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="2, 4"
+                                                 data-sort="black sample">
+                                                <a href="https://via.placeholder.com/1200/000000.png?text=8"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 8 - black">
+                                                    <img src="https://via.placeholder.com/300/000000?text=8"
+                                                         class="img-fluid mb-2"
+                                                         alt="black sample"/>
+                                                </a>
+                                            </div>
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="3, 4"
+                                                 data-sort="red sample">
+                                                <a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=9"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 9 - red">
+                                                    <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=9"
+                                                         class="img-fluid mb-2"
+                                                         alt="red sample"/>
+                                                </a>
+                                            </div>
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="1"
+                                                 data-sort="white sample">
+                                                <a href="https://via.placeholder.com/1200/FFFFFF.png?text=10"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 10 - white">
+                                                    <img src="https://via.placeholder.com/300/FFFFFF?text=10"
+                                                         class="img-fluid mb-2"
+                                                         alt="white sample"/>
+                                                </a>
+                                            </div>
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="1"
+                                                 data-sort="white sample">
+                                                <a href="https://via.placeholder.com/1200/FFFFFF.png?text=11"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 11 - white">
+                                                    <img src="https://via.placeholder.com/300/FFFFFF?text=11"
+                                                         class="img-fluid mb-2"
+                                                         alt="white sample"/>
+                                                </a>
+                                            </div>
+                                            <div class="filtr-item col-sm-2"
+                                                 data-category="2, 4"
+                                                 data-sort="black sample">
+                                                <a href="https://via.placeholder.com/1200/000000.png?text=12"
+                                                   data-toggle="lightbox"
+                                                   data-title="sample 12 - black">
+                                                    <img src="https://via.placeholder.com/300/000000?text=12"
+                                                         class="img-fluid mb-2"
+                                                         alt="black sample"/>
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="card card-primary">
+                                <div class="card-header">
+                                    <h4 class="card-title">Ekko Lightbox</h4>
+                                </div>
+                                <div class="card-body">
+                                    <div class="row">
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/FFFFFF.png?text=1"
+                                               data-toggle="lightbox"
+                                               data-title="sample 1 - white"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/FFFFFF?text=1"
+                                                     class="img-fluid mb-2"
+                                                     alt="white sample"/>
+                                            </a>
+                                        </div>
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/000000.png?text=2"
+                                               data-toggle="lightbox"
+                                               data-title="sample 2 - black"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/000000?text=2"
+                                                     class="img-fluid mb-2"
+                                                     alt="black sample"/>
+                                            </a>
+                                        </div>
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=3"
+                                               data-toggle="lightbox"
+                                               data-title="sample 3 - red"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=3"
+                                                     class="img-fluid mb-2"
+                                                     alt="red sample"/>
+                                            </a>
+                                        </div>
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=4"
+                                               data-toggle="lightbox"
+                                               data-title="sample 4 - red"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=4"
+                                                     class="img-fluid mb-2"
+                                                     alt="red sample"/>
+                                            </a>
+                                        </div>
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/000000.png?text=5"
+                                               data-toggle="lightbox"
+                                               data-title="sample 5 - black"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/000000?text=5"
+                                                     class="img-fluid mb-2"
+                                                     alt="black sample"/>
+                                            </a>
+                                        </div>
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/FFFFFF.png?text=6"
+                                               data-toggle="lightbox"
+                                               data-title="sample 6 - white"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/FFFFFF?text=6"
+                                                     class="img-fluid mb-2"
+                                                     alt="white sample"/>
+                                            </a>
+                                        </div>
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/FFFFFF.png?text=7"
+                                               data-toggle="lightbox"
+                                               data-title="sample 7 - white"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/FFFFFF?text=7"
+                                                     class="img-fluid mb-2"
+                                                     alt="white sample"/>
+                                            </a>
+                                        </div>
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/000000.png?text=8"
+                                               data-toggle="lightbox"
+                                               data-title="sample 8 - black"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/000000?text=8"
+                                                     class="img-fluid mb-2"
+                                                     alt="black sample"/>
+                                            </a>
+                                        </div>
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=9"
+                                               data-toggle="lightbox"
+                                               data-title="sample 9 - red"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=9"
+                                                     class="img-fluid mb-2"
+                                                     alt="red sample"/>
+                                            </a>
+                                        </div>
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/FFFFFF.png?text=10"
+                                               data-toggle="lightbox"
+                                               data-title="sample 10 - white"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/FFFFFF?text=10"
+                                                     class="img-fluid mb-2"
+                                                     alt="white sample"/>
+                                            </a>
+                                        </div>
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/FFFFFF.png?text=11"
+                                               data-toggle="lightbox"
+                                               data-title="sample 11 - white"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/FFFFFF?text=11"
+                                                     class="img-fluid mb-2"
+                                                     alt="white sample"/>
+                                            </a>
+                                        </div>
+                                        <div class="col-sm-2">
+                                            <a href="https://via.placeholder.com/1200/000000.png?text=12"
+                                               data-toggle="lightbox"
+                                               data-title="sample 12 - black"
+                                               data-gallery="gallery">
+                                                <img src="https://via.placeholder.com/300/000000?text=12"
+                                                     class="img-fluid mb-2"
+                                                     alt="black sample"/>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- /.content -->
+        </div>
+        <!-- /.content-wrapper -->
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <!-- jQuery UI -->
+        <script src="/static/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
+        <!-- Ekko Lightbox -->
+        <script src="/static/assets/plugins/ekko-lightbox/ekko-lightbox.min.js"></script>
+        <!-- AdminLTE App -->
+        <script src="/static/assets/js/adminlte.min.js"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="/static/assets/js/demo.js"></script>
+        <!-- Filterizr-->
+        <script src="/static/assets/plugins/filterizr/jquery.filterizr.min.js"></script>
+        <!-- Page specific script -->
+        <script>
+    $(function () {
+      $(document).on('click', '[data-toggle="lightbox"]', function(event) {
+        event.preventDefault();
+        $(this).ekkoLightbox({
+          alwaysShowClose: true
+        });
+      });
+
+      $('.filter-container').filterizr({gutterPixels: 3});
+      $('.btn[data-filter]').on('click', function() {
+        $('.btn[data-filter]').removeClass('active');
+        $(this).addClass('active');
+      });
+    })
+        </script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/includes/footer.html b/tests/jinja_adminlte/includes/footer.html
new file mode 100644
index 0000000..571326d
--- /dev/null
+++ b/tests/jinja_adminlte/includes/footer.html
@@ -0,0 +1,17 @@
+<!-- /.content-wrapper -->
+<footer class="main-footer">
+    &copy;
+    <a target="_blank" rel="noopener noreferrer" href="https://adminlte.io">
+        AdminLTE
+    </a>
+    v3.1.0
+    - coded by
+    <a target="_blank" rel="noopener noreferrer" href="https://appseed.us">
+        AppSeed
+    </a>
+    <div class="float-right d-none d-sm-inline-block">
+        <a target="_blank" rel="noopener noreferrer" href="https://github.com/app-generator/jinja-adminlte">
+            Jinja2 AdminLTE
+        </a>
+    </div>
+</footer>
diff --git a/tests/jinja_adminlte/includes/navigation.html b/tests/jinja_adminlte/includes/navigation.html
new file mode 100644
index 0000000..b17aae3
--- /dev/null
+++ b/tests/jinja_adminlte/includes/navigation.html
@@ -0,0 +1,170 @@
+<!-- Navbar -->
+<nav class="main-header navbar navbar-expand navbar-white navbar-light">
+    <!-- Left navbar links -->
+    <ul class="navbar-nav">
+        <li class="nav-item">
+            <a class="nav-link" data-widget="pushmenu" href="#" role="button">
+                <i class="fas fa-bars"></i>
+            </a>
+        </li>
+        <li class="nav-item d-none d-sm-inline-block">
+            <a href="index3.html" class="nav-link">
+                Home
+            </a>
+        </li>
+        <li class="nav-item d-none d-sm-inline-block">
+            <a href="#" class="nav-link">Contact</a>
+        </li>
+    </ul>
+    <!-- SEARCH FORM -->
+    <form class="form-inline ml-3">
+        <div class="input-group input-group-sm">
+            <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
+            <div class="input-group-append">
+                <button class="btn btn-navbar" type="submit">
+                    <i class="fas fa-search"></i>
+                </button>
+            </div>
+        </div>
+    </form>
+    <!-- Right navbar links -->
+    <ul class="navbar-nav ml-auto">
+        <!-- Messages Dropdown Menu -->
+        <li class="nav-item dropdown">
+            <a class="nav-link" data-toggle="dropdown" href="#">
+                <i class="far fa-comments"></i>
+                <span class="badge badge-danger navbar-badge">
+                    3
+                </span>
+            </a>
+            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+                <a href="#" class="dropdown-item">
+                    <!-- Message Start -->
+                    <div class="media">
+                        <img src="/static/assets/img/user1-128x128.jpg"
+                             alt="User Avatar"
+                             class="img-size-50 mr-3 img-circle">
+                            <div class="media-body">
+                                <h3 class="dropdown-item-title">
+                                    Brad Diesel
+                                    <span class="float-right text-sm text-danger">
+                                        <i class="fas fa-star"></i>
+                                    </span>
+                                </h3>
+                                <p class="text-sm">
+                                    Call me whenever you can...
+                                </p>
+                                <p class="text-sm text-muted">
+                                    <i class="far fa-clock mr-1"></i>
+                                    4 Hours Ago
+                                </p>
+                            </div>
+                        </div>
+                        <!-- Message End -->
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item">
+                        <!-- Message Start -->
+                        <div class="media">
+                            <img src="/static/assets/img/user8-128x128.jpg"
+                                 alt="User Avatar"
+                                 class="img-size-50 img-circle mr-3">
+                                <div class="media-body">
+                                    <h3 class="dropdown-item-title">
+                                        John Pierce
+                                        <span class="float-right text-sm text-muted">
+                                            <i class="fas fa-star"></i>
+                                        </span>
+                                    </h3>
+                                    <p class="text-sm">
+                                        I got your message bro
+                                    </p>
+                                    <p class="text-sm text-muted">
+                                        <i class="far fa-clock mr-1"></i>
+                                        4 Hours Ago
+                                    </p>
+                                </div>
+                            </div>
+                            <!-- Message End -->
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item">
+                            <!-- Message Start -->
+                            <div class="media">
+                                <img src="/static/assets/img/user3-128x128.jpg"
+                                     alt="User Avatar"
+                                     class="img-size-50 img-circle mr-3">
+                                    <div class="media-body">
+                                        <h3 class="dropdown-item-title">
+                                            Nora Silvester
+                                            <span class="float-right text-sm text-warning">
+                                                <i class="fas fa-star"></i>
+                                            </span>
+                                        </h3>
+                                        <p class="text-sm">
+                                            The subject goes here
+                                        </p>
+                                        <p class="text-sm text-muted">
+                                            <i class="far fa-clock mr-1"></i>
+                                            4 Hours Ago
+                                        </p>
+                                    </div>
+                                </div>
+                                <!-- Message End -->
+                            </a>
+                            <div class="dropdown-divider"></div>
+                            <a href="#" class="dropdown-item dropdown-footer">
+                                See All Messages
+                            </a>
+                        </div>
+                    </li>
+                    <!-- Notifications Dropdown Menu -->
+                    <li class="nav-item dropdown">
+                        <a class="nav-link" data-toggle="dropdown" href="#">
+                            <i class="far fa-bell"></i>
+                            <span class="badge badge-warning navbar-badge">
+                                15
+                            </span>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+                            <span class="dropdown-item dropdown-header">
+                                15 Notifications
+                            </span>
+                            <div class="dropdown-divider"></div>
+                            <a href="#" class="dropdown-item">
+                                <i class="fas fa-envelope mr-2"></i>
+                                4 new messages
+                                <span class="float-right text-muted text-sm">
+                                    3 mins
+                                </span>
+                            </a>
+                            <div class="dropdown-divider"></div>
+                            <a href="#" class="dropdown-item">
+                                <i class="fas fa-users mr-2"></i>
+                                8 friend requests
+                                <span class="float-right text-muted text-sm">
+                                    12 hours
+                                </span>
+                            </a>
+                            <div class="dropdown-divider"></div>
+                            <a href="#" class="dropdown-item">
+                                <i class="fas fa-file mr-2"></i>
+                                3 new reports
+                                <span class="float-right text-muted text-sm">
+                                    2 days
+                                </span>
+                            </a>
+                            <div class="dropdown-divider"></div>
+                            <a href="#" class="dropdown-item dropdown-footer">
+                                See All Notifications
+                            </a>
+                        </div>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
+                            <i class="fas fa-th-large"></i>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+            <!-- /.navbar -->
diff --git a/tests/jinja_adminlte/includes/scripts.html b/tests/jinja_adminlte/includes/scripts.html
new file mode 100644
index 0000000..97f0964
--- /dev/null
+++ b/tests/jinja_adminlte/includes/scripts.html
@@ -0,0 +1,34 @@
+<!-- jQuery -->
+<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+<!-- jQuery UI 1.11.4 -->
+<script src="/static/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
+<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
+<script>
+  $.widget.bridge('uibutton', $.ui.button)
+</script>
+<!-- Bootstrap 4 -->
+<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+<!-- ChartJS -->
+<script src="/static/assets/plugins/chart.js/Chart.min.js"></script>
+<!-- Sparkline -->
+<script src="/static/assets/plugins/sparklines/sparkline.js"></script>
+<!-- JQVMap -->
+<script src="/static/assets/plugins/jqvmap/jquery.vmap.min.js"></script>
+<script src="/static/assets/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
+<!-- jQuery Knob Chart -->
+<script src="/static/assets/plugins/jquery-knob/jquery.knob.min.js"></script>
+<!-- daterangepicker -->
+<script src="/static/assets/plugins/moment/moment.min.js"></script>
+<script src="/static/assets/plugins/daterangepicker/daterangepicker.js"></script>
+<!-- Tempusdominus Bootstrap 4 -->
+<script src="/static/assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
+<!-- Summernote -->
+<script src="/static/assets/plugins/summernote/summernote-bs4.min.js"></script>
+<!-- overlayScrollbars -->
+<script src="/static/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
+<!-- AdminLTE App -->
+<script src="/static/assets/js/adminlte.js"></script>
+<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
+<script src="/static/assets/js/pages/dashboard.js"></script>
+<!-- AdminLTE for demo purposes -->
+<script src="/static/assets/js/demo.js"></script>
diff --git a/tests/jinja_adminlte/includes/sidebar.html b/tests/jinja_adminlte/includes/sidebar.html
new file mode 100644
index 0000000..5936332
--- /dev/null
+++ b/tests/jinja_adminlte/includes/sidebar.html
@@ -0,0 +1,685 @@
+<!-- Main Sidebar Container -->
+<aside class="main-sidebar sidebar-dark-primary elevation-4">
+    <!-- Brand Logo -->
+    <a href="/" class="brand-link">
+        <img src="/static/assets/img/AdminLTELogo.png"
+             alt="AdminLTE Logo"
+             class="brand-image img-circle elevation-3"
+             style="opacity: .8">
+            <span class="brand-text font-weight-light">
+                AdminLTE 3
+            </span>
+        </a>
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <!-- Sidebar user panel (optional) -->
+            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
+                <div class="image">
+                    <img src="/static/assets/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
+                    </div>
+                    <div class="info">
+                        <a href="#" class="d-block">Alexander Pierce</a>
+                    </div>
+                </div>
+                <!-- SidebarSearch Form -->
+                <div class="form-inline">
+                    <div class="input-group" data-widget="sidebar-search">
+                        <input class="form-control form-control-sidebar"
+                               type="search"
+                               placeholder="Search"
+                               aria-label="Search">
+                        <div class="input-group-append">
+                            <button class="btn btn-sidebar">
+                                <i class="fas fa-search fa-fw"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Sidebar Menu -->
+                <nav class="mt-2">
+                    <ul class="nav nav-pills nav-sidebar flex-column"
+                        data-widget="treeview"
+                        role="menu"
+                        data-accordion="false">
+                        <!-- Add icons to the links using the .nav-icon class
+                    with font-awesome or any other icon font library -->
+                    <li class="nav-item has-treeview {% if 'index' in segment %}menu-open {% endif %}">
+                    <a href="#" class="nav-link {% if 'index' in segment %}active {% endif %}">
+                    <i class="nav-icon fas fa-tachometer-alt"></i>
+                    <p>
+                        Dashboard
+                        <i class="right fas fa-angle-left"></i>
+                    </p>
+                </a>
+                <ul class="nav nav-treeview">
+                    <li class="nav-item">
+                        <a href="/index.html" class="nav-link {% if 'index.html' in segment %}active {% endif %}">
+                        <i class="far fa-circle nav-icon"></i>
+                        <p>
+                            Dashboard v1
+                        </p>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="/index2.html" class="nav-link {% if 'index2.html' in segment %}active {% endif %}">
+                    <i class="far fa-circle nav-icon"></i>
+                    <p>
+                        Dashboard v2
+                    </p>
+                </a>
+            </li>
+            <li class="nav-item">
+                <a href="/index3.html" class="nav-link {% if 'index3.html' in segment %}active {% endif %}">
+                <i class="far fa-circle nav-icon"></i>
+                <p>
+                    Dashboard v3
+                </p>
+            </a>
+        </li>
+    </ul>
+</li>
+<li class="nav-item">
+    <a href="widgets.html" class="nav-link {% if 'widgets' in segment %}active {% endif %}">
+    <i class="nav-icon fas fa-th"></i>
+    <p>
+        Widgets
+        <span class="right badge badge-danger">
+            New
+        </span>
+    </p>
+</a>
+</li>
+<li class="nav-item has-treeview {% if 'layout' in segment %}menu-open {% endif %}">
+<a href="#" class="nav-link {% if 'layout' in segment %}active {% endif %}">
+<i class="nav-icon fas fa-copy"></i>
+<p>
+Layout Options
+<i class="fas fa-angle-left right"></i>
+<span class="badge badge-info right">6</span>
+</p>
+</a>
+<ul class="nav nav-treeview">
+<li class="nav-item">
+<a href="/layout-top-nav-sidebar.html" class="nav-link {% if 'layout-top' in segment %}active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+    Top Navigation + Sidebar
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/layout-boxed.html" class="nav-link {% if 'layout-boxed' in segment %}active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Boxed
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/layout-fixed-sidebar.html" class="nav-link {% if 'layout-fixed-sidebar' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Fixed Sidebar
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/layout-fixed-topnav.html" class="nav-link {% if 'layout-fixed-topnav' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Fixed Navbar
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/layout-fixed-footer.html" class="nav-link {% if 'layout-fixed-footer' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Fixed Footer
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/layout-collapsed-sidebar.html" class="nav-link {% if 'layout-collapsed' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Collapsed Sidebar
+</p>
+</a>
+</li>
+</ul>
+</li>
+<li class="nav-item has-treeview {% if 'charts' in segment %} menu-open {% endif %}">
+<a href="#" class="nav-link {% if 'charts' in segment %} active {% endif %}">
+<i class="nav-icon fas fa-chart-pie"></i>
+<p>
+Charts
+<i class="right fas fa-angle-left"></i>
+</p>
+</a>
+<ul class="nav nav-treeview">
+<li class="nav-item">
+<a href="/charts-chartjs.html" class="nav-link {% if 'charts-chartjs' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+ChartJS
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/charts-flot.html" class="nav-link {% if 'charts-flot' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Flot
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/charts-inline.html" class="nav-link {% if 'charts-inline' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Inline
+</p>
+</a>
+</li>
+</ul>
+</li>
+<li class="nav-item has-treeview {% if 'ui-' in segment %} menu-open {% endif %}">
+<a href="#" class="nav-link {% if 'ui-' in segment %} active {% endif %}">
+<i class="nav-icon fas fa-tree"></i>
+<p>
+UI Elements
+<i class="fas fa-angle-left right"></i>
+</p>
+</a>
+<ul class="nav nav-treeview">
+<li class="nav-item">
+<a href="/ui-general.html" class="nav-link {% if 'ui-general' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+General
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/ui-icons.html" class="nav-link {% if 'ui-icons' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Icons
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/ui-buttons.html" class="nav-link {% if 'ui-buttons' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Buttons
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/ui-sliders.html" class="nav-link {% if 'ui-sliders' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Sliders
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/ui-modals.html" class="nav-link {% if 'ui-modals' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Modals & Alerts
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/ui-navbar.html" class="nav-link {% if 'ui-navbar' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Navbar & Tabs
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/ui-timeline.html" class="nav-link {% if 'ui-timeline' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Timeline
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/ui-ribbons.html" class="nav-link {% if 'ui-ribbons' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Ribbons
+</p>
+</a>
+</li>
+</ul>
+</li>
+<li class="nav-item has-treeview {% if 'forms-' in segment %} menu-open {% endif %}">
+<a href="#" class="nav-link {% if 'forms-' in segment %} active {% endif %}">
+<i class="nav-icon fas fa-edit"></i>
+<p>
+Forms
+<i class="fas fa-angle-left right"></i>
+</p>
+</a>
+<ul class="nav nav-treeview">
+<li class="nav-item">
+<a href="/forms-general.html" class="nav-link {% if 'forms-general' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+General Elements
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/forms-advanced.html" class="nav-link {% if 'forms-advanced' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Advanced Elements
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/forms-editors.html" class="nav-link {% if 'forms-editors' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Editors
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/forms-validation.html" class="nav-link {% if 'forms-validation' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Validation
+</p>
+</a>
+</li>
+</ul>
+</li>
+<li class="nav-item has-treeview {% if 'tables-' in segment %} menu-open {% endif %}">
+<a href="#" class="nav-link {% if 'tables-' in segment %} active {% endif %}">
+<i class="nav-icon fas fa-table"></i>
+<p>
+Tables
+<i class="fas fa-angle-left right"></i>
+</p>
+</a>
+<ul class="nav nav-treeview">
+<li class="nav-item">
+<a href="/tables-simple.html" class="nav-link {% if 'tables-simple' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Simple Tables
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/tables-data.html" class="nav-link {% if 'tables-data' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+DataTables
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/tables-jsgrid.html" class="nav-link {% if 'tables-jsgrid' in segment %} active {% endif %}">
+<i class="far fa-circle nav-icon"></i>
+<p>
+jsGrid
+</p>
+</a>
+</li>
+</ul>
+</li>
+<li class="nav-header">
+EXAMPLES
+</li>
+<li class="nav-item">
+<a href="/calendar.html" class="nav-link">
+<i class="nav-icon far fa-calendar-alt"></i>
+<p>
+Calendar
+<span class="badge badge-info right">2</span>
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/gallery.html" class="nav-link">
+<i class="nav-icon far fa-image"></i>
+<p>
+Gallery
+</p>
+</a>
+</li>
+<li class="nav-item has-treeview">
+<a href="#" class="nav-link">
+<i class="nav-icon far fa-envelope"></i>
+<p>
+Mailbox
+<i class="fas fa-angle-left right"></i>
+</p>
+</a>
+<ul class="nav nav-treeview">
+<li class="nav-item">
+<a href="/mailbox.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Inbox
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/mailbox-compose.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Compose
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/mailbox-read-mail.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Read
+</p>
+</a>
+</li>
+</ul>
+</li>
+<li class="nav-item has-treeview">
+<a href="#" class="nav-link">
+<i class="nav-icon fas fa-book"></i>
+<p>
+Pages
+<i class="fas fa-angle-left right"></i>
+</p>
+</a>
+<ul class="nav nav-treeview">
+<li class="nav-item">
+<a href="/examples-invoice.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Invoice
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-profile.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Profile
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-e-commerce.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+E-commerce
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-projects.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Projects
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-project-add.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Project Add
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-project-edit.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Project Edit
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-project-detail.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Project Detail
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-contacts.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Contacts
+</p>
+</a>
+</li>
+</ul>
+</li>
+<li class="nav-item has-treeview">
+<a href="#" class="nav-link">
+<i class="nav-icon far fa-plus-square"></i>
+<p>
+Extras
+<i class="fas fa-angle-left right"></i>
+</p>
+</a>
+<ul class="nav nav-treeview">
+<li class="nav-item">
+<a href="/examples-login.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Login
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-register.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Register
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-forgot-password.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Forgot Password
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-recover-password.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Recover Password
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-lockscreen.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Lockscreen
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-legacy-user-menu.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Legacy User Menu
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-language-menu.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Language Menu
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-404.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Error 404
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-500.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Error 500
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="/examples-blank.html" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Blank Page
+</p>
+</a>
+</li>
+</ul>
+</li>
+<li class="nav-header">
+MISCELLANEOUS
+</li>
+<li class="nav-item">
+<a target="_blank" rel="noopener noreferrer" href="https://adminlte.io/docs/3.0/" class="nav-link">
+<i class="nav-icon fas fa-file"></i>
+<p>
+UI Documentation
+</p>
+</a>
+</li>
+<li class="nav-header">
+MULTI LEVEL EXAMPLE
+</li>
+<li class="nav-item">
+<a href="#" class="nav-link">
+<i class="fas fa-circle nav-icon"></i>
+<p>
+Level 1
+</p>
+</a>
+</li>
+<li class="nav-item has-treeview">
+<a href="#" class="nav-link">
+<i class="nav-icon fas fa-circle"></i>
+<p>
+Level 1
+<i class="right fas fa-angle-left"></i>
+</p>
+</a>
+<ul class="nav nav-treeview">
+<li class="nav-item">
+<a href="#" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Level 2
+</p>
+</a>
+</li>
+<li class="nav-item has-treeview">
+<a href="#" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Level 2
+<i class="right fas fa-angle-left"></i>
+</p>
+</a>
+<ul class="nav nav-treeview">
+<li class="nav-item">
+<a href="#" class="nav-link">
+<i class="far fa-dot-circle nav-icon"></i>
+<p>
+Level 3
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="#" class="nav-link">
+<i class="far fa-dot-circle nav-icon"></i>
+<p>
+Level 3
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="#" class="nav-link">
+<i class="far fa-dot-circle nav-icon"></i>
+<p>
+Level 3
+</p>
+</a>
+</li>
+</ul>
+</li>
+<li class="nav-item">
+<a href="#" class="nav-link">
+<i class="far fa-circle nav-icon"></i>
+<p>
+Level 2
+</p>
+</a>
+</li>
+</ul>
+</li>
+<li class="nav-item">
+<a href="#" class="nav-link">
+<i class="fas fa-circle nav-icon"></i>
+<p>
+Level 1
+</p>
+</a>
+</li>
+<li class="nav-header">
+LABELS
+</li>
+<li class="nav-item">
+<a href="#" class="nav-link">
+<i class="nav-icon far fa-circle text-danger"></i>
+<p class="text">
+Important
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="#" class="nav-link">
+<i class="nav-icon far fa-circle text-warning"></i>
+<p>
+Warning
+</p>
+</a>
+</li>
+<li class="nav-item">
+<a href="#" class="nav-link">
+<i class="nav-icon far fa-circle text-info"></i>
+<p>
+Informational
+</p>
+</a>
+</li>
+</ul>
+</nav>
+<!-- /.sidebar-menu -->
+</div>
+<!-- /.sidebar -->
+</aside>
diff --git a/tests/jinja_adminlte/index.html b/tests/jinja_adminlte/index.html
new file mode 100644
index 0000000..6b9ffad
--- /dev/null
+++ b/tests/jinja_adminlte/index.html
@@ -0,0 +1,871 @@
+{% extends "layouts/base.html" %}
+{% block title %}Dashboard {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Ionicons -->
+    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+    <!-- Tempusdominus Bootstrap 4 -->
+    <link rel="stylesheet"
+          href="/static/assets/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
+    <!-- iCheck -->
+    <link rel="stylesheet" href="/static/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+    <!-- JQVMap -->
+    <link rel="stylesheet" href="/static/assets/plugins/jqvmap/jqvmap.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    <!-- overlayScrollbars -->
+    <link rel="stylesheet" href="/static/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
+    <!-- Daterange picker -->
+    <link rel="stylesheet" href="/static/assets/plugins/daterangepicker/daterangepicker.css">
+    <!-- summernote -->
+    <link rel="stylesheet" href="/static/assets/plugins/summernote/summernote-bs4.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <div class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1 class="m-0 text-dark">Dashboard</h1>
+                    </div>
+                    <!-- /.col -->
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Dashboard v1
+                            </li>
+                        </ol>
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+            </div>
+            <!-- /.container-fluid -->
+        </div>
+        <!-- /.content-header -->
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <!-- Small boxes (Stat box) -->
+                <div class="row">
+                    <div class="col-lg-3 col-6">
+                        <!-- small box -->
+                        <div class="small-box bg-info">
+                            <div class="inner">
+                                <h3>150</h3>
+                                <p>
+                                    New Orders
+                                </p>
+                            </div>
+                            <div class="icon">
+                                <i class="ion ion-bag"></i>
+                            </div>
+                            <a href="#" class="small-box-footer">
+                                More info
+                                <i class="fas fa-arrow-circle-right"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- ./col -->
+                    <div class="col-lg-3 col-6">
+                        <!-- small box -->
+                        <div class="small-box bg-success">
+                            <div class="inner">
+                                <h3>
+                                    53
+                                    <sup style="font-size: 20px">
+                                    %
+                                    </sup>
+                                </h3>
+                                <p>
+                                    Bounce Rate
+                                </p>
+                            </div>
+                            <div class="icon">
+                                <i class="ion ion-stats-bars"></i>
+                            </div>
+                            <a href="#" class="small-box-footer">
+                                More info
+                                <i class="fas fa-arrow-circle-right"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- ./col -->
+                    <div class="col-lg-3 col-6">
+                        <!-- small box -->
+                        <div class="small-box bg-warning">
+                            <div class="inner">
+                                <h3>44</h3>
+                                <p>
+                                    User Registrations
+                                </p>
+                            </div>
+                            <div class="icon">
+                                <i class="ion ion-person-add"></i>
+                            </div>
+                            <a href="#" class="small-box-footer">
+                                More info
+                                <i class="fas fa-arrow-circle-right"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- ./col -->
+                    <div class="col-lg-3 col-6">
+                        <!-- small box -->
+                        <div class="small-box bg-danger">
+                            <div class="inner">
+                                <h3>65</h3>
+                                <p>
+                                    Unique Visitors
+                                </p>
+                            </div>
+                            <div class="icon">
+                                <i class="ion ion-pie-graph"></i>
+                            </div>
+                            <a href="#" class="small-box-footer">
+                                More info
+                                <i class="fas fa-arrow-circle-right"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- ./col -->
+                </div>
+                <!-- /.row -->
+                <!-- Main row -->
+                <div class="row">
+                    <!-- Left col -->
+                    <section class="col-lg-7 connectedSortable">
+                        <!-- Custom tabs (Charts with tabs)-->
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    <i class="fas fa-chart-pie mr-1"></i>
+                                    Sales
+                                </h3>
+                                <div class="card-tools">
+                                    <ul class="nav nav-pills ml-auto">
+                                        <li class="nav-item">
+                                            <a class="nav-link active" href="#revenue-chart" data-toggle="tab">
+                                                Area
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" href="#sales-chart" data-toggle="tab">
+                                                Donut
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body">
+                                <div class="tab-content p-0">
+                                    <!-- Morris chart - Sales -->
+                                    <div class="chart tab-pane active"
+                                         id="revenue-chart"
+                                         style="position: relative; height: 300px;">
+                                        <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
+                                    </div>
+                                    <div class="chart tab-pane"
+                                         id="sales-chart"
+                                         style="position: relative; height: 300px;">
+                                        <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <!-- DIRECT CHAT -->
+                        <div class="card direct-chat direct-chat-primary">
+                            <div class="card-header">
+                                <h3 class="card-title">Direct Chat</h3>
+                                <div class="card-tools">
+                                    <span title="3 New Messages" class="badge badge-primary">
+                                        3
+                                    </span>
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-tool"
+                                            title="Contacts"
+                                            data-widget="chat-pane-toggle">
+                                        <i class="fas fa-comments"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body">
+                                <!-- Conversations are loaded here -->
+                                <div class="direct-chat-messages">
+                                    <!-- Message. Default to the left -->
+                                    <div class="direct-chat-msg">
+                                        <div class="direct-chat-infos clearfix">
+                                            <span class="direct-chat-name float-left">
+                                                Alexander Pierce
+                                            </span>
+                                            <span class="direct-chat-timestamp float-right">
+                                                23 Jan 2:00 pm
+                                            </span>
+                                        </div>
+                                        <!-- /.direct-chat-infos -->
+                                        <img class="direct-chat-img"
+                                             src="/static/assets/img/user1-128x128.jpg"
+                                             alt="message user image">
+                                            <!-- /.direct-chat-img -->
+                                            <div class="direct-chat-text">
+                                                Is this template really for free? That's unbelievable!
+                                            </div>
+                                            <!-- /.direct-chat-text -->
+                                        </div>
+                                        <!-- /.direct-chat-msg -->
+                                        <!-- Message to the right -->
+                                        <div class="direct-chat-msg right">
+                                            <div class="direct-chat-infos clearfix">
+                                                <span class="direct-chat-name float-right">
+                                                    Sarah Bullock
+                                                </span>
+                                                <span class="direct-chat-timestamp float-left">
+                                                    23 Jan 2:05 pm
+                                                </span>
+                                            </div>
+                                            <!-- /.direct-chat-infos -->
+                                            <img class="direct-chat-img"
+                                                 src="/static/assets/img/user3-128x128.jpg"
+                                                 alt="message user image">
+                                                <!-- /.direct-chat-img -->
+                                                <div class="direct-chat-text">
+                                                    You better believe it!
+                                                </div>
+                                                <!-- /.direct-chat-text -->
+                                            </div>
+                                            <!-- /.direct-chat-msg -->
+                                            <!-- Message. Default to the left -->
+                                            <div class="direct-chat-msg">
+                                                <div class="direct-chat-infos clearfix">
+                                                    <span class="direct-chat-name float-left">
+                                                        Alexander Pierce
+                                                    </span>
+                                                    <span class="direct-chat-timestamp float-right">
+                                                        23 Jan 5:37 pm
+                                                    </span>
+                                                </div>
+                                                <!-- /.direct-chat-infos -->
+                                                <img class="direct-chat-img"
+                                                     src="/static/assets/img/user1-128x128.jpg"
+                                                     alt="message user image">
+                                                    <!-- /.direct-chat-img -->
+                                                    <div class="direct-chat-text">
+                                                        Working with AdminLTE on a great new app! Wanna join?
+                                                    </div>
+                                                    <!-- /.direct-chat-text -->
+                                                </div>
+                                                <!-- /.direct-chat-msg -->
+                                                <!-- Message to the right -->
+                                                <div class="direct-chat-msg right">
+                                                    <div class="direct-chat-infos clearfix">
+                                                        <span class="direct-chat-name float-right">
+                                                            Sarah Bullock
+                                                        </span>
+                                                        <span class="direct-chat-timestamp float-left">
+                                                            23 Jan 6:10 pm
+                                                        </span>
+                                                    </div>
+                                                    <!-- /.direct-chat-infos -->
+                                                    <img class="direct-chat-img"
+                                                         src="/static/assets/img/user3-128x128.jpg"
+                                                         alt="message user image">
+                                                        <!-- /.direct-chat-img -->
+                                                        <div class="direct-chat-text">
+                                                            I would love to.
+                                                        </div>
+                                                        <!-- /.direct-chat-text -->
+                                                    </div>
+                                                    <!-- /.direct-chat-msg -->
+                                                </div>
+                                                <!--/.direct-chat-messages-->
+                                                <!-- Contacts are loaded here -->
+                                                <div class="direct-chat-contacts">
+                                                    <ul class="contacts-list">
+                                                        <li>
+                                                            <a href="#">
+                                                                <img class="contacts-list-img"
+                                                                     src="/static/assets/img/user1-128x128.jpg"
+                                                                     alt="User Avatar">
+                                                                    <div class="contacts-list-info">
+                                                                        <span class="contacts-list-name">
+                                                                            Count Dracula
+                                                                            <small class="contacts-list-date float-right">
+                                                                            2/28/2015
+                                                                            </small>
+                                                                        </span>
+                                                                        <span class="contacts-list-msg">How have you been? I was...</span>
+                                                                    </div>
+                                                                    <!-- /.contacts-list-info -->
+                                                                </a>
+                                                            </li>
+                                                            <!-- End Contact Item -->
+                                                            <li>
+                                                                <a href="#">
+                                                                    <img class="contacts-list-img"
+                                                                         src="/static/assets/img/user7-128x128.jpg"
+                                                                         alt="User Avatar">
+                                                                        <div class="contacts-list-info">
+                                                                            <span class="contacts-list-name">
+                                                                                Sarah Doe
+                                                                                <small class="contacts-list-date float-right">
+                                                                                2/23/2015
+                                                                                </small>
+                                                                            </span>
+                                                                            <span class="contacts-list-msg">I will be waiting for...</span>
+                                                                        </div>
+                                                                        <!-- /.contacts-list-info -->
+                                                                    </a>
+                                                                </li>
+                                                                <!-- End Contact Item -->
+                                                                <li>
+                                                                    <a href="#">
+                                                                        <img class="contacts-list-img"
+                                                                             src="/static/assets/img/user3-128x128.jpg"
+                                                                             alt="User Avatar">
+                                                                            <div class="contacts-list-info">
+                                                                                <span class="contacts-list-name">
+                                                                                    Nadia Jolie
+                                                                                    <small class="contacts-list-date float-right">
+                                                                                    2/20/2015
+                                                                                    </small>
+                                                                                </span>
+                                                                                <span class="contacts-list-msg">I'll call you back at...</span>
+                                                                            </div>
+                                                                            <!-- /.contacts-list-info -->
+                                                                        </a>
+                                                                    </li>
+                                                                    <!-- End Contact Item -->
+                                                                    <li>
+                                                                        <a href="#">
+                                                                            <img class="contacts-list-img"
+                                                                                 src="/static/assets/img/user5-128x128.jpg"
+                                                                                 alt="User Avatar">
+                                                                                <div class="contacts-list-info">
+                                                                                    <span class="contacts-list-name">
+                                                                                        Nora S. Vans
+                                                                                        <small class="contacts-list-date float-right">
+                                                                                        2/10/2015
+                                                                                        </small>
+                                                                                    </span>
+                                                                                    <span class="contacts-list-msg">Where is your new...</span>
+                                                                                </div>
+                                                                                <!-- /.contacts-list-info -->
+                                                                            </a>
+                                                                        </li>
+                                                                        <!-- End Contact Item -->
+                                                                        <li>
+                                                                            <a href="#">
+                                                                                <img class="contacts-list-img"
+                                                                                     src="/static/assets/img/user6-128x128.jpg"
+                                                                                     alt="User Avatar">
+                                                                                    <div class="contacts-list-info">
+                                                                                        <span class="contacts-list-name">
+                                                                                            John K.
+                                                                                            <small class="contacts-list-date float-right">
+                                                                                            1/27/2015
+                                                                                            </small>
+                                                                                        </span>
+                                                                                        <span class="contacts-list-msg">Can I take a look at...</span>
+                                                                                    </div>
+                                                                                    <!-- /.contacts-list-info -->
+                                                                                </a>
+                                                                            </li>
+                                                                            <!-- End Contact Item -->
+                                                                            <li>
+                                                                                <a href="#">
+                                                                                    <img class="contacts-list-img"
+                                                                                         src="/static/assets/img/user8-128x128.jpg"
+                                                                                         alt="User Avatar">
+                                                                                        <div class="contacts-list-info">
+                                                                                            <span class="contacts-list-name">
+                                                                                                Kenneth M.
+                                                                                                <small class="contacts-list-date float-right">
+                                                                                                1/4/2015
+                                                                                                </small>
+                                                                                            </span>
+                                                                                            <span class="contacts-list-msg">Never mind I found...</span>
+                                                                                        </div>
+                                                                                        <!-- /.contacts-list-info -->
+                                                                                    </a>
+                                                                                </li>
+                                                                                <!-- End Contact Item -->
+                                                                            </ul>
+                                                                            <!-- /.contacts-list -->
+                                                                        </div>
+                                                                        <!-- /.direct-chat-pane -->
+                                                                    </div>
+                                                                    <!-- /.card-body -->
+                                                                    <div class="card-footer">
+                                                                        <form action="#" method="post">
+                                                                            <div class="input-group">
+                                                                                <input type="text"
+                                                                                       name="message"
+                                                                                       placeholder="Type Message ..."
+                                                                                       class="form-control">
+                                                                                <span class="input-group-append">
+                                                                                    <button type="button"
+                                                                                            class="btn btn-primary">
+                                                                                        Send
+                                                                                    </button>
+                                                                                </span>
+                                                                            </div>
+                                                                        </form>
+                                                                    </div>
+                                                                    <!-- /.card-footer-->
+                                                                </div>
+                                                                <!--/.direct-chat -->
+                                                                <!-- TO DO List -->
+                                                                <div class="card">
+                                                                    <div class="card-header">
+                                                                        <h3 class="card-title">
+                                                                            <i class="ion ion-clipboard mr-1"></i>
+                                                                            To Do List
+                                                                        </h3>
+                                                                        <div class="card-tools">
+                                                                            <ul class="pagination pagination-sm">
+                                                                                <li class="page-item">
+                                                                                    <a href="#"
+                                                                                       class="page-link">&laquo;</a>
+                                                                                </li>
+                                                                                <li class="page-item">
+                                                                                    <a href="#" class="page-link">
+                                                                                        1
+                                                                                    </a>
+                                                                                </li>
+                                                                                <li class="page-item">
+                                                                                    <a href="#" class="page-link">
+                                                                                        2
+                                                                                    </a>
+                                                                                </li>
+                                                                                <li class="page-item">
+                                                                                    <a href="#" class="page-link">
+                                                                                        3
+                                                                                    </a>
+                                                                                </li>
+                                                                                <li class="page-item">
+                                                                                    <a href="#" class="page-link">
+                                                                                        &raquo;
+                                                                                    </a>
+                                                                                </li>
+                                                                            </ul>
+                                                                        </div>
+                                                                    </div>
+                                                                    <!-- /.card-header -->
+                                                                    <div class="card-body">
+                                                                        <ul class="todo-list" data-widget="todo-list">
+                                                                            <li>
+                                                                                <!-- drag handle -->
+                                                                                <span class="handle">
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                </span>
+                                                                                <!-- checkbox -->
+                                                                                <div class="icheck-primary d-inline ml-2">
+                                                                                    <input type="checkbox"
+                                                                                           value=""
+                                                                                           name="todo1"
+                                                                                           id="todoCheck1">
+                                                                                    <label for="todoCheck1"></label>
+                                                                                </div>
+                                                                                <!-- todo text -->
+                                                                                <span class="text">
+                                                                                    Design a nice theme
+                                                                                </span>
+                                                                                <!-- Emphasis label -->
+                                                                                <small class="badge badge-danger">
+                                                                                <i class="far fa-clock"></i>
+                                                                                2 mins
+                                                                                </small>
+                                                                                <!-- General tools such as edit or delete-->
+                                                                                <div class="tools">
+                                                                                    <i class="fas fa-edit"></i>
+                                                                                    <i class="fas fa-trash-o"></i>
+                                                                                </div>
+                                                                            </li>
+                                                                            <li>
+                                                                                <span class="handle">
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                </span>
+                                                                                <div class="icheck-primary d-inline ml-2">
+                                                                                    <input type="checkbox"
+                                                                                           value=""
+                                                                                           name="todo2"
+                                                                                           id="todoCheck2"
+                                                                                           checked>
+                                                                                    <label for="todoCheck2"></label>
+                                                                                </div>
+                                                                                <span class="text">
+                                                                                    Make the theme responsive
+                                                                                </span>
+                                                                                <small class="badge badge-info">
+                                                                                <i class="far fa-clock"></i>
+                                                                                4 hours
+                                                                                </small>
+                                                                                <div class="tools">
+                                                                                    <i class="fas fa-edit"></i>
+                                                                                    <i class="fas fa-trash-o"></i>
+                                                                                </div>
+                                                                            </li>
+                                                                            <li>
+                                                                                <span class="handle">
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                </span>
+                                                                                <div class="icheck-primary d-inline ml-2">
+                                                                                    <input type="checkbox"
+                                                                                           value=""
+                                                                                           name="todo3"
+                                                                                           id="todoCheck3">
+                                                                                    <label for="todoCheck3"></label>
+                                                                                </div>
+                                                                                <span class="text">
+                                                                                    Let theme shine like a star
+                                                                                </span>
+                                                                                <small class="badge badge-warning">
+                                                                                <i class="far fa-clock"></i>
+                                                                                1 day
+                                                                                </small>
+                                                                                <div class="tools">
+                                                                                    <i class="fas fa-edit"></i>
+                                                                                    <i class="fas fa-trash-o"></i>
+                                                                                </div>
+                                                                            </li>
+                                                                            <li>
+                                                                                <span class="handle">
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                </span>
+                                                                                <div class="icheck-primary d-inline ml-2">
+                                                                                    <input type="checkbox"
+                                                                                           value=""
+                                                                                           name="todo4"
+                                                                                           id="todoCheck4">
+                                                                                    <label for="todoCheck4"></label>
+                                                                                </div>
+                                                                                <span class="text">
+                                                                                    Let theme shine like a star
+                                                                                </span>
+                                                                                <small class="badge badge-success">
+                                                                                <i class="far fa-clock"></i>
+                                                                                3 days
+                                                                                </small>
+                                                                                <div class="tools">
+                                                                                    <i class="fas fa-edit"></i>
+                                                                                    <i class="fas fa-trash-o"></i>
+                                                                                </div>
+                                                                            </li>
+                                                                            <li>
+                                                                                <span class="handle">
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                </span>
+                                                                                <div class="icheck-primary d-inline ml-2">
+                                                                                    <input type="checkbox"
+                                                                                           value=""
+                                                                                           name="todo5"
+                                                                                           id="todoCheck5">
+                                                                                    <label for="todoCheck5"></label>
+                                                                                </div>
+                                                                                <span class="text">
+                                                                                    Check your messages and notifications
+                                                                                </span>
+                                                                                <small class="badge badge-primary">
+                                                                                <i class="far fa-clock"></i>
+                                                                                1 week
+                                                                                </small>
+                                                                                <div class="tools">
+                                                                                    <i class="fas fa-edit"></i>
+                                                                                    <i class="fas fa-trash-o"></i>
+                                                                                </div>
+                                                                            </li>
+                                                                            <li>
+                                                                                <span class="handle">
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                    <i class="fas fa-ellipsis-v"></i>
+                                                                                </span>
+                                                                                <div class="icheck-primary d-inline ml-2">
+                                                                                    <input type="checkbox"
+                                                                                           value=""
+                                                                                           name="todo6"
+                                                                                           id="todoCheck6">
+                                                                                    <label for="todoCheck6"></label>
+                                                                                </div>
+                                                                                <span class="text">
+                                                                                    Let theme shine like a star
+                                                                                </span>
+                                                                                <small class="badge badge-secondary">
+                                                                                <i class="far fa-clock"></i>
+                                                                                1 month
+                                                                                </small>
+                                                                                <div class="tools">
+                                                                                    <i class="fas fa-edit"></i>
+                                                                                    <i class="fas fa-trash-o"></i>
+                                                                                </div>
+                                                                            </li>
+                                                                        </ul>
+                                                                    </div>
+                                                                    <!-- /.card-body -->
+                                                                    <div class="card-footer clearfix">
+                                                                        <button type="button"
+                                                                                class="btn btn-info float-right">
+                                                                            <i class="fas fa-plus"></i>
+                                                                            Add item
+                                                                        </button>
+                                                                    </div>
+                                                                </div>
+                                                                <!-- /.card -->
+                                                            </section>
+                                                            <!-- /.Left col -->
+                                                            <!-- right col (We are only adding the ID to make the widgets sortable)-->
+                                                            <section class="col-lg-5 connectedSortable">
+                                                                <!-- Map card -->
+                                                                <div class="card bg-gradient-primary">
+                                                                    <div class="card-header border-0">
+                                                                        <h3 class="card-title">
+                                                                            <i class="fas fa-map-marker-alt mr-1"></i>
+                                                                            Visitors
+                                                                        </h3>
+                                                                        <!-- card tools -->
+                                                                        <div class="card-tools">
+                                                                            <button type="button"
+                                                                                    class="btn btn-primary btn-sm daterange"
+                                                                                    title="Date range">
+                                                                                <i class="far fa-calendar-alt"></i>
+                                                                            </button>
+                                                                            <button type="button"
+                                                                                    class="btn btn-primary btn-sm"
+                                                                                    data-card-widget="collapse"
+                                                                                    title="Collapse">
+                                                                                <i class="fas fa-minus"></i>
+                                                                            </button>
+                                                                        </div>
+                                                                        <!-- /.card-tools -->
+                                                                    </div>
+                                                                    <div class="card-body">
+                                                                        <div id="world-map"
+                                                                             style="height: 250px; width: 100%;"></div>
+                                                                    </div>
+                                                                    <!-- /.card-body-->
+                                                                    <div class="card-footer bg-transparent">
+                                                                        <div class="row">
+                                                                            <div class="col-4 text-center">
+                                                                                <div id="sparkline-1"></div>
+                                                                                <div class="text-white">
+                                                                                    Visitors
+                                                                                </div>
+                                                                            </div>
+                                                                            <!-- ./col -->
+                                                                            <div class="col-4 text-center">
+                                                                                <div id="sparkline-2"></div>
+                                                                                <div class="text-white">
+                                                                                    Online
+                                                                                </div>
+                                                                            </div>
+                                                                            <!-- ./col -->
+                                                                            <div class="col-4 text-center">
+                                                                                <div id="sparkline-3"></div>
+                                                                                <div class="text-white">
+                                                                                    Sales
+                                                                                </div>
+                                                                            </div>
+                                                                            <!-- ./col -->
+                                                                        </div>
+                                                                        <!-- /.row -->
+                                                                    </div>
+                                                                </div>
+                                                                <!-- /.card -->
+                                                                <!-- solid sales graph -->
+                                                                <div class="card bg-gradient-info">
+                                                                    <div class="card-header border-0">
+                                                                        <h3 class="card-title">
+                                                                            <i class="fas fa-th mr-1"></i>
+                                                                            Sales Graph
+                                                                        </h3>
+                                                                        <div class="card-tools">
+                                                                            <button type="button"
+                                                                                    class="btn bg-info btn-sm"
+                                                                                    data-card-widget="collapse">
+                                                                                <i class="fas fa-minus"></i>
+                                                                            </button>
+                                                                            <button type="button"
+                                                                                    class="btn bg-info btn-sm"
+                                                                                    data-card-widget="remove">
+                                                                                <i class="fas fa-times"></i>
+                                                                            </button>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="card-body">
+                                                                        <canvas class="chart"
+                                                                                id="line-chart"
+                                                                                style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
+                                                                    </div>
+                                                                    <!-- /.card-body -->
+                                                                    <div class="card-footer bg-transparent">
+                                                                        <div class="row">
+                                                                            <div class="col-4 text-center">
+                                                                                <input type="text"
+                                                                                       class="knob"
+                                                                                       data-readonly="true"
+                                                                                       value="20"
+                                                                                       data-width="60"
+                                                                                       data-height="60"
+                                                                                       data-fgColor="#39CCCC">
+                                                                                <div class="text-white">
+                                                                                    Mail-Orders
+                                                                                </div>
+                                                                            </div>
+                                                                            <!-- ./col -->
+                                                                            <div class="col-4 text-center">
+                                                                                <input type="text"
+                                                                                       class="knob"
+                                                                                       data-readonly="true"
+                                                                                       value="50"
+                                                                                       data-width="60"
+                                                                                       data-height="60"
+                                                                                       data-fgColor="#39CCCC">
+                                                                                <div class="text-white">
+                                                                                    Online
+                                                                                </div>
+                                                                            </div>
+                                                                            <!-- ./col -->
+                                                                            <div class="col-4 text-center">
+                                                                                <input type="text"
+                                                                                       class="knob"
+                                                                                       data-readonly="true"
+                                                                                       value="30"
+                                                                                       data-width="60"
+                                                                                       data-height="60"
+                                                                                       data-fgColor="#39CCCC">
+                                                                                <div class="text-white">
+                                                                                    In-Store
+                                                                                </div>
+                                                                            </div>
+                                                                            <!-- ./col -->
+                                                                        </div>
+                                                                        <!-- /.row -->
+                                                                    </div>
+                                                                    <!-- /.card-footer -->
+                                                                </div>
+                                                                <!-- /.card -->
+                                                                <!-- Calendar -->
+                                                                <div class="card bg-gradient-success">
+                                                                    <div class="card-header border-0">
+                                                                        <h3 class="card-title">
+                                                                            <i class="far fa-calendar-alt"></i>
+                                                                            Calendar
+                                                                        </h3>
+                                                                        <!-- tools card -->
+                                                                        <div class="card-tools">
+                                                                            <!-- button with a dropdown -->
+                                                                            <div class="btn-group">
+                                                                                <button type="button"
+                                                                                        class="btn btn-success btn-sm dropdown-toggle"
+                                                                                        data-toggle="dropdown"
+                                                                                        data-offset="-52">
+                                                                                    <i class="fas fa-bars"></i>
+                                                                                </button>
+                                                                                <div class="dropdown-menu" role="menu">
+                                                                                    <a href="#" class="dropdown-item">
+                                                                                        Add new event
+                                                                                    </a>
+                                                                                    <a href="#" class="dropdown-item">
+                                                                                        Clear events
+                                                                                    </a>
+                                                                                    <div class="dropdown-divider"></div>
+                                                                                    <a href="#" class="dropdown-item">
+                                                                                        View calendar
+                                                                                    </a>
+                                                                                </div>
+                                                                            </div>
+                                                                            <button type="button"
+                                                                                    class="btn btn-success btn-sm"
+                                                                                    data-card-widget="collapse">
+                                                                                <i class="fas fa-minus"></i>
+                                                                            </button>
+                                                                            <button type="button"
+                                                                                    class="btn btn-success btn-sm"
+                                                                                    data-card-widget="remove">
+                                                                                <i class="fas fa-times"></i>
+                                                                            </button>
+                                                                        </div>
+                                                                        <!-- /. tools -->
+                                                                    </div>
+                                                                    <!-- /.card-header -->
+                                                                    <div class="card-body pt-0">
+                                                                        <!--The calendar -->
+                                                                        <div id="calendar" style="width: 100%"></div>
+                                                                    </div>
+                                                                    <!-- /.card-body -->
+                                                                </div>
+                                                                <!-- /.card -->
+                                                            </section>
+                                                            <!-- right col -->
+                                                        </div>
+                                                        <!-- /.row (main row) -->
+                                                    </div>
+                                                    <!-- /.container-fluid -->
+                                                </section>
+                                                <!-- /.content -->
+                                            </div>
+                                        {% endblock content %}
+                                        <!-- Specific Page JS goes HERE -->
+                                        {% block javascripts %}
+                                            <!-- jQuery -->
+                                            <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                                            <!-- jQuery UI 1.11.4 -->
+                                            <script src="/static/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
+                                            <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
+                                            <script>
+    $.widget.bridge('uibutton', $.ui.button)
+                                            </script>
+                                            <!-- Bootstrap 4 -->
+                                            <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                                            <!-- ChartJS -->
+                                            <script src="/static/assets/plugins/chart.js/Chart.min.js"></script>
+                                            <!-- Sparkline -->
+                                            <script src="/static/assets/plugins/sparklines/sparkline.js"></script>
+                                            <!-- JQVMap -->
+                                            <script src="/static/assets/plugins/jqvmap/jquery.vmap.min.js"></script>
+                                            <script src="/static/assets/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
+                                            <!-- jQuery Knob Chart -->
+                                            <script src="/static/assets/plugins/jquery-knob/jquery.knob.min.js"></script>
+                                            <!-- daterangepicker -->
+                                            <script src="/static/assets/plugins/moment/moment.min.js"></script>
+                                            <script src="/static/assets/plugins/daterangepicker/daterangepicker.js"></script>
+                                            <!-- Tempusdominus Bootstrap 4 -->
+                                            <script src="/static/assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
+                                            <!-- Summernote -->
+                                            <script src="/static/assets/plugins/summernote/summernote-bs4.min.js"></script>
+                                            <!-- overlayScrollbars -->
+                                            <script src="/static/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
+                                            <!-- AdminLTE App -->
+                                            <script src="/static/assets/js/adminlte.js"></script>
+                                            <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
+                                            <script src="/static/assets/js/pages/dashboard.js"></script>
+                                            <!-- AdminLTE for demo purposes -->
+                                            <script src="/static/assets/js/demo.js"></script>
+                                        {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/index2.html b/tests/jinja_adminlte/index2.html
new file mode 100644
index 0000000..26f42de
--- /dev/null
+++ b/tests/jinja_adminlte/index2.html
@@ -0,0 +1,1283 @@
+{% extends "layouts/base.html" %}
+{% block title %}Dashboard2 {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- overlayScrollbars -->
+    <link rel="stylesheet" href="/static/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <div class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1 class="m-0 text-dark">Dashboard v2</h1>
+                    </div>
+                    <!-- /.col -->
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Dashboard v2
+                            </li>
+                        </ol>
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+            </div>
+            <!-- /.container-fluid -->
+        </div>
+        <!-- /.content-header -->
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <!-- Info boxes -->
+                <div class="row">
+                    <div class="col-12 col-sm-6 col-md-3">
+                        <div class="info-box">
+                            <span class="info-box-icon bg-info elevation-1">
+                                <i class="fas fa-cog"></i>
+                            </span>
+                            <div class="info-box-content">
+                                <span class="info-box-text">CPU Traffic</span>
+                                <span class="info-box-number">
+                                    10
+                                    <small>
+                                    %
+                                    </small>
+                                </span>
+                            </div>
+                            <!-- /.info-box-content -->
+                        </div>
+                        <!-- /.info-box -->
+                    </div>
+                    <!-- /.col -->
+                    <div class="col-12 col-sm-6 col-md-3">
+                        <div class="info-box mb-3">
+                            <span class="info-box-icon bg-danger elevation-1">
+                                <i class="fas fa-thumbs-up"></i>
+                            </span>
+                            <div class="info-box-content">
+                                <span class="info-box-text">Likes</span>
+                                <span class="info-box-number">41,410</span>
+                            </div>
+                            <!-- /.info-box-content -->
+                        </div>
+                        <!-- /.info-box -->
+                    </div>
+                    <!-- /.col -->
+                    <!-- fix for small devices only -->
+                    <div class="clearfix hidden-md-up"></div>
+                    <div class="col-12 col-sm-6 col-md-3">
+                        <div class="info-box mb-3">
+                            <span class="info-box-icon bg-success elevation-1">
+                                <i class="fas fa-shopping-cart"></i>
+                            </span>
+                            <div class="info-box-content">
+                                <span class="info-box-text">Sales</span>
+                                <span class="info-box-number">760</span>
+                            </div>
+                            <!-- /.info-box-content -->
+                        </div>
+                        <!-- /.info-box -->
+                    </div>
+                    <!-- /.col -->
+                    <div class="col-12 col-sm-6 col-md-3">
+                        <div class="info-box mb-3">
+                            <span class="info-box-icon bg-warning elevation-1">
+                                <i class="fas fa-users"></i>
+                            </span>
+                            <div class="info-box-content">
+                                <span class="info-box-text">New Members</span>
+                                <span class="info-box-number">2,000</span>
+                            </div>
+                            <!-- /.info-box-content -->
+                        </div>
+                        <!-- /.info-box -->
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title">Monthly Recap Report</h5>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <div class="btn-group">
+                                        <button type="button"
+                                                class="btn btn-tool dropdown-toggle"
+                                                data-toggle="dropdown">
+                                            <i class="fas fa-wrench"></i>
+                                        </button>
+                                        <div class="dropdown-menu dropdown-menu-right" role="menu">
+                                            <a href="#" class="dropdown-item">
+                                                Action
+                                            </a>
+                                            <a href="#" class="dropdown-item">
+                                                Another action
+                                            </a>
+                                            <a href="#" class="dropdown-item">
+                                                Something else here
+                                            </a>
+                                            <a class="dropdown-divider"></a>
+                                            <a href="#" class="dropdown-item">
+                                                Separated link
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body">
+                                <div class="row">
+                                    <div class="col-md-8">
+                                        <p class="text-center">
+                                            <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
+                                        </p>
+                                        <div class="chart">
+                                            <!-- Sales Chart Canvas -->
+                                            <canvas id="salesChart" height="180" style="height: 180px;"></canvas>
+                                        </div>
+                                        <!-- /.chart-responsive -->
+                                    </div>
+                                    <!-- /.col -->
+                                    <div class="col-md-4">
+                                        <p class="text-center">
+                                            <strong>Goal Completion</strong>
+                                        </p>
+                                        <div class="progress-group">
+                                            Add Products to Cart
+                                            <span class="float-right">
+                                                <b>
+                                                160
+                                                </b>
+                                                /200
+                                            </span>
+                                            <div class="progress progress-sm">
+                                                <div class="progress-bar bg-primary" style="width: 80%"></div>
+                                            </div>
+                                        </div>
+                                        <!-- /.progress-group -->
+                                        <div class="progress-group">
+                                            Complete Purchase
+                                            <span class="float-right">
+                                                <b>
+                                                310
+                                                </b>
+                                                /400
+                                            </span>
+                                            <div class="progress progress-sm">
+                                                <div class="progress-bar bg-danger" style="width: 75%"></div>
+                                            </div>
+                                        </div>
+                                        <!-- /.progress-group -->
+                                        <div class="progress-group">
+                                            <span class="progress-text">
+                                                Visit Premium Page
+                                            </span>
+                                            <span class="float-right">
+                                                <b>
+                                                480
+                                                </b>
+                                                /800
+                                            </span>
+                                            <div class="progress progress-sm">
+                                                <div class="progress-bar bg-success" style="width: 60%"></div>
+                                            </div>
+                                        </div>
+                                        <!-- /.progress-group -->
+                                        <div class="progress-group">
+                                            Send Inquiries
+                                            <span class="float-right">
+                                                <b>
+                                                250
+                                                </b>
+                                                /500
+                                            </span>
+                                            <div class="progress progress-sm">
+                                                <div class="progress-bar bg-warning" style="width: 50%"></div>
+                                            </div>
+                                        </div>
+                                        <!-- /.progress-group -->
+                                    </div>
+                                    <!-- /.col -->
+                                </div>
+                                <!-- /.row -->
+                            </div>
+                            <!-- ./card-body -->
+                            <div class="card-footer">
+                                <div class="row">
+                                    <div class="col-sm-3 col-6">
+                                        <div class="description-block border-right">
+                                            <span class="description-percentage text-success">
+                                                <i class="fas fa-caret-up"></i>
+                                                17%
+                                            </span>
+                                            <h5 class="description-header">
+                                                $35,210.43
+                                            </h5>
+                                            <span class="description-text">
+                                                TOTAL REVENUE
+                                            </span>
+                                        </div>
+                                        <!-- /.description-block -->
+                                    </div>
+                                    <!-- /.col -->
+                                    <div class="col-sm-3 col-6">
+                                        <div class="description-block border-right">
+                                            <span class="description-percentage text-warning">
+                                                <i class="fas fa-caret-left"></i>
+                                                0%
+                                            </span>
+                                            <h5 class="description-header">
+                                                $10,390.90
+                                            </h5>
+                                            <span class="description-text">
+                                                TOTAL COST
+                                            </span>
+                                        </div>
+                                        <!-- /.description-block -->
+                                    </div>
+                                    <!-- /.col -->
+                                    <div class="col-sm-3 col-6">
+                                        <div class="description-block border-right">
+                                            <span class="description-percentage text-success">
+                                                <i class="fas fa-caret-up"></i>
+                                                20%
+                                            </span>
+                                            <h5 class="description-header">
+                                                $24,813.53
+                                            </h5>
+                                            <span class="description-text">
+                                                TOTAL PROFIT
+                                            </span>
+                                        </div>
+                                        <!-- /.description-block -->
+                                    </div>
+                                    <!-- /.col -->
+                                    <div class="col-sm-3 col-6">
+                                        <div class="description-block">
+                                            <span class="description-percentage text-danger">
+                                                <i class="fas fa-caret-down"></i>
+                                                18%
+                                            </span>
+                                            <h5 class="description-header">
+                                                1200
+                                            </h5>
+                                            <span class="description-text">
+                                                GOAL COMPLETIONS
+                                            </span>
+                                        </div>
+                                        <!-- /.description-block -->
+                                    </div>
+                                </div>
+                                <!-- /.row -->
+                            </div>
+                            <!-- /.card-footer -->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+                <!-- Main row -->
+                <div class="row">
+                    <!-- Left col -->
+                    <div class="col-md-8">
+                        <!-- MAP & BOX PANE -->
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">
+                                    US-Visitors Report
+                                </h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body p-0">
+                                <div class="d-md-flex">
+                                    <div class="p-1 flex-fill" style="overflow: hidden">
+                                        <!-- Map will be created here -->
+                                        <div id="world-map-markers" style="height: 325px; overflow: hidden">
+                                            <div class="map"></div>
+                                        </div>
+                                    </div>
+                                    <div class="card-pane-right bg-success pt-2 pb-2 pl-4 pr-4">
+                                        <div class="description-block mb-4">
+                                            <div class="sparkbar pad" data-color="#fff">
+                                                90,70,90,70,75,80,70
+                                            </div>
+                                            <h5 class="description-header">
+                                                8390
+                                            </h5>
+                                            <span class="description-text">
+                                                Visits
+                                            </span>
+                                        </div>
+                                        <!-- /.description-block -->
+                                        <div class="description-block mb-4">
+                                            <div class="sparkbar pad" data-color="#fff">
+                                                90,50,90,70,61,83,63
+                                            </div>
+                                            <h5 class="description-header">
+                                                30%
+                                            </h5>
+                                            <span class="description-text">
+                                                Referrals
+                                            </span>
+                                        </div>
+                                        <!-- /.description-block -->
+                                        <div class="description-block">
+                                            <div class="sparkbar pad" data-color="#fff">
+                                                90,50,90,70,61,83,63
+                                            </div>
+                                            <h5 class="description-header">
+                                                70%
+                                            </h5>
+                                            <span class="description-text">
+                                                Organic
+                                            </span>
+                                        </div>
+                                        <!-- /.description-block -->
+                                    </div>
+                                    <!-- /.card-pane-right -->
+                                </div>
+                                <!-- /.d-md-flex -->
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <div class="row">
+                            <div class="col-md-6">
+                                <!-- DIRECT CHAT -->
+                                <div class="card direct-chat direct-chat-warning">
+                                    <div class="card-header">
+                                        <h3 class="card-title">
+                                            Direct Chat
+                                        </h3>
+                                        <div class="card-tools">
+                                            <span title="3 New Messages" class="badge badge-warning">
+                                                3
+                                            </span>
+                                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                                <i class="fas fa-minus"></i>
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-tool"
+                                                    title="Contacts"
+                                                    data-widget="chat-pane-toggle">
+                                                <i class="fas fa-comments"></i>
+                                            </button>
+                                            <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                                <i class="fas fa-times"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <!-- /.card-header -->
+                                    <div class="card-body">
+                                        <!-- Conversations are loaded here -->
+                                        <div class="direct-chat-messages">
+                                            <!-- Message. Default to the left -->
+                                            <div class="direct-chat-msg">
+                                                <div class="direct-chat-infos clearfix">
+                                                    <span class="direct-chat-name float-left">
+                                                        Alexander Pierce
+                                                    </span>
+                                                    <span class="direct-chat-timestamp float-right">
+                                                        23 Jan 2:00 pm
+                                                    </span>
+                                                </div>
+                                                <!-- /.direct-chat-infos -->
+                                                <img class="direct-chat-img"
+                                                     src="/static/assets/img/user1-128x128.jpg"
+                                                     alt="message user image">
+                                                    <!-- /.direct-chat-img -->
+                                                    <div class="direct-chat-text">
+                                                        Is this template really for free? That's unbelievable!
+                                                    </div>
+                                                    <!-- /.direct-chat-text -->
+                                                </div>
+                                                <!-- /.direct-chat-msg -->
+                                                <!-- Message to the right -->
+                                                <div class="direct-chat-msg right">
+                                                    <div class="direct-chat-infos clearfix">
+                                                        <span class="direct-chat-name float-right">
+                                                            Sarah Bullock
+                                                        </span>
+                                                        <span class="direct-chat-timestamp float-left">
+                                                            23 Jan 2:05 pm
+                                                        </span>
+                                                    </div>
+                                                    <!-- /.direct-chat-infos -->
+                                                    <img class="direct-chat-img"
+                                                         src="/static/assets/img/user3-128x128.jpg"
+                                                         alt="message user image">
+                                                        <!-- /.direct-chat-img -->
+                                                        <div class="direct-chat-text">
+                                                            You better believe it!
+                                                        </div>
+                                                        <!-- /.direct-chat-text -->
+                                                    </div>
+                                                    <!-- /.direct-chat-msg -->
+                                                    <!-- Message. Default to the left -->
+                                                    <div class="direct-chat-msg">
+                                                        <div class="direct-chat-infos clearfix">
+                                                            <span class="direct-chat-name float-left">
+                                                                Alexander Pierce
+                                                            </span>
+                                                            <span class="direct-chat-timestamp float-right">
+                                                                23 Jan 5:37 pm
+                                                            </span>
+                                                        </div>
+                                                        <!-- /.direct-chat-infos -->
+                                                        <img class="direct-chat-img"
+                                                             src="/static/assets/img/user1-128x128.jpg"
+                                                             alt="message user image">
+                                                            <!-- /.direct-chat-img -->
+                                                            <div class="direct-chat-text">
+                                                                Working with AdminLTE on a great new app! Wanna join?
+                                                            </div>
+                                                            <!-- /.direct-chat-text -->
+                                                        </div>
+                                                        <!-- /.direct-chat-msg -->
+                                                        <!-- Message to the right -->
+                                                        <div class="direct-chat-msg right">
+                                                            <div class="direct-chat-infos clearfix">
+                                                                <span class="direct-chat-name float-right">
+                                                                    Sarah Bullock
+                                                                </span>
+                                                                <span class="direct-chat-timestamp float-left">
+                                                                    23 Jan 6:10 pm
+                                                                </span>
+                                                            </div>
+                                                            <!-- /.direct-chat-infos -->
+                                                            <img class="direct-chat-img"
+                                                                 src="/static/assets/img/user3-128x128.jpg"
+                                                                 alt="message user image">
+                                                                <!-- /.direct-chat-img -->
+                                                                <div class="direct-chat-text">
+                                                                    I would love to.
+                                                                </div>
+                                                                <!-- /.direct-chat-text -->
+                                                            </div>
+                                                            <!-- /.direct-chat-msg -->
+                                                        </div>
+                                                        <!--/.direct-chat-messages-->
+                                                        <!-- Contacts are loaded here -->
+                                                        <div class="direct-chat-contacts">
+                                                            <ul class="contacts-list">
+                                                                <li>
+                                                                    <a href="#">
+                                                                        <img class="contacts-list-img"
+                                                                             src="/static/assets/img/user1-128x128.jpg"
+                                                                             alt="User Avatar">
+                                                                            <div class="contacts-list-info">
+                                                                                <span class="contacts-list-name">
+                                                                                    Count Dracula
+                                                                                    <small class="contacts-list-date float-right">
+                                                                                    2/28/2015
+                                                                                    </small>
+                                                                                </span>
+                                                                                <span class="contacts-list-msg">
+                                                                                    How have you been? I was...
+                                                                                </span>
+                                                                            </div>
+                                                                            <!-- /.contacts-list-info -->
+                                                                        </a>
+                                                                    </li>
+                                                                    <!-- End Contact Item -->
+                                                                    <li>
+                                                                        <a href="#">
+                                                                            <img class="contacts-list-img"
+                                                                                 src="/static/assets/img/user7-128x128.jpg"
+                                                                                 alt="User Avatar">
+                                                                                <div class="contacts-list-info">
+                                                                                    <span class="contacts-list-name">
+                                                                                        Sarah Doe
+                                                                                        <small class="contacts-list-date float-right">
+                                                                                        2/23/2015
+                                                                                        </small>
+                                                                                    </span>
+                                                                                    <span class="contacts-list-msg">
+                                                                                        I will be waiting for...
+                                                                                    </span>
+                                                                                </div>
+                                                                                <!-- /.contacts-list-info -->
+                                                                            </a>
+                                                                        </li>
+                                                                        <!-- End Contact Item -->
+                                                                        <li>
+                                                                            <a href="#">
+                                                                                <img class="contacts-list-img"
+                                                                                     src="/static/assets/img/user3-128x128.jpg"
+                                                                                     alt="User Avatar">
+                                                                                    <div class="contacts-list-info">
+                                                                                        <span class="contacts-list-name">
+                                                                                            Nadia Jolie
+                                                                                            <small class="contacts-list-date float-right">
+                                                                                            2/20/2015
+                                                                                            </small>
+                                                                                        </span>
+                                                                                        <span class="contacts-list-msg">
+                                                                                            I'll call you back at...
+                                                                                        </span>
+                                                                                    </div>
+                                                                                    <!-- /.contacts-list-info -->
+                                                                                </a>
+                                                                            </li>
+                                                                            <!-- End Contact Item -->
+                                                                            <li>
+                                                                                <a href="#">
+                                                                                    <img class="contacts-list-img"
+                                                                                         src="/static/assets/img/user5-128x128.jpg"
+                                                                                         alt="User Avatar">
+                                                                                        <div class="contacts-list-info">
+                                                                                            <span class="contacts-list-name">
+                                                                                                Nora S. Vans
+                                                                                                <small class="contacts-list-date float-right">
+                                                                                                2/10/2015
+                                                                                                </small>
+                                                                                            </span>
+                                                                                            <span class="contacts-list-msg">
+                                                                                                Where is your new...
+                                                                                            </span>
+                                                                                        </div>
+                                                                                        <!-- /.contacts-list-info -->
+                                                                                    </a>
+                                                                                </li>
+                                                                                <!-- End Contact Item -->
+                                                                                <li>
+                                                                                    <a href="#">
+                                                                                        <img class="contacts-list-img"
+                                                                                             src="/static/assets/img/user6-128x128.jpg"
+                                                                                             alt="User Avatar">
+                                                                                            <div class="contacts-list-info">
+                                                                                                <span class="contacts-list-name">
+                                                                                                    John K.
+                                                                                                    <small class="contacts-list-date float-right">
+                                                                                                    1/27/2015
+                                                                                                    </small>
+                                                                                                </span>
+                                                                                                <span class="contacts-list-msg">
+                                                                                                    Can I take a look at...
+                                                                                                </span>
+                                                                                            </div>
+                                                                                            <!-- /.contacts-list-info -->
+                                                                                        </a>
+                                                                                    </li>
+                                                                                    <!-- End Contact Item -->
+                                                                                    <li>
+                                                                                        <a href="#">
+                                                                                            <img class="contacts-list-img"
+                                                                                                 src="/static/assets/img/user8-128x128.jpg"
+                                                                                                 alt="User Avatar">
+                                                                                                <div class="contacts-list-info">
+                                                                                                    <span class="contacts-list-name">
+                                                                                                        Kenneth M.
+                                                                                                        <small class="contacts-list-date float-right">
+                                                                                                        1/4/2015
+                                                                                                        </small>
+                                                                                                    </span>
+                                                                                                    <span class="contacts-list-msg">
+                                                                                                        Never mind I found...
+                                                                                                    </span>
+                                                                                                </div>
+                                                                                                <!-- /.contacts-list-info -->
+                                                                                            </a>
+                                                                                        </li>
+                                                                                        <!-- End Contact Item -->
+                                                                                    </ul>
+                                                                                    <!-- /.contacts-list -->
+                                                                                </div>
+                                                                                <!-- /.direct-chat-pane -->
+                                                                            </div>
+                                                                            <!-- /.card-body -->
+                                                                            <div class="card-footer">
+                                                                                <form action="#" method="post">
+                                                                                    <div class="input-group">
+                                                                                        <input type="text"
+                                                                                               name="message"
+                                                                                               placeholder="Type Message ..."
+                                                                                               class="form-control">
+                                                                                        <span class="input-group-append">
+                                                                                            <button type="button"
+                                                                                                    class="btn btn-warning">
+                                                                                                Send
+                                                                                            </button>
+                                                                                        </span>
+                                                                                    </div>
+                                                                                </form>
+                                                                            </div>
+                                                                            <!-- /.card-footer-->
+                                                                        </div>
+                                                                        <!--/.direct-chat -->
+                                                                    </div>
+                                                                    <!-- /.col -->
+                                                                    <div class="col-md-6">
+                                                                        <!-- USERS LIST -->
+                                                                        <div class="card">
+                                                                            <div class="card-header">
+                                                                                <h3 class="card-title">
+                                                                                    Latest Members
+                                                                                </h3>
+                                                                                <div class="card-tools">
+                                                                                    <span class="badge badge-danger">
+                                                                                        8 New Members
+                                                                                    </span>
+                                                                                    <button type="button"
+                                                                                            class="btn btn-tool"
+                                                                                            data-card-widget="collapse">
+                                                                                        <i class="fas fa-minus"></i>
+                                                                                    </button>
+                                                                                    <button type="button"
+                                                                                            class="btn btn-tool"
+                                                                                            data-card-widget="remove">
+                                                                                        <i class="fas fa-times"></i>
+                                                                                    </button>
+                                                                                </div>
+                                                                            </div>
+                                                                            <!-- /.card-header -->
+                                                                            <div class="card-body p-0">
+                                                                                <ul class="users-list clearfix">
+                                                                                    <li>
+                                                                                        <img src="/static/assets/img/user1-128x128.jpg"
+                                                                                             alt="User Image">
+                                                                                            <a class="users-list-name"
+                                                                                               href="#">
+                                                                                                Alexander Pierce
+                                                                                            </a>
+                                                                                            <span class="users-list-date">
+                                                                                                Today
+                                                                                            </span>
+                                                                                        </li>
+                                                                                        <li>
+                                                                                            <img src="/static/assets/img/user8-128x128.jpg"
+                                                                                                 alt="User Image">
+                                                                                                <a class="users-list-name"
+                                                                                                   href="#">
+                                                                                                    Norman
+                                                                                                </a>
+                                                                                                <span class="users-list-date">
+                                                                                                    Yesterday
+                                                                                                </span>
+                                                                                            </li>
+                                                                                            <li>
+                                                                                                <img src="/static/assets/img/user7-128x128.jpg"
+                                                                                                     alt="User Image">
+                                                                                                    <a class="users-list-name"
+                                                                                                       href="#">
+                                                                                                        Jane
+                                                                                                    </a>
+                                                                                                    <span class="users-list-date">
+                                                                                                        12 Jan
+                                                                                                    </span>
+                                                                                                </li>
+                                                                                                <li>
+                                                                                                    <img src="/static/assets/img/user6-128x128.jpg"
+                                                                                                         alt="User Image">
+                                                                                                        <a class="users-list-name"
+                                                                                                           href="#">
+                                                                                                            John
+                                                                                                        </a>
+                                                                                                        <span class="users-list-date">
+                                                                                                            12 Jan
+                                                                                                        </span>
+                                                                                                    </li>
+                                                                                                    <li>
+                                                                                                        <img src="/static/assets/img/user2-160x160.jpg"
+                                                                                                             alt="User Image">
+                                                                                                            <a class="users-list-name"
+                                                                                                               href="#">
+                                                                                                                Alexander
+                                                                                                            </a>
+                                                                                                            <span class="users-list-date">
+                                                                                                                13 Jan
+                                                                                                            </span>
+                                                                                                        </li>
+                                                                                                        <li>
+                                                                                                            <img src="/static/assets/img/user5-128x128.jpg"
+                                                                                                                 alt="User Image">
+                                                                                                                <a class="users-list-name"
+                                                                                                                   href="#">
+                                                                                                                    Sarah
+                                                                                                                </a>
+                                                                                                                <span class="users-list-date">
+                                                                                                                    14 Jan
+                                                                                                                </span>
+                                                                                                            </li>
+                                                                                                            <li>
+                                                                                                                <img src="/static/assets/img/user4-128x128.jpg"
+                                                                                                                     alt="User Image">
+                                                                                                                    <a class="users-list-name"
+                                                                                                                       href="#">
+                                                                                                                        Nora
+                                                                                                                    </a>
+                                                                                                                    <span class="users-list-date">
+                                                                                                                        15 Jan
+                                                                                                                    </span>
+                                                                                                                </li>
+                                                                                                                <li>
+                                                                                                                    <img src="/static/assets/img/user3-128x128.jpg"
+                                                                                                                         alt="User Image">
+                                                                                                                        <a class="users-list-name"
+                                                                                                                           href="#">
+                                                                                                                            Nadia
+                                                                                                                        </a>
+                                                                                                                        <span class="users-list-date">
+                                                                                                                            15 Jan
+                                                                                                                        </span>
+                                                                                                                    </li>
+                                                                                                                </ul>
+                                                                                                                <!-- /.users-list -->
+                                                                                                            </div>
+                                                                                                            <!-- /.card-body -->
+                                                                                                            <div class="card-footer text-center">
+                                                                                                                <a href="javascript:">
+                                                                                                                    View All Users
+                                                                                                                </a>
+                                                                                                            </div>
+                                                                                                            <!-- /.card-footer -->
+                                                                                                        </div>
+                                                                                                        <!--/.card -->
+                                                                                                    </div>
+                                                                                                    <!-- /.col -->
+                                                                                                </div>
+                                                                                                <!-- /.row -->
+                                                                                                <!-- TABLE: LATEST ORDERS -->
+                                                                                                <div class="card">
+                                                                                                    <div class="card-header border-transparent">
+                                                                                                        <h3 class="card-title">
+                                                                                                            Latest Orders
+                                                                                                        </h3>
+                                                                                                        <div class="card-tools">
+                                                                                                            <button type="button"
+                                                                                                                    class="btn btn-tool"
+                                                                                                                    data-card-widget="collapse">
+                                                                                                                <i class="fas fa-minus"></i>
+                                                                                                            </button>
+                                                                                                            <button type="button"
+                                                                                                                    class="btn btn-tool"
+                                                                                                                    data-card-widget="remove">
+                                                                                                                <i class="fas fa-times"></i>
+                                                                                                            </button>
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                    <!-- /.card-header -->
+                                                                                                    <div class="card-body p-0">
+                                                                                                        <div class="table-responsive">
+                                                                                                            <table class="table m-0">
+                                                                                                                <thead>
+                                                                                                                    <tr>
+                                                                                                                        <th>Order ID</th>
+                                                                                                                        <th>Item</th>
+                                                                                                                        <th>Status</th>
+                                                                                                                        <th>Popularity</th>
+                                                                                                                    </tr>
+                                                                                                                </thead>
+                                                                                                                <tbody>
+                                                                                                                    <tr>
+                                                                                                                        <td>
+                                                                                                                            <a href="pages/examples/invoice.html">
+                                                                                                                                OR9842
+                                                                                                                            </a>
+                                                                                                                        </td>
+                                                                                                                        <td>Call of Duty IV</td>
+                                                                                                                        <td>
+                                                                                                                            <span class="badge badge-success">
+                                                                                                                                Shipped
+                                                                                                                            </span>
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <div class="sparkbar"
+                                                                                                                                 data-color="#00a65a"
+                                                                                                                                 data-height="20">
+                                                                                                                                90,80,90,-70,61,-83,63
+                                                                                                                            </div>
+                                                                                                                        </td>
+                                                                                                                    </tr>
+                                                                                                                    <tr>
+                                                                                                                        <td>
+                                                                                                                            <a href="pages/examples/invoice.html">
+                                                                                                                                OR1848
+                                                                                                                            </a>
+                                                                                                                        </td>
+                                                                                                                        <td>Samsung Smart TV</td>
+                                                                                                                        <td>
+                                                                                                                            <span class="badge badge-warning">
+                                                                                                                                Pending
+                                                                                                                            </span>
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <div class="sparkbar"
+                                                                                                                                 data-color="#f39c12"
+                                                                                                                                 data-height="20">
+                                                                                                                                90,80,-90,70,61,-83,68
+                                                                                                                            </div>
+                                                                                                                        </td>
+                                                                                                                    </tr>
+                                                                                                                    <tr>
+                                                                                                                        <td>
+                                                                                                                            <a href="pages/examples/invoice.html">
+                                                                                                                                OR7429
+                                                                                                                            </a>
+                                                                                                                        </td>
+                                                                                                                        <td>iPhone 6 Plus</td>
+                                                                                                                        <td>
+                                                                                                                            <span class="badge badge-danger">
+                                                                                                                                Delivered
+                                                                                                                            </span>
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <div class="sparkbar"
+                                                                                                                                 data-color="#f56954"
+                                                                                                                                 data-height="20">
+                                                                                                                                90,-80,90,70,-61,83,63
+                                                                                                                            </div>
+                                                                                                                        </td>
+                                                                                                                    </tr>
+                                                                                                                    <tr>
+                                                                                                                        <td>
+                                                                                                                            <a href="pages/examples/invoice.html">
+                                                                                                                                OR7429
+                                                                                                                            </a>
+                                                                                                                        </td>
+                                                                                                                        <td>Samsung Smart TV</td>
+                                                                                                                        <td>
+                                                                                                                            <span class="badge badge-info">
+                                                                                                                                Processing
+                                                                                                                            </span>
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <div class="sparkbar"
+                                                                                                                                 data-color="#00c0ef"
+                                                                                                                                 data-height="20">
+                                                                                                                                90,80,-90,70,-61,83,63
+                                                                                                                            </div>
+                                                                                                                        </td>
+                                                                                                                    </tr>
+                                                                                                                    <tr>
+                                                                                                                        <td>
+                                                                                                                            <a href="pages/examples/invoice.html">
+                                                                                                                                OR1848
+                                                                                                                            </a>
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            Samsung Smart TV
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <span class="badge badge-warning">
+                                                                                                                                Pending
+                                                                                                                            </span>
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <div class="sparkbar"
+                                                                                                                                 data-color="#f39c12"
+                                                                                                                                 data-height="20">
+                                                                                                                                90,80,-90,70,61,-83,68
+                                                                                                                            </div>
+                                                                                                                        </td>
+                                                                                                                    </tr>
+                                                                                                                    <tr>
+                                                                                                                        <td>
+                                                                                                                            <a href="pages/examples/invoice.html">
+                                                                                                                                OR7429
+                                                                                                                            </a>
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            iPhone 6 Plus
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <span class="badge badge-danger">
+                                                                                                                                Delivered
+                                                                                                                            </span>
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <div class="sparkbar"
+                                                                                                                                 data-color="#f56954"
+                                                                                                                                 data-height="20">
+                                                                                                                                90,-80,90,70,-61,83,63
+                                                                                                                            </div>
+                                                                                                                        </td>
+                                                                                                                    </tr>
+                                                                                                                    <tr>
+                                                                                                                        <td>
+                                                                                                                            <a href="pages/examples/invoice.html">
+                                                                                                                                OR9842
+                                                                                                                            </a>
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            Call of Duty IV
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <span class="badge badge-success">
+                                                                                                                                Shipped
+                                                                                                                            </span>
+                                                                                                                        </td>
+                                                                                                                        <td>
+                                                                                                                            <div class="sparkbar"
+                                                                                                                                 data-color="#00a65a"
+                                                                                                                                 data-height="20">
+                                                                                                                                90,80,90,-70,61,-83,63
+                                                                                                                            </div>
+                                                                                                                        </td>
+                                                                                                                    </tr>
+                                                                                                                </tbody>
+                                                                                                            </table>
+                                                                                                        </div>
+                                                                                                        <!-- /.table-responsive -->
+                                                                                                    </div>
+                                                                                                    <!-- /.card-body -->
+                                                                                                    <div class="card-footer clearfix">
+                                                                                                        <a href="javascript:void(0)"
+                                                                                                           class="btn btn-sm btn-info float-left">
+                                                                                                            Place New Order
+                                                                                                        </a>
+                                                                                                        <a href="javascript:void(0)"
+                                                                                                           class="btn btn-sm btn-secondary float-right">
+                                                                                                            View All Orders
+                                                                                                        </a>
+                                                                                                    </div>
+                                                                                                    <!-- /.card-footer -->
+                                                                                                </div>
+                                                                                                <!-- /.card -->
+                                                                                            </div>
+                                                                                            <!-- /.col -->
+                                                                                            <div class="col-md-4">
+                                                                                                <!-- Info Boxes Style 2 -->
+                                                                                                <div class="info-box mb-3 bg-warning">
+                                                                                                    <span class="info-box-icon">
+                                                                                                        <i class="fas fa-tag"></i>
+                                                                                                    </span>
+                                                                                                    <div class="info-box-content">
+                                                                                                        <span class="info-box-text">
+                                                                                                            Inventory
+                                                                                                        </span>
+                                                                                                        <span class="info-box-number">
+                                                                                                            5,200
+                                                                                                        </span>
+                                                                                                    </div>
+                                                                                                    <!-- /.info-box-content -->
+                                                                                                </div>
+                                                                                                <!-- /.info-box -->
+                                                                                                <div class="info-box mb-3 bg-success">
+                                                                                                    <span class="info-box-icon">
+                                                                                                        <i class="far fa-heart"></i>
+                                                                                                    </span>
+                                                                                                    <div class="info-box-content">
+                                                                                                        <span class="info-box-text">
+                                                                                                            Mentions
+                                                                                                        </span>
+                                                                                                        <span class="info-box-number">
+                                                                                                            92,050
+                                                                                                        </span>
+                                                                                                    </div>
+                                                                                                    <!-- /.info-box-content -->
+                                                                                                </div>
+                                                                                                <!-- /.info-box -->
+                                                                                                <div class="info-box mb-3 bg-danger">
+                                                                                                    <span class="info-box-icon">
+                                                                                                        <i class="fas fa-cloud-download-alt"></i>
+                                                                                                    </span>
+                                                                                                    <div class="info-box-content">
+                                                                                                        <span class="info-box-text">
+                                                                                                            Downloads
+                                                                                                        </span>
+                                                                                                        <span class="info-box-number">
+                                                                                                            114,381
+                                                                                                        </span>
+                                                                                                    </div>
+                                                                                                    <!-- /.info-box-content -->
+                                                                                                </div>
+                                                                                                <!-- /.info-box -->
+                                                                                                <div class="info-box mb-3 bg-info">
+                                                                                                    <span class="info-box-icon">
+                                                                                                        <i class="far fa-comment"></i>
+                                                                                                    </span>
+                                                                                                    <div class="info-box-content">
+                                                                                                        <span class="info-box-text">
+                                                                                                            Direct Messages
+                                                                                                        </span>
+                                                                                                        <span class="info-box-number">
+                                                                                                            163,921
+                                                                                                        </span>
+                                                                                                    </div>
+                                                                                                    <!-- /.info-box-content -->
+                                                                                                </div>
+                                                                                                <!-- /.info-box -->
+                                                                                                <div class="card">
+                                                                                                    <div class="card-header">
+                                                                                                        <h3 class="card-title">
+                                                                                                            Browser Usage
+                                                                                                        </h3>
+                                                                                                        <div class="card-tools">
+                                                                                                            <button type="button"
+                                                                                                                    class="btn btn-tool"
+                                                                                                                    data-card-widget="collapse">
+                                                                                                                <i class="fas fa-minus"></i>
+                                                                                                            </button>
+                                                                                                            <button type="button"
+                                                                                                                    class="btn btn-tool"
+                                                                                                                    data-card-widget="remove">
+                                                                                                                <i class="fas fa-times"></i>
+                                                                                                            </button>
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                    <!-- /.card-header -->
+                                                                                                    <div class="card-body">
+                                                                                                        <div class="row">
+                                                                                                            <div class="col-md-8">
+                                                                                                                <div class="chart-responsive">
+                                                                                                                    <canvas id="pieChart"
+                                                                                                                            height="150"></canvas>
+                                                                                                                </div>
+                                                                                                                <!-- ./chart-responsive -->
+                                                                                                            </div>
+                                                                                                            <!-- /.col -->
+                                                                                                            <div class="col-md-4">
+                                                                                                                <ul class="chart-legend clearfix">
+                                                                                                                    <li>
+                                                                                                                        <i class="far fa-circle text-danger"></i>
+                                                                                                                        Chrome
+                                                                                                                    </li>
+                                                                                                                    <li>
+                                                                                                                        <i class="far fa-circle text-success"></i>
+                                                                                                                        IE
+                                                                                                                    </li>
+                                                                                                                    <li>
+                                                                                                                        <i class="far fa-circle text-warning"></i>
+                                                                                                                        FireFox
+                                                                                                                    </li>
+                                                                                                                    <li>
+                                                                                                                        <i class="far fa-circle text-info"></i>
+                                                                                                                        Safari
+                                                                                                                    </li>
+                                                                                                                    <li>
+                                                                                                                        <i class="far fa-circle text-primary"></i>
+                                                                                                                        Opera
+                                                                                                                    </li>
+                                                                                                                    <li>
+                                                                                                                        <i class="far fa-circle text-secondary"></i>
+                                                                                                                        Navigator
+                                                                                                                    </li>
+                                                                                                                </ul>
+                                                                                                            </div>
+                                                                                                            <!-- /.col -->
+                                                                                                        </div>
+                                                                                                        <!-- /.row -->
+                                                                                                    </div>
+                                                                                                    <!-- /.card-body -->
+                                                                                                    <div class="card-footer bg-white p-0">
+                                                                                                        <ul class="nav nav-pills flex-column">
+                                                                                                            <li class="nav-item">
+                                                                                                                <a href="#"
+                                                                                                                   class="nav-link">
+                                                                                                                    United States of America
+                                                                                                                    <span class="float-right text-danger">
+                                                                                                                        <i class="fas fa-arrow-down text-sm"></i>
+                                                                                                                        12%
+                                                                                                                    </span>
+                                                                                                                </a>
+                                                                                                            </li>
+                                                                                                            <li class="nav-item">
+                                                                                                                <a href="#"
+                                                                                                                   class="nav-link">
+                                                                                                                    India
+                                                                                                                    <span class="float-right text-success">
+                                                                                                                        <i class="fas fa-arrow-up text-sm"></i>
+                                                                                                                        4%
+                                                                                                                    </span>
+                                                                                                                </a>
+                                                                                                            </li>
+                                                                                                            <li class="nav-item">
+                                                                                                                <a href="#"
+                                                                                                                   class="nav-link">
+                                                                                                                    China
+                                                                                                                    <span class="float-right text-warning">
+                                                                                                                        <i class="fas fa-arrow-left text-sm"></i>
+                                                                                                                        0%
+                                                                                                                    </span>
+                                                                                                                </a>
+                                                                                                            </li>
+                                                                                                        </ul>
+                                                                                                    </div>
+                                                                                                    <!-- /.footer -->
+                                                                                                </div>
+                                                                                                <!-- /.card -->
+                                                                                                <!-- PRODUCT LIST -->
+                                                                                                <div class="card">
+                                                                                                    <div class="card-header">
+                                                                                                        <h3 class="card-title">
+                                                                                                            Recently Added Products
+                                                                                                        </h3>
+                                                                                                        <div class="card-tools">
+                                                                                                            <button type="button"
+                                                                                                                    class="btn btn-tool"
+                                                                                                                    data-card-widget="collapse">
+                                                                                                                <i class="fas fa-minus"></i>
+                                                                                                            </button>
+                                                                                                            <button type="button"
+                                                                                                                    class="btn btn-tool"
+                                                                                                                    data-card-widget="remove">
+                                                                                                                <i class="fas fa-times"></i>
+                                                                                                            </button>
+                                                                                                        </div>
+                                                                                                    </div>
+                                                                                                    <!-- /.card-header -->
+                                                                                                    <div class="card-body p-0">
+                                                                                                        <ul class="products-list product-list-in-card pl-2 pr-2">
+                                                                                                            <li class="item">
+                                                                                                                <div class="product-img">
+                                                                                                                    <img src="/static/assets/img/default-150x150.png"
+                                                                                                                         alt="Product Image"
+                                                                                                                         class="img-size-50">
+                                                                                                                    </div>
+                                                                                                                    <div class="product-info">
+                                                                                                                        <a href="javascript:void(0)"
+                                                                                                                           class="product-title">
+                                                                                                                            Samsung TV
+                                                                                                                            <span class="badge badge-warning float-right">
+                                                                                                                                $1800
+                                                                                                                            </span>
+                                                                                                                        </a>
+                                                                                                                        <span class="product-description">
+                                                                                                                            Samsung 32" 1080p 60Hz LED Smart HDTV.
+                                                                                                                        </span>
+                                                                                                                    </div>
+                                                                                                                </li>
+                                                                                                                <!-- /.item -->
+                                                                                                                <li class="item">
+                                                                                                                    <div class="product-img">
+                                                                                                                        <img src="/static/assets/img/default-150x150.png"
+                                                                                                                             alt="Product Image"
+                                                                                                                             class="img-size-50">
+                                                                                                                        </div>
+                                                                                                                        <div class="product-info">
+                                                                                                                            <a href="javascript:void(0)"
+                                                                                                                               class="product-title">
+                                                                                                                                Bicycle
+                                                                                                                                <span class="badge badge-info float-right">
+                                                                                                                                    $700
+                                                                                                                                </span>
+                                                                                                                            </a>
+                                                                                                                            <span class="product-description">
+                                                                                                                                26" Mongoose Dolomite Men's 7-speed, Navy Blue.
+                                                                                                                            </span>
+                                                                                                                        </div>
+                                                                                                                    </li>
+                                                                                                                    <!-- /.item -->
+                                                                                                                    <li class="item">
+                                                                                                                        <div class="product-img">
+                                                                                                                            <img src="/static/assets/img/default-150x150.png"
+                                                                                                                                 alt="Product Image"
+                                                                                                                                 class="img-size-50">
+                                                                                                                            </div>
+                                                                                                                            <div class="product-info">
+                                                                                                                                <a href="javascript:void(0)"
+                                                                                                                                   class="product-title">
+                                                                                                                                    Xbox One
+                                                                                                                                    <span class="badge badge-danger float-right">
+                                                                                                                                        $350
+                                                                                                                                    </span>
+                                                                                                                                </a>
+                                                                                                                                <span class="product-description">
+                                                                                                                                    Xbox One Console Bundle with Halo Master Chief Collection.
+                                                                                                                                </span>
+                                                                                                                            </div>
+                                                                                                                        </li>
+                                                                                                                        <!-- /.item -->
+                                                                                                                        <li class="item">
+                                                                                                                            <div class="product-img">
+                                                                                                                                <img src="/static/assets/img/default-150x150.png"
+                                                                                                                                     alt="Product Image"
+                                                                                                                                     class="img-size-50">
+                                                                                                                                </div>
+                                                                                                                                <div class="product-info">
+                                                                                                                                    <a href="javascript:void(0)"
+                                                                                                                                       class="product-title">
+                                                                                                                                        PlayStation 4
+                                                                                                                                        <span class="badge badge-success float-right">
+                                                                                                                                            $399
+                                                                                                                                        </span>
+                                                                                                                                    </a>
+                                                                                                                                    <span class="product-description">
+                                                                                                                                        PlayStation 4 500GB Console (PS4)
+                                                                                                                                    </span>
+                                                                                                                                </div>
+                                                                                                                            </li>
+                                                                                                                            <!-- /.item -->
+                                                                                                                        </ul>
+                                                                                                                    </div>
+                                                                                                                    <!-- /.card-body -->
+                                                                                                                    <div class="card-footer text-center">
+                                                                                                                        <a href="javascript:void(0)"
+                                                                                                                           class="uppercase">
+                                                                                                                            View All Products
+                                                                                                                        </a>
+                                                                                                                    </div>
+                                                                                                                    <!-- /.card-footer -->
+                                                                                                                </div>
+                                                                                                                <!-- /.card -->
+                                                                                                            </div>
+                                                                                                            <!-- /.col -->
+                                                                                                        </div>
+                                                                                                        <!-- /.row -->
+                                                                                                    </div>
+                                                                                                    <!--/. container-fluid -->
+                                                                                                </section>
+                                                                                                <!-- /.content -->
+                                                                                            </div>
+                                                                                            <!-- /.content-wrapper -->
+                                                                                        {% endblock content %}
+                                                                                        <!-- Specific Page JS goes HERE -->
+                                                                                        {% block javascripts %}
+                                                                                            <!-- REQUIRED SCRIPTS -->
+                                                                                            <!-- jQuery -->
+                                                                                            <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                                                                                            <!-- Bootstrap -->
+                                                                                            <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                                                                                            <!-- overlayScrollbars -->
+                                                                                            <script src="/static/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
+                                                                                            <!-- AdminLTE App -->
+                                                                                            <script src="/static/assets/js/adminlte.js"></script>
+                                                                                            <!-- OPTIONAL SCRIPTS -->
+                                                                                            <script src="/static/assets/js/demo.js"></script>
+                                                                                            <!-- PAGE PLUGINS -->
+                                                                                            <!-- jQuery Mapael -->
+                                                                                            <script src="/static/assets/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
+                                                                                            <script src="/static/assets/plugins/raphael/raphael.min.js"></script>
+                                                                                            <script src="/static/assets/plugins/jquery-mapael/jquery.mapael.min.js"></script>
+                                                                                            <script src="/static/assets/plugins/jquery-mapael/maps/usa_states.min.js"></script>
+                                                                                            <!-- ChartJS -->
+                                                                                            <script src="/static/assets/plugins/chart.js/Chart.min.js"></script>
+                                                                                            <!-- PAGE SCRIPTS -->
+                                                                                            <script src="/static/assets/js/pages/dashboard2.js"></script>
+                                                                                        {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/index3.html b/tests/jinja_adminlte/index3.html
new file mode 100644
index 0000000..5b14537
--- /dev/null
+++ b/tests/jinja_adminlte/index3.html
@@ -0,0 +1,333 @@
+{% extends "layouts/base.html" %}
+{% block title %}Dashboard3 {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- IonIcons -->
+    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <div class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1 class="m-0 text-dark">Dashboard v3</h1>
+                    </div>
+                    <!-- /.col -->
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Dashboard v3
+                            </li>
+                        </ol>
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+            </div>
+            <!-- /.container-fluid -->
+        </div>
+        <!-- /.content-header -->
+        <!-- Main content -->
+        <div class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-lg-6">
+                        <div class="card">
+                            <div class="card-header border-0">
+                                <div class="d-flex justify-content-between">
+                                    <h3 class="card-title">Online Store Visitors</h3>
+                                    <a href="javascript:void(0);">View Report</a>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <div class="d-flex">
+                                    <p class="d-flex flex-column">
+                                        <span class="text-bold text-lg">820</span>
+                                        <span>Visitors Over Time</span>
+                                    </p>
+                                    <p class="ml-auto d-flex flex-column text-right">
+                                        <span class="text-success">
+                                            <i class="fas fa-arrow-up"></i>
+                                            12.5%
+                                        </span>
+                                        <span class="text-muted">Since last week</span>
+                                    </p>
+                                </div>
+                                <!-- /.d-flex -->
+                                <div class="position-relative mb-4">
+                                    <canvas id="visitors-chart" height="200"></canvas>
+                                </div>
+                                <div class="d-flex flex-row justify-content-end">
+                                    <span class="mr-2">
+                                        <i class="fas fa-square text-primary"></i>
+                                        This Week
+                                    </span>
+                                    <span>
+                                        <i class="fas fa-square text-gray"></i>
+                                        Last Week
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- /.card -->
+                        <div class="card">
+                            <div class="card-header border-0">
+                                <h3 class="card-title">Products</h3>
+                                <div class="card-tools">
+                                    <a href="#" class="btn btn-tool btn-sm">
+                                        <i class="fas fa-download"></i>
+                                    </a>
+                                    <a href="#" class="btn btn-tool btn-sm">
+                                        <i class="fas fa-bars"></i>
+                                    </a>
+                                </div>
+                            </div>
+                            <div class="card-body table-responsive p-0">
+                                <table class="table table-striped table-valign-middle">
+                                    <thead>
+                                        <tr>
+                                            <th>Product</th>
+                                            <th>Price</th>
+                                            <th>Sales</th>
+                                            <th>More</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>
+                                                <img src="/static/assets/img/default-150x150.png"
+                                                     alt="Product 1"
+                                                     class="img-circle img-size-32 mr-2">
+                                                    Some Product
+                                                </td>
+                                                <td>$13 USD</td>
+                                                <td>
+                                                    <small class="text-success mr-1">
+                                                    <i class="fas fa-arrow-up"></i>
+                                                    12%
+                                                    </small>
+                                                    12,000 Sold
+                                                </td>
+                                                <td>
+                                                    <a href="#" class="text-muted">
+                                                        <i class="fas fa-search"></i>
+                                                    </a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <img src="/static/assets/img/default-150x150.png"
+                                                         alt="Product 1"
+                                                         class="img-circle img-size-32 mr-2">
+                                                        Another Product
+                                                    </td>
+                                                    <td>$29 USD</td>
+                                                    <td>
+                                                        <small class="text-warning mr-1">
+                                                        <i class="fas fa-arrow-down"></i>
+                                                        0.5%
+                                                        </small>
+                                                        123,234 Sold
+                                                    </td>
+                                                    <td>
+                                                        <a href="#" class="text-muted">
+                                                            <i class="fas fa-search"></i>
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td>
+                                                        <img src="/static/assets/img/default-150x150.png"
+                                                             alt="Product 1"
+                                                             class="img-circle img-size-32 mr-2">
+                                                            Amazing Product
+                                                        </td>
+                                                        <td>$1,230 USD</td>
+                                                        <td>
+                                                            <small class="text-danger mr-1">
+                                                            <i class="fas fa-arrow-down"></i>
+                                                            3%
+                                                            </small>
+                                                            198 Sold
+                                                        </td>
+                                                        <td>
+                                                            <a href="#" class="text-muted">
+                                                                <i class="fas fa-search"></i>
+                                                            </a>
+                                                        </td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td>
+                                                            <img src="/static/assets/img/default-150x150.png"
+                                                                 alt="Product 1"
+                                                                 class="img-circle img-size-32 mr-2">
+                                                                Perfect Item
+                                                                <span class="badge bg-danger">NEW</span>
+                                                            </td>
+                                                            <td>$199 USD</td>
+                                                            <td>
+                                                                <small class="text-success mr-1">
+                                                                <i class="fas fa-arrow-up"></i>
+                                                                63%
+                                                                </small>
+                                                                87 Sold
+                                                            </td>
+                                                            <td>
+                                                                <a href="#" class="text-muted">
+                                                                    <i class="fas fa-search"></i>
+                                                                </a>
+                                                            </td>
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
+                                            </div>
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- /.col-md-6 -->
+                                    <div class="col-lg-6">
+                                        <div class="card">
+                                            <div class="card-header border-0">
+                                                <div class="d-flex justify-content-between">
+                                                    <h3 class="card-title">Sales</h3>
+                                                    <a href="javascript:void(0);">View Report</a>
+                                                </div>
+                                            </div>
+                                            <div class="card-body">
+                                                <div class="d-flex">
+                                                    <p class="d-flex flex-column">
+                                                        <span class="text-bold text-lg">
+                                                            $18,230.00
+                                                        </span>
+                                                        <span>Sales Over Time</span>
+                                                    </p>
+                                                    <p class="ml-auto d-flex flex-column text-right">
+                                                        <span class="text-success">
+                                                            <i class="fas fa-arrow-up"></i>
+                                                            33.1%
+                                                        </span>
+                                                        <span class="text-muted">
+                                                            Since last month
+                                                        </span>
+                                                    </p>
+                                                </div>
+                                                <!-- /.d-flex -->
+                                                <div class="position-relative mb-4">
+                                                    <canvas id="sales-chart" height="200"></canvas>
+                                                </div>
+                                                <div class="d-flex flex-row justify-content-end">
+                                                    <span class="mr-2">
+                                                        <i class="fas fa-square text-primary"></i>
+                                                        This year
+                                                    </span>
+                                                    <span>
+                                                        <i class="fas fa-square text-gray"></i>
+                                                        Last year
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <!-- /.card -->
+                                        <div class="card">
+                                            <div class="card-header border-0">
+                                                <h3 class="card-title">
+                                                    Online Store Overview
+                                                </h3>
+                                                <div class="card-tools">
+                                                    <a href="#" class="btn btn-sm btn-tool">
+                                                        <i class="fas fa-download"></i>
+                                                    </a>
+                                                    <a href="#" class="btn btn-sm btn-tool">
+                                                        <i class="fas fa-bars"></i>
+                                                    </a>
+                                                </div>
+                                            </div>
+                                            <div class="card-body">
+                                                <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
+                                                    <p class="text-success text-xl">
+                                                        <i class="ion ion-ios-refresh-empty"></i>
+                                                    </p>
+                                                    <p class="d-flex flex-column text-right">
+                                                        <span class="font-weight-bold">
+                                                            <i class="ion ion-android-arrow-up text-success"></i>
+                                                            12%
+                                                        </span>
+                                                        <span class="text-muted">
+                                                            CONVERSION RATE
+                                                        </span>
+                                                    </p>
+                                                </div>
+                                                <!-- /.d-flex -->
+                                                <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
+                                                    <p class="text-warning text-xl">
+                                                        <i class="ion ion-ios-cart-outline"></i>
+                                                    </p>
+                                                    <p class="d-flex flex-column text-right">
+                                                        <span class="font-weight-bold">
+                                                            <i class="ion ion-android-arrow-up text-warning"></i>
+                                                            0.8%
+                                                        </span>
+                                                        <span class="text-muted">
+                                                            SALES RATE
+                                                        </span>
+                                                    </p>
+                                                </div>
+                                                <!-- /.d-flex -->
+                                                <div class="d-flex justify-content-between align-items-center mb-0">
+                                                    <p class="text-danger text-xl">
+                                                        <i class="ion ion-ios-people-outline"></i>
+                                                    </p>
+                                                    <p class="d-flex flex-column text-right">
+                                                        <span class="font-weight-bold">
+                                                            <i class="ion ion-android-arrow-down text-danger"></i>
+                                                            1%
+                                                        </span>
+                                                        <span class="text-muted">
+                                                            REGISTRATION RATE
+                                                        </span>
+                                                    </p>
+                                                </div>
+                                                <!-- /.d-flex -->
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!-- /.col-md-6 -->
+                                </div>
+                                <!-- /.row -->
+                            </div>
+                            <!-- /.container-fluid -->
+                        </div>
+                        <!-- /.content -->
+                    </div>
+                    <!-- /.content-wrapper -->
+                {% endblock content %}
+                <!-- Specific Page JS goes HERE -->
+                {% block javascripts %}
+                    <!-- jQuery -->
+                    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                    <!-- Bootstrap -->
+                    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                    <!-- AdminLTE -->
+                    <script src="/static/assets/js/adminlte.js"></script>
+                    <!-- OPTIONAL SCRIPTS -->
+                    <script src="/static/assets/plugins/chart.js/Chart.min.js"></script>
+                    <script src="/static/assets/js/demo.js"></script>
+                    <script src="/static/assets/js/pages/dashboard3.js"></script>
+                {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/layout-boxed.html b/tests/jinja_adminlte/layout-boxed.html
new file mode 100644
index 0000000..fd73668
--- /dev/null
+++ b/tests/jinja_adminlte/layout-boxed.html
@@ -0,0 +1,94 @@
+{% extends "layouts/base.html" %}
+{% block title %}Layout Boxed {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini layout-boxed
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Boxed Layout</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#">Layout</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Boxed Layout
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-12">
+                        <!-- Default box -->
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Title</h3>
+                                <div class="card-tools">
+                                    <button type="button"
+                                            class="btn btn-tool"
+                                            data-card-widget="collapse"
+                                            title="Collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-tool"
+                                            data-card-widget="remove"
+                                            title="Remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                Start creating your amazing application!
+                            </div>
+                            <!-- /.card-body -->
+                            <div class="card-footer">
+                                Footer
+                            </div>
+                            <!-- /.card-footer-->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/layout-collapsed-sidebar.html b/tests/jinja_adminlte/layout-collapsed-sidebar.html
new file mode 100644
index 0000000..e4646ce
--- /dev/null
+++ b/tests/jinja_adminlte/layout-collapsed-sidebar.html
@@ -0,0 +1,94 @@
+{% extends "layouts/base.html" %}
+{% block title %}Collapsed Sidebar {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini sidebar-collapse
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Collapsed Sidebar</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#">Layout</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Collapsed Sidebar
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-12">
+                        <!-- Default box -->
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Title</h3>
+                                <div class="card-tools">
+                                    <button type="button"
+                                            class="btn btn-tool"
+                                            data-card-widget="collapse"
+                                            title="Collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-tool"
+                                            data-card-widget="remove"
+                                            title="Remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                Start creating your amazing application!
+                            </div>
+                            <!-- /.card-body -->
+                            <div class="card-footer">
+                                Footer
+                            </div>
+                            <!-- /.card-footer-->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/layout-fixed-footer.html b/tests/jinja_adminlte/layout-fixed-footer.html
new file mode 100644
index 0000000..7611aba
--- /dev/null
+++ b/tests/jinja_adminlte/layout-fixed-footer.html
@@ -0,0 +1,94 @@
+{% extends "layouts/base.html" %}
+{% block title %}Fixed Footer Layout {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini layout-footer-fixed
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Fixed Footer Layout</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#">Layout</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Fixed Footer Layout
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-12">
+                        <!-- Default box -->
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Title</h3>
+                                <div class="card-tools">
+                                    <button type="button"
+                                            class="btn btn-tool"
+                                            data-card-widget="collapse"
+                                            title="Collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-tool"
+                                            data-card-widget="remove"
+                                            title="Remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                Start creating your amazing application!
+                            </div>
+                            <!-- /.card-body -->
+                            <div class="card-footer">
+                                Footer
+                            </div>
+                            <!-- /.card-footer-->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/layout-fixed-sidebar.html b/tests/jinja_adminlte/layout-fixed-sidebar.html
new file mode 100644
index 0000000..fd6ec53
--- /dev/null
+++ b/tests/jinja_adminlte/layout-fixed-sidebar.html
@@ -0,0 +1,98 @@
+{% extends "layouts/base.html" %}
+{% block title %}Fixed Sidebar {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini layout-fixed
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- overlayScrollbars -->
+    <link rel="stylesheet" href="/static/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Fixed Layout</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#">Layout</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Fixed Layout
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-12">
+                        <!-- Default box -->
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Title</h3>
+                                <div class="card-tools">
+                                    <button type="button"
+                                            class="btn btn-tool"
+                                            data-card-widget="collapse"
+                                            title="Collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-tool"
+                                            data-card-widget="remove"
+                                            title="Remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                Start creating your amazing application!
+                            </div>
+                            <!-- /.card-body -->
+                            <div class="card-footer">
+                                Footer
+                            </div>
+                            <!-- /.card-footer-->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- overlayScrollbars -->
+    <script src="/static/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/layout-fixed-topnav.html b/tests/jinja_adminlte/layout-fixed-topnav.html
new file mode 100644
index 0000000..52794b0
--- /dev/null
+++ b/tests/jinja_adminlte/layout-fixed-topnav.html
@@ -0,0 +1,94 @@
+{% extends "layouts/base.html" %}
+{% block title %}Fixed Navbar Layout {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini layout-navbar-fixed
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Fixed Navbar Layout</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#">Layout</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Fixed Navbar Layout
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-12">
+                        <!-- Default box -->
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Title</h3>
+                                <div class="card-tools">
+                                    <button type="button"
+                                            class="btn btn-tool"
+                                            data-card-widget="collapse"
+                                            title="Collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-tool"
+                                            data-card-widget="remove"
+                                            title="Remove">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                Start creating your amazing application!
+                            </div>
+                            <!-- /.card-body -->
+                            <div class="card-footer">
+                                Footer
+                            </div>
+                            <!-- /.card-footer-->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/layout-top-nav-sidebar.html b/tests/jinja_adminlte/layout-top-nav-sidebar.html
new file mode 100644
index 0000000..2a3203f
--- /dev/null
+++ b/tests/jinja_adminlte/layout-top-nav-sidebar.html
@@ -0,0 +1,133 @@
+{% extends "layouts/base.html" %}
+{% block title %}Top Navigation + Sidebar {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-collapse layout-top-nav
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <div class="content-header">
+            <div class="container">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1 class="m-0 text-dark">
+                            Top Navigation
+                            <small>
+                            Example 3.0
+                            </small>
+                        </h1>
+                    </div>
+                    <!-- /.col -->
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item">
+                                <a href="#">Layout</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Top Navigation
+                            </li>
+                        </ol>
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+            </div>
+            <!-- /.container-fluid -->
+        </div>
+        <!-- /.content-header -->
+        <!-- Main content -->
+        <div class="content">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-6">
+                        <div class="card">
+                            <div class="card-body">
+                                <h5 class="card-title">Card title</h5>
+                                <p class="card-text">
+                                    Some quick example text to build on the card title and make up the bulk of the card's
+                                    content.
+                                </p>
+                                <a href="#" class="card-link">Card link</a>
+                                <a href="#" class="card-link">Another link</a>
+                            </div>
+                        </div>
+                        <div class="card card-primary card-outline">
+                            <div class="card-body">
+                                <h5 class="card-title">Card title</h5>
+                                <p class="card-text">
+                                    Some quick example text to build on the card title and make up the bulk of the card's
+                                    content.
+                                </p>
+                                <a href="#" class="card-link">Card link</a>
+                                <a href="#" class="card-link">Another link</a>
+                            </div>
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col-md-6 -->
+                    <div class="col-lg-6">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title m-0">Featured</h5>
+                            </div>
+                            <div class="card-body">
+                                <h6 class="card-title">Special title treatment</h6>
+                                <p class="card-text">
+                                    With supporting text below as a natural lead-in to additional content.
+                                </p>
+                                <a href="#" class="btn btn-primary">
+                                    Go somewhere
+                                </a>
+                            </div>
+                        </div>
+                        <div class="card card-primary card-outline">
+                            <div class="card-header">
+                                <h5 class="card-title m-0">
+                                    Featured
+                                </h5>
+                            </div>
+                            <div class="card-body">
+                                <h6 class="card-title">
+                                    Special title treatment
+                                </h6>
+                                <p class="card-text">
+                                    With supporting text below as a natural lead-in to additional content.
+                                </p>
+                                <a href="#" class="btn btn-primary">
+                                    Go somewhere
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- /.col-md-6 -->
+                </div>
+                <!-- /.row -->
+            </div>
+            <!-- /.container-fluid -->
+        </div>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/layouts/base-fullscreen.html b/tests/jinja_adminlte/layouts/base-fullscreen.html
new file mode 100644
index 0000000..5b31235
--- /dev/null
+++ b/tests/jinja_adminlte/layouts/base-fullscreen.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" href="/static/assets/favicon.ico" type="image/x-icon">
+        <link rel="canonical" href="https://appseed.us/adminlte"/>
+        <title>
+        AdminLTE Jinja -
+        {% block title %}{% endblock %}
+        | AppSeed
+        </title>
+        <!-- Specific Page CSS goes HERE -->
+        {% block stylesheets %}{% endblock stylesheets %}
+        </head>
+        <body class="hold-transition {% block body_class %}{% endblock body_class %}">
+            {% block content %}{% endblock content %}
+                <!-- Specific Page JS goes HERE -->
+                {% block javascripts %}{% endblock javascripts %}
+                </body>
+            </html>
diff --git a/tests/jinja_adminlte/layouts/base.html b/tests/jinja_adminlte/layouts/base.html
new file mode 100644
index 0000000..d6498b2
--- /dev/null
+++ b/tests/jinja_adminlte/layouts/base.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" href="/static/assets/favicon.ico" type="image/x-icon">
+        <link rel="canonical" href="https://appseed.us/adminlte"/>
+        <title>
+        AdminLTE Jinja -
+        {% block title %}{% endblock %}
+        | AppSeed
+        </title>
+        {% block stylesheets %}{% endblock stylesheets %}
+        </head>
+        <body class="hold-transition {% block body_class %}{% endblock body_class %}">
+            <div class="wrapper">
+                {% include 'includes/navigation.html' %}
+                {% include 'includes/sidebar.html' %}
+                {% block content %}{% endblock content %}
+                    {% include 'includes/footer.html' %}
+                    <!-- Control Sidebar -->
+                    <aside class="control-sidebar control-sidebar-dark">
+                        <!-- Control sidebar content goes here -->
+                    </aside>
+                    <!-- /.control-sidebar -->
+                </div>
+                <!-- ./wrapper -->
+                <!-- Specific Page JS goes HERE -->
+                {% block javascripts %}{% endblock javascripts %}
+                </body>
+            </html>
diff --git a/tests/jinja_adminlte/login.html b/tests/jinja_adminlte/login.html
new file mode 100644
index 0000000..19b95c0
--- /dev/null
+++ b/tests/jinja_adminlte/login.html
@@ -0,0 +1,105 @@
+{% extends "layouts/base-fullscreen.html" %}
+{% block title %}Login {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    login-page
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- icheck bootstrap -->
+    <link rel="stylesheet" href="/static/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="login-box">
+        <div class="login-logo">
+            <a href="/">
+                <b>
+                Admin
+                </b>
+                LTE
+            </a>
+        </div>
+        <!-- /.login-logo -->
+        <div class="card">
+            <div class="card-body login-card-body">
+                <p class="login-box-msg">
+                    Sign in to start your session
+                </p>
+                <form action="../../index3.html" method="post">
+                    <div class="input-group mb-3">
+                        <input type="email" class="form-control" placeholder="Email">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-envelope"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="password" class="form-control" placeholder="Password">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-lock"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-8">
+                            <div class="icheck-primary">
+                                <input type="checkbox" id="remember">
+                                <label for="remember">
+                                    Remember Me
+                                </label>
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-4">
+                            <button type="submit" class="btn btn-primary btn-block">
+                                Sign In
+                            </button>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                </form>
+                <div class="social-auth-links text-center mb-3">
+                    <p>
+                        - OR -
+                    </p>
+                    <a href="#" class="btn btn-block btn-primary">
+                        <i class="fab fa-facebook mr-2"></i>
+                        Sign in using Facebook
+                    </a>
+                    <a href="#" class="btn btn-block btn-danger">
+                        <i class="fab fa-google-plus mr-2"></i>
+                        Sign in using Google+
+                    </a>
+                </div>
+                <!-- /.social-auth-links -->
+                <p class="mb-1">
+                    <a href="example-recover-password.html">
+                        I forgot my password
+                    </a>
+                </p>
+                <p class="mb-0">
+                    <a href="/examples-register.html" class="text-center">
+                        Register a new membership
+                    </a>
+                </p>
+            </div>
+            <!-- /.login-card-body -->
+        </div>
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/mailbox-compose.html b/tests/jinja_adminlte/mailbox-compose.html
new file mode 100644
index 0000000..bda77bf
--- /dev/null
+++ b/tests/jinja_adminlte/mailbox-compose.html
@@ -0,0 +1,257 @@
+{% extends "layouts/base.html" %}
+{% block title %}Compose {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    <!-- summernote -->
+    <link rel="stylesheet" href="/static/assets/plugins/summernote/summernote-bs4.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Compose</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Compose
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-md-3">
+                        <a href="mailbox.html" class="btn btn-primary btn-block mb-3">
+                            Back to Inbox
+                        </a>
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Folders</h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body p-0">
+                                <ul class="nav nav-pills flex-column">
+                                    <li class="nav-item active">
+                                        <a href="#" class="nav-link">
+                                            <i class="fas fa-inbox"></i>
+                                            Inbox
+                                            <span class="badge bg-primary float-right">
+                                                12
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="#" class="nav-link">
+                                            <i class="far fa-envelope"></i>
+                                            Sent
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="#" class="nav-link">
+                                            <i class="far fa-file-alt"></i>
+                                            Drafts
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="#" class="nav-link">
+                                            <i class="fas fa-filter"></i>
+                                            Junk
+                                            <span class="badge bg-warning float-right">
+                                                65
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="#" class="nav-link">
+                                            <i class="far fa-trash-alt"></i>
+                                            Trash
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Labels</h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body p-0">
+                                <ul class="nav nav-pills flex-column">
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="#">
+                                            <i class="far fa-circle text-danger"></i>
+                                            Important
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="#">
+                                            <i class="far fa-circle text-warning"></i>
+                                            Promotions
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="#">
+                                            <i class="far fa-circle text-primary"></i>
+                                            Social
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col -->
+                    <div class="col-md-9">
+                        <div class="card card-primary card-outline">
+                            <div class="card-header">
+                                <h3 class="card-title">Compose New Message</h3>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body">
+                                <div class="form-group">
+                                    <input class="form-control" placeholder="To:">
+                                </div>
+                                <div class="form-group">
+                                    <input class="form-control" placeholder="Subject:">
+                                </div>
+                                <div class="form-group">
+                                    <textarea id="compose-textarea" class="form-control" style="height: 300px">
+                                    <h1>
+                                        <u>
+                                        Heading Of Message
+                                        </u>
+                                    </h1>
+                                    <h4>Subheading</h4>
+                                    <p>
+                                        But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain
+                                        was born and I will give you a complete account of the system, and expound the actual teachings
+                                        of the great explorer of the truth, the master-builder of human happiness. No one rejects,
+                                        dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know
+                                        how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again
+                                        is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain,
+                                        but because occasionally circumstances occur in which toil and pain can procure him some great
+                                        pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise,
+                                        except to obtain some advantage from it? But who has any right to find fault with a man who
+                                        chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that
+                                        produces no resultant pleasure? On the other hand, we denounce with righteous indignation and
+                                        dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so
+                                        blinded by desire, that they cannot foresee
+                                    </p>
+                                    <ul>
+                                        <li>
+                                            List item one
+                                        </li>
+                                        <li>
+                                            List item two
+                                        </li>
+                                        <li>
+                                            List item three
+                                        </li>
+                                        <li>
+                                            List item four
+                                        </li>
+                                    </ul>
+                                    <p>
+                                        Thank you,
+                                    </p>
+                                    <p>
+                                        John Doe
+                                    </p>
+                                    </textarea>
+                                </div>
+                                <div class="form-group">
+                                    <div class="btn btn-default btn-file">
+                                        <i class="fas fa-paperclip"></i>
+                                        Attachment
+                                        <input type="file" name="attachment">
+                                    </div>
+                                    <p class="help-block">
+                                        Max. 32MB
+                                    </p>
+                                </div>
+                            </div>
+                            <!-- /.card-body -->
+                            <div class="card-footer">
+                                <div class="float-right">
+                                    <button type="button" class="btn btn-default">
+                                        <i class="fas fa-pencil-alt"></i>
+                                        Draft
+                                    </button>
+                                    <button type="submit" class="btn btn-primary">
+                                        <i class="far fa-envelope"></i>
+                                        Send
+                                    </button>
+                                </div>
+                                <button type="reset" class="btn btn-default">
+                                    <i class="fas fa-times"></i>
+                                    Discard
+                                </button>
+                            </div>
+                            <!-- /.card-footer -->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col -->
+                </div>
+                <!-- /.row -->
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+    <!-- Summernote -->
+    <script src="/static/assets/plugins/summernote/summernote-bs4.min.js"></script>
+    <!-- Page Script -->
+    <script>
+    $(function () {
+      //Add text editor
+      $('#compose-textarea').summernote()
+    })
+    </script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/mailbox-read-mail.html b/tests/jinja_adminlte/mailbox-read-mail.html
new file mode 100644
index 0000000..74ac910
--- /dev/null
+++ b/tests/jinja_adminlte/mailbox-read-mail.html
@@ -0,0 +1,354 @@
+{% extends "layouts/base.html" %}
+{% block title %}Read Email {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Compose</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Compose
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-md-3">
+                        <a href="mailbox.html" class="btn btn-primary btn-block mb-3">
+                            Back to Inbox
+                        </a>
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Folders</h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="card-body p-0">
+                                <ul class="nav nav-pills flex-column">
+                                    <li class="nav-item active">
+                                        <a href="#" class="nav-link">
+                                            <i class="fas fa-inbox"></i>
+                                            Inbox
+                                            <span class="badge bg-primary float-right">
+                                                12
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="#" class="nav-link">
+                                            <i class="far fa-envelope"></i>
+                                            Sent
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="#" class="nav-link">
+                                            <i class="far fa-file-alt"></i>
+                                            Drafts
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="#" class="nav-link">
+                                            <i class="fas fa-filter"></i>
+                                            Junk
+                                            <span class="badge bg-warning float-right">
+                                                65
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a href="#" class="nav-link">
+                                            <i class="far fa-trash-alt"></i>
+                                            Trash
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Labels</h3>
+                                <div class="card-tools">
+                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body p-0">
+                                <ul class="nav nav-pills flex-column">
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="#">
+                                            <i class="far fa-circle text-danger"></i>
+                                            Important
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="#">
+                                            <i class="far fa-circle text-warning"></i>
+                                            Promotions
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="#">
+                                            <i class="far fa-circle text-primary"></i>
+                                            Social
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <!-- /.card-body -->
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.col -->
+                    <div class="col-md-9">
+                        <div class="card card-primary card-outline">
+                            <div class="card-header">
+                                <h3 class="card-title">Read Mail</h3>
+                                <div class="card-tools">
+                                    <a href="#" class="btn btn-tool" title="Previous">
+                                        <i class="fas fa-chevron-left"></i>
+                                    </a>
+                                    <a href="#" class="btn btn-tool" title="Next">
+                                        <i class="fas fa-chevron-right"></i>
+                                    </a>
+                                </div>
+                            </div>
+                            <!-- /.card-header -->
+                            <div class="card-body p-0">
+                                <div class="mailbox-read-info">
+                                    <h5>Message Subject Is Placed Here</h5>
+                                    <h6>
+                                        From: support@adminlte.io
+                                        <span class="mailbox-read-time float-right">
+                                            15 Feb. 2015 11:03 PM
+                                        </span>
+                                    </h6>
+                                </div>
+                                <!-- /.mailbox-read-info -->
+                                <div class="mailbox-controls with-border text-center">
+                                    <div class="btn-group">
+                                        <button type="button"
+                                                class="btn btn-default btn-sm"
+                                                data-container="body"
+                                                title="Delete">
+                                            <i class="far fa-trash-alt"></i>
+                                        </button>
+                                        <button type="button"
+                                                class="btn btn-default btn-sm"
+                                                data-container="body"
+                                                title="Reply">
+                                            <i class="fas fa-reply"></i>
+                                        </button>
+                                        <button type="button"
+                                                class="btn btn-default btn-sm"
+                                                data-container="body"
+                                                title="Forward">
+                                            <i class="fas fa-share"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.btn-group -->
+                                    <button type="button" class="btn btn-default btn-sm" title="Print">
+                                        <i class="fas fa-print"></i>
+                                    </button>
+                                </div>
+                                <!-- /.mailbox-controls -->
+                                <div class="mailbox-read-message">
+                                    <p>
+                                        Hello John,
+                                    </p>
+                                    <p>
+                                        Keffiyeh blog actually fashion axe vegan, irony biodiesel. Cold-pressed hoodie chillwave put a bird
+                                        on it aesthetic, bitters brunch meggings vegan iPhone. Dreamcatcher vegan scenester mlkshk. Ethical
+                                        master cleanse Bushwick, occupy Thundercats banjo cliche ennui farm-to-table mlkshk fanny pack
+                                        gluten-free. Marfa butcher vegan quinoa, bicycle rights disrupt tofu scenester chillwave 3 wolf moon
+                                        asymmetrical taxidermy pour-over. Quinoa tote bag fashion axe, Godard disrupt migas church-key tofu
+                                        blog locavore. Thundercats cronut polaroid Neutra tousled, meh food truck selfies narwhal American
+                                        Apparel.
+                                    </p>
+                                    <p>
+                                        Raw denim McSweeney's bicycle rights, iPhone trust fund quinoa Neutra VHS kale chips vegan PBR&amp;B
+                                        literally Thundercats +1. Forage tilde four dollar toast, banjo health goth paleo butcher. Four dollar
+                                        toast Brooklyn pour-over American Apparel sustainable, lumbersexual listicle gluten-free health goth
+                                        umami hoodie. Synth Echo Park bicycle rights DIY farm-to-table, retro kogi sriracha dreamcatcher PBR&amp;B
+                                        flannel hashtag irony Wes Anderson. Lumbersexual Williamsburg Helvetica next level. Cold-pressed
+                                        slow-carb pop-up normcore Thundercats Portland, cardigan literally meditation lumbersexual crucifix.
+                                        Wayfarers raw denim paleo Bushwick, keytar Helvetica scenester keffiyeh 8-bit irony mumblecore
+                                        whatever viral Truffaut.
+                                    </p>
+                                    <p>
+                                        Post-ironic shabby chic VHS, Marfa keytar flannel lomo try-hard keffiyeh cray. Actually fap fanny
+                                        pack yr artisan trust fund. High Life dreamcatcher church-key gentrify. Tumblr stumptown four dollar
+                                        toast vinyl, cold-pressed try-hard blog authentic keffiyeh Helvetica lo-fi tilde Intelligentsia. Lomo
+                                        locavore salvia bespoke, twee fixie paleo cliche brunch Schlitz blog McSweeney's messenger bag swag
+                                        slow-carb. Odd Future photo booth pork belly, you probably haven't heard of them actually tofu ennui
+                                        keffiyeh lo-fi Truffaut health goth. Narwhal sustainable retro disrupt.
+                                    </p>
+                                    <p>
+                                        Skateboard artisan letterpress before they sold out High Life messenger bag. Bitters chambray
+                                        leggings listicle, drinking vinegar chillwave synth. Fanny pack hoodie American Apparel twee. American
+                                        Apparel PBR listicle, salvia aesthetic occupy sustainable Neutra kogi. Organic synth Tumblr viral
+                                        plaid, shabby chic single-origin coffee Etsy 3 wolf moon slow-carb Schlitz roof party tousled squid
+                                        vinyl. Readymade next level literally trust fund. Distillery master cleanse migas, Vice sriracha
+                                        flannel chambray chia cronut.
+                                    </p>
+                                    <p>
+                                        Thanks,
+                                        <br>
+                                        Jane
+                                    </p>
+                                </div>
+                                <!-- /.mailbox-read-message -->
+                            </div>
+                            <!-- /.card-body -->
+                            <div class="card-footer bg-white">
+                                <ul class="mailbox-attachments d-flex align-items-stretch clearfix">
+                                    <li>
+                                        <span class="mailbox-attachment-icon">
+                                            <i class="far fa-file-pdf"></i>
+                                        </span>
+                                        <div class="mailbox-attachment-info">
+                                            <a href="#" class="mailbox-attachment-name">
+                                                <i class="fas fa-paperclip"></i>
+                                                Sep2014-report.pdf
+                                            </a>
+                                            <span class="mailbox-attachment-size clearfix mt-1">
+                                                <span>1,245 KB</span>
+                                                <a href="#" class="btn btn-default btn-sm float-right">
+                                                    <i class="fas fa-cloud-download-alt"></i>
+                                                </a>
+                                            </span>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        <span class="mailbox-attachment-icon">
+                                            <i class="far fa-file-word"></i>
+                                        </span>
+                                        <div class="mailbox-attachment-info">
+                                            <a href="#" class="mailbox-attachment-name">
+                                                <i class="fas fa-paperclip"></i>
+                                                App Description.docx
+                                            </a>
+                                            <span class="mailbox-attachment-size clearfix mt-1">
+                                                <span>1,245 KB</span>
+                                                <a href="#" class="btn btn-default btn-sm float-right">
+                                                    <i class="fas fa-cloud-download-alt"></i>
+                                                </a>
+                                            </span>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        <span class="mailbox-attachment-icon has-img">
+                                            <img src="/static/assets/img/photo1.png" alt="Attachment">
+                                            </span>
+                                            <div class="mailbox-attachment-info">
+                                                <a href="#" class="mailbox-attachment-name">
+                                                    <i class="fas fa-camera"></i>
+                                                    photo1.png
+                                                </a>
+                                                <span class="mailbox-attachment-size clearfix mt-1">
+                                                    <span>2.67 MB</span>
+                                                    <a href="#" class="btn btn-default btn-sm float-right">
+                                                        <i class="fas fa-cloud-download-alt"></i>
+                                                    </a>
+                                                </span>
+                                            </div>
+                                        </li>
+                                        <li>
+                                            <span class="mailbox-attachment-icon has-img">
+                                                <img src="/static/assets/img/photo2.png" alt="Attachment">
+                                                </span>
+                                                <div class="mailbox-attachment-info">
+                                                    <a href="#" class="mailbox-attachment-name">
+                                                        <i class="fas fa-camera"></i>
+                                                        photo2.png
+                                                    </a>
+                                                    <span class="mailbox-attachment-size clearfix mt-1">
+                                                        <span>1.9 MB</span>
+                                                        <a href="#" class="btn btn-default btn-sm float-right">
+                                                            <i class="fas fa-cloud-download-alt"></i>
+                                                        </a>
+                                                    </span>
+                                                </div>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <!-- /.card-footer -->
+                                    <div class="card-footer">
+                                        <div class="float-right">
+                                            <button type="button" class="btn btn-default">
+                                                <i class="fas fa-reply"></i>
+                                                Reply
+                                            </button>
+                                            <button type="button" class="btn btn-default">
+                                                <i class="fas fa-share"></i>
+                                                Forward
+                                            </button>
+                                        </div>
+                                        <button type="button" class="btn btn-default">
+                                            <i class="far fa-trash-alt"></i>
+                                            Delete
+                                        </button>
+                                        <button type="button" class="btn btn-default">
+                                            <i class="fas fa-print"></i>
+                                            Print
+                                        </button>
+                                    </div>
+                                    <!-- /.card-footer -->
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                            <!-- /.col -->
+                        </div>
+                        <!-- /.row -->
+                    </div>
+                    <!-- /.container-fluid -->
+                </section>
+                <!-- /.content -->
+            </div>
+        {% endblock content %}
+        <!-- Specific Page JS goes HERE -->
+        {% block javascripts %}
+            <!-- jQuery -->
+            <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+            <!-- Bootstrap 4 -->
+            <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+            <!-- AdminLTE App -->
+            <script src="/static/assets/js/adminlte.min.js"></script>
+            <!-- AdminLTE for demo purposes -->
+            <script src="/static/assets/js/demo.js"></script>
+        {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/mailbox.html b/tests/jinja_adminlte/mailbox.html
new file mode 100644
index 0000000..2e815a3
--- /dev/null
+++ b/tests/jinja_adminlte/mailbox.html
@@ -0,0 +1,718 @@
+{% extends "layouts/base.html" %}
+{% block title %}Mailbox {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- icheck bootstrap -->
+    <link rel="stylesheet" href="/static/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Inbox</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Inbox
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="row">
+                <div class="col-md-3">
+                    <a href="compose.html" class="btn btn-primary btn-block mb-3">
+                        Compose
+                    </a>
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">Folders</h3>
+                            <div class="card-tools">
+                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                    <i class="fas fa-minus"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body p-0">
+                            <ul class="nav nav-pills flex-column">
+                                <li class="nav-item active">
+                                    <a href="#" class="nav-link">
+                                        <i class="fas fa-inbox"></i>
+                                        Inbox
+                                        <span class="badge bg-primary float-right">
+                                            12
+                                        </span>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link">
+                                        <i class="far fa-envelope"></i>
+                                        Sent
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link">
+                                        <i class="far fa-file-alt"></i>
+                                        Drafts
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link">
+                                        <i class="fas fa-filter"></i>
+                                        Junk
+                                        <span class="badge bg-warning float-right">
+                                            65
+                                        </span>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link">
+                                        <i class="far fa-trash-alt"></i>
+                                        Trash
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                        <!-- /.card-body -->
+                    </div>
+                    <!-- /.card -->
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">Labels</h3>
+                            <div class="card-tools">
+                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                    <i class="fas fa-minus"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="card-body p-0">
+                            <ul class="nav nav-pills flex-column">
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link">
+                                        <i class="far fa-circle text-danger"></i>
+                                        Important
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link">
+                                        <i class="far fa-circle text-warning"></i>
+                                        Promotions
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#" class="nav-link">
+                                        <i class="far fa-circle text-primary"></i>
+                                        Social
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                        <!-- /.card-body -->
+                    </div>
+                    <!-- /.card -->
+                </div>
+                <!-- /.col -->
+                <div class="col-md-9">
+                    <div class="card card-primary card-outline">
+                        <div class="card-header">
+                            <h3 class="card-title">Inbox</h3>
+                            <div class="card-tools">
+                                <div class="input-group input-group-sm">
+                                    <input type="text" class="form-control" placeholder="Search Mail">
+                                    <div class="input-group-append">
+                                        <div class="btn btn-primary">
+                                            <i class="fas fa-search"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- /.card-tools -->
+                        </div>
+                        <!-- /.card-header -->
+                        <div class="card-body p-0">
+                            <div class="mailbox-controls">
+                                <!-- Check all button -->
+                                <button type="button" class="btn btn-default btn-sm checkbox-toggle">
+                                    <i class="far fa-square"></i>
+                                </button>
+                                <div class="btn-group">
+                                    <button type="button" class="btn btn-default btn-sm">
+                                        <i class="far fa-trash-alt"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-default btn-sm">
+                                        <i class="fas fa-reply"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-default btn-sm">
+                                        <i class="fas fa-share"></i>
+                                    </button>
+                                </div>
+                                <!-- /.btn-group -->
+                                <button type="button" class="btn btn-default btn-sm">
+                                    <i class="fas fa-sync-alt"></i>
+                                </button>
+                                <div class="float-right">
+                                    1-50/200
+                                    <div class="btn-group">
+                                        <button type="button" class="btn btn-default btn-sm">
+                                            <i class="fas fa-chevron-left"></i>
+                                        </button>
+                                        <button type="button" class="btn btn-default btn-sm">
+                                            <i class="fas fa-chevron-right"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.btn-group -->
+                                </div>
+                                <!-- /.float-right -->
+                            </div>
+                            <div class="table-responsive mailbox-messages">
+                                <table class="table table-hover table-striped">
+                                    <tbody>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check1">
+                                                    <label for="check1"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">Alexander Pierce</a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment"></td>
+                                            <td class="mailbox-date">5 mins ago</td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check2">
+                                                    <label for="check2"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star-o text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">Alexander Pierce</a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment">
+                                                <i class="fas fa-paperclip"></i>
+                                            </td>
+                                            <td class="mailbox-date">28 mins ago</td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check3">
+                                                    <label for="check3"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star-o text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">Alexander Pierce</a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment">
+                                                <i class="fas fa-paperclip"></i>
+                                            </td>
+                                            <td class="mailbox-date">
+                                                11 hours ago
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check4">
+                                                    <label for="check4"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment"></td>
+                                            <td class="mailbox-date">
+                                                15 hours ago
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check5">
+                                                    <label for="check5"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment">
+                                                <i class="fas fa-paperclip"></i>
+                                            </td>
+                                            <td class="mailbox-date">
+                                                Yesterday
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check6">
+                                                    <label for="check6"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star-o text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment">
+                                                <i class="fas fa-paperclip"></i>
+                                            </td>
+                                            <td class="mailbox-date">
+                                                2 days ago
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check7">
+                                                    <label for="check7"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star-o text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment">
+                                                <i class="fas fa-paperclip"></i>
+                                            </td>
+                                            <td class="mailbox-date">
+                                                2 days ago
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check8">
+                                                    <label for="check8"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment"></td>
+                                            <td class="mailbox-date">
+                                                2 days ago
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check9">
+                                                    <label for="check9"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment"></td>
+                                            <td class="mailbox-date">
+                                                2 days ago
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check10">
+                                                    <label for="check10"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star-o text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment"></td>
+                                            <td class="mailbox-date">
+                                                2 days ago
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check11">
+                                                    <label for="check11"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star-o text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment">
+                                                <i class="fas fa-paperclip"></i>
+                                            </td>
+                                            <td class="mailbox-date">
+                                                4 days ago
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check12">
+                                                    <label for="check12"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment"></td>
+                                            <td class="mailbox-date">
+                                                12 days ago
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check13">
+                                                    <label for="check13"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star-o text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment">
+                                                <i class="fas fa-paperclip"></i>
+                                            </td>
+                                            <td class="mailbox-date">
+                                                12 days ago
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check14">
+                                                    <label for="check14"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment">
+                                                <i class="fas fa-paperclip"></i>
+                                            </td>
+                                            <td class="mailbox-date">
+                                                14 days ago
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div class="icheck-primary">
+                                                    <input type="checkbox" value="" id="check15">
+                                                    <label for="check15"></label>
+                                                </div>
+                                            </td>
+                                            <td class="mailbox-star">
+                                                <a href="#">
+                                                    <i class="fas fa-star text-warning"></i>
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-name">
+                                                <a href="read-mail.html">
+                                                    Alexander Pierce
+                                                </a>
+                                            </td>
+                                            <td class="mailbox-subject">
+                                                <b>
+                                                AdminLTE 3.0 Issue
+                                                </b>
+                                                - Trying to find a solution to this problem...
+                                            </td>
+                                            <td class="mailbox-attachment">
+                                                <i class="fas fa-paperclip"></i>
+                                            </td>
+                                            <td class="mailbox-date">
+                                                15 days ago
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                <!-- /.table -->
+                            </div>
+                            <!-- /.mail-box-messages -->
+                        </div>
+                        <!-- /.card-body -->
+                        <div class="card-footer p-0">
+                            <div class="mailbox-controls">
+                                <!-- Check all button -->
+                                <button type="button" class="btn btn-default btn-sm checkbox-toggle">
+                                    <i class="far fa-square"></i>
+                                </button>
+                                <div class="btn-group">
+                                    <button type="button" class="btn btn-default btn-sm">
+                                        <i class="far fa-trash-alt"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-default btn-sm">
+                                        <i class="fas fa-reply"></i>
+                                    </button>
+                                    <button type="button" class="btn btn-default btn-sm">
+                                        <i class="fas fa-share"></i>
+                                    </button>
+                                </div>
+                                <!-- /.btn-group -->
+                                <button type="button" class="btn btn-default btn-sm">
+                                    <i class="fas fa-sync-alt"></i>
+                                </button>
+                                <div class="float-right">
+                                    1-50/200
+                                    <div class="btn-group">
+                                        <button type="button" class="btn btn-default btn-sm">
+                                            <i class="fas fa-chevron-left"></i>
+                                        </button>
+                                        <button type="button" class="btn btn-default btn-sm">
+                                            <i class="fas fa-chevron-right"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.btn-group -->
+                                </div>
+                                <!-- /.float-right -->
+                            </div>
+                        </div>
+                    </div>
+                    <!-- /.card -->
+                </div>
+                <!-- /.col -->
+            </div>
+            <!-- /.row -->
+        </section>
+        <!-- /.content -->
+    </div>
+    <!-- /.content-wrapper -->
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- Page Script -->
+    <script>
+    $(function () {
+      //Enable check and uncheck all functionality
+      $('.checkbox-toggle').click(function () {
+        var clicks = $(this).data('clicks')
+        if (clicks) {
+          //Uncheck all checkboxes
+          $('.mailbox-messages input[type=\'checkbox\']').prop('checked', false)
+          $('.checkbox-toggle .far.fa-check-square').removeClass('fa-check-square').addClass('fa-square')
+        } else {
+          //Check all checkboxes
+          $('.mailbox-messages input[type=\'checkbox\']').prop('checked', true)
+          $('.checkbox-toggle .far.fa-square').removeClass('fa-square').addClass('fa-check-square')
+        }
+        $(this).data('clicks', !clicks)
+      })
+
+      //Handle starring for font awesome
+      $('.mailbox-star').click(function (e) {
+        e.preventDefault()
+        //detect type
+        var $this = $(this).find('a > i')
+        var fa    = $this.hasClass('fa')
+
+        //Switch states
+        if (fa) {
+          $this.toggleClass('fa-star')
+          $this.toggleClass('fa-star-o')
+        }
+      })
+    })
+    </script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/page-403.html b/tests/jinja_adminlte/page-403.html
new file mode 100644
index 0000000..b5890ff
--- /dev/null
+++ b/tests/jinja_adminlte/page-403.html
@@ -0,0 +1,85 @@
+{% extends "layouts/base.html" %}
+{% block title %}Error 403 {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>404 Error Page</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                404 Error Page
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="error-page">
+                <h2 class="headline text-warning">404</h2>
+                <div class="error-content">
+                    <h3>
+                        <i class="fas fa-exclamation-triangle text-warning"></i>
+                        Oops! Page not found.
+                    </h3>
+                    <p>
+                        We could not find the page you were looking for.
+                        Meanwhile, you may
+                        <a href="../../index.html">return to dashboard</a>
+                        or try using the search form.
+                    </p>
+                    <form class="search-form">
+                        <div class="input-group">
+                            <input type="text" name="search" class="form-control" placeholder="Search">
+                            <div class="input-group-append">
+                                <button type="submit" name="submit" class="btn btn-warning">
+                                    <i class="fas fa-search"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.input-group -->
+                    </form>
+                </div>
+                <!-- /.error-content -->
+            </div>
+            <!-- /.error-page -->
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/page-404.html b/tests/jinja_adminlte/page-404.html
new file mode 100644
index 0000000..1ac85ff
--- /dev/null
+++ b/tests/jinja_adminlte/page-404.html
@@ -0,0 +1,84 @@
+{% extends "layouts/base.html" %}
+{% block title %}Error 404 {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>404 Error Page</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                404 Error Page
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="error-page">
+                <h2 class="headline text-warning">404</h2>
+                <div class="error-content">
+                    <h3>
+                        <i class="fas fa-exclamation-triangle text-warning"></i>
+                        Oops! Page not found.
+                    </h3>
+                    <p>
+                        We could not find the page you were looking for.
+                        Meanwhile, you may
+                        <a href="../../index.html">return to dashboard</a>
+                        or try using the search form.
+                    </p>
+                    <form class="search-form">
+                        <div class="input-group">
+                            <input type="text" name="search" class="form-control" placeholder="Search">
+                            <div class="input-group-append">
+                                <button type="submit" name="submit" class="btn btn-warning">
+                                    <i class="fas fa-search"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.input-group -->
+                    </form>
+                </div>
+                <!-- /.error-content -->
+            </div>
+            <!-- /.error-page -->
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/page-500.html b/tests/jinja_adminlte/page-500.html
new file mode 100644
index 0000000..f4cf8d7
--- /dev/null
+++ b/tests/jinja_adminlte/page-500.html
@@ -0,0 +1,83 @@
+{% extends "layouts/base.html" %}
+{% block title %}Error 500 {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>500 Error Page</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                500 Error Page
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <div class="error-page">
+                <h2 class="headline text-danger">500</h2>
+                <div class="error-content">
+                    <h3>
+                        <i class="fas fa-exclamation-triangle text-danger"></i>
+                        Oops! Something went wrong.
+                    </h3>
+                    <p>
+                        We will work on fixing that right away.
+                        Meanwhile, you may
+                        <a href="../../index.html">return to dashboard</a>
+                        or try using the search form.
+                    </p>
+                    <form class="search-form">
+                        <div class="input-group">
+                            <input type="text" name="search" class="form-control" placeholder="Search">
+                            <div class="input-group-append">
+                                <button type="submit" name="submit" class="btn btn-danger">
+                                    <i class="fas fa-search"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.input-group -->
+                    </form>
+                </div>
+            </div>
+            <!-- /.error-page -->
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/page-blank.html b/tests/jinja_adminlte/page-blank.html
new file mode 100644
index 0000000..ee51f7c
--- /dev/null
+++ b/tests/jinja_adminlte/page-blank.html
@@ -0,0 +1,83 @@
+{% extends "layouts/base.html" %}
+{% block title %}Blank Page {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    sidebar-mini pace-primary
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- pace-progress -->
+    <link rel="stylesheet" href="/static/assets/plugins/pace-progress/themes/black/pace-theme-flat-top.css">
+    <!-- adminlte-->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+            <div class="container-fluid">
+                <div class="row mb-2">
+                    <div class="col-sm-6">
+                        <h1>Blank Page</h1>
+                    </div>
+                    <div class="col-sm-6">
+                        <ol class="breadcrumb float-sm-right">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active">
+                                Start
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+            <!-- /.container-fluid -->
+        </section>
+        <!-- Main content -->
+        <section class="content">
+            <!-- Default box -->
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">Title</h3>
+                    <div class="card-tools">
+                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
+                            <i class="fas fa-minus"></i>
+                        </button>
+                        <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="card-body">
+                    Start creating your amazing application!
+                </div>
+                <!-- /.card-body -->
+                <div class="card-footer">
+                    Footer
+                </div>
+                <!-- /.card-footer-->
+            </div>
+            <!-- /.card -->
+        </section>
+        <!-- /.content -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <!-- pace-progress -->
+    <script src="/static/assets/plugins/pace-progress/pace.min.js"></script>
+    <!-- AdminLTE App -->
+    <script src="/static/assets/js/adminlte.min.js"></script>
+    <!-- AdminLTE for demo purposes -->
+    <script src="/static/assets/js/demo.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/register.html b/tests/jinja_adminlte/register.html
new file mode 100644
index 0000000..d6f6c79
--- /dev/null
+++ b/tests/jinja_adminlte/register.html
@@ -0,0 +1,114 @@
+{% extends "layouts/base-fullscreen.html" %}
+{% block title %}Register {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}
+    register-page
+{% endblock body_class %}
+<!-- Specific Page CSS goes HERE -->
+{% block stylesheets %}
+    <!-- Google Font: Source Sans Pro -->
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+    <!-- icheck bootstrap -->
+    <link rel="stylesheet" href="/static/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+{% endblock stylesheets %}
+{% block content %}
+    <div class="register-box">
+        <div class="register-logo">
+            <a href="/">
+                <b>
+                Admin
+                </b>
+                LTE
+            </a>
+        </div>
+        <div class="card">
+            <div class="card-body register-card-body">
+                <p class="login-box-msg">
+                    Register a new membership
+                </p>
+                <form action="../../index.html" method="post">
+                    <div class="input-group mb-3">
+                        <input type="text" class="form-control" placeholder="Full name">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-user"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="email" class="form-control" placeholder="Email">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-envelope"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="password" class="form-control" placeholder="Password">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-lock"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <input type="password" class="form-control" placeholder="Retype password">
+                        <div class="input-group-append">
+                            <div class="input-group-text">
+                                <span class="fas fa-lock"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-8">
+                            <div class="icheck-primary">
+                                <input type="checkbox" id="agreeTerms" name="terms" value="agree">
+                                <label for="agreeTerms">
+                                    I agree to the
+                                    <a href="#">terms</a>
+                                </label>
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-4">
+                            <button type="submit" class="btn btn-primary btn-block">
+                                Register
+                            </button>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                </form>
+                <div class="social-auth-links text-center">
+                    <p>
+                        - OR -
+                    </p>
+                    <a href="#" class="btn btn-block btn-primary">
+                        <i class="fab fa-facebook mr-2"></i>
+                        Sign up using Facebook
+                    </a>
+                    <a href="#" class="btn btn-block btn-danger">
+                        <i class="fab fa-google-plus mr-2"></i>
+                        Sign up using Google+
+                    </a>
+                </div>
+                <a href="/examples-login.html" class="text-center">
+                    I already have a membership
+                </a>
+            </div>
+            <!-- /.form-box -->
+        </div>
+        <!-- /.card -->
+    </div>
+{% endblock content %}
+<!-- Specific Page JS goes HERE -->
+{% block javascripts %}
+    <!-- jQuery -->
+    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+    <!-- Bootstrap 4 -->
+    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+{% endblock javascripts %}
diff --git a/tests/jinja_adminlte/tables-data.html b/tests/jinja_adminlte/tables-data.html
new file mode 100644
index 0000000..a0d3dbe
--- /dev/null
+++ b/tests/jinja_adminlte/tables-data.html
@@ -0,0 +1,2128 @@
+{% extends "layouts/base.html" %}
+{% block title %}Tables Data {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- DataTables -->
+        <link rel="stylesheet" href="/static/assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
+        <link rel="stylesheet" href="/static/assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>DataTables</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    DataTables
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">DataTable with minimal features & hover style</h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <table id="example2" class="table table-bordered table-hover">
+                                        <thead>
+                                            <tr>
+                                                <th>Rendering engine</th>
+                                                <th>Browser</th>
+                                                <th>Platform(s)</th>
+                                                <th>Engine version</th>
+                                                <th>CSS grade</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>Trident</td>
+                                                <td>
+                                                    Internet
+                                                    Explorer 4.0
+                                                </td>
+                                                <td>Win 95+</td>
+                                                <td>4</td>
+                                                <td>X</td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Trident
+                                                </td>
+                                                <td>
+                                                    Internet
+                                                    Explorer 5.0
+                                                </td>
+                                                <td>
+                                                    Win 95+
+                                                </td>
+                                                <td>
+                                                    5
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Trident
+                                                </td>
+                                                <td>
+                                                    Internet
+                                                    Explorer 5.5
+                                                </td>
+                                                <td>
+                                                    Win 95+
+                                                </td>
+                                                <td>
+                                                    5.5
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Trident
+                                                </td>
+                                                <td>
+                                                    Internet
+                                                    Explorer 6
+                                                </td>
+                                                <td>
+                                                    Win 98+
+                                                </td>
+                                                <td>
+                                                    6
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Trident
+                                                </td>
+                                                <td>
+                                                    Internet Explorer 7
+                                                </td>
+                                                <td>
+                                                    Win XP SP2+
+                                                </td>
+                                                <td>
+                                                    7
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Trident
+                                                </td>
+                                                <td>
+                                                    AOL browser (AOL desktop)
+                                                </td>
+                                                <td>
+                                                    Win XP
+                                                </td>
+                                                <td>
+                                                    6
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Firefox 1.0
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.7
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Firefox 1.5
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Firefox 2.0
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Firefox 3.0
+                                                </td>
+                                                <td>
+                                                    Win 2k+ / OSX.3+
+                                                </td>
+                                                <td>
+                                                    1.9
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Camino 1.0
+                                                </td>
+                                                <td>
+                                                    OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Camino 1.5
+                                                </td>
+                                                <td>
+                                                    OSX.3+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Netscape 7.2
+                                                </td>
+                                                <td>
+                                                    Win 95+ / Mac OS 8.6-9.2
+                                                </td>
+                                                <td>
+                                                    1.7
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Netscape Browser 8
+                                                </td>
+                                                <td>
+                                                    Win 98SE+
+                                                </td>
+                                                <td>
+                                                    1.7
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Netscape Navigator 9
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.0
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.1
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.1
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.2
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.2
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.3
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.3
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.4
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.4
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.5
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.5
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.6
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.6
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.7
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.7
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.8
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Seamonkey 1.1
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Epiphany 2.20
+                                                </td>
+                                                <td>
+                                                    Gnome
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    Safari 1.2
+                                                </td>
+                                                <td>
+                                                    OSX.3
+                                                </td>
+                                                <td>
+                                                    125.5
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    Safari 1.3
+                                                </td>
+                                                <td>
+                                                    OSX.3
+                                                </td>
+                                                <td>
+                                                    312.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    Safari 2.0
+                                                </td>
+                                                <td>
+                                                    OSX.4+
+                                                </td>
+                                                <td>
+                                                    419.3
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    Safari 3.0
+                                                </td>
+                                                <td>
+                                                    OSX.4+
+                                                </td>
+                                                <td>
+                                                    522.1
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    OmniWeb 5.5
+                                                </td>
+                                                <td>
+                                                    OSX.4+
+                                                </td>
+                                                <td>
+                                                    420
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    iPod Touch / iPhone
+                                                </td>
+                                                <td>
+                                                    iPod
+                                                </td>
+                                                <td>
+                                                    420.1
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    S60
+                                                </td>
+                                                <td>
+                                                    S60
+                                                </td>
+                                                <td>
+                                                    413
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 7.0
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 7.5
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 8.0
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 8.5
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 9.0
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.3+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 9.2
+                                                </td>
+                                                <td>
+                                                    Win 88+ / OSX.3+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 9.5
+                                                </td>
+                                                <td>
+                                                    Win 88+ / OSX.3+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera for Wii
+                                                </td>
+                                                <td>
+                                                    Wii
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Nokia N800
+                                                </td>
+                                                <td>
+                                                    N800
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Nintendo DS browser
+                                                </td>
+                                                <td>
+                                                    Nintendo DS
+                                                </td>
+                                                <td>
+                                                    8.5
+                                                </td>
+                                                <td>
+                                                    C/A
+                                                    <sup>
+                                                    1
+                                                    </sup>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    KHTML
+                                                </td>
+                                                <td>
+                                                    Konqureror 3.1
+                                                </td>
+                                                <td>
+                                                    KDE 3.1
+                                                </td>
+                                                <td>
+                                                    3.1
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    KHTML
+                                                </td>
+                                                <td>
+                                                    Konqureror 3.3
+                                                </td>
+                                                <td>
+                                                    KDE 3.3
+                                                </td>
+                                                <td>
+                                                    3.3
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    KHTML
+                                                </td>
+                                                <td>
+                                                    Konqureror 3.5
+                                                </td>
+                                                <td>
+                                                    KDE 3.5
+                                                </td>
+                                                <td>
+                                                    3.5
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Tasman
+                                                </td>
+                                                <td>
+                                                    Internet Explorer 4.5
+                                                </td>
+                                                <td>
+                                                    Mac OS 8-9
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    X
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Tasman
+                                                </td>
+                                                <td>
+                                                    Internet Explorer 5.1
+                                                </td>
+                                                <td>
+                                                    Mac OS 7.6-9
+                                                </td>
+                                                <td>
+                                                    1
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Tasman
+                                                </td>
+                                                <td>
+                                                    Internet Explorer 5.2
+                                                </td>
+                                                <td>
+                                                    Mac OS 8-X
+                                                </td>
+                                                <td>
+                                                    1
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    NetFront 3.1
+                                                </td>
+                                                <td>
+                                                    Embedded devices
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    NetFront 3.4
+                                                </td>
+                                                <td>
+                                                    Embedded devices
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    Dillo 0.8
+                                                </td>
+                                                <td>
+                                                    Embedded devices
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    X
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    Links
+                                                </td>
+                                                <td>
+                                                    Text only
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    X
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    Lynx
+                                                </td>
+                                                <td>
+                                                    Text only
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    X
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    IE Mobile
+                                                </td>
+                                                <td>
+                                                    Windows Mobile 6
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    PSP browser
+                                                </td>
+                                                <td>
+                                                    PSP
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Other browsers
+                                                </td>
+                                                <td>
+                                                    All others
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    U
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                        <tfoot>
+                                        <tr>
+                                            <th>
+                                                Rendering engine
+                                            </th>
+                                            <th>
+                                                Browser
+                                            </th>
+                                            <th>
+                                                Platform(s)
+                                            </th>
+                                            <th>
+                                                Engine version
+                                            </th>
+                                            <th>
+                                                CSS grade
+                                            </th>
+                                        </tr>
+                                        </tfoot>
+                                    </table>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">DataTable with default features</h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <table id="example1" class="table table-bordered table-striped">
+                                        <thead>
+                                            <tr>
+                                                <th>
+                                                    Rendering engine
+                                                </th>
+                                                <th>
+                                                    Browser
+                                                </th>
+                                                <th>
+                                                    Platform(s)
+                                                </th>
+                                                <th>
+                                                    Engine version
+                                                </th>
+                                                <th>
+                                                    CSS grade
+                                                </th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    Trident
+                                                </td>
+                                                <td>
+                                                    Internet
+                                                    Explorer 4.0
+                                                </td>
+                                                <td>
+                                                    Win 95+
+                                                </td>
+                                                <td>
+                                                    4
+                                                </td>
+                                                <td>
+                                                    X
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Trident
+                                                </td>
+                                                <td>
+                                                    Internet
+                                                    Explorer 5.0
+                                                </td>
+                                                <td>
+                                                    Win 95+
+                                                </td>
+                                                <td>
+                                                    5
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Trident
+                                                </td>
+                                                <td>
+                                                    Internet
+                                                    Explorer 5.5
+                                                </td>
+                                                <td>
+                                                    Win 95+
+                                                </td>
+                                                <td>
+                                                    5.5
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Trident
+                                                </td>
+                                                <td>
+                                                    Internet
+                                                    Explorer 6
+                                                </td>
+                                                <td>
+                                                    Win 98+
+                                                </td>
+                                                <td>
+                                                    6
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Trident
+                                                </td>
+                                                <td>
+                                                    Internet Explorer 7
+                                                </td>
+                                                <td>
+                                                    Win XP SP2+
+                                                </td>
+                                                <td>
+                                                    7
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Trident
+                                                </td>
+                                                <td>
+                                                    AOL browser (AOL desktop)
+                                                </td>
+                                                <td>
+                                                    Win XP
+                                                </td>
+                                                <td>
+                                                    6
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Firefox 1.0
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.7
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Firefox 1.5
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Firefox 2.0
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Firefox 3.0
+                                                </td>
+                                                <td>
+                                                    Win 2k+ / OSX.3+
+                                                </td>
+                                                <td>
+                                                    1.9
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Camino 1.0
+                                                </td>
+                                                <td>
+                                                    OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Camino 1.5
+                                                </td>
+                                                <td>
+                                                    OSX.3+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Netscape 7.2
+                                                </td>
+                                                <td>
+                                                    Win 95+ / Mac OS 8.6-9.2
+                                                </td>
+                                                <td>
+                                                    1.7
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Netscape Browser 8
+                                                </td>
+                                                <td>
+                                                    Win 98SE+
+                                                </td>
+                                                <td>
+                                                    1.7
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Netscape Navigator 9
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.0
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.1
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.1
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.2
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.2
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.3
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.3
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.4
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.4
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.5
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.5
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.6
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.6
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.7
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.7
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Mozilla 1.8
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Seamonkey 1.1
+                                                </td>
+                                                <td>
+                                                    Win 98+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Gecko
+                                                </td>
+                                                <td>
+                                                    Epiphany 2.20
+                                                </td>
+                                                <td>
+                                                    Gnome
+                                                </td>
+                                                <td>
+                                                    1.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    Safari 1.2
+                                                </td>
+                                                <td>
+                                                    OSX.3
+                                                </td>
+                                                <td>
+                                                    125.5
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    Safari 1.3
+                                                </td>
+                                                <td>
+                                                    OSX.3
+                                                </td>
+                                                <td>
+                                                    312.8
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    Safari 2.0
+                                                </td>
+                                                <td>
+                                                    OSX.4+
+                                                </td>
+                                                <td>
+                                                    419.3
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    Safari 3.0
+                                                </td>
+                                                <td>
+                                                    OSX.4+
+                                                </td>
+                                                <td>
+                                                    522.1
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    OmniWeb 5.5
+                                                </td>
+                                                <td>
+                                                    OSX.4+
+                                                </td>
+                                                <td>
+                                                    420
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    iPod Touch / iPhone
+                                                </td>
+                                                <td>
+                                                    iPod
+                                                </td>
+                                                <td>
+                                                    420.1
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Webkit
+                                                </td>
+                                                <td>
+                                                    S60
+                                                </td>
+                                                <td>
+                                                    S60
+                                                </td>
+                                                <td>
+                                                    413
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 7.0
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.1+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 7.5
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 8.0
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 8.5
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.2+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 9.0
+                                                </td>
+                                                <td>
+                                                    Win 95+ / OSX.3+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 9.2
+                                                </td>
+                                                <td>
+                                                    Win 88+ / OSX.3+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera 9.5
+                                                </td>
+                                                <td>
+                                                    Win 88+ / OSX.3+
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Opera for Wii
+                                                </td>
+                                                <td>
+                                                    Wii
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Nokia N800
+                                                </td>
+                                                <td>
+                                                    N800
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Presto
+                                                </td>
+                                                <td>
+                                                    Nintendo DS browser
+                                                </td>
+                                                <td>
+                                                    Nintendo DS
+                                                </td>
+                                                <td>
+                                                    8.5
+                                                </td>
+                                                <td>
+                                                    C/A
+                                                    <sup>
+                                                    1
+                                                    </sup>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    KHTML
+                                                </td>
+                                                <td>
+                                                    Konqureror 3.1
+                                                </td>
+                                                <td>
+                                                    KDE 3.1
+                                                </td>
+                                                <td>
+                                                    3.1
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    KHTML
+                                                </td>
+                                                <td>
+                                                    Konqureror 3.3
+                                                </td>
+                                                <td>
+                                                    KDE 3.3
+                                                </td>
+                                                <td>
+                                                    3.3
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    KHTML
+                                                </td>
+                                                <td>
+                                                    Konqureror 3.5
+                                                </td>
+                                                <td>
+                                                    KDE 3.5
+                                                </td>
+                                                <td>
+                                                    3.5
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Tasman
+                                                </td>
+                                                <td>
+                                                    Internet Explorer 4.5
+                                                </td>
+                                                <td>
+                                                    Mac OS 8-9
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    X
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Tasman
+                                                </td>
+                                                <td>
+                                                    Internet Explorer 5.1
+                                                </td>
+                                                <td>
+                                                    Mac OS 7.6-9
+                                                </td>
+                                                <td>
+                                                    1
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Tasman
+                                                </td>
+                                                <td>
+                                                    Internet Explorer 5.2
+                                                </td>
+                                                <td>
+                                                    Mac OS 8-X
+                                                </td>
+                                                <td>
+                                                    1
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    NetFront 3.1
+                                                </td>
+                                                <td>
+                                                    Embedded devices
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    NetFront 3.4
+                                                </td>
+                                                <td>
+                                                    Embedded devices
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    A
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    Dillo 0.8
+                                                </td>
+                                                <td>
+                                                    Embedded devices
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    X
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    Links
+                                                </td>
+                                                <td>
+                                                    Text only
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    X
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    Lynx
+                                                </td>
+                                                <td>
+                                                    Text only
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    X
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    IE Mobile
+                                                </td>
+                                                <td>
+                                                    Windows Mobile 6
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Misc
+                                                </td>
+                                                <td>
+                                                    PSP browser
+                                                </td>
+                                                <td>
+                                                    PSP
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    C
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    Other browsers
+                                                </td>
+                                                <td>
+                                                    All others
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    -
+                                                </td>
+                                                <td>
+                                                    U
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                        <tfoot>
+                                        <tr>
+                                            <th>
+                                                Rendering engine
+                                            </th>
+                                            <th>
+                                                Browser
+                                            </th>
+                                            <th>
+                                                Platform(s)
+                                            </th>
+                                            <th>
+                                                Engine version
+                                            </th>
+                                            <th>
+                                                CSS grade
+                                            </th>
+                                        </tr>
+                                        </tfoot>
+                                    </table>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- /.content -->
+        </div>
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap 4 -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <!-- DataTables -->
+        <script src="/static/assets/plugins/datatables/jquery.dataTables.min.js"></script>
+        <script src="/static/assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
+        <script src="/static/assets/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
+        <script src="/static/assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
+        <!-- AdminLTE App -->
+        <script src="/static/assets/js/adminlte.min.js"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="/static/assets/js/demo.js"></script>
+        <!-- page script -->
+        <script>
+    $(function () {
+      $("#example1").DataTable({
+        "responsive": true,
+        "autoWidth": false,
+      });
+      $('#example2').DataTable({
+        "paging": true,
+        "lengthChange": false,
+        "searching": false,
+        "ordering": true,
+        "info": true,
+        "autoWidth": false,
+        "responsive": true,
+      });
+    });
+        </script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/tables-jsgrid.html b/tests/jinja_adminlte/tables-jsgrid.html
new file mode 100644
index 0000000..b4721e2
--- /dev/null
+++ b/tests/jinja_adminlte/tables-jsgrid.html
@@ -0,0 +1,94 @@
+{% extends "layouts/base.html" %}
+{% block title %}Tables JSGrid {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- jsGrid -->
+        <link rel="stylesheet" href="/static/assets/plugins/jsgrid/jsgrid.min.css">
+        <link rel="stylesheet" href="/static/assets/plugins/jsgrid/jsgrid-theme.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>jsGrid</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    jsGrid
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="card">
+                    <div class="card-header">
+                        <h3 class="card-title">jsGrid</h3>
+                    </div>
+                    <!-- /.card-header -->
+                    <div class="card-body">
+                        <div id="jsGrid1"></div>
+                    </div>
+                    <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+            </section>
+            <!-- /.content -->
+        </div>
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap 4 -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <!-- jsGrid -->
+        <script src="/static/assets/plugins/jsgrid/demos/db.js"></script>
+        <script src="/static/assets/plugins/jsgrid/jsgrid.min.js"></script>
+        <!-- AdminLTE App -->
+        <script src="/static/assets/js/adminlte.min.js"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="/static/assets/js/demo.js"></script>
+        <!-- page script -->
+        <script>
+    $(function () {
+      $("#jsGrid1").jsGrid({
+          height: "100%",
+          width: "100%",
+
+          sorting: true,
+          paging: true,
+
+          data: db.clients,
+
+          fields: [
+              { name: "Name", type: "text", width: 150 },
+              { name: "Age", type: "number", width: 50 },
+              { name: "Address", type: "text", width: 200 },
+              { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" },
+              { name: "Married", type: "checkbox", title: "Is Married" }
+          ]
+      });
+    });
+        </script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/tables-simple.html b/tests/jinja_adminlte/tables-simple.html
new file mode 100644
index 0000000..86aa92c
--- /dev/null
+++ b/tests/jinja_adminlte/tables-simple.html
@@ -0,0 +1,1075 @@
+{% extends "layouts/base.html" %}
+{% block title %}Tables {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>Simple Tables</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Simple Tables
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">Bordered Table</h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <table class="table table-bordered">
+                                        <thead>
+                                            <tr>
+                                                <th style="width: 10px">#</th>
+                                                <th>Task</th>
+                                                <th>Progress</th>
+                                                <th style="width: 40px">Label</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>1.</td>
+                                                <td>Update software</td>
+                                                <td>
+                                                    <div class="progress progress-xs">
+                                                        <div class="progress-bar progress-bar-danger"
+                                                             style="width: 55%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-danger">55%</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>2.</td>
+                                                <td>Clean database</td>
+                                                <td>
+                                                    <div class="progress progress-xs">
+                                                        <div class="progress-bar bg-warning" style="width: 70%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-warning">70%</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>3.</td>
+                                                <td>Cron job running</td>
+                                                <td>
+                                                    <div class="progress progress-xs progress-striped active">
+                                                        <div class="progress-bar bg-primary" style="width: 30%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-primary">30%</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>4.</td>
+                                                <td>
+                                                    Fix and squish bugs
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs progress-striped active">
+                                                        <div class="progress-bar bg-success" style="width: 90%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-success">90%</span>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <!-- /.card-body -->
+                                <div class="card-footer clearfix">
+                                    <ul class="pagination pagination-sm m-0 float-right">
+                                        <li class="page-item">
+                                            <a class="page-link" href="#">&laquo;</a>
+                                        </li>
+                                        <li class="page-item">
+                                            <a class="page-link" href="#">1</a>
+                                        </li>
+                                        <li class="page-item">
+                                            <a class="page-link" href="#">
+                                                2
+                                            </a>
+                                        </li>
+                                        <li class="page-item">
+                                            <a class="page-link" href="#">
+                                                3
+                                            </a>
+                                        </li>
+                                        <li class="page-item">
+                                            <a class="page-link" href="#">
+                                                &raquo;
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <!-- /.card -->
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Condensed Full Width Table
+                                    </h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body p-0">
+                                    <table class="table table-sm">
+                                        <thead>
+                                            <tr>
+                                                <th style="width: 10px">
+                                                    #
+                                                </th>
+                                                <th>
+                                                    Task
+                                                </th>
+                                                <th>
+                                                    Progress
+                                                </th>
+                                                <th style="width: 40px">
+                                                    Label
+                                                </th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    1.
+                                                </td>
+                                                <td>
+                                                    Update software
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs">
+                                                        <div class="progress-bar progress-bar-danger"
+                                                             style="width: 55%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-danger">
+                                                        55%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    2.
+                                                </td>
+                                                <td>
+                                                    Clean database
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs">
+                                                        <div class="progress-bar bg-warning" style="width: 70%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-warning">
+                                                        70%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    3.
+                                                </td>
+                                                <td>
+                                                    Cron job running
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs progress-striped active">
+                                                        <div class="progress-bar bg-primary" style="width: 30%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-primary">
+                                                        30%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    4.
+                                                </td>
+                                                <td>
+                                                    Fix and squish bugs
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs progress-striped active">
+                                                        <div class="progress-bar bg-success" style="width: 90%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-success">
+                                                        90%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-6">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Simple Full Width Table
+                                    </h3>
+                                    <div class="card-tools">
+                                        <ul class="pagination pagination-sm float-right">
+                                            <li class="page-item">
+                                                <a class="page-link" href="#">
+                                                    &laquo;
+                                                </a>
+                                            </li>
+                                            <li class="page-item">
+                                                <a class="page-link" href="#">
+                                                    1
+                                                </a>
+                                            </li>
+                                            <li class="page-item">
+                                                <a class="page-link" href="#">
+                                                    2
+                                                </a>
+                                            </li>
+                                            <li class="page-item">
+                                                <a class="page-link" href="#">
+                                                    3
+                                                </a>
+                                            </li>
+                                            <li class="page-item">
+                                                <a class="page-link" href="#">
+                                                    &raquo;
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body p-0">
+                                    <table class="table">
+                                        <thead>
+                                            <tr>
+                                                <th style="width: 10px">
+                                                    #
+                                                </th>
+                                                <th>
+                                                    Task
+                                                </th>
+                                                <th>
+                                                    Progress
+                                                </th>
+                                                <th style="width: 40px">
+                                                    Label
+                                                </th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    1.
+                                                </td>
+                                                <td>
+                                                    Update software
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs">
+                                                        <div class="progress-bar progress-bar-danger"
+                                                             style="width: 55%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-danger">
+                                                        55%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    2.
+                                                </td>
+                                                <td>
+                                                    Clean database
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs">
+                                                        <div class="progress-bar bg-warning" style="width: 70%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-warning">
+                                                        70%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    3.
+                                                </td>
+                                                <td>
+                                                    Cron job running
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs progress-striped active">
+                                                        <div class="progress-bar bg-primary" style="width: 30%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-primary">
+                                                        30%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    4.
+                                                </td>
+                                                <td>
+                                                    Fix and squish bugs
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs progress-striped active">
+                                                        <div class="progress-bar bg-success" style="width: 90%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-success">
+                                                        90%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Striped Full Width Table
+                                    </h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body p-0">
+                                    <table class="table table-striped">
+                                        <thead>
+                                            <tr>
+                                                <th style="width: 10px">
+                                                    #
+                                                </th>
+                                                <th>
+                                                    Task
+                                                </th>
+                                                <th>
+                                                    Progress
+                                                </th>
+                                                <th style="width: 40px">
+                                                    Label
+                                                </th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    1.
+                                                </td>
+                                                <td>
+                                                    Update software
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs">
+                                                        <div class="progress-bar progress-bar-danger"
+                                                             style="width: 55%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-danger">
+                                                        55%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    2.
+                                                </td>
+                                                <td>
+                                                    Clean database
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs">
+                                                        <div class="progress-bar bg-warning" style="width: 70%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-warning">
+                                                        70%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    3.
+                                                </td>
+                                                <td>
+                                                    Cron job running
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs progress-striped active">
+                                                        <div class="progress-bar bg-primary" style="width: 30%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-primary">
+                                                        30%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    4.
+                                                </td>
+                                                <td>
+                                                    Fix and squish bugs
+                                                </td>
+                                                <td>
+                                                    <div class="progress progress-xs progress-striped active">
+                                                        <div class="progress-bar bg-success" style="width: 90%"></div>
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <span class="badge bg-success">
+                                                        90%
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Responsive Hover Table
+                                    </h3>
+                                    <div class="card-tools">
+                                        <div class="input-group input-group-sm" style="width: 150px;">
+                                            <input type="text"
+                                                   name="table_search"
+                                                   class="form-control float-right"
+                                                   placeholder="Search">
+                                            <div class="input-group-append">
+                                                <button type="submit" class="btn btn-default">
+                                                    <i class="fas fa-search"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body table-responsive p-0">
+                                    <table class="table table-hover text-nowrap">
+                                        <thead>
+                                            <tr>
+                                                <th>
+                                                    ID
+                                                </th>
+                                                <th>
+                                                    User
+                                                </th>
+                                                <th>
+                                                    Date
+                                                </th>
+                                                <th>
+                                                    Status
+                                                </th>
+                                                <th>
+                                                    Reason
+                                                </th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    183
+                                                </td>
+                                                <td>
+                                                    John Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-success">
+                                                        Approved
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    219
+                                                </td>
+                                                <td>
+                                                    Alexander Pierce
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-warning">
+                                                        Pending
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    657
+                                                </td>
+                                                <td>
+                                                    Bob Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-primary">
+                                                        Approved
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    175
+                                                </td>
+                                                <td>
+                                                    Mike Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-danger">
+                                                        Denied
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                    </div>
+                    <!-- /.row -->
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Fixed Header Table
+                                    </h3>
+                                    <div class="card-tools">
+                                        <div class="input-group input-group-sm" style="width: 150px;">
+                                            <input type="text"
+                                                   name="table_search"
+                                                   class="form-control float-right"
+                                                   placeholder="Search">
+                                            <div class="input-group-append">
+                                                <button type="submit" class="btn btn-default">
+                                                    <i class="fas fa-search"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body table-responsive p-0" style="height: 300px;">
+                                    <table class="table table-head-fixed text-nowrap">
+                                        <thead>
+                                            <tr>
+                                                <th>
+                                                    ID
+                                                </th>
+                                                <th>
+                                                    User
+                                                </th>
+                                                <th>
+                                                    Date
+                                                </th>
+                                                <th>
+                                                    Status
+                                                </th>
+                                                <th>
+                                                    Reason
+                                                </th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    183
+                                                </td>
+                                                <td>
+                                                    John Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-success">
+                                                        Approved
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    219
+                                                </td>
+                                                <td>
+                                                    Alexander Pierce
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-warning">
+                                                        Pending
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    657
+                                                </td>
+                                                <td>
+                                                    Bob Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-primary">
+                                                        Approved
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    175
+                                                </td>
+                                                <td>
+                                                    Mike Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-danger">
+                                                        Denied
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    134
+                                                </td>
+                                                <td>
+                                                    Jim Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-success">
+                                                        Approved
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    494
+                                                </td>
+                                                <td>
+                                                    Victoria Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-warning">
+                                                        Pending
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    832
+                                                </td>
+                                                <td>
+                                                    Michael Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-primary">
+                                                        Approved
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    982
+                                                </td>
+                                                <td>
+                                                    Rocky Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    <span class="tag tag-danger">
+                                                        Denied
+                                                    </span>
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                    </div>
+                    <!-- /.row -->
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Expandable Table
+                                    </h3>
+                                </div>
+                                <!-- ./card-header -->
+                                <div class="card-body">
+                                    <table class="table table-bordered table-hover">
+                                        <thead>
+                                            <tr>
+                                                <th>
+                                                    #
+                                                </th>
+                                                <th>
+                                                    User
+                                                </th>
+                                                <th>
+                                                    Date
+                                                </th>
+                                                <th>
+                                                    Status
+                                                </th>
+                                                <th>
+                                                    Reason
+                                                </th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr data-widget="expandable-table" aria-expanded="false">
+                                                <td>
+                                                    183
+                                                </td>
+                                                <td>
+                                                    John Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    Approved
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr class="expandable-body">
+                                                <td colspan="5">
+                                                    <p>
+                                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                            <tr data-widget="expandable-table" aria-expanded="true">
+                                                <td>
+                                                    219
+                                                </td>
+                                                <td>
+                                                    Alexander Pierce
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    Pending
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr class="expandable-body">
+                                                <td colspan="5">
+                                                    <p>
+                                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                            <tr data-widget="expandable-table" aria-expanded="true">
+                                                <td>
+                                                    657
+                                                </td>
+                                                <td>
+                                                    Alexander Pierce
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    Approved
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr class="expandable-body">
+                                                <td colspan="5">
+                                                    <p>
+                                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                            <tr data-widget="expandable-table" aria-expanded="false">
+                                                <td>
+                                                    175
+                                                </td>
+                                                <td>
+                                                    Mike Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    Denied
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr class="expandable-body">
+                                                <td colspan="5">
+                                                    <p>
+                                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                            <tr data-widget="expandable-table" aria-expanded="false">
+                                                <td>
+                                                    134
+                                                </td>
+                                                <td>
+                                                    Jim Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    Approved
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr class="expandable-body">
+                                                <td colspan="5">
+                                                    <p>
+                                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                            <tr data-widget="expandable-table" aria-expanded="false">
+                                                <td>
+                                                    494
+                                                </td>
+                                                <td>
+                                                    Victoria Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    Pending
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr class="expandable-body">
+                                                <td colspan="5">
+                                                    <p>
+                                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                            <tr data-widget="expandable-table" aria-expanded="false">
+                                                <td>
+                                                    832
+                                                </td>
+                                                <td>
+                                                    Michael Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    Approved
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr class="expandable-body">
+                                                <td colspan="5">
+                                                    <p>
+                                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                            <tr data-widget="expandable-table" aria-expanded="false">
+                                                <td>
+                                                    982
+                                                </td>
+                                                <td>
+                                                    Rocky Doe
+                                                </td>
+                                                <td>
+                                                    11-7-2014
+                                                </td>
+                                                <td>
+                                                    Denied
+                                                </td>
+                                                <td>
+                                                    Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
+                                                </td>
+                                            </tr>
+                                            <tr class="expandable-body">
+                                                <td colspan="5">
+                                                    <p>
+                                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                                                    </p>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                    </div>
+                    <!-- -->
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- /.content -->
+        </div>
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap 4 -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <!-- AdminLTE App -->
+        <script src="/static/assets/js/adminlte.min.js"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="/static/assets/js/demo.js"></script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/ui-buttons.html b/tests/jinja_adminlte/ui-buttons.html
new file mode 100644
index 0000000..25a4846
--- /dev/null
+++ b/tests/jinja_adminlte/ui-buttons.html
@@ -0,0 +1,2256 @@
+{% extends "layouts/base.html" %}
+{% block title %}Ui Buttons {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>Buttons</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Buttons
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card card-primary card-outline">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <i class="fas fa-edit"></i>
+                                        Buttons
+                                    </h3>
+                                </div>
+                                <div class="card-body pad table-responsive">
+                                    <p>
+                                        Various types of buttons. Using the base class
+                                        <code>
+                                        .btn
+                                        </code>
+                                    </p>
+                                    <table class="table table-bordered text-center">
+                                        <tr>
+                                            <th>Normal</th>
+                                            <th>
+                                                Large
+                                                <code>
+                                                .btn-lg
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Small
+                                                <code>
+                                                .btn-sm
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Extra Small
+                                                <code>
+                                                .btn-xs
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Flat
+                                                <code>
+                                                .btn-flat
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Disabled
+                                                <code>
+                                                .disabled
+                                                </code>
+                                            </th>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-default">
+                                                    Default
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-default btn-lg">
+                                                    Default
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-default btn-sm">
+                                                    Default
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-default btn-xs">
+                                                    Default
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-default btn-flat">
+                                                    Default
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-default disabled">
+                                                    Default
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-primary">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-primary btn-lg">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-primary btn-sm">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-primary btn-xs">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-primary btn-flat">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-primary disabled">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-secondary">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-secondary btn-lg">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-secondary btn-sm">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-secondary btn-xs">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-secondary btn-flat">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-secondary disabled">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-success">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-success btn-lg">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-success btn-sm">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-success btn-xs">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-success btn-flat">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-success disabled">
+                                                    Success
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-info">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-info btn-lg">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-info btn-sm">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-info btn-xs">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-info btn-flat">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-info disabled">
+                                                    Info
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-danger">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-danger btn-lg">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-danger btn-sm">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-danger btn-xs">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-danger btn-flat">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-danger disabled">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-warning">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-warning btn-lg">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-warning btn-sm">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-warning btn-xs">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-warning btn-flat">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-warning disabled">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- ./row -->
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card card-primary card-outline">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <i class="fas fa-edit"></i>
+                                        Outline Buttons
+                                    </h3>
+                                </div>
+                                <div class="card-body pad table-responsive">
+                                    <p>
+                                        Various types of buttons. Using the base class
+                                        <code>
+                                        .btn
+                                        </code>
+                                    </p>
+                                    <table class="table table-bordered text-center">
+                                        <tr>
+                                            <th>Normal</th>
+                                            <th>
+                                                Large
+                                                <code>
+                                                .btn-lg
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Small
+                                                <code>
+                                                .btn-sm
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Extra Small
+                                                <code>
+                                                .btn-xs
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Flat
+                                                <code>
+                                                .btn-flat
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Disabled
+                                                <code>
+                                                .disabled
+                                                </code>
+                                            </th>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-primary">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-primary btn-lg">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-primary btn-sm">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-primary btn-xs">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-primary btn-flat">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-primary disabled">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-secondary">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-secondary btn-lg">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-secondary btn-sm">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-secondary btn-xs">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-secondary btn-flat">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-secondary disabled">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-success">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-success btn-lg">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-success btn-sm">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-success btn-xs">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-success btn-flat">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-success disabled">
+                                                    Success
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-info">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-info btn-lg">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-info btn-sm">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-info btn-xs">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-info btn-flat">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-info disabled">
+                                                    Info
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-danger">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-danger btn-lg">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-danger btn-sm">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-danger btn-xs">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-danger btn-flat">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-danger disabled">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-warning">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-warning btn-lg">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-warning btn-sm">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block btn-outline-warning btn-xs">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-warning btn-flat">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block btn-outline-warning disabled">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- ./row -->
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card card-primary card-outline">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <i class="fas fa-edit"></i>
+                                        Gradient Buttons (bg-gradient-*)
+                                    </h3>
+                                </div>
+                                <div class="card-body pad table-responsive">
+                                    <p>
+                                        Various types of buttons. Using the base class
+                                        <code>
+                                        .btn
+                                        </code>
+                                    </p>
+                                    <table class="table table-bordered text-center">
+                                        <tr>
+                                            <th>Normal</th>
+                                            <th>
+                                                Large
+                                                <code>
+                                                .btn-lg
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Small
+                                                <code>
+                                                .btn-sm
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Extra Small
+                                                <code>
+                                                .btn-xs
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Flat
+                                                <code>
+                                                .btn-flat
+                                                </code>
+                                            </th>
+                                            <th>
+                                                Disabled
+                                                <code>
+                                                .disabled
+                                                </code>
+                                            </th>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-primary">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-primary btn-lg">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-primary btn-sm">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-primary btn-xs">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-primary btn-flat">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-primary disabled">
+                                                    Primary
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-secondary">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-secondary btn-lg">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-secondary btn-sm">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-secondary btn-xs">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-secondary btn-flat">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-secondary disabled">
+                                                    Secondary
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-success">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-success btn-lg">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-success btn-sm">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-success btn-xs">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-success btn-flat">
+                                                    Success
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-success disabled">
+                                                    Success
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-info">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-info btn-lg">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-info btn-sm">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-info btn-xs">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-info btn-flat">
+                                                    Info
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-info disabled">
+                                                    Info
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-danger">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-danger btn-lg">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-danger btn-sm">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-danger btn-xs">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-danger btn-flat">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-danger disabled">
+                                                    Danger
+                                                </button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-warning">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-warning btn-lg">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-warning btn-sm">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button" class="btn btn-block bg-gradient-warning btn-xs">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-warning btn-flat">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                            <td>
+                                                <button type="button"
+                                                        class="btn btn-block bg-gradient-warning disabled">
+                                                    Warning
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- ./row -->
+                    <div class="row">
+                        <div class="col-md-6">
+                            <!-- Block buttons -->
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">Block Buttons</h3>
+                                </div>
+                                <div class="card-body">
+                                    <button type="button" class="btn btn-default btn-block">
+                                        .btn-block
+                                    </button>
+                                    <button type="button" class="btn btn-default btn-block btn-flat">
+                                        .btn-block .btn-flat
+                                    </button>
+                                    <button type="button" class="btn btn-default btn-block btn-sm">
+                                        .btn-block .btn-sm
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- /.card -->
+                            <!-- Horizontal grouping -->
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">Horizontal Button Group</h3>
+                                </div>
+                                <div class="card-body table-responsive pad">
+                                    <p>
+                                        Horizontal button groups are easy to create with bootstrap. Just add your buttons
+                                        inside
+                                        <code>
+                                        &lt;div class="btn-group"&gt;&lt;/div&gt;
+                                        </code>
+                                    </p>
+                                    <table class="table table-bordered">
+                                        <tr>
+                                            <th>Button</th>
+                                            <th>Icons</th>
+                                            <th>Flat</th>
+                                            <th>Dropdown</th>
+                                        </tr>
+                                        <!-- Default -->
+                                        <tr>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-default">
+                                                        Left
+                                                    </button>
+                                                    <button type="button" class="btn btn-default">
+                                                        Middle
+                                                    </button>
+                                                    <button type="button" class="btn btn-default">
+                                                        Right
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-default">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-default">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-default">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-default btn-flat">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-default btn-flat">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-default btn-flat">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-default">
+                                                        1
+                                                    </button>
+                                                    <button type="button" class="btn btn-default">
+                                                        2
+                                                    </button>
+                                                    <div class="btn-group">
+                                                        <button type="button"
+                                                                class="btn btn-default dropdown-toggle dropdown-icon"
+                                                                data-toggle="dropdown"></button>
+                                                        <div class="dropdown-menu">
+                                                            <a class="dropdown-item" href="#">Dropdown link</a>
+                                                            <a class="dropdown-item" href="#">Dropdown link</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <!-- ./default -->
+                                        <!-- Info -->
+                                        <tr>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-info">
+                                                        Left
+                                                    </button>
+                                                    <button type="button" class="btn btn-info">
+                                                        Middle
+                                                    </button>
+                                                    <button type="button" class="btn btn-info">
+                                                        Right
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-info">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-info">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-info">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-info btn-flat">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-info btn-flat">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-info btn-flat">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-info">
+                                                        1
+                                                    </button>
+                                                    <button type="button" class="btn btn-info">
+                                                        2
+                                                    </button>
+                                                    <div class="btn-group">
+                                                        <button type="button"
+                                                                class="btn btn-info dropdown-toggle dropdown-icon"
+                                                                data-toggle="dropdown"></button>
+                                                        <div class="dropdown-menu">
+                                                            <a class="dropdown-item" href="#">Dropdown link</a>
+                                                            <a class="dropdown-item" href="#">Dropdown link</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <!-- /. info -->
+                                        <!-- /.danger -->
+                                        <tr>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-danger">
+                                                        Left
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger">
+                                                        Middle
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger">
+                                                        Right
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-danger">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-danger btn-flat">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger btn-flat">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger btn-flat">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-danger">
+                                                        1
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger">
+                                                        2
+                                                    </button>
+                                                    <div class="btn-group">
+                                                        <button type="button"
+                                                                class="btn btn-danger dropdown-toggle dropdown-icon"
+                                                                data-toggle="dropdown"></button>
+                                                        <div class="dropdown-menu">
+                                                            <a class="dropdown-item" href="#">Dropdown link</a>
+                                                            <a class="dropdown-item" href="#">Dropdown link</a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <!-- /.danger -->
+                                        <!-- warning -->
+                                        <tr>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-warning">
+                                                        Left
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning">
+                                                        Middle
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning">
+                                                        Right
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-warning">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-warning btn-flat">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning btn-flat">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning btn-flat">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-warning">
+                                                        1
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning">
+                                                        2
+                                                    </button>
+                                                    <div class="btn-group">
+                                                        <button type="button"
+                                                                class="btn btn-warning dropdown-toggle dropdown-icon"
+                                                                data-toggle="dropdown"></button>
+                                                        <div class="dropdown-menu">
+                                                            <a class="dropdown-item" href="#">Dropdown link</a>
+                                                            <a class="dropdown-item" href="#">
+                                                                Dropdown link
+                                                            </a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <!-- /.warning -->
+                                        <!-- success -->
+                                        <tr>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-success">
+                                                        Left
+                                                    </button>
+                                                    <button type="button" class="btn btn-success">
+                                                        Middle
+                                                    </button>
+                                                    <button type="button" class="btn btn-success">
+                                                        Right
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-success">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-success">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-success">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-success btn-flat">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-success btn-flat">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-success btn-flat">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group">
+                                                    <button type="button" class="btn btn-success">
+                                                        1
+                                                    </button>
+                                                    <button type="button" class="btn btn-success">
+                                                        2
+                                                    </button>
+                                                    <div class="btn-group">
+                                                        <button type="button"
+                                                                class="btn btn-success dropdown-toggle dropdown-icon"
+                                                                data-toggle="dropdown"></button>
+                                                        <div class="dropdown-menu">
+                                                            <a class="dropdown-item" href="#">
+                                                                Dropdown link
+                                                            </a>
+                                                            <a class="dropdown-item" href="#">
+                                                                Dropdown link
+                                                            </a>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <!-- /.success -->
+                                    </table>
+                                </div>
+                            </div>
+                            <!-- /.card -->
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Appended Buttons
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    <strong>With dropdown</strong>
+                                    <div class="input-group mb-3">
+                                        <div class="input-group-prepend">
+                                            <button type="button"
+                                                    class="btn btn-default dropdown-toggle"
+                                                    data-toggle="dropdown">
+                                                Action
+                                            </button>
+                                            <div class="dropdown-menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <!-- /btn-group -->
+                                        <input type="text" class="form-control">
+                                    </div>
+                                    <!-- /input-group -->
+                                    <strong>Normal</strong>
+                                    <div class="input-group mb-3">
+                                        <div class="input-group-prepend">
+                                            <button type="button" class="btn btn-danger">
+                                                Action
+                                            </button>
+                                        </div>
+                                        <!-- /btn-group -->
+                                        <input type="text" class="form-control">
+                                    </div>
+                                    <!-- /input-group -->
+                                    <strong>
+                                    Flat
+                                    </strong>
+                                    <div class="input-group mb-3">
+                                        <input type="text" class="form-control rounded-0">
+                                        <span class="input-group-append">
+                                            <button type="button" class="btn btn-info btn-flat">
+                                                Go!
+                                            </button>
+                                        </span>
+                                    </div>
+                                    <!-- /input-group -->
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                            <!-- split buttons box -->
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Split buttons
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    <!-- Split button -->
+                                    <p class="mb-1">
+                                        Normal split buttons:
+                                    </p>
+                                    <div class="margin">
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-default">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-default dropdown-toggle dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-info">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-info dropdown-toggle dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-danger">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-danger dropdown-toggle dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-success">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-success dropdown-toggle"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-warning">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-warning dropdown-toggle dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!-- flat split buttons -->
+                                    <p class="mt-3 mb-1">
+                                        Flat split buttons:
+                                    </p>
+                                    <div class="margin">
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-default btn-flat">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-default btn-flat dropdown-toggle dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-info btn-flat">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-info btn-flat dropdown-toggle dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-danger btn-flat">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-danger btn-flat dropdown-toggle dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-success btn-flat">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-success btn-flat dropdown-toggle dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-warning btn-flat">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-warning btn-flat dropdown-toggle dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!-- Split button -->
+                                    <p class="mt-3 mb-1">
+                                        Hoverable split buttons:
+                                    </p>
+                                    <div class="margin">
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-default">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-default dropdown-toggle dropdown-hover dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-info">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-info dropdown-toggle dropdown-hover dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-danger">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-danger dropdown-toggle dropdown-hover dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-success">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-success dropdown-toggle dropdown-hover dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                        <div class="btn-group">
+                                            <button type="button" class="btn btn-warning">
+                                                Action
+                                            </button>
+                                            <button type="button"
+                                                    class="btn btn-warning dropdown-toggle dropdown-hover dropdown-icon"
+                                                    data-toggle="dropdown">
+                                                <span class="sr-only">
+                                                    Toggle Dropdown
+                                                </span>
+                                            </button>
+                                            <div class="dropdown-menu" role="menu">
+                                                <a class="dropdown-item" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- end split buttons box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-6">
+                            <!-- Application buttons -->
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Application Buttons
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    <p>
+                                        Add the classes
+                                        <code>
+                                        .btn.btn-app
+                                        </code>
+                                        to an
+                                        <code>
+                                        &lt;a>
+                                        </code>
+                                        tag to achieve the following:
+                                    </p>
+                                    <a class="btn btn-app">
+                                        <i class="fas fa-edit"></i>
+                                        Edit
+                                    </a>
+                                    <a class="btn btn-app">
+                                        <i class="fas fa-play"></i>
+                                        Play
+                                    </a>
+                                    <a class="btn btn-app">
+                                        <i class="fas fa-pause"></i>
+                                        Pause
+                                    </a>
+                                    <a class="btn btn-app">
+                                        <i class="fas fa-save"></i>
+                                        Save
+                                    </a>
+                                    <a class="btn btn-app">
+                                        <span class="badge bg-warning">
+                                            3
+                                        </span>
+                                        <i class="fas fa-bullhorn"></i>
+                                        Notifications
+                                    </a>
+                                    <a class="btn btn-app">
+                                        <span class="badge bg-success">
+                                            300
+                                        </span>
+                                        <i class="fas fa-barcode"></i>
+                                        Products
+                                    </a>
+                                    <a class="btn btn-app">
+                                        <span class="badge bg-purple">
+                                            891
+                                        </span>
+                                        <i class="fas fa-users"></i>
+                                        Users
+                                    </a>
+                                    <a class="btn btn-app">
+                                        <span class="badge bg-teal">
+                                            67
+                                        </span>
+                                        <i class="fas fa-inbox"></i>
+                                        Orders
+                                    </a>
+                                    <a class="btn btn-app">
+                                        <span class="badge bg-info">
+                                            12
+                                        </span>
+                                        <i class="fas fa-envelope"></i>
+                                        Inbox
+                                    </a>
+                                    <a class="btn btn-app">
+                                        <span class="badge bg-danger">
+                                            531
+                                        </span>
+                                        <i class="fas fa-heart"></i>
+                                        Likes
+                                    </a>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                            <!-- Vertical grouping -->
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Vertical Button Group
+                                    </h3>
+                                </div>
+                                <div class="card-body table-responsive pad">
+                                    <p>
+                                        Vertical button groups are easy to create with bootstrap. Just add your buttons
+                                        inside
+                                        <code>
+                                        &lt;div class="btn-group-vertical"&gt;&lt;/div&gt;
+                                        </code>
+                                    </p>
+                                    <table class="table table-bordered">
+                                        <tr>
+                                            <th>
+                                                Button
+                                            </th>
+                                            <th>
+                                                Icons
+                                            </th>
+                                            <th>
+                                                Flat
+                                            </th>
+                                            <th>
+                                                Dropdown
+                                            </th>
+                                        </tr>
+                                        <!-- Default -->
+                                        <tr>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-default">
+                                                        Top
+                                                    </button>
+                                                    <button type="button" class="btn btn-default">
+                                                        Middle
+                                                    </button>
+                                                    <button type="button" class="btn btn-default">
+                                                        Bottom
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-default">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-default">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-default">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-default btn-flat">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-default btn-flat">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-default btn-flat">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-default">
+                                                        1
+                                                    </button>
+                                                    <button type="button" class="btn btn-default">
+                                                        2
+                                                    </button>
+                                                    <div class="btn-group">
+                                                        <button type="button"
+                                                                class="btn btn-default dropdown-toggle"
+                                                                data-toggle="dropdown"></button>
+                                                        <ul class="dropdown-menu">
+                                                            <li>
+                                                                <a class="dropdown-item" href="#">
+                                                                    Dropdown link
+                                                                </a>
+                                                            </li>
+                                                            <li>
+                                                                <a class="dropdown-item" href="#">
+                                                                    Dropdown link
+                                                                </a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <!-- ./default -->
+                                        <!-- Info -->
+                                        <tr>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-info">
+                                                        Top
+                                                    </button>
+                                                    <button type="button" class="btn btn-info">
+                                                        Middle
+                                                    </button>
+                                                    <button type="button" class="btn btn-info">
+                                                        Bottom
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-info">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-info">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-info">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-info btn-flat">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-info btn-flat">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-info btn-flat">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-info">
+                                                        1
+                                                    </button>
+                                                    <button type="button" class="btn btn-info">
+                                                        2
+                                                    </button>
+                                                    <div class="btn-group">
+                                                        <button type="button"
+                                                                class="btn btn-info dropdown-toggle"
+                                                                data-toggle="dropdown"></button>
+                                                        <ul class="dropdown-menu">
+                                                            <li>
+                                                                <a class="dropdown-item" href="#">
+                                                                    Dropdown link
+                                                                </a>
+                                                            </li>
+                                                            <li>
+                                                                <a class="dropdown-item" href="#">
+                                                                    Dropdown link
+                                                                </a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <!-- /. info -->
+                                        <!-- /.danger -->
+                                        <tr>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-danger">
+                                                        Top
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger">
+                                                        Middle
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger">
+                                                        Bottom
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-danger">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-danger btn-flat">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger btn-flat">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger btn-flat">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-danger">
+                                                        1
+                                                    </button>
+                                                    <button type="button" class="btn btn-danger">
+                                                        2
+                                                    </button>
+                                                    <div class="btn-group">
+                                                        <button type="button"
+                                                                class="btn btn-danger dropdown-toggle"
+                                                                data-toggle="dropdown"></button>
+                                                        <ul class="dropdown-menu">
+                                                            <li>
+                                                                <a class="dropdown-item" href="#">
+                                                                    Dropdown link
+                                                                </a>
+                                                            </li>
+                                                            <li>
+                                                                <a class="dropdown-item" href="#">
+                                                                    Dropdown link
+                                                                </a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <!-- /.danger -->
+                                        <!-- warning -->
+                                        <tr>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-warning">
+                                                        Top
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning">
+                                                        Middle
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning">
+                                                        Bottom
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-warning">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-warning btn-flat">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning btn-flat">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning btn-flat">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-warning">
+                                                        1
+                                                    </button>
+                                                    <button type="button" class="btn btn-warning">
+                                                        2
+                                                    </button>
+                                                    <div class="btn-group">
+                                                        <button type="button"
+                                                                class="btn btn-warning dropdown-toggle"
+                                                                data-toggle="dropdown"></button>
+                                                        <ul class="dropdown-menu">
+                                                            <li>
+                                                                <a class="dropdown-item" href="#">
+                                                                    Dropdown link
+                                                                </a>
+                                                            </li>
+                                                            <li>
+                                                                <a class="dropdown-item" href="#">
+                                                                    Dropdown link
+                                                                </a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <!-- /.warning -->
+                                        <!-- success -->
+                                        <tr>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-success">
+                                                        Top
+                                                    </button>
+                                                    <button type="button" class="btn btn-success">
+                                                        Middle
+                                                    </button>
+                                                    <button type="button" class="btn btn-success">
+                                                        Bottom
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-success">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-success">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-success">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-success btn-flat">
+                                                        <i class="fas fa-align-left"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-success btn-flat">
+                                                        <i class="fas fa-align-center"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-success btn-flat">
+                                                        <i class="fas fa-align-right"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <div class="btn-group-vertical">
+                                                    <button type="button" class="btn btn-success">
+                                                        1
+                                                    </button>
+                                                    <button type="button" class="btn btn-success">
+                                                        2
+                                                    </button>
+                                                    <div class="btn-group">
+                                                        <button type="button"
+                                                                class="btn btn-success dropdown-toggle"
+                                                                data-toggle="dropdown"></button>
+                                                        <ul class="dropdown-menu">
+                                                            <li>
+                                                                <a class="dropdown-item" href="#">
+                                                                    Dropdown link
+                                                                </a>
+                                                            </li>
+                                                            <li>
+                                                                <a class="dropdown-item" href="#">
+                                                                    Dropdown link
+                                                                </a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <!-- /.success -->
+                                    </table>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                            <!-- Radio Buttons -->
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Radio Button Group
+                                    </h3>
+                                </div>
+                                <div class="card-body table-responsive pad">
+                                    <p class="mb-1">
+                                        Radio Button Group with
+                                        <code>
+                                        .btn-secondary
+                                        </code>
+                                    </p>
+                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                                        <label class="btn btn-secondary active">
+                                            <input type="radio"
+                                                   name="options"
+                                                   id="option_a1"
+                                                   autocomplete="off"
+                                                   checked>
+                                            Active
+                                        </label>
+                                        <label class="btn btn-secondary">
+                                            <input type="radio" name="options" id="option_a2" autocomplete="off">
+                                            Radio
+                                        </label>
+                                        <label class="btn btn-secondary">
+                                            <input type="radio" name="options" id="option_a3" autocomplete="off">
+                                            Radio
+                                        </label>
+                                    </div>
+                                    <p class="mt-3 mb-1">
+                                        Radio Button Group with
+                                        <code>
+                                        .bg-olive
+                                        </code>
+                                    </p>
+                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                                        <label class="btn bg-olive active">
+                                            <input type="radio"
+                                                   name="options"
+                                                   id="option_b1"
+                                                   autocomplete="off"
+                                                   checked>
+                                            Active
+                                        </label>
+                                        <label class="btn bg-olive">
+                                            <input type="radio" name="options" id="option_b2" autocomplete="off">
+                                            Radio
+                                        </label>
+                                        <label class="btn bg-olive">
+                                            <input type="radio" name="options" id="option_b3" autocomplete="off">
+                                            Radio
+                                        </label>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /. row -->
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- /.content -->
+        </div>
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap 4 -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <!-- AdminLTE App -->
+        <script src="/static/assets/js/adminlte.min.js"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="/static/assets/js/demo.js"></script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/ui-general.html b/tests/jinja_adminlte/ui-general.html
new file mode 100644
index 0000000..f1476eb
--- /dev/null
+++ b/tests/jinja_adminlte/ui-general.html
@@ -0,0 +1,1562 @@
+{% extends "layouts/base.html" %}
+{% block title %}UI General {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+        <style>
+    .color-palette {
+      height: 35px;
+      line-height: 35px;
+      text-align: right;
+      padding-right: .75rem;
+    }
+
+    .color-palette.disabled {
+      text-align: center;
+      padding-right: 0;
+      display: block;
+    }
+
+    .color-palette-set {
+      margin-bottom: 15px;
+    }
+
+    .color-palette span {
+      display: none;
+      font-size: 12px;
+    }
+
+    .color-palette:hover span {
+      display: block;
+    }
+
+    .color-palette.disabled span {
+      display: block;
+      text-align: left;
+      padding-left: .75rem;
+    }
+
+    .color-palette-box h4 {
+      position: absolute;
+      left: 1.25rem;
+      margin-top: .75rem;
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 12px;
+      display: block;
+      z-index: 7;
+    }
+        </style>
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>Inline Charts</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Inline Charts
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <!-- COLOR PALETTE -->
+                    <div class="card card-default color-palette-box">
+                        <div class="card-header">
+                            <h3 class="card-title">
+                                <i class="fas fa-tag"></i>
+                                Color Palette
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <div class="col-12">
+                                <h5>Theme Colors</h5>
+                            </div>
+                            <!-- /.col-12 -->
+                            <div class="row">
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center">Primary</h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-primary color-palette">
+                                            <span>#007bff</span>
+                                        </div>
+                                        <div class="bg-primary disabled color-palette">
+                                            <span>Disabled</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center">Secondary</h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-secondary color-palette">
+                                            <span>#6c757d</span>
+                                        </div>
+                                        <div class="bg-secondary disabled color-palette">
+                                            <span>Disabled</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center">Info</h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-info color-palette">
+                                            <span>#17a2b8</span>
+                                        </div>
+                                        <div class="bg-info disabled color-palette">
+                                            <span>Disabled</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center">Success</h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-success color-palette">
+                                            <span>#28a745</span>
+                                        </div>
+                                        <div class="bg-success disabled color-palette">
+                                            <span>Disabled</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-warning">Warning</h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-warning color-palette">
+                                            <span>
+                                                #ffc107
+                                            </span>
+                                        </div>
+                                        <div class="bg-warning disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center">Danger</h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-danger color-palette">
+                                            <span>
+                                                #dc3545
+                                            </span>
+                                        </div>
+                                        <div class="bg-danger disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                            </div>
+                            <!-- /.row -->
+                            <div class="col-12">
+                                <h5 class="mt-3">Black/White Nuances</h5>
+                            </div>
+                            <!-- /.col-12 -->
+                            <div class="row">
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center">Black</h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-black color-palette">
+                                            <span>
+                                                #000000
+                                            </span>
+                                        </div>
+                                        <div class="bg-black disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center">Gray Dark</h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-gray-dark color-palette">
+                                            <span>
+                                                #343a40
+                                            </span>
+                                        </div>
+                                        <div class="bg-gray-dark disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center">
+                                        Gray
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-gray color-palette">
+                                            <span>
+                                                #adb5bd
+                                            </span>
+                                        </div>
+                                        <div class="bg-gray disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-light">
+                                        Light
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-light color-palette">
+                                            <span>
+                                                #1f2d3d
+                                            </span>
+                                        </div>
+                                        <div class="bg-light disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                            </div>
+                            <!-- /.row -->
+                            <div class="col-12">
+                                <h5 class="mt-3">
+                                    Colors
+                                </h5>
+                            </div>
+                            <!-- /.col-12 -->
+                            <div class="row">
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-indigo">
+                                        Indigo
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-indigo color-palette">
+                                            <span>
+                                                #6610f2
+                                            </span>
+                                        </div>
+                                        <div class="bg-indigo disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-lightblue">
+                                        Lightblue
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-lightblue color-palette">
+                                            <span>
+                                                #3c8dbc
+                                            </span>
+                                        </div>
+                                        <div class="bg-lightblue disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-navy">
+                                        Navy
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-navy color-palette">
+                                            <span>
+                                                #001f3f
+                                            </span>
+                                        </div>
+                                        <div class="bg-navy disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-purple">
+                                        Purple
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-purple color-palette">
+                                            <span>
+                                                #605ca8
+                                            </span>
+                                        </div>
+                                        <div class="bg-purple disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-fuchsia">
+                                        Fuchsia
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-fuchsia color-palette">
+                                            <span>
+                                                #f012be
+                                            </span>
+                                        </div>
+                                        <div class="bg-fuchsia disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-pink">
+                                        Pink
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-pink color-palette">
+                                            <span>
+                                                #e83e8c
+                                            </span>
+                                        </div>
+                                        <div class="bg-pink disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-maroon">
+                                        Maroon
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-maroon color-palette">
+                                            <span>
+                                                #d81b60
+                                            </span>
+                                        </div>
+                                        <div class="bg-maroon disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-orange">
+                                        Orange
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-orange color-palette">
+                                            <span>
+                                                #ff851b
+                                            </span>
+                                        </div>
+                                        <div class="bg-orange disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-lime">
+                                        Lime
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-lime color-palette">
+                                            <span>
+                                                #01ff70
+                                            </span>
+                                        </div>
+                                        <div class="bg-lime disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-teal">
+                                        Teal
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-teal color-palette">
+                                            <span>
+                                                #39cccc
+                                            </span>
+                                        </div>
+                                        <div class="bg-teal disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                                <div class="col-sm-4 col-md-2">
+                                    <h4 class="text-center bg-olive">
+                                        Olive
+                                    </h4>
+                                    <div class="color-palette-set">
+                                        <div class="bg-olive color-palette">
+                                            <span>
+                                                #3d9970
+                                            </span>
+                                        </div>
+                                        <div class="bg-olive disabled color-palette">
+                                            <span>
+                                                Disabled
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.col -->
+                            </div>
+                            <!-- /.row -->
+                        </div>
+                        <!-- /.card-body -->
+                    </div>
+                    <!-- /.card -->
+                    <!-- START ALERTS AND CALLOUTS -->
+                    <h5 class="mt-4 mb-2">
+                        Alerts and Callouts
+                    </h5>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="card card-default">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <i class="fas fa-exclamation-triangle"></i>
+                                        Alerts
+                                    </h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <div class="alert alert-danger alert-dismissible">
+                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
+                                            &times;
+                                        </button>
+                                        <h5>
+                                            <i class="icon fas fa-ban"></i>
+                                            Alert!
+                                        </h5>
+                                        Danger alert preview. This alert is dismissable. A wonderful serenity has taken possession of my
+                                        entire
+                                        soul, like these sweet mornings of spring which I enjoy with my whole heart.
+                                    </div>
+                                    <div class="alert alert-info alert-dismissible">
+                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
+                                            &times;
+                                        </button>
+                                        <h5>
+                                            <i class="icon fas fa-info"></i>
+                                            Alert!
+                                        </h5>
+                                        Info alert preview. This alert is dismissable.
+                                    </div>
+                                    <div class="alert alert-warning alert-dismissible">
+                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
+                                            &times;
+                                        </button>
+                                        <h5>
+                                            <i class="icon fas fa-exclamation-triangle"></i>
+                                            Alert!
+                                        </h5>
+                                        Warning alert preview. This alert is dismissable.
+                                    </div>
+                                    <div class="alert alert-success alert-dismissible">
+                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
+                                            &times;
+                                        </button>
+                                        <h5>
+                                            <i class="icon fas fa-check"></i>
+                                            Alert!
+                                        </h5>
+                                        Success alert preview. This alert is dismissable.
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-6">
+                            <div class="card card-default">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <i class="fas fa-bullhorn"></i>
+                                        Callouts
+                                    </h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <div class="callout callout-danger">
+                                        <h5>
+                                            I am a danger callout!
+                                        </h5>
+                                        <p>
+                                            There is a problem that we need to fix. A wonderful serenity has taken possession of my entire
+                                            soul,
+                                            like these sweet mornings of spring which I enjoy with my whole heart.
+                                        </p>
+                                    </div>
+                                    <div class="callout callout-info">
+                                        <h5>
+                                            I am an info callout!
+                                        </h5>
+                                        <p>
+                                            Follow the steps to continue to payment.
+                                        </p>
+                                    </div>
+                                    <div class="callout callout-warning">
+                                        <h5>
+                                            I am a warning callout!
+                                        </h5>
+                                        <p>
+                                            This is a yellow callout.
+                                        </p>
+                                    </div>
+                                    <div class="callout callout-success">
+                                        <h5>
+                                            I am a success callout!
+                                        </h5>
+                                        <p>
+                                            This is a green callout.
+                                        </p>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- END ALERTS AND CALLOUTS -->
+                    <h5 class="mt-4 mb-2">
+                        Tabs in Cards
+                    </h5>
+                    <div class="row">
+                        <div class="col-12">
+                            <!-- Custom Tabs -->
+                            <div class="card">
+                                <div class="card-header d-flex p-0">
+                                    <h3 class="card-title p-3">
+                                        Tabs
+                                    </h3>
+                                    <ul class="nav nav-pills ml-auto p-2">
+                                        <li class="nav-item">
+                                            <a class="nav-link active" href="#tab_1" data-toggle="tab">
+                                                Tab 1
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" href="#tab_2" data-toggle="tab">
+                                                Tab 2
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link" href="#tab_3" data-toggle="tab">
+                                                Tab 3
+                                            </a>
+                                        </li>
+                                        <li class="nav-item dropdown">
+                                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
+                                                Dropdown
+                                                <span class="caret"></span>
+                                            </a>
+                                            <div class="dropdown-menu">
+                                                <a class="dropdown-item" tabindex="-1" href="#">
+                                                    Action
+                                                </a>
+                                                <a class="dropdown-item" tabindex="-1" href="#">
+                                                    Another action
+                                                </a>
+                                                <a class="dropdown-item" tabindex="-1" href="#">
+                                                    Something else here
+                                                </a>
+                                                <div class="dropdown-divider"></div>
+                                                <a class="dropdown-item" tabindex="-1" href="#">
+                                                    Separated link
+                                                </a>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <div class="tab-content">
+                                        <div class="tab-pane active" id="tab_1">
+                                            A wonderful serenity has taken possession of my entire soul,
+                                            like these sweet mornings of spring which I enjoy with my whole heart.
+                                            I am alone, and feel the charm of existence in this spot,
+                                            which was created for the bliss of souls like mine. I am so happy,
+                                            my dear friend, so absorbed in the exquisite sense of mere tranquil existence,
+                                            that I neglect my talents. I should be incapable of drawing a single stroke
+                                            at the present moment; and yet I feel that I never was a greater artist than now.
+                                        </div>
+                                        <!-- /.tab-pane -->
+                                        <div class="tab-pane" id="tab_2">
+                                            The European languages are members of the same family. Their separate existence is a myth.
+                                            For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ
+                                            in their grammar, their pronunciation and their most common words. Everyone realizes why a
+                                            new common language would be desirable: one could refuse to pay expensive translators. To
+                                            achieve this, it would be necessary to have uniform grammar, pronunciation and more common
+                                            words. If several languages coalesce, the grammar of the resulting language is more simple
+                                            and regular than that of the individual languages.
+                                        </div>
+                                        <!-- /.tab-pane -->
+                                        <div class="tab-pane" id="tab_3">
+                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+                                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+                                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+                                            It has survived not only five centuries, but also the leap into electronic typesetting,
+                                            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
+                                            sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+                                            like Aldus PageMaker including versions of Lorem Ipsum.
+                                        </div>
+                                        <!-- /.tab-pane -->
+                                    </div>
+                                    <!-- /.tab-content -->
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- ./card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- END CUSTOM TABS -->
+                    <!-- START PROGRESS BARS -->
+                    <h5 class="mt-4 mb-2">
+                        Progress Bars
+                    </h5>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Progress Bars Different Sizes
+                                    </h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <p>
+                                        <code>
+                                        .progress
+                                        </code>
+                                    </p>
+                                    <div class="progress">
+                                        <div class="progress-bar bg-primary progress-bar-striped"
+                                             role="progressbar"
+                                             aria-valuenow="40"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="width: 40%">
+                                            <span class="sr-only">
+                                                40% Complete (success)
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <p>
+                                        <code>
+                                        .progress-sm
+                                        </code>
+                                    </p>
+                                    <div class="progress progress-sm active">
+                                        <div class="progress-bar bg-success progress-bar-striped"
+                                             role="progressbar"
+                                             aria-valuenow="20"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="width: 20%">
+                                            <span class="sr-only">
+                                                20% Complete
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <p>
+                                        <code>
+                                        .progress-xs
+                                        </code>
+                                    </p>
+                                    <div class="progress progress-xs">
+                                        <div class="progress-bar bg-warning progress-bar-striped"
+                                             role="progressbar"
+                                             aria-valuenow="60"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="width: 60%">
+                                            <span class="sr-only">
+                                                60% Complete (warning)
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <p>
+                                        <code>
+                                        .progress-xxs
+                                        </code>
+                                    </p>
+                                    <div class="progress progress-xxs">
+                                        <div class="progress-bar progress-bar-danger progress-bar-striped"
+                                             role="progressbar"
+                                             aria-valuenow="60"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="width: 60%">
+                                            <span class="sr-only">
+                                                60% Complete (warning)
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col (left) -->
+                        <div class="col-md-6">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Progress bars
+                                    </h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <div class="progress mb-3">
+                                        <div class="progress-bar bg-success"
+                                             role="progressbar"
+                                             aria-valuenow="40"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="width: 40%">
+                                            <span class="sr-only">
+                                                40% Complete (success)
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="progress mb-3">
+                                        <div class="progress-bar bg-info"
+                                             role="progressbar"
+                                             aria-valuenow="20"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="width: 20%">
+                                            <span class="sr-only">
+                                                20% Complete
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="progress mb-3">
+                                        <div class="progress-bar bg-warning"
+                                             role="progressbar"
+                                             aria-valuenow="60"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="width: 60%">
+                                            <span class="sr-only">
+                                                60% Complete (warning)
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="progress mb-3">
+                                        <div class="progress-bar bg-danger"
+                                             role="progressbar"
+                                             aria-valuenow="80"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="width: 80%">
+                                            <span class="sr-only">
+                                                80% Complete
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col (right) -->
+                    </div>
+                    <!-- /.row -->
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Vertical Progress Bars Different Sizes
+                                    </h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body text-center">
+                                    <p>
+                                        By adding the class
+                                        <code>
+                                        .vertical
+                                        </code>
+                                        and
+                                        <code>
+                                        .progress-sm
+                                        </code>
+                                        ,
+                                        <code>
+                                        .progress-xs
+                                        </code>
+                                        or
+                                        <code>
+                                        .progress-xxs
+                                        </code>
+                                        we achieve:
+                                    </p>
+                                    <div class="progress vertical active">
+                                        <div class="progress-bar bg-primary progress-bar-striped"
+                                             role="progressbar"
+                                             aria-valuenow="40"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="height: 40%">
+                                            <span class="sr-only">
+                                                40%
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="progress vertical progress-sm">
+                                        <div class="progress-bar bg-success"
+                                             role="progressbar"
+                                             aria-valuenow="20"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="height: 100%">
+                                            <span class="sr-only">
+                                                100%
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="progress vertical progress-xs">
+                                        <div class="progress-bar bg-warning progress-bar-striped"
+                                             role="progressbar"
+                                             aria-valuenow="60"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="height: 60%">
+                                            <span class="sr-only">
+                                                60%
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="progress vertical progress-xxs">
+                                        <div class="progress-bar bg-info progress-bar-striped"
+                                             role="progressbar"
+                                             aria-valuenow="60"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="height: 60%">
+                                            <span class="sr-only">
+                                                60%
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col (left) -->
+                        <div class="col-md-6">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Vertical Progress bars
+                                    </h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body text-center">
+                                    <p>
+                                        By adding the class
+                                        <code>
+                                        .vertical
+                                        </code>
+                                        we achieve:
+                                    </p>
+                                    <div class="progress vertical">
+                                        <div class="progress-bar bg-success"
+                                             role="progressbar"
+                                             aria-valuenow="40"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="height: 40%">
+                                            <span class="sr-only">
+                                                40%
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="progress vertical">
+                                        <div class="progress-bar bg-info"
+                                             role="progressbar"
+                                             aria-valuenow="20"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="height: 20%">
+                                            <span class="sr-only">
+                                                20%
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="progress vertical">
+                                        <div class="progress-bar bg-warning"
+                                             role="progressbar"
+                                             aria-valuenow="60"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="height: 60%">
+                                            <span class="sr-only">
+                                                60%
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="progress vertical">
+                                        <div class="progress-bar bg-danger"
+                                             role="progressbar"
+                                             aria-valuenow="80"
+                                             aria-valuemin="0"
+                                             aria-valuemax="100"
+                                             style="height: 80%">
+                                            <span class="sr-only">
+                                                80%
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col (right) -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- END PROGRESS BARS -->
+                    <!-- START ACCORDION & CAROUSEL-->
+                    <h5 class="mt-4 mb-2">
+                        Bootstrap Accordion & Carousel
+                    </h5>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Collapsible Accordion
+                                    </h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <!-- we are adding the accordion ID so Bootstrap's collapse plugin detects it -->
+                                    <div id="accordion">
+                                        <div class="card card-primary">
+                                            <div class="card-header">
+                                                <h4 class="card-title w-100">
+                                                    <a class="d-block w-100"
+                                                       data-toggle="collapse"
+                                                       href="#collapseOne">
+                                                        Collapsible Group Item #1
+                                                    </a>
+                                                </h4>
+                                            </div>
+                                            <div id="collapseOne" class="collapse show" data-parent="#accordion">
+                                                <div class="card-body">
+                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+                                                    3
+                                                    wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
+                                                    laborum
+                                                    eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee
+                                                    nulla
+                                                    assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                                                    nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                                                    beer
+                                                    farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+                                                    labore sustainable VHS.
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="card card-danger">
+                                            <div class="card-header">
+                                                <h4 class="card-title w-100">
+                                                    <a class="d-block w-100"
+                                                       data-toggle="collapse"
+                                                       href="#collapseTwo">
+                                                        Collapsible Group Danger
+                                                    </a>
+                                                </h4>
+                                            </div>
+                                            <div id="collapseTwo" class="collapse" data-parent="#accordion">
+                                                <div class="card-body">
+                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+                                                    3
+                                                    wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
+                                                    laborum
+                                                    eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee
+                                                    nulla
+                                                    assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                                                    nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                                                    beer
+                                                    farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+                                                    labore sustainable VHS.
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="card card-success">
+                                            <div class="card-header">
+                                                <h4 class="card-title w-100">
+                                                    <a class="d-block w-100"
+                                                       data-toggle="collapse"
+                                                       href="#collapseThree">
+                                                        Collapsible Group Success
+                                                    </a>
+                                                </h4>
+                                            </div>
+                                            <div id="collapseThree" class="collapse" data-parent="#accordion">
+                                                <div class="card-body">
+                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+                                                    3
+                                                    wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
+                                                    laborum
+                                                    eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee
+                                                    nulla
+                                                    assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                                                    nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                                                    beer
+                                                    farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+                                                    labore sustainable VHS.
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-6">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Carousel
+                                    </h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+                                        <ol class="carousel-indicators">
+                                            <li data-target="#carouselExampleIndicators"
+                                                data-slide-to="0"
+                                                class="active"></li>
+                                            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+                                            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+                                        </ol>
+                                        <div class="carousel-inner">
+                                            <div class="carousel-item active">
+                                                <img class="d-block w-100"
+                                                     src="https://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap"
+                                                     alt="First slide">
+                                                </div>
+                                                <div class="carousel-item">
+                                                    <img class="d-block w-100"
+                                                         src="https://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap"
+                                                         alt="Second slide">
+                                                    </div>
+                                                    <div class="carousel-item">
+                                                        <img class="d-block w-100"
+                                                             src="https://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap"
+                                                             alt="Third slide">
+                                                        </div>
+                                                    </div>
+                                                    <a class="carousel-control-prev"
+                                                       href="#carouselExampleIndicators"
+                                                       role="button"
+                                                       data-slide="prev">
+                                                        <span class="carousel-control-prev-icon"
+                                                              aria-hidden="true"></span>
+                                                        <span class="sr-only">
+                                                            Previous
+                                                        </span>
+                                                    </a>
+                                                    <a class="carousel-control-next"
+                                                       href="#carouselExampleIndicators"
+                                                       role="button"
+                                                       data-slide="next">
+                                                        <span class="carousel-control-next-icon"
+                                                              aria-hidden="true"></span>
+                                                        <span class="sr-only">
+                                                            Next
+                                                        </span>
+                                                    </a>
+                                                </div>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- /.col -->
+                                </div>
+                                <!-- /.row -->
+                                <!-- END ACCORDION & CAROUSEL-->
+                                <!-- START TYPOGRAPHY -->
+                                <h5 class="mt-4 mb-2">
+                                    Typography
+                                </h5>
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <div class="card">
+                                            <div class="card-header">
+                                                <h3 class="card-title">
+                                                    <i class="fas fa-text-width"></i>
+                                                    Headlines
+                                                </h3>
+                                            </div>
+                                            <!-- /.card-header -->
+                                            <div class="card-body">
+                                                <h1>
+                                                    h1. Bootstrap heading
+                                                </h1>
+                                                <h2>
+                                                    h2. Bootstrap heading
+                                                </h2>
+                                                <h3>
+                                                    h3. Bootstrap heading
+                                                </h3>
+                                                <h4>
+                                                    h4. Bootstrap heading
+                                                </h4>
+                                                <h5>
+                                                    h5. Bootstrap heading
+                                                </h5>
+                                                <h6>
+                                                    h6. Bootstrap heading
+                                                </h6>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-md-6">
+                                        <div class="card">
+                                            <div class="card-header">
+                                                <h3 class="card-title">
+                                                    <i class="fas fa-text-width"></i>
+                                                    Text Emphasis
+                                                </h3>
+                                            </div>
+                                            <!-- /.card-header -->
+                                            <div class="card-body">
+                                                <p class="lead">
+                                                    Lead to emphasize importance
+                                                </p>
+                                                <p class="text-success">
+                                                    Text green to emphasize success
+                                                </p>
+                                                <p class="text-info">
+                                                    Text aqua to emphasize info
+                                                </p>
+                                                <p class="text-primary">
+                                                    Text light blue to emphasize info (2)
+                                                </p>
+                                                <p class="text-danger">
+                                                    Text red to emphasize danger
+                                                </p>
+                                                <p class="text-warning">
+                                                    Text yellow to emphasize warning
+                                                </p>
+                                                <p class="text-muted">
+                                                    Text muted to emphasize general
+                                                </p>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- ./col -->
+                                </div>
+                                <!-- /.row -->
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <div class="card">
+                                            <div class="card-header">
+                                                <h3 class="card-title">
+                                                    <i class="fas fa-text-width"></i>
+                                                    Primary Block Quotes
+                                                </h3>
+                                            </div>
+                                            <!-- /.card-header -->
+                                            <div class="card-body">
+                                                <blockquote>
+                                                    <p>
+                                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+                                                    </p>
+                                                    <small>
+                                                    Someone famous in
+                                                    <cite title="Source Title">
+                                                    Source Title
+                                                    </cite>
+                                                    </small>
+                                                </blockquote>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-md-6">
+                                        <div class="card">
+                                            <div class="card-header">
+                                                <h3 class="card-title">
+                                                    <i class="fas fa-text-width"></i>
+                                                    Secondary Block Quotes
+                                                </h3>
+                                            </div>
+                                            <!-- /.card-header -->
+                                            <div class="card-body clearfix">
+                                                <blockquote class="quote-secondary">
+                                                    <p>
+                                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+                                                    </p>
+                                                    <small>
+                                                    Someone famous in
+                                                    <cite title="Source Title">
+                                                    Source Title
+                                                    </cite>
+                                                    </small>
+                                                </blockquote>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- ./col -->
+                                </div>
+                                <!-- /.row -->
+                                <div class="row">
+                                    <div class="col-md-4">
+                                        <div class="card">
+                                            <div class="card-header">
+                                                <h3 class="card-title">
+                                                    <i class="fas fa-text-width"></i>
+                                                    Unordered List
+                                                </h3>
+                                            </div>
+                                            <!-- /.card-header -->
+                                            <div class="card-body">
+                                                <ul>
+                                                    <li>
+                                                        Lorem ipsum dolor sit amet
+                                                    </li>
+                                                    <li>
+                                                        Consectetur adipiscing elit
+                                                    </li>
+                                                    <li>
+                                                        Integer molestie lorem at massa
+                                                    </li>
+                                                    <li>
+                                                        Facilisis in pretium nisl aliquet
+                                                    </li>
+                                                    <li>
+                                                        Nulla volutpat aliquam velit
+                                                        <ul>
+                                                            <li>
+                                                                Phasellus iaculis neque
+                                                            </li>
+                                                            <li>
+                                                                Purus sodales ultricies
+                                                            </li>
+                                                            <li>
+                                                                Vestibulum laoreet porttitor sem
+                                                            </li>
+                                                            <li>
+                                                                Ac tristique libero volutpat at
+                                                            </li>
+                                                        </ul>
+                                                    </li>
+                                                    <li>
+                                                        Faucibus porta lacus fringilla vel
+                                                    </li>
+                                                    <li>
+                                                        Aenean sit amet erat nunc
+                                                    </li>
+                                                    <li>
+                                                        Eget porttitor lorem
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-md-4">
+                                        <div class="card">
+                                            <div class="card-header">
+                                                <h3 class="card-title">
+                                                    <i class="fas fa-text-width"></i>
+                                                    Ordered Lists
+                                                </h3>
+                                            </div>
+                                            <!-- /.card-header -->
+                                            <div class="card-body">
+                                                <ol>
+                                                    <li>
+                                                        Lorem ipsum dolor sit amet
+                                                    </li>
+                                                    <li>
+                                                        Consectetur adipiscing elit
+                                                    </li>
+                                                    <li>
+                                                        Integer molestie lorem at massa
+                                                    </li>
+                                                    <li>
+                                                        Facilisis in pretium nisl aliquet
+                                                    </li>
+                                                    <li>
+                                                        Nulla volutpat aliquam velit
+                                                        <ol>
+                                                            <li>
+                                                                Phasellus iaculis neque
+                                                            </li>
+                                                            <li>
+                                                                Purus sodales ultricies
+                                                            </li>
+                                                            <li>
+                                                                Vestibulum laoreet porttitor sem
+                                                            </li>
+                                                            <li>
+                                                                Ac tristique libero volutpat at
+                                                            </li>
+                                                        </ol>
+                                                    </li>
+                                                    <li>
+                                                        Faucibus porta lacus fringilla vel
+                                                    </li>
+                                                    <li>
+                                                        Aenean sit amet erat nunc
+                                                    </li>
+                                                    <li>
+                                                        Eget porttitor lorem
+                                                    </li>
+                                                </ol>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-md-4">
+                                        <div class="card">
+                                            <div class="card-header">
+                                                <h3 class="card-title">
+                                                    <i class="fas fa-text-width"></i>
+                                                    Unstyled List
+                                                </h3>
+                                            </div>
+                                            <!-- /.card-header -->
+                                            <div class="card-body">
+                                                <ul class="list-unstyled">
+                                                    <li>
+                                                        Lorem ipsum dolor sit amet
+                                                    </li>
+                                                    <li>
+                                                        Consectetur adipiscing elit
+                                                    </li>
+                                                    <li>
+                                                        Integer molestie lorem at massa
+                                                    </li>
+                                                    <li>
+                                                        Facilisis in pretium nisl aliquet
+                                                    </li>
+                                                    <li>
+                                                        Nulla volutpat aliquam velit
+                                                        <ul>
+                                                            <li>
+                                                                Phasellus iaculis neque
+                                                            </li>
+                                                            <li>
+                                                                Purus sodales ultricies
+                                                            </li>
+                                                            <li>
+                                                                Vestibulum laoreet porttitor sem
+                                                            </li>
+                                                            <li>
+                                                                Ac tristique libero volutpat at
+                                                            </li>
+                                                        </ul>
+                                                    </li>
+                                                    <li>
+                                                        Faucibus porta lacus fringilla vel
+                                                    </li>
+                                                    <li>
+                                                        Aenean sit amet erat nunc
+                                                    </li>
+                                                    <li>
+                                                        Eget porttitor lorem
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- ./col -->
+                                </div>
+                                <!-- /.row -->
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <div class="card">
+                                            <div class="card-header">
+                                                <h3 class="card-title">
+                                                    <i class="fas fa-text-width"></i>
+                                                    Description
+                                                </h3>
+                                            </div>
+                                            <!-- /.card-header -->
+                                            <div class="card-body">
+                                                <dl>
+                                                    <dt>
+                                                    Description lists
+                                                    </dt>
+                                                    <dd>
+                                                    A description list is perfect for defining terms.
+                                                    </dd>
+                                                    <dt>
+                                                    Euismod
+                                                    </dt>
+                                                    <dd>
+                                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+                                                    </dd>
+                                                    <dd>
+                                                    Donec id elit non mi porta gravida at eget metus.
+                                                    </dd>
+                                                    <dt>
+                                                    Malesuada porta
+                                                    </dt>
+                                                    <dd>
+                                                    Etiam porta sem malesuada magna mollis euismod.
+                                                    </dd>
+                                                </dl>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- ./col -->
+                                    <div class="col-md-6">
+                                        <div class="card">
+                                            <div class="card-header">
+                                                <h3 class="card-title">
+                                                    <i class="fas fa-text-width"></i>
+                                                    Description Horizontal
+                                                </h3>
+                                            </div>
+                                            <!-- /.card-header -->
+                                            <div class="card-body">
+                                                <dl class="row">
+                                                    <dt class="col-sm-4">
+                                                    Description lists
+                                                    </dt>
+                                                    <dd class="col-sm-8">
+                                                    A description list is perfect for defining terms.
+                                                    </dd>
+                                                    <dt class="col-sm-4">
+                                                    Euismod
+                                                    </dt>
+                                                    <dd class="col-sm-8">
+                                                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+                                                    </dd>
+                                                    <dd class="col-sm-8 offset-sm-4">
+                                                    Donec id elit non mi porta gravida at eget metus.
+                                                    </dd>
+                                                    <dt class="col-sm-4">
+                                                    Malesuada porta
+                                                    </dt>
+                                                    <dd class="col-sm-8">
+                                                    Etiam porta sem malesuada magna mollis euismod.
+                                                    </dd>
+                                                    <dt class="col-sm-4">
+                                                    Felis euismod semper eget lacinia
+                                                    </dt>
+                                                    <dd class="col-sm-8">
+                                                    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
+                                                    sit amet risus.
+                                                    </dd>
+                                                </dl>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- ./col -->
+                                </div>
+                                <!-- /.row -->
+                                <!-- END TYPOGRAPHY -->
+                            </div>
+                            <!-- /.container-fluid -->
+                        </section>
+                        <!-- /.content -->
+                    </div>
+                {% endblock content %}
+                <!-- Specific Page JS goes HERE -->
+                {% block javascripts %}
+                    <!-- jQuery -->
+                    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                    <!-- Bootstrap 4 -->
+                    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                    <!-- AdminLTE App -->
+                    <script src="/static/assets/js/adminlte.min.js"></script>
+                    <!-- AdminLTE for demo purposes -->
+                    <script src="/static/assets/js/demo.js"></script>
+                {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/ui-icons.html b/tests/jinja_adminlte/ui-icons.html
new file mode 100644
index 0000000..f342f8d
--- /dev/null
+++ b/tests/jinja_adminlte/ui-icons.html
@@ -0,0 +1,83 @@
+{% extends "layouts/base.html" %}
+{% block title %}UI Icons {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>Icons</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Icons
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <div class="card card-primary card-outline">
+                        <div class="card-header">
+                            <h3 class="card-title">Icons</h3>
+                        </div>
+                        <!-- /.card-body -->
+                        <div class="card-body">
+                            <p>
+                                You can use any font library you like with AdminLTE 3.
+                            </p>
+                            <strong>Recommendations</strong>
+                            <div>
+                                <a href="https://fontawesome.com/">
+                                    Font Awesome
+                                </a>
+                                <br>
+                                <a href="https://useiconic.com/open/">
+                                    Iconic Icons
+                                </a>
+                                <br>
+                                <a href="https://ionicons.com/">Ion Icons</a>
+                                <br>
+                            </div>
+                        </div>
+                        <!-- /.card-body -->
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- /.content -->
+        </div>
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap 4 -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <!-- AdminLTE App -->
+        <script src="/static/assets/js/adminlte.min.js"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="/static/assets/js/demo.js"></script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/ui-modals.html b/tests/jinja_adminlte/ui-modals.html
new file mode 100644
index 0000000..9849b16
--- /dev/null
+++ b/tests/jinja_adminlte/ui-modals.html
@@ -0,0 +1,774 @@
+{% extends "layouts/base.html" %}
+{% block title %}UI Modals {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- SweetAlert2 -->
+        <link rel="stylesheet" href="/static/assets/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
+        <!-- Toastr -->
+        <link rel="stylesheet" href="/static/assets/plugins/toastr/toastr.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>
+                                Modals & Alerts
+                                <small>
+                                new
+                                </small>
+                            </h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Modals & Alerts
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card card-primary card-outline">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <i class="fas fa-edit"></i>
+                                        Modal Examples
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    <button type="button"
+                                            class="btn btn-default"
+                                            data-toggle="modal"
+                                            data-target="#modal-default">
+                                        Launch Default Modal
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-primary"
+                                            data-toggle="modal"
+                                            data-target="#modal-primary">
+                                        Launch Primary Modal
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-secondary"
+                                            data-toggle="modal"
+                                            data-target="#modal-secondary">
+                                        Launch Secondary Modal
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-info"
+                                            data-toggle="modal"
+                                            data-target="#modal-info">
+                                        Launch Info Modal
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-danger"
+                                            data-toggle="modal"
+                                            data-target="#modal-danger">
+                                        Launch Danger Modal
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-warning"
+                                            data-toggle="modal"
+                                            data-target="#modal-warning">
+                                        Launch Warning Modal
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-success"
+                                            data-toggle="modal"
+                                            data-target="#modal-success">
+                                        Launch Success Modal
+                                    </button>
+                                    <br />
+                                    <br />
+                                    <button type="button"
+                                            class="btn btn-default"
+                                            data-toggle="modal"
+                                            data-target="#modal-sm">
+                                        Launch Small Modal
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-default"
+                                            data-toggle="modal"
+                                            data-target="#modal-lg">
+                                        Launch Large Modal
+                                    </button>
+                                    <button type="button"
+                                            class="btn btn-default"
+                                            data-toggle="modal"
+                                            data-target="#modal-xl">
+                                        Launch Extra Large Modal
+                                    </button>
+                                    <br />
+                                    <br />
+                                    <button type="button"
+                                            class="btn btn-default"
+                                            data-toggle="modal"
+                                            data-target="#modal-overlay">
+                                        Launch Modal with Overlay
+                                    </button>
+                                    <div class="text-muted mt-3">
+                                        Instructions for how to use modals are available on the
+                                        <a href="https://getbootstrap.com/docs/4.4/components/modal/">
+                                            Bootstrap documentation
+                                        </a>
+                                    </div>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                            <div class="card card-info card-outline">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <i class="fas fa-edit"></i>
+                                        Toasts Examples
+                                        <small>
+                                        built in AdminLTE
+                                        </small>
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    <button type="button" class="btn btn-default toastsDefaultDefault">
+                                        Launch Default Toast
+                                    </button>
+                                    <button type="button" class="btn btn-default toastsDefaultFull">
+                                        Launch Full Toast (with icon)
+                                    </button>
+                                    <button type="button" class="btn btn-default toastsDefaultFullImage">
+                                        Launch Full Toast (with image)
+                                    </button>
+                                    <button type="button" class="btn btn-default toastsDefaultAutohide">
+                                        Launch Default Toasts with autohide
+                                    </button>
+                                    <button type="button" class="btn btn-default toastsDefaultNotFixed">
+                                        Launch Default Toasts with not fixed
+                                    </button>
+                                    <br />
+                                    <br />
+                                    <button type="button" class="btn btn-default toastsDefaultTopLeft">
+                                        Launch Default Toast (topLeft)
+                                    </button>
+                                    <button type="button" class="btn btn-default toastsDefaultBottomRight">
+                                        Launch Default Toast (bottomRight)
+                                    </button>
+                                    <button type="button" class="btn btn-default toastsDefaultBottomLeft">
+                                        Launch Default Toast (bottomLeft)
+                                    </button>
+                                    <br />
+                                    <br />
+                                    <button type="button" class="btn btn-success toastsDefaultSuccess">
+                                        Launch Success Toast
+                                    </button>
+                                    <button type="button" class="btn btn-info toastsDefaultInfo">
+                                        Launch Info Toast
+                                    </button>
+                                    <button type="button" class="btn btn-warning toastsDefaultWarning">
+                                        Launch Warning Toast
+                                    </button>
+                                    <button type="button" class="btn btn-danger toastsDefaultDanger">
+                                        Launch Danger Toast
+                                    </button>
+                                    <button type="button" class="btn btn-default bg-maroon toastsDefaultMaroon">
+                                        Launch Maroon Toast
+                                    </button>
+                                    <div class="text-muted mt-3"></div>
+                                </div>
+                            </div>
+                            <div class="card card-success card-outline">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <i class="fas fa-edit"></i>
+                                        SweetAlert2 Examples
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    <button type="button" class="btn btn-success swalDefaultSuccess">
+                                        Launch Success Toast
+                                    </button>
+                                    <button type="button" class="btn btn-info swalDefaultInfo">
+                                        Launch Info Toast
+                                    </button>
+                                    <button type="button" class="btn btn-danger swalDefaultError">
+                                        Launch Error Toast
+                                    </button>
+                                    <button type="button" class="btn btn-warning swalDefaultWarning">
+                                        Launch Warning Toast
+                                    </button>
+                                    <button type="button" class="btn btn-default swalDefaultQuestion">
+                                        Launch Question Toast
+                                    </button>
+                                    <div class="text-muted mt-3">
+                                        For more examples look at
+                                        <a href="https://sweetalert2.github.io/">
+                                            https://sweetalert2.github.io/
+                                        </a>
+                                    </div>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                            <div class="card card-warning card-outline">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <i class="fas fa-edit"></i>
+                                        Toastr Examples
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    <button type="button" class="btn btn-success toastrDefaultSuccess">
+                                        Launch Success Toast
+                                    </button>
+                                    <button type="button" class="btn btn-info toastrDefaultInfo">
+                                        Launch Info Toast
+                                    </button>
+                                    <button type="button" class="btn btn-danger toastrDefaultError">
+                                        Launch Error Toast
+                                    </button>
+                                    <button type="button" class="btn btn-warning toastrDefaultWarning">
+                                        Launch Warning Toast
+                                    </button>
+                                    <div class="text-muted mt-3">
+                                        For more examples look at
+                                        <a href="https://codeseven.github.io/toastr/">
+                                            https://codeseven.github.io/toastr/
+                                        </a>
+                                    </div>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- ./row -->
+                </div>
+                <!-- /.container-fluid -->
+                <div class="modal fade" id="modal-default">
+                    <div class="modal-dialog">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h4 class="modal-title">Default Modal</h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <p>
+                                    One fine body&hellip;
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-between">
+                                <button type="button" class="btn btn-default" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="button" class="btn btn-primary">
+                                    Save changes
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.modal-content -->
+                    </div>
+                    <!-- /.modal-dialog -->
+                </div>
+                <!-- /.modal -->
+                <div class="modal fade" id="modal-overlay">
+                    <div class="modal-dialog">
+                        <div class="modal-content">
+                            <div class="overlay d-flex justify-content-center align-items-center">
+                                <i class="fas fa-2x fa-sync fa-spin"></i>
+                            </div>
+                            <div class="modal-header">
+                                <h4 class="modal-title">Default Modal</h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <p>
+                                    One fine body&hellip;
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-between">
+                                <button type="button" class="btn btn-default" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="button" class="btn btn-primary">
+                                    Save changes
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.modal-content -->
+                    </div>
+                    <!-- /.modal-dialog -->
+                </div>
+                <!-- /.modal -->
+                <div class="modal fade" id="modal-primary">
+                    <div class="modal-dialog">
+                        <div class="modal-content bg-primary">
+                            <div class="modal-header">
+                                <h4 class="modal-title">Primary Modal</h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <p>
+                                    One fine body&hellip;
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-between">
+                                <button type="button" class="btn btn-outline-light" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="button" class="btn btn-outline-light">
+                                    Save changes
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.modal-content -->
+                    </div>
+                    <!-- /.modal-dialog -->
+                </div>
+                <!-- /.modal -->
+                <div class="modal fade" id="modal-secondary">
+                    <div class="modal-dialog">
+                        <div class="modal-content bg-secondary">
+                            <div class="modal-header">
+                                <h4 class="modal-title">Secondary Modal</h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <p>
+                                    One fine body&hellip;
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-between">
+                                <button type="button" class="btn btn-outline-light" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="button" class="btn btn-outline-light">
+                                    Save changes
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.modal-content -->
+                    </div>
+                    <!-- /.modal-dialog -->
+                </div>
+                <!-- /.modal -->
+                <div class="modal fade" id="modal-info">
+                    <div class="modal-dialog">
+                        <div class="modal-content bg-info">
+                            <div class="modal-header">
+                                <h4 class="modal-title">Info Modal</h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">
+                                        &times;
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <p>
+                                    One fine body&hellip;
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-between">
+                                <button type="button" class="btn btn-outline-light" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="button" class="btn btn-outline-light">
+                                    Save changes
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.modal-content -->
+                    </div>
+                    <!-- /.modal-dialog -->
+                </div>
+                <!-- /.modal -->
+                <div class="modal fade" id="modal-warning">
+                    <div class="modal-dialog">
+                        <div class="modal-content bg-warning">
+                            <div class="modal-header">
+                                <h4 class="modal-title">
+                                    Warning Modal
+                                </h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">
+                                        &times;
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <p>
+                                    One fine body&hellip;
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-between">
+                                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="button" class="btn btn-outline-dark">
+                                    Save changes
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.modal-content -->
+                    </div>
+                    <!-- /.modal-dialog -->
+                </div>
+                <!-- /.modal -->
+                <div class="modal fade" id="modal-success">
+                    <div class="modal-dialog">
+                        <div class="modal-content bg-success">
+                            <div class="modal-header">
+                                <h4 class="modal-title">
+                                    Success Modal
+                                </h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">
+                                        &times;
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <p>
+                                    One fine body&hellip;
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-between">
+                                <button type="button" class="btn btn-outline-light" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="button" class="btn btn-outline-light">
+                                    Save changes
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.modal-content -->
+                    </div>
+                    <!-- /.modal-dialog -->
+                </div>
+                <!-- /.modal -->
+                <div class="modal fade" id="modal-danger">
+                    <div class="modal-dialog">
+                        <div class="modal-content bg-danger">
+                            <div class="modal-header">
+                                <h4 class="modal-title">
+                                    Danger Modal
+                                </h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">
+                                        &times;
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <p>
+                                    One fine body&hellip;
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-between">
+                                <button type="button" class="btn btn-outline-light" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="button" class="btn btn-outline-light">
+                                    Save changes
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.modal-content -->
+                    </div>
+                    <!-- /.modal-dialog -->
+                </div>
+                <!-- /.modal -->
+                <div class="modal fade" id="modal-sm">
+                    <div class="modal-dialog modal-sm">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h4 class="modal-title">
+                                    Small Modal
+                                </h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">
+                                        &times;
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <p>
+                                    One fine body&hellip;
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-between">
+                                <button type="button" class="btn btn-default" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="button" class="btn btn-primary">
+                                    Save changes
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.modal-content -->
+                    </div>
+                    <!-- /.modal-dialog -->
+                </div>
+                <!-- /.modal -->
+                <div class="modal fade" id="modal-lg">
+                    <div class="modal-dialog modal-lg">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h4 class="modal-title">
+                                    Large Modal
+                                </h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">
+                                        &times;
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <p>
+                                    One fine body&hellip;
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-between">
+                                <button type="button" class="btn btn-default" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="button" class="btn btn-primary">
+                                    Save changes
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.modal-content -->
+                    </div>
+                    <!-- /.modal-dialog -->
+                </div>
+                <!-- /.modal -->
+                <div class="modal fade" id="modal-xl">
+                    <div class="modal-dialog modal-xl">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h4 class="modal-title">
+                                    Extra Large Modal
+                                </h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">
+                                        &times;
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <p>
+                                    One fine body&hellip;
+                                </p>
+                            </div>
+                            <div class="modal-footer justify-content-between">
+                                <button type="button" class="btn btn-default" data-dismiss="modal">
+                                    Close
+                                </button>
+                                <button type="button" class="btn btn-primary">
+                                    Save changes
+                                </button>
+                            </div>
+                        </div>
+                        <!-- /.modal-content -->
+                    </div>
+                    <!-- /.modal-dialog -->
+                </div>
+                <!-- /.modal -->
+            </section>
+            <!-- /.content -->
+        </div>
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap 4 -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <!-- SweetAlert2 -->
+        <script src="/static/assets/plugins/sweetalert2/sweetalert2.min.js"></script>
+        <!-- Toastr -->
+        <script src="/static/assets/plugins/toastr/toastr.min.js"></script>
+        <!-- AdminLTE App -->
+        <script src="/static/assets/js/adminlte.min.js"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="/static/assets/js/demo.js"></script>
+        <script>
+    $(function() {
+      var Toast = Swal.mixin({
+        toast: true,
+        position: 'top-end',
+        showConfirmButton: false,
+        timer: 3000
+      });
+
+      $('.swalDefaultSuccess').click(function() {
+        Toast.fire({
+          icon: 'success',
+          title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.swalDefaultInfo').click(function() {
+        Toast.fire({
+          icon: 'info',
+          title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.swalDefaultError').click(function() {
+        Toast.fire({
+          icon: 'error',
+          title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.swalDefaultWarning').click(function() {
+        Toast.fire({
+          icon: 'warning',
+          title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.swalDefaultQuestion').click(function() {
+        Toast.fire({
+          icon: 'question',
+          title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+
+      $('.toastrDefaultSuccess').click(function() {
+        toastr.success('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
+      });
+      $('.toastrDefaultInfo').click(function() {
+        toastr.info('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
+      });
+      $('.toastrDefaultError').click(function() {
+        toastr.error('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
+      });
+      $('.toastrDefaultWarning').click(function() {
+        toastr.warning('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
+      });
+
+      $('.toastsDefaultDefault').click(function() {
+        $(document).Toasts('create', {
+          title: 'Toast Title',
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.toastsDefaultTopLeft').click(function() {
+        $(document).Toasts('create', {
+          title: 'Toast Title',
+          position: 'topLeft',
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.toastsDefaultBottomRight').click(function() {
+        $(document).Toasts('create', {
+          title: 'Toast Title',
+          position: 'bottomRight',
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.toastsDefaultBottomLeft').click(function() {
+        $(document).Toasts('create', {
+          title: 'Toast Title',
+          position: 'bottomLeft',
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.toastsDefaultAutohide').click(function() {
+        $(document).Toasts('create', {
+          title: 'Toast Title',
+          autohide: true,
+          delay: 750,
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.toastsDefaultNotFixed').click(function() {
+        $(document).Toasts('create', {
+          title: 'Toast Title',
+          fixed: false,
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.toastsDefaultFull').click(function() {
+        $(document).Toasts('create', {
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+          title: 'Toast Title',
+          subtitle: 'Subtitle',
+          icon: 'fas fa-envelope fa-lg',
+        })
+      });
+      $('.toastsDefaultFullImage').click(function() {
+        $(document).Toasts('create', {
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
+          title: 'Toast Title',
+          subtitle: 'Subtitle',
+          image: '../../dist/img/user3-128x128.jpg',
+          imageAlt: 'User Picture',
+        })
+      });
+      $('.toastsDefaultSuccess').click(function() {
+        $(document).Toasts('create', {
+          class: 'bg-success',
+          title: 'Toast Title',
+          subtitle: 'Subtitle',
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.toastsDefaultInfo').click(function() {
+        $(document).Toasts('create', {
+          class: 'bg-info',
+          title: 'Toast Title',
+          subtitle: 'Subtitle',
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.toastsDefaultWarning').click(function() {
+        $(document).Toasts('create', {
+          class: 'bg-warning',
+          title: 'Toast Title',
+          subtitle: 'Subtitle',
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.toastsDefaultDanger').click(function() {
+        $(document).Toasts('create', {
+          class: 'bg-danger',
+          title: 'Toast Title',
+          subtitle: 'Subtitle',
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+      $('.toastsDefaultMaroon').click(function() {
+        $(document).Toasts('create', {
+          class: 'bg-maroon',
+          title: 'Toast Title',
+          subtitle: 'Subtitle',
+          body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+        })
+      });
+    });
+
+        </script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/ui-navbar.html b/tests/jinja_adminlte/ui-navbar.html
new file mode 100644
index 0000000..aa6408f
--- /dev/null
+++ b/tests/jinja_adminlte/ui-navbar.html
@@ -0,0 +1,1116 @@
+{% extends "layouts/base.html" %}
+{% block title %}UI Navbar {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- SweetAlert2 -->
+        <link rel="stylesheet" href="/static/assets/plugins/sweetalert2/sweetalert2.min.css">
+        <!-- Toastr -->
+        <link rel="stylesheet" href="/static/assets/plugins/toastr/toastr.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>
+                                Navbar & Tabs
+                                <small>
+                                new
+                                </small>
+                            </h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Navbar & Tabs
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card card-primary card-outline">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        <i class="fas fa-edit"></i>
+                                        Navbar Examples
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    <div class="row">
+                                        <div class="col-12 col-md-6">
+                                            <h4>
+                                                Default Navbar
+                                                <small>
+                                                (navbar-light)
+                                                </small>
+                                            </h4>
+                                            <nav class="navbar navbar-expand navbar-light">
+                                                <!-- Left navbar links -->
+                                                <ul class="navbar-nav">
+                                                    <li class="nav-item">
+                                                        <a class="nav-link"
+                                                           data-widget="pushmenu"
+                                                           href="#"
+                                                           role="button">
+                                                            <i class="fas fa-bars"></i>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">Home</a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">Contact</a>
+                                                    </li>
+                                                </ul>
+                                                <!-- SEARCH FORM -->
+                                                <form class="form-inline ml-3">
+                                                    <div class="input-group input-group-sm">
+                                                        <input class="form-control form-control-navbar"
+                                                               type="search"
+                                                               placeholder="Search"
+                                                               aria-label="Search">
+                                                        <div class="input-group-append">
+                                                            <button class="btn btn-navbar" type="submit">
+                                                                <i class="fas fa-search"></i>
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </nav>
+                                        </div>
+                                        <div class="col-12 col-md-6">
+                                            <h4>
+                                                Default Navbar
+                                                <small>
+                                                (navbar-white navbar-light)
+                                                </small>
+                                            </h4>
+                                            <nav class="navbar navbar-expand navbar-white navbar-light">
+                                                <!-- Left navbar links -->
+                                                <ul class="navbar-nav">
+                                                    <li class="nav-item">
+                                                        <a class="nav-link"
+                                                           data-widget="pushmenu"
+                                                           href="#"
+                                                           role="button">
+                                                            <i class="fas fa-bars"></i>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">Home</a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">Contact</a>
+                                                    </li>
+                                                </ul>
+                                                <!-- SEARCH FORM -->
+                                                <form class="form-inline ml-3">
+                                                    <div class="input-group input-group-sm">
+                                                        <input class="form-control form-control-navbar"
+                                                               type="search"
+                                                               placeholder="Search"
+                                                               aria-label="Search">
+                                                        <div class="input-group-append">
+                                                            <button class="btn btn-navbar" type="submit">
+                                                                <i class="fas fa-search"></i>
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </nav>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-12 col-md-6">
+                                            <h4 class="mt-4">
+                                                Primary Navbar
+                                                <small>
+                                                <b>
+                                                recommended
+                                                </b>
+                                                (navbar-primary navbar-dark)
+                                                </small>
+                                            </h4>
+                                            <nav class="navbar navbar-expand navbar-primary navbar-dark">
+                                                <!-- Left navbar links -->
+                                                <ul class="navbar-nav">
+                                                    <li class="nav-item">
+                                                        <a class="nav-link"
+                                                           data-widget="pushmenu"
+                                                           href="#"
+                                                           role="button">
+                                                            <i class="fas fa-bars"></i>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">Home</a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">Contact</a>
+                                                    </li>
+                                                </ul>
+                                                <!-- SEARCH FORM -->
+                                                <form class="form-inline ml-3">
+                                                    <div class="input-group input-group-sm">
+                                                        <input class="form-control form-control-navbar"
+                                                               type="search"
+                                                               placeholder="Search"
+                                                               aria-label="Search">
+                                                        <div class="input-group-append">
+                                                            <button class="btn btn-navbar" type="submit">
+                                                                <i class="fas fa-search"></i>
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </nav>
+                                        </div>
+                                        <div class="col-12 col-md-6">
+                                            <h4 class="mt-4">
+                                                Primary Navbar
+                                                <small>
+                                                (navbar-primary navbar-light)
+                                                </small>
+                                            </h4>
+                                            <nav class="navbar navbar-expand navbar-primary navbar-light">
+                                                <!-- Left navbar links -->
+                                                <ul class="navbar-nav">
+                                                    <li class="nav-item">
+                                                        <a class="nav-link"
+                                                           data-widget="pushmenu"
+                                                           href="#"
+                                                           role="button">
+                                                            <i class="fas fa-bars"></i>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">Home</a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">Contact</a>
+                                                    </li>
+                                                </ul>
+                                                <!-- SEARCH FORM -->
+                                                <form class="form-inline ml-3">
+                                                    <div class="input-group input-group-sm">
+                                                        <input class="form-control form-control-navbar"
+                                                               type="search"
+                                                               placeholder="Search"
+                                                               aria-label="Search">
+                                                        <div class="input-group-append">
+                                                            <button class="btn btn-navbar" type="submit">
+                                                                <i class="fas fa-search"></i>
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </nav>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-12 col-md-6">
+                                            <h4 class="mt-4">
+                                                Orange Navbar
+                                                <small>
+                                                <b>
+                                                recommended
+                                                </b>
+                                                (navbar-orange navbar-light)
+                                                </small>
+                                            </h4>
+                                            <nav class="navbar navbar-expand navbar-orange navbar-light">
+                                                <!-- Left navbar links -->
+                                                <ul class="navbar-nav">
+                                                    <li class="nav-item">
+                                                        <a class="nav-link"
+                                                           data-widget="pushmenu"
+                                                           href="#"
+                                                           role="button">
+                                                            <i class="fas fa-bars"></i>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">Home</a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">
+                                                            Contact
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                                <!-- SEARCH FORM -->
+                                                <form class="form-inline ml-3">
+                                                    <div class="input-group input-group-sm">
+                                                        <input class="form-control form-control-navbar"
+                                                               type="search"
+                                                               placeholder="Search"
+                                                               aria-label="Search">
+                                                        <div class="input-group-append">
+                                                            <button class="btn btn-navbar" type="submit">
+                                                                <i class="fas fa-search"></i>
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </nav>
+                                        </div>
+                                        <div class="col-12 col-md-6">
+                                            <h4 class="mt-4">
+                                                Orange Navbar
+                                                <small>
+                                                (navbar-orange navbar-dark)
+                                                </small>
+                                            </h4>
+                                            <nav class="navbar navbar-expand navbar-orange navbar-dark">
+                                                <!-- Left navbar links -->
+                                                <ul class="navbar-nav">
+                                                    <li class="nav-item">
+                                                        <a class="nav-link"
+                                                           data-widget="pushmenu"
+                                                           href="#"
+                                                           role="button">
+                                                            <i class="fas fa-bars"></i>
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">
+                                                            Home
+                                                        </a>
+                                                    </li>
+                                                    <li class="nav-item d-none d-sm-inline-block">
+                                                        <a href="#" class="nav-link">
+                                                            Contact
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                                <!-- SEARCH FORM -->
+                                                <form class="form-inline ml-3">
+                                                    <div class="input-group input-group-sm">
+                                                        <input class="form-control form-control-navbar"
+                                                               type="search"
+                                                               placeholder="Search"
+                                                               aria-label="Search">
+                                                        <div class="input-group-append">
+                                                            <button class="btn btn-navbar" type="submit">
+                                                                <i class="fas fa-search"></i>
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </nav>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- ./row -->
+                    <div class="row">
+                        <div class="col-12">
+                            <h4>
+                                Nav Tabs inside Card Header
+                                <small>
+                                card-tabs / card-outline-tabs
+                                </small>
+                            </h4>
+                        </div>
+                    </div>
+                    <!-- ./row -->
+                    <div class="row">
+                        <div class="col-12 col-sm-6">
+                            <div class="card card-primary card-tabs">
+                                <div class="card-header p-0 pt-1">
+                                    <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
+                                        <li class="nav-item">
+                                            <a class="nav-link active"
+                                               id="custom-tabs-one-home-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-one-home"
+                                               role="tab"
+                                               aria-controls="custom-tabs-one-home"
+                                               aria-selected="true">
+                                                Home
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-one-profile-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-one-profile"
+                                               role="tab"
+                                               aria-controls="custom-tabs-one-profile"
+                                               aria-selected="false">
+                                                Profile
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-one-messages-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-one-messages"
+                                               role="tab"
+                                               aria-controls="custom-tabs-one-messages"
+                                               aria-selected="false">
+                                                Messages
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-one-settings-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-one-settings"
+                                               role="tab"
+                                               aria-controls="custom-tabs-one-settings"
+                                               aria-selected="false">
+                                                Settings
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div class="card-body">
+                                    <div class="tab-content" id="custom-tabs-one-tabContent">
+                                        <div class="tab-pane fade show active"
+                                             id="custom-tabs-one-home"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-one-home-tab">
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-one-profile"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-one-profile-tab">
+                                            Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-one-messages"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-one-messages-tab">
+                                            Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-one-settings"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-one-settings-tab">
+                                            Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                        </div>
+                        <div class="col-12 col-sm-6">
+                            <div class="card card-primary card-tabs">
+                                <div class="card-header p-0 pt-1">
+                                    <ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
+                                        <li class="pt-2 px-3">
+                                            <h3 class="card-title">
+                                                Card Title
+                                            </h3>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link active"
+                                               id="custom-tabs-two-home-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-two-home"
+                                               role="tab"
+                                               aria-controls="custom-tabs-two-home"
+                                               aria-selected="true">
+                                                Home
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-two-profile-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-two-profile"
+                                               role="tab"
+                                               aria-controls="custom-tabs-two-profile"
+                                               aria-selected="false">
+                                                Profile
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-two-messages-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-two-messages"
+                                               role="tab"
+                                               aria-controls="custom-tabs-two-messages"
+                                               aria-selected="false">
+                                                Messages
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-two-settings-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-two-settings"
+                                               role="tab"
+                                               aria-controls="custom-tabs-two-settings"
+                                               aria-selected="false">
+                                                Settings
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div class="card-body">
+                                    <div class="tab-content" id="custom-tabs-two-tabContent">
+                                        <div class="tab-pane fade show active"
+                                             id="custom-tabs-two-home"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-two-home-tab">
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-two-profile"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-two-profile-tab">
+                                            Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-two-messages"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-two-messages-tab">
+                                            Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-two-settings"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-two-settings-tab">
+                                            Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-12 col-sm-6">
+                            <div class="card card-primary card-outline card-tabs">
+                                <div class="card-header p-0 pt-1 border-bottom-0">
+                                    <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
+                                        <li class="nav-item">
+                                            <a class="nav-link active"
+                                               id="custom-tabs-three-home-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-three-home"
+                                               role="tab"
+                                               aria-controls="custom-tabs-three-home"
+                                               aria-selected="true">
+                                                Home
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-three-profile-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-three-profile"
+                                               role="tab"
+                                               aria-controls="custom-tabs-three-profile"
+                                               aria-selected="false">
+                                                Profile
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-three-messages-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-three-messages"
+                                               role="tab"
+                                               aria-controls="custom-tabs-three-messages"
+                                               aria-selected="false">
+                                                Messages
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-three-settings-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-three-settings"
+                                               role="tab"
+                                               aria-controls="custom-tabs-three-settings"
+                                               aria-selected="false">
+                                                Settings
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div class="card-body">
+                                    <div class="tab-content" id="custom-tabs-three-tabContent">
+                                        <div class="tab-pane fade show active"
+                                             id="custom-tabs-three-home"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-three-home-tab">
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-three-profile"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-three-profile-tab">
+                                            Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-three-messages"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-three-messages-tab">
+                                            Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-three-settings"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-three-settings-tab">
+                                            Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                        </div>
+                        <div class="col-12 col-sm-6">
+                            <div class="card card-primary card-outline card-outline-tabs">
+                                <div class="card-header p-0 border-bottom-0">
+                                    <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
+                                        <li class="nav-item">
+                                            <a class="nav-link active"
+                                               id="custom-tabs-four-home-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-four-home"
+                                               role="tab"
+                                               aria-controls="custom-tabs-four-home"
+                                               aria-selected="true">
+                                                Home
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-four-profile-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-four-profile"
+                                               role="tab"
+                                               aria-controls="custom-tabs-four-profile"
+                                               aria-selected="false">
+                                                Profile
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-four-messages-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-four-messages"
+                                               role="tab"
+                                               aria-controls="custom-tabs-four-messages"
+                                               aria-selected="false">
+                                                Messages
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-four-settings-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-four-settings"
+                                               role="tab"
+                                               aria-controls="custom-tabs-four-settings"
+                                               aria-selected="false">
+                                                Settings
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div class="card-body">
+                                    <div class="tab-content" id="custom-tabs-four-tabContent">
+                                        <div class="tab-pane fade show active"
+                                             id="custom-tabs-four-home"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-four-home-tab">
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-four-profile"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-four-profile-tab">
+                                            Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-four-messages"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-four-messages-tab">
+                                            Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-four-settings"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-four-settings-tab">
+                                            Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-12">
+                            <h4>Nav Tabs Overlay for loading</h4>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card card-primary card-tabs">
+                                <div class="card-header p-0 pt-1">
+                                    <ul class="nav nav-tabs" id="custom-tabs-five-tab" role="tablist">
+                                        <li class="nav-item">
+                                            <a class="nav-link active"
+                                               id="custom-tabs-five-overlay-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-five-overlay"
+                                               role="tab"
+                                               aria-controls="custom-tabs-five-overlay"
+                                               aria-selected="true">
+                                                Overlay
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-five-overlay-dark-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-five-overlay-dark"
+                                               role="tab"
+                                               aria-controls="custom-tabs-five-overlay-dark"
+                                               aria-selected="false">
+                                                Overlay Dark
+                                            </a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link"
+                                               id="custom-tabs-five-normal-tab"
+                                               data-toggle="pill"
+                                               href="#custom-tabs-five-normal"
+                                               role="tab"
+                                               aria-controls="custom-tabs-five-normal"
+                                               aria-selected="false">
+                                                Normal Tab
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div class="card-body">
+                                    <div class="tab-content" id="custom-tabs-five-tabContent">
+                                        <div class="tab-pane fade show active"
+                                             id="custom-tabs-five-overlay"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-five-overlay-tab">
+                                            <div class="overlay-wrapper">
+                                                <div class="overlay">
+                                                    <i class="fas fa-3x fa-sync-alt fa-spin"></i>
+                                                    <div class="text-bold pt-2">
+                                                        Loading...
+                                                    </div>
+                                                </div>
+                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
+                                            </div>
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-five-overlay-dark"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-five-overlay-dark-tab">
+                                            <div class="overlay-wrapper">
+                                                <div class="overlay dark">
+                                                    <i class="fas fa-3x fa-sync-alt fa-spin"></i>
+                                                    <div class="text-bold pt-2">
+                                                        Loading...
+                                                    </div>
+                                                </div>
+                                                Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
+                                            </div>
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="custom-tabs-five-normal"
+                                             role="tabpanel"
+                                             aria-labelledby="custom-tabs-five-normal-tab">
+                                            Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card -->
+                            </div>
+                        </div>
+                    </div>
+                    <!-- /.row -->
+                    <div class="card card-primary card-outline">
+                        <div class="card-header">
+                            <h3 class="card-title">
+                                <i class="fas fa-edit"></i>
+                                Vertical Tabs Examples
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <h4>Left Sided</h4>
+                            <div class="row">
+                                <div class="col-5 col-sm-3">
+                                    <div class="nav flex-column nav-tabs h-100"
+                                         id="vert-tabs-tab"
+                                         role="tablist"
+                                         aria-orientation="vertical">
+                                        <a class="nav-link active"
+                                           id="vert-tabs-home-tab"
+                                           data-toggle="pill"
+                                           href="#vert-tabs-home"
+                                           role="tab"
+                                           aria-controls="vert-tabs-home"
+                                           aria-selected="true">
+                                            Home
+                                        </a>
+                                        <a class="nav-link"
+                                           id="vert-tabs-profile-tab"
+                                           data-toggle="pill"
+                                           href="#vert-tabs-profile"
+                                           role="tab"
+                                           aria-controls="vert-tabs-profile"
+                                           aria-selected="false">
+                                            Profile
+                                        </a>
+                                        <a class="nav-link"
+                                           id="vert-tabs-messages-tab"
+                                           data-toggle="pill"
+                                           href="#vert-tabs-messages"
+                                           role="tab"
+                                           aria-controls="vert-tabs-messages"
+                                           aria-selected="false">
+                                            Messages
+                                        </a>
+                                        <a class="nav-link"
+                                           id="vert-tabs-settings-tab"
+                                           data-toggle="pill"
+                                           href="#vert-tabs-settings"
+                                           role="tab"
+                                           aria-controls="vert-tabs-settings"
+                                           aria-selected="false">
+                                            Settings
+                                        </a>
+                                    </div>
+                                </div>
+                                <div class="col-7 col-sm-9">
+                                    <div class="tab-content" id="vert-tabs-tabContent">
+                                        <div class="tab-pane text-left fade show active"
+                                             id="vert-tabs-home"
+                                             role="tabpanel"
+                                             aria-labelledby="vert-tabs-home-tab">
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="vert-tabs-profile"
+                                             role="tabpanel"
+                                             aria-labelledby="vert-tabs-profile-tab">
+                                            Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="vert-tabs-messages"
+                                             role="tabpanel"
+                                             aria-labelledby="vert-tabs-messages-tab">
+                                            Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="vert-tabs-settings"
+                                             role="tabpanel"
+                                             aria-labelledby="vert-tabs-settings-tab">
+                                            Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <h4 class="mt-4">
+                                Right Sided
+                                <small>
+                                (nav-tabs-right)
+                                </small>
+                            </h4>
+                            <div class="row">
+                                <div class="col-7 col-sm-9">
+                                    <div class="tab-content" id="vert-tabs-right-tabContent">
+                                        <div class="tab-pane fade show active"
+                                             id="vert-tabs-right-home"
+                                             role="tabpanel"
+                                             aria-labelledby="vert-tabs-right-home-tab">
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="vert-tabs-right-profile"
+                                             role="tabpanel"
+                                             aria-labelledby="vert-tabs-right-profile-tab">
+                                            Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="vert-tabs-right-messages"
+                                             role="tabpanel"
+                                             aria-labelledby="vert-tabs-right-messages-tab">
+                                            Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
+                                        </div>
+                                        <div class="tab-pane fade"
+                                             id="vert-tabs-right-settings"
+                                             role="tabpanel"
+                                             aria-labelledby="vert-tabs-right-settings-tab">
+                                            Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-5 col-sm-3">
+                                    <div class="nav flex-column nav-tabs nav-tabs-right h-100"
+                                         id="vert-tabs-right-tab"
+                                         role="tablist"
+                                         aria-orientation="vertical">
+                                        <a class="nav-link active"
+                                           id="vert-tabs-right-home-tab"
+                                           data-toggle="pill"
+                                           href="#vert-tabs-right-home"
+                                           role="tab"
+                                           aria-controls="vert-tabs-right-home"
+                                           aria-selected="true">
+                                            Home
+                                        </a>
+                                        <a class="nav-link"
+                                           id="vert-tabs-right-profile-tab"
+                                           data-toggle="pill"
+                                           href="#vert-tabs-right-profile"
+                                           role="tab"
+                                           aria-controls="vert-tabs-right-profile"
+                                           aria-selected="false">
+                                            Profile
+                                        </a>
+                                        <a class="nav-link"
+                                           id="vert-tabs-right-messages-tab"
+                                           data-toggle="pill"
+                                           href="#vert-tabs-right-messages"
+                                           role="tab"
+                                           aria-controls="vert-tabs-right-messages"
+                                           aria-selected="false">
+                                            Messages
+                                        </a>
+                                        <a class="nav-link"
+                                           id="vert-tabs-right-settings-tab"
+                                           data-toggle="pill"
+                                           href="#vert-tabs-right-settings"
+                                           role="tab"
+                                           aria-controls="vert-tabs-right-settings"
+                                           aria-selected="false">
+                                            Settings
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.card -->
+                    <div class="card card-primary card-outline">
+                        <div class="card-header">
+                            <h3 class="card-title">
+                                <i class="fas fa-edit"></i>
+                                Tabs Custom Content Examples
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <h4>Custom Content Below</h4>
+                            <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist">
+                                <li class="nav-item">
+                                    <a class="nav-link active"
+                                       id="custom-content-below-home-tab"
+                                       data-toggle="pill"
+                                       href="#custom-content-below-home"
+                                       role="tab"
+                                       aria-controls="custom-content-below-home"
+                                       aria-selected="true">
+                                        Home
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link"
+                                       id="custom-content-below-profile-tab"
+                                       data-toggle="pill"
+                                       href="#custom-content-below-profile"
+                                       role="tab"
+                                       aria-controls="custom-content-below-profile"
+                                       aria-selected="false">
+                                        Profile
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link"
+                                       id="custom-content-below-messages-tab"
+                                       data-toggle="pill"
+                                       href="#custom-content-below-messages"
+                                       role="tab"
+                                       aria-controls="custom-content-below-messages"
+                                       aria-selected="false">
+                                        Messages
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link"
+                                       id="custom-content-below-settings-tab"
+                                       data-toggle="pill"
+                                       href="#custom-content-below-settings"
+                                       role="tab"
+                                       aria-controls="custom-content-below-settings"
+                                       aria-selected="false">
+                                        Settings
+                                    </a>
+                                </li>
+                            </ul>
+                            <div class="tab-content" id="custom-content-below-tabContent">
+                                <div class="tab-pane fade show active"
+                                     id="custom-content-below-home"
+                                     role="tabpanel"
+                                     aria-labelledby="custom-content-below-home-tab">
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
+                                </div>
+                                <div class="tab-pane fade"
+                                     id="custom-content-below-profile"
+                                     role="tabpanel"
+                                     aria-labelledby="custom-content-below-profile-tab">
+                                    Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
+                                </div>
+                                <div class="tab-pane fade"
+                                     id="custom-content-below-messages"
+                                     role="tabpanel"
+                                     aria-labelledby="custom-content-below-messages-tab">
+                                    Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
+                                </div>
+                                <div class="tab-pane fade"
+                                     id="custom-content-below-settings"
+                                     role="tabpanel"
+                                     aria-labelledby="custom-content-below-settings-tab">
+                                    Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
+                                </div>
+                            </div>
+                            <div class="tab-custom-content">
+                                <p class="lead mb-0">
+                                    Custom Content goes here
+                                </p>
+                            </div>
+                            <h4 class="mt-5 ">
+                                Custom Content Above
+                            </h4>
+                            <ul class="nav nav-tabs" id="custom-content-above-tab" role="tablist">
+                                <li class="nav-item">
+                                    <a class="nav-link active"
+                                       id="custom-content-above-home-tab"
+                                       data-toggle="pill"
+                                       href="#custom-content-above-home"
+                                       role="tab"
+                                       aria-controls="custom-content-above-home"
+                                       aria-selected="true">
+                                        Home
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link"
+                                       id="custom-content-above-profile-tab"
+                                       data-toggle="pill"
+                                       href="#custom-content-above-profile"
+                                       role="tab"
+                                       aria-controls="custom-content-above-profile"
+                                       aria-selected="false">
+                                        Profile
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link"
+                                       id="custom-content-above-messages-tab"
+                                       data-toggle="pill"
+                                       href="#custom-content-above-messages"
+                                       role="tab"
+                                       aria-controls="custom-content-above-messages"
+                                       aria-selected="false">
+                                        Messages
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link"
+                                       id="custom-content-above-settings-tab"
+                                       data-toggle="pill"
+                                       href="#custom-content-above-settings"
+                                       role="tab"
+                                       aria-controls="custom-content-above-settings"
+                                       aria-selected="false">
+                                        Settings
+                                    </a>
+                                </li>
+                            </ul>
+                            <div class="tab-custom-content">
+                                <p class="lead mb-0">
+                                    Custom Content goes here
+                                </p>
+                            </div>
+                            <div class="tab-content" id="custom-content-above-tabContent">
+                                <div class="tab-pane fade show active"
+                                     id="custom-content-above-home"
+                                     role="tabpanel"
+                                     aria-labelledby="custom-content-above-home-tab">
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
+                                </div>
+                                <div class="tab-pane fade"
+                                     id="custom-content-above-profile"
+                                     role="tabpanel"
+                                     aria-labelledby="custom-content-above-profile-tab">
+                                    Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
+                                </div>
+                                <div class="tab-pane fade"
+                                     id="custom-content-above-messages"
+                                     role="tabpanel"
+                                     aria-labelledby="custom-content-above-messages-tab">
+                                    Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
+                                </div>
+                                <div class="tab-pane fade"
+                                     id="custom-content-above-settings"
+                                     role="tabpanel"
+                                     aria-labelledby="custom-content-above-settings-tab">
+                                    Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
+                                </div>
+                            </div>
+                        </div>
+                        <!-- /.card -->
+                    </div>
+                    <!-- /.card -->
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- /.content -->
+        </div>
+        <!-- /.content-wrapper -->
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap 4 -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <!-- AdminLTE App -->
+        <script src="/static/assets/js/adminlte.min.js"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="/static/assets/js/demo.js"></script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/ui-ribbons.html b/tests/jinja_adminlte/ui-ribbons.html
new file mode 100644
index 0000000..c2ecca8
--- /dev/null
+++ b/tests/jinja_adminlte/ui-ribbons.html
@@ -0,0 +1,277 @@
+{% extends "layouts/base.html" %}
+{% block title %}UI Ribbons {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>Ribbons</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Ribbons
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="card card-primary">
+                                <div class="card-header">
+                                    <h3 class="card-title">Ribbons</h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <div class="row">
+                                        <div class="col-sm-4">
+                                            <div class="position-relative p-3 bg-gray" style="height: 180px">
+                                                <div class="ribbon-wrapper">
+                                                    <div class="ribbon bg-primary">
+                                                        Ribbon
+                                                    </div>
+                                                </div>
+                                                Ribbon Default
+                                                <br />
+                                                <small>
+                                                .ribbon-wrapper.ribbon-lg .ribbon
+                                                </small>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-4">
+                                            <div class="position-relative p-3 bg-gray" style="height: 180px">
+                                                <div class="ribbon-wrapper ribbon-lg">
+                                                    <div class="ribbon bg-info">
+                                                        Ribbon Large
+                                                    </div>
+                                                </div>
+                                                Ribbon Large
+                                                <br />
+                                                <small>
+                                                .ribbon-wrapper.ribbon-lg .ribbon
+                                                </small>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-4">
+                                            <div class="position-relative p-3 bg-gray" style="height: 180px">
+                                                <div class="ribbon-wrapper ribbon-xl">
+                                                    <div class="ribbon bg-secondary">
+                                                        Ribbon Extra Large
+                                                    </div>
+                                                </div>
+                                                Ribbon Extra Large
+                                                <br />
+                                                <small>
+                                                .ribbon-wrapper.ribbon-xl .ribbon
+                                                </small>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row mt-4">
+                                        <div class="col-sm-4">
+                                            <div class="position-relative p-3 bg-gray" style="height: 180px">
+                                                <div class="ribbon-wrapper ribbon-lg">
+                                                    <div class="ribbon bg-success text-lg">
+                                                        Ribbon
+                                                    </div>
+                                                </div>
+                                                Ribbon Large
+                                                <br />
+                                                with Large Text
+                                                <br />
+                                                <small>
+                                                .ribbon-wrapper.ribbon-lg .ribbon.text-lg
+                                                </small>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-4">
+                                            <div class="position-relative p-3 bg-gray" style="height: 180px">
+                                                <div class="ribbon-wrapper ribbon-xl">
+                                                    <div class="ribbon bg-warning text-lg">
+                                                        Ribbon
+                                                    </div>
+                                                </div>
+                                                Ribbon Extra Large
+                                                <br />
+                                                with Large Text
+                                                <br />
+                                                <small>
+                                                .ribbon-wrapper.ribbon-xl .ribbon.text-lg
+                                                </small>
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-4">
+                                            <div class="position-relative p-3 bg-gray" style="height: 180px">
+                                                <div class="ribbon-wrapper ribbon-xl">
+                                                    <div class="ribbon bg-danger text-xl">
+                                                        Ribbon
+                                                    </div>
+                                                </div>
+                                                Ribbon Extra Large
+                                                <br />
+                                                with Extra Large Text
+                                                <br />
+                                                <small>
+                                                .ribbon-wrapper.ribbon-xl .ribbon.text-xl
+                                                </small>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row mt-4">
+                                        <div class="col-sm-4">
+                                            <div class="position-relative">
+                                                <img src="/static/assets/img/photo1.png"
+                                                     alt="Photo 1"
+                                                     class="img-fluid">
+                                                    <div class="ribbon-wrapper ribbon-lg">
+                                                        <div class="ribbon bg-success text-lg">
+                                                            Ribbon
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-4">
+                                                <div class="position-relative">
+                                                    <img src="/static/assets/img/photo2.png"
+                                                         alt="Photo 2"
+                                                         class="img-fluid">
+                                                        <div class="ribbon-wrapper ribbon-xl">
+                                                            <div class="ribbon bg-warning text-lg">
+                                                                Ribbon
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col-sm-4">
+                                                    <div class="position-relative" style="min-height: 180px;">
+                                                        <img src="/static/assets/img/photo3.jpg"
+                                                             alt="Photo 3"
+                                                             class="img-fluid">
+                                                            <div class="ribbon-wrapper ribbon-xl">
+                                                                <div class="ribbon bg-danger text-xl">
+                                                                    Ribbon
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <!-- /.card-body -->
+                                        </div>
+                                        <!-- /.card -->
+                                    </div>
+                                    <!-- /.col -->
+                                </div>
+                                <!-- /.row -->
+                            </div>
+                            <!-- /.container-fluid -->
+                        </section>
+                        <!-- /.content -->
+                    </div>
+                    <!-- /.content-wrapper -->
+                {% endblock content %}
+                <!-- Specific Page JS goes HERE -->
+                {% block javascripts %}
+                    <!-- jQuery -->
+                    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                    <!-- Bootstrap 4 -->
+                    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                    <!-- AdminLTE App -->
+                    <script src="/static/assets/js/adminlte.min.js"></script>
+                    <!-- AdminLTE for demo purposes -->
+                    <script src="/static/assets/js/demo.js"></script>
+                    <!-- Ion Slider -->
+                    <script src="/static/assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
+                    <!-- Bootstrap slider -->
+                    <script src="/static/assets/plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
+                    <script>
+    $(function () {
+      /* BOOTSTRAP SLIDER */
+      $('.slider').bootstrapSlider()
+
+      /* ION SLIDER */
+      $('#range_1').ionRangeSlider({
+        min     : 0,
+        max     : 5000,
+        from    : 1000,
+        to      : 4000,
+        type    : 'double',
+        step    : 1,
+        prefix  : '$',
+        prettify: false,
+        hasGrid : true
+      })
+      $('#range_2').ionRangeSlider()
+
+      $('#range_5').ionRangeSlider({
+        min     : 0,
+        max     : 10,
+        type    : 'single',
+        step    : 0.1,
+        postfix : ' mm',
+        prettify: false,
+        hasGrid : true
+      })
+      $('#range_6').ionRangeSlider({
+        min     : -50,
+        max     : 50,
+        from    : 0,
+        type    : 'single',
+        step    : 1,
+        postfix : '°',
+        prettify: false,
+        hasGrid : true
+      })
+
+      $('#range_4').ionRangeSlider({
+        type      : 'single',
+        step      : 100,
+        postfix   : ' light years',
+        from      : 55000,
+        hideMinMax: true,
+        hideFromTo: false
+      })
+      $('#range_3').ionRangeSlider({
+        type    : 'double',
+        postfix : ' miles',
+        step    : 10000,
+        from    : 25000000,
+        to      : 35000000,
+        onChange: function (obj) {
+          var t = ''
+          for (var prop in obj) {
+            t += prop + ': ' + obj[prop] + '\r\n'
+          }
+          $('#result').html(t)
+        },
+        onLoad  : function (obj) {
+          //
+        }
+      })
+    })
+                    </script>
+                {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/ui-sliders.html b/tests/jinja_adminlte/ui-sliders.html
new file mode 100644
index 0000000..1897d16
--- /dev/null
+++ b/tests/jinja_adminlte/ui-sliders.html
@@ -0,0 +1,363 @@
+{% extends "layouts/base.html" %}
+{% block title %}UI Sliders {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- Ion Slider -->
+        <link rel="stylesheet" href="/static/assets/plugins/ion-rangeslider/css/ion.rangeSlider.min.css">
+        <!-- bootstrap slider -->
+        <link rel="stylesheet" href="/static/assets/plugins/bootstrap-slider/css/bootstrap-slider.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>Sliders</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Sliders
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="card card-primary">
+                                <div class="card-header">
+                                    <h3 class="card-title">Ion Slider</h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <div class="row margin">
+                                        <div class="col-sm-6">
+                                            <input id="range_1" type="text" name="range_1" value="">
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <input id="range_2"
+                                                   type="text"
+                                                   name="range_2"
+                                                   value="1000;100000"
+                                                   data-type="double"
+                                                   data-step="500"
+                                                   data-postfix=" &euro;"
+                                                   data-from="30000"
+                                                   data-to="90000"
+                                                   data-hasgrid="true">
+                                        </div>
+                                    </div>
+                                    <div class="row margin">
+                                        <div class="col-sm-6">
+                                            <input id="range_5" type="text" name="range_5" value="">
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <input id="range_6" type="text" name="range_6" value="">
+                                        </div>
+                                    </div>
+                                    <div class="row margin">
+                                        <div class="col-sm-12">
+                                            <input id="range_4" type="text" name="range_4" value="10000;100000">
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="card card-primary">
+                                <div class="card-header">
+                                    <h3 class="card-title">Bootstrap Slider</h3>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <div class="row margin">
+                                        <div class="col-sm-6">
+                                            <div class="slider-red">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="horizontal"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                            <p>
+                                                .slider-red input.slider
+                                            </p>
+                                            <div class="slider-blue">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="horizontal"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                            <p>
+                                                .slider-blue input.slider
+                                            </p>
+                                            <div class="slider-green">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="horizontal"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                            <p>
+                                                .slider-green input.slider
+                                            </p>
+                                            <div class="slider-yellow">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="horizontal"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                            <p>
+                                                .slider-yellow input.slider
+                                            </p>
+                                            <div class="slider-teal">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="horizontal"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                            <p>
+                                                .slider-teal input.slider
+                                            </p>
+                                            <div class="slider-purple">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="horizontal"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                            <p>
+                                                .slider-purple input.slider
+                                            </p>
+                                        </div>
+                                        <div class="col-sm-6 d-flex justify-content-center">
+                                            <div class="slider-red mx-3">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="vertical"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                            <div class="slider-blue mx-3">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="vertical"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                            <div class="slider-green mx-3">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="vertical"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                            <div class="slider-yellow mx-3">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="vertical"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                            <div class="slider-teal mx-3">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="vertical"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                            <div class="slider-purple mx-3">
+                                                <input type="text"
+                                                       value=""
+                                                       class="slider form-control"
+                                                       data-slider-min="-200"
+                                                       data-slider-max="200"
+                                                       data-slider-step="5"
+                                                       data-slider-value="[-100,100]"
+                                                       data-slider-orientation="vertical"
+                                                       data-slider-selection="before"
+                                                       data-slider-tooltip="show">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- /.content -->
+        </div>
+        <!-- /.content-wrapper -->
+    {% endblock content %}
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}
+        <!-- jQuery -->
+        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+        <!-- Bootstrap 4 -->
+        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <!-- AdminLTE App -->
+        <script src="/static/assets/js/adminlte.min.js"></script>
+        <!-- AdminLTE for demo purposes -->
+        <script src="/static/assets/js/demo.js"></script>
+        <!-- Ion Slider -->
+        <script src="/static/assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
+        <!-- Bootstrap slider -->
+        <script src="/static/assets/plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
+        <script>
+    $(function () {
+      /* BOOTSTRAP SLIDER */
+      $('.slider').bootstrapSlider()
+
+      /* ION SLIDER */
+      $('#range_1').ionRangeSlider({
+        min     : 0,
+        max     : 5000,
+        from    : 1000,
+        to      : 4000,
+        type    : 'double',
+        step    : 1,
+        prefix  : '$',
+        prettify: false,
+        hasGrid : true
+      })
+      $('#range_2').ionRangeSlider()
+
+      $('#range_5').ionRangeSlider({
+        min     : 0,
+        max     : 10,
+        type    : 'single',
+        step    : 0.1,
+        postfix : ' mm',
+        prettify: false,
+        hasGrid : true
+      })
+      $('#range_6').ionRangeSlider({
+        min     : -50,
+        max     : 50,
+        from    : 0,
+        type    : 'single',
+        step    : 1,
+        postfix : '°',
+        prettify: false,
+        hasGrid : true
+      })
+
+      $('#range_4').ionRangeSlider({
+        type      : 'single',
+        step      : 100,
+        postfix   : ' light years',
+        from      : 55000,
+        hideMinMax: true,
+        hideFromTo: false
+      })
+      $('#range_3').ionRangeSlider({
+        type    : 'double',
+        postfix : ' miles',
+        step    : 10000,
+        from    : 25000000,
+        to      : 35000000,
+        onChange: function (obj) {
+          var t = ''
+          for (var prop in obj) {
+            t += prop + ': ' + obj[prop] + '\r\n'
+          }
+          $('#result').html(t)
+        },
+        onLoad  : function (obj) {
+          //
+        }
+      })
+    })
+        </script>
+    {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/ui-timeline.html b/tests/jinja_adminlte/ui-timeline.html
new file mode 100644
index 0000000..afafa18
--- /dev/null
+++ b/tests/jinja_adminlte/ui-timeline.html
@@ -0,0 +1,194 @@
+{% extends "layouts/base.html" %}
+{% block title %}UI Timeline {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>Timeline</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Timeline
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <!-- Timelime example -->
+                    <div class="row">
+                        <div class="col-md-12">
+                            <!-- The time line -->
+                            <div class="timeline">
+                                <!-- timeline time label -->
+                                <div class="time-label">
+                                    <span class="bg-red">10 Feb. 2014</span>
+                                </div>
+                                <!-- /.timeline-label -->
+                                <!-- timeline item -->
+                                <div>
+                                    <i class="fas fa-envelope bg-blue"></i>
+                                    <div class="timeline-item">
+                                        <span class="time">
+                                            <i class="fas fa-clock"></i>
+                                            12:05
+                                        </span>
+                                        <h3 class="timeline-header">
+                                            <a href="#">Support Team</a>
+                                            sent you an email
+                                        </h3>
+                                        <div class="timeline-body">
+                                            Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
+                                            weebly ning heekya handango imeem plugg dopplr jibjab, movity
+                                            jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
+                                            quora plaxo ideeli hulu weebly balihoo...
+                                        </div>
+                                        <div class="timeline-footer">
+                                            <a class="btn btn-primary btn-sm">Read more</a>
+                                            <a class="btn btn-danger btn-sm">Delete</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- END timeline item -->
+                                <!-- timeline item -->
+                                <div>
+                                    <i class="fas fa-user bg-green"></i>
+                                    <div class="timeline-item">
+                                        <span class="time">
+                                            <i class="fas fa-clock"></i>
+                                            5 mins ago
+                                        </span>
+                                        <h3 class="timeline-header no-border">
+                                            <a href="#">Sarah Young</a>
+                                            accepted your friend request
+                                        </h3>
+                                    </div>
+                                </div>
+                                <!-- END timeline item -->
+                                <!-- timeline item -->
+                                <div>
+                                    <i class="fas fa-comments bg-yellow"></i>
+                                    <div class="timeline-item">
+                                        <span class="time">
+                                            <i class="fas fa-clock"></i>
+                                            27 mins ago
+                                        </span>
+                                        <h3 class="timeline-header">
+                                            <a href="#">Jay White</a>
+                                            commented on your post
+                                        </h3>
+                                        <div class="timeline-body">
+                                            Take me to your leader!
+                                            Switzerland is small and neutral!
+                                            We are more like Germany, ambitious and misunderstood!
+                                        </div>
+                                        <div class="timeline-footer">
+                                            <a class="btn btn-warning btn-sm">View comment</a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- END timeline item -->
+                                <!-- timeline time label -->
+                                <div class="time-label">
+                                    <span class="bg-green">3 Jan. 2014</span>
+                                </div>
+                                <!-- /.timeline-label -->
+                                <!-- timeline item -->
+                                <div>
+                                    <i class="fa fa-camera bg-purple"></i>
+                                    <div class="timeline-item">
+                                        <span class="time">
+                                            <i class="fas fa-clock"></i>
+                                            2 days ago
+                                        </span>
+                                        <h3 class="timeline-header">
+                                            <a href="#">Mina Lee</a>
+                                            uploaded new photos
+                                        </h3>
+                                        <div class="timeline-body">
+                                            <img src="https://placehold.it/150x100" alt="...">
+                                                <img src="https://placehold.it/150x100" alt="...">
+                                                    <img src="https://placehold.it/150x100" alt="...">
+                                                        <img src="https://placehold.it/150x100" alt="...">
+                                                            <img src="https://placehold.it/150x100" alt="...">
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <!-- END timeline item -->
+                                                    <!-- timeline item -->
+                                                    <div>
+                                                        <i class="fas fa-video bg-maroon"></i>
+                                                        <div class="timeline-item">
+                                                            <span class="time">
+                                                                <i class="fas fa-clock"></i>
+                                                                5 days ago
+                                                            </span>
+                                                            <h3 class="timeline-header">
+                                                                <a href="#">
+                                                                    Mr. Doe
+                                                                </a>
+                                                                shared a video
+                                                            </h3>
+                                                            <div class="timeline-body">
+                                                                <div class="embed-responsive embed-responsive-16by9">
+                                                                    <iframe class="embed-responsive-item"
+                                                                            src="https://www.youtube.com/embed/tMWkeBIohBs"></iframe>
+                                                                </div>
+                                                            </div>
+                                                            <div class="timeline-footer">
+                                                                <a href="#" class="btn btn-sm bg-maroon">
+                                                                    See comments
+                                                                </a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <!-- END timeline item -->
+                                                    <div>
+                                                        <i class="fas fa-clock bg-gray"></i>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <!-- /.col -->
+                                        </div>
+                                    </div>
+                                    <!-- /.timeline -->
+                                </section>
+                                <!-- /.content -->
+                            </div>
+                            <!-- /.content-wrapper -->
+                        {% endblock content %}
+                        <!-- Specific Page JS goes HERE -->
+                        {% block javascripts %}
+                            <!-- jQuery -->
+                            <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                            <!-- Bootstrap 4 -->
+                            <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                            <!-- AdminLTE App -->
+                            <script src="/static/assets/js/adminlte.min.js"></script>
+                            <!-- AdminLTE for demo purposes -->
+                            <script src="/static/assets/js/demo.js"></script>
+                        {% endblock javascripts %}
diff --git a/tests/jinja_adminlte/widgets.html b/tests/jinja_adminlte/widgets.html
new file mode 100644
index 0000000..8b94fc1
--- /dev/null
+++ b/tests/jinja_adminlte/widgets.html
@@ -0,0 +1,2913 @@
+{% extends "layouts/base.html" %}
+{% block title %}Widgets {% endblock %}
+<!-- Element injected in the BODY element -->
+{% block body_class %}{% endblock body_class %}
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}
+        <!-- Google Font: Source Sans Pro -->
+        <link rel="stylesheet"
+              href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+        <!-- Font Awesome -->
+        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
+        <!-- Ionicons -->
+        <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+        <!-- Theme style -->
+        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
+    {% endblock stylesheets %}
+    {% block content %}
+        <!-- Content Wrapper. Contains page content -->
+        <div class="content-wrapper">
+            <!-- Content Header (Page header) -->
+            <section class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1>Widgets</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item">
+                                    <a href="#">Home</a>
+                                </li>
+                                <li class="breadcrumb-item active">
+                                    Widgets
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+                <!-- /.container-fluid -->
+            </section>
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <h5 class="mb-2">Info Box</h5>
+                    <div class="row">
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box">
+                                <span class="info-box-icon bg-info">
+                                    <i class="far fa-envelope"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">Messages</span>
+                                    <span class="info-box-number">1,410</span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box">
+                                <span class="info-box-icon bg-success">
+                                    <i class="far fa-flag"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">Bookmarks</span>
+                                    <span class="info-box-number">410</span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box">
+                                <span class="info-box-icon bg-warning">
+                                    <i class="far fa-copy"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">Uploads</span>
+                                    <span class="info-box-number">13,648</span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box">
+                                <span class="info-box-icon bg-danger">
+                                    <i class="far fa-star"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">Likes</span>
+                                    <span class="info-box-number">93,139</span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- =========================================================== -->
+                    <h5 class="mb-2">
+                        Info Box With Custom Shadows
+                        <small>
+                        <i>
+                        Using Bootstrap's Shadow Utility
+                        </i>
+                        </small>
+                    </h5>
+                    <div class="row">
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box shadow-none">
+                                <span class="info-box-icon bg-info">
+                                    <i class="far fa-envelope"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Custom Shadows - None
+                                    </span>
+                                    <span class="info-box-number"></span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box shadow-sm">
+                                <span class="info-box-icon bg-success">
+                                    <i class="far fa-flag"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Custom Shadows - Small
+                                    </span>
+                                    <span class="info-box-number"></span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box shadow">
+                                <span class="info-box-icon bg-warning">
+                                    <i class="far fa-copy"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Custom Shadows - Regular
+                                    </span>
+                                    <span class="info-box-number"></span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box shadow-lg">
+                                <span class="info-box-icon bg-danger">
+                                    <i class="far fa-star"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Custom Shadows - Large
+                                    </span>
+                                    <span class="info-box-number"></span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- =========================================================== -->
+                    <h5 class="mt-4 mb-2">
+                        Info Box With
+                        <code>
+                        bg-*
+                        </code>
+                    </h5>
+                    <div class="row">
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box bg-info">
+                                <span class="info-box-icon">
+                                    <i class="far fa-bookmark"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Bookmarks
+                                    </span>
+                                    <span class="info-box-number">
+                                        41,410
+                                    </span>
+                                    <div class="progress">
+                                        <div class="progress-bar" style="width: 70%"></div>
+                                    </div>
+                                    <span class="progress-description">
+                                        70% Increase in 30 Days
+                                    </span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box bg-success">
+                                <span class="info-box-icon">
+                                    <i class="far fa-thumbs-up"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Likes
+                                    </span>
+                                    <span class="info-box-number">
+                                        41,410
+                                    </span>
+                                    <div class="progress">
+                                        <div class="progress-bar" style="width: 70%"></div>
+                                    </div>
+                                    <span class="progress-description">
+                                        70% Increase in 30 Days
+                                    </span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box bg-warning">
+                                <span class="info-box-icon">
+                                    <i class="far fa-calendar-alt"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Events
+                                    </span>
+                                    <span class="info-box-number">
+                                        41,410
+                                    </span>
+                                    <div class="progress">
+                                        <div class="progress-bar" style="width: 70%"></div>
+                                    </div>
+                                    <span class="progress-description">
+                                        70% Increase in 30 Days
+                                    </span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box bg-danger">
+                                <span class="info-box-icon">
+                                    <i class="fas fa-comments"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Comments
+                                    </span>
+                                    <span class="info-box-number">
+                                        41,410
+                                    </span>
+                                    <div class="progress">
+                                        <div class="progress-bar" style="width: 70%"></div>
+                                    </div>
+                                    <span class="progress-description">
+                                        70% Increase in 30 Days
+                                    </span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- =========================================================== -->
+                    <h5 class="mt-4 mb-2">
+                        Info Box With
+                        <code>
+                        bg-gradient-*
+                        </code>
+                    </h5>
+                    <div class="row">
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box bg-gradient-info">
+                                <span class="info-box-icon">
+                                    <i class="far fa-bookmark"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Bookmarks
+                                    </span>
+                                    <span class="info-box-number">
+                                        41,410
+                                    </span>
+                                    <div class="progress">
+                                        <div class="progress-bar" style="width: 70%"></div>
+                                    </div>
+                                    <span class="progress-description">
+                                        70% Increase in 30 Days
+                                    </span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box bg-gradient-success">
+                                <span class="info-box-icon">
+                                    <i class="far fa-thumbs-up"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Likes
+                                    </span>
+                                    <span class="info-box-number">
+                                        41,410
+                                    </span>
+                                    <div class="progress">
+                                        <div class="progress-bar" style="width: 70%"></div>
+                                    </div>
+                                    <span class="progress-description">
+                                        70% Increase in 30 Days
+                                    </span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box bg-gradient-warning">
+                                <span class="info-box-icon">
+                                    <i class="far fa-calendar-alt"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Events
+                                    </span>
+                                    <span class="info-box-number">
+                                        41,410
+                                    </span>
+                                    <div class="progress">
+                                        <div class="progress-bar" style="width: 70%"></div>
+                                    </div>
+                                    <span class="progress-description">
+                                        70% Increase in 30 Days
+                                    </span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3 col-sm-6 col-12">
+                            <div class="info-box bg-gradient-danger">
+                                <span class="info-box-icon">
+                                    <i class="fas fa-comments"></i>
+                                </span>
+                                <div class="info-box-content">
+                                    <span class="info-box-text">
+                                        Comments
+                                    </span>
+                                    <span class="info-box-number">
+                                        41,410
+                                    </span>
+                                    <div class="progress">
+                                        <div class="progress-bar" style="width: 70%"></div>
+                                    </div>
+                                    <span class="progress-description">
+                                        70% Increase in 30 Days
+                                    </span>
+                                </div>
+                                <!-- /.info-box-content -->
+                            </div>
+                            <!-- /.info-box -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- =========================================================== -->
+                    <!-- Small Box (Stat card) -->
+                    <h5 class="mb-2 mt-4">
+                        Small Box
+                    </h5>
+                    <div class="row">
+                        <div class="col-lg-3 col-6">
+                            <!-- small card -->
+                            <div class="small-box bg-info">
+                                <div class="inner">
+                                    <h3>150</h3>
+                                    <p>
+                                        New Orders
+                                    </p>
+                                </div>
+                                <div class="icon">
+                                    <i class="fas fa-shopping-cart"></i>
+                                </div>
+                                <a href="#" class="small-box-footer">
+                                    More info
+                                    <i class="fas fa-arrow-circle-right"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- ./col -->
+                        <div class="col-lg-3 col-6">
+                            <!-- small card -->
+                            <div class="small-box bg-success">
+                                <div class="inner">
+                                    <h3>
+                                        53
+                                        <sup style="font-size: 20px">
+                                        %
+                                        </sup>
+                                    </h3>
+                                    <p>
+                                        Bounce Rate
+                                    </p>
+                                </div>
+                                <div class="icon">
+                                    <i class="ion ion-stats-bars"></i>
+                                </div>
+                                <a href="#" class="small-box-footer">
+                                    More info
+                                    <i class="fas fa-arrow-circle-right"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- ./col -->
+                        <div class="col-lg-3 col-6">
+                            <!-- small card -->
+                            <div class="small-box bg-warning">
+                                <div class="inner">
+                                    <h3>44</h3>
+                                    <p>
+                                        User Registrations
+                                    </p>
+                                </div>
+                                <div class="icon">
+                                    <i class="fas fa-user-plus"></i>
+                                </div>
+                                <a href="#" class="small-box-footer">
+                                    More info
+                                    <i class="fas fa-arrow-circle-right"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- ./col -->
+                        <div class="col-lg-3 col-6">
+                            <!-- small card -->
+                            <div class="small-box bg-danger">
+                                <div class="inner">
+                                    <h3>65</h3>
+                                    <p>
+                                        Unique Visitors
+                                    </p>
+                                </div>
+                                <div class="icon">
+                                    <i class="fas fa-chart-pie"></i>
+                                </div>
+                                <a href="#" class="small-box-footer">
+                                    More info
+                                    <i class="fas fa-arrow-circle-right"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- ./col -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- Small Box (Stat card) -->
+                    <div class="row">
+                        <div class="col-lg-3 col-6">
+                            <!-- small card -->
+                            <div class="small-box bg-info">
+                                <!-- Loading (remove the following to stop the loading)-->
+                                <div class="overlay">
+                                    <i class="fas fa-3x fa-sync-alt"></i>
+                                </div>
+                                <!-- end loading -->
+                                <div class="inner">
+                                    <h3>150</h3>
+                                    <p>
+                                        New Orders
+                                    </p>
+                                </div>
+                                <div class="icon">
+                                    <i class="fas fa-shopping-cart"></i>
+                                </div>
+                                <a href="#" class="small-box-footer">
+                                    More info
+                                    <i class="fas fa-arrow-circle-right"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- ./col -->
+                        <div class="col-lg-3 col-6">
+                            <!-- small card -->
+                            <div class="small-box bg-success">
+                                <!-- Loading (remove the following to stop the loading)-->
+                                <div class="overlay dark">
+                                    <i class="fas fa-3x fa-sync-alt"></i>
+                                </div>
+                                <!-- end loading -->
+                                <div class="inner">
+                                    <h3>
+                                        53
+                                        <sup style="font-size: 20px">
+                                        %
+                                        </sup>
+                                    </h3>
+                                    <p>
+                                        Bounce Rate
+                                    </p>
+                                </div>
+                                <div class="icon">
+                                    <i class="ion ion-stats-bars"></i>
+                                </div>
+                                <a href="#" class="small-box-footer">
+                                    More info
+                                    <i class="fas fa-arrow-circle-right"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- ./col -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- =========================================================== -->
+                    <h4 class="mb-2 mt-4">
+                        Cards
+                    </h4>
+                    <h5 class="mb-2">
+                        Abilities
+                    </h5>
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card card-primary collapsed-card">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Expandable
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-plus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-success">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Collapsable
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-warning">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Removable
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                            <i class="fas fa-times"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-danger">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Maximizable
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="maximize">
+                                            <i class="fas fa-expand"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card card-primary">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Card Refresh
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button"
+                                                class="btn btn-tool"
+                                                data-card-widget="card-refresh"
+                                                data-source="widgets.html"
+                                                data-source-selector="#card-refresh-content">
+                                            <i class="fas fa-sync-alt"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                            <div class="d-none" id="card-refresh-content">
+                                The body of the card after card refresh
+                            </div>
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-success">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        All together
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button"
+                                                class="btn btn-tool"
+                                                data-card-widget="card-refresh"
+                                                data-source="widgets.html"
+                                                data-source-selector="#card-refresh-content"
+                                                data-load-on-init="false">
+                                            <i class="fas fa-sync-alt"></i>
+                                        </button>
+                                        <button type="button" class="btn btn-tool" data-card-widget="maximize">
+                                            <i class="fas fa-expand"></i>
+                                        </button>
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                            <i class="fas fa-times"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-warning">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Loading state
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                                <!-- Loading (remove the following to stop the loading)-->
+                                <div class="overlay">
+                                    <i class="fas fa-2x fa-sync-alt"></i>
+                                </div>
+                                <!-- end loading -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-danger">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Loading state (dark)
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                                <!-- Loading (remove the following to stop the loading)-->
+                                <div class="overlay dark">
+                                    <i class="fas fa-2x fa-sync-alt"></i>
+                                </div>
+                                <!-- end loading -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- =========================================================== -->
+                    <h5 class="mb-2">
+                        Custom Shadows Variations
+                        <small>
+                        <i>
+                        Using Bootstrap's Shadow Utility
+                        </i>
+                        </small>
+                    </h5>
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card card-primary shadow-none">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Shadow - None
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-success shadow-sm">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Shadow - Small
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-warning shadow">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Shadow - Regular
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                            <i class="fas fa-times"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-danger shadow-lg">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Shadow - Large
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="maximize">
+                                            <i class="fas fa-expand"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- =========================================================== -->
+                    <h5 class="mb-2">
+                        Colors Variations
+                    </h5>
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card card-primary">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Primary
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-success">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Success
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                            <i class="fas fa-times"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-warning">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Warning
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-danger">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Danger
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card card-outline card-primary">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Primary Outline
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-outline card-success">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Success Outline
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                            <i class="fas fa-times"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-outline card-warning">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Warning Outline
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card card-outline card-danger">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Danger Outline
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card bg-primary">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Primary
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card bg-success">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Success
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                            <i class="fas fa-times"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card bg-warning">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Warning
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card bg-danger">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Danger
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="card bg-gradient-primary">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Primary Gradient
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card bg-gradient-success">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Success Gradient
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                            <i class="fas fa-times"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card bg-gradient-warning">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Warning Gradient
+                                    </h3>
+                                    <div class="card-tools">
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                    </div>
+                                    <!-- /.card-tools -->
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                        <div class="col-md-3">
+                            <div class="card bg-gradient-danger">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Danger Gradient
+                                    </h3>
+                                </div>
+                                <div class="card-body">
+                                    The body of the card
+                                </div>
+                                <!-- /.card-body -->
+                            </div>
+                            <!-- /.card -->
+                        </div>
+                        <!-- /.col -->
+                    </div>
+                    <!-- /.row -->
+                    <!-- =========================================================== -->
+                    <!-- Direct Chat -->
+                    <h4 class="mt-4 mb-2">
+                        Direct Chat
+                    </h4>
+                    <div class="row">
+                        <div class="col-md-3">
+                            <!-- DIRECT CHAT PRIMARY -->
+                            <div class="card card-prirary cardutline direct-chat direct-chat-primary">
+                                <div class="card-header">
+                                    <h3 class="card-title">
+                                        Direct Chat
+                                    </h3>
+                                    <div class="card-tools">
+                                        <span title="3 New Messages" class="badge bg-primary">
+                                            3
+                                        </span>
+                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                            <i class="fas fa-minus"></i>
+                                        </button>
+                                        <button type="button"
+                                                class="btn btn-tool"
+                                                title="Contacts"
+                                                data-widget="chat-pane-toggle">
+                                            <i class="fas fa-comments"></i>
+                                        </button>
+                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                            <i class="fas fa-times"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <!-- /.card-header -->
+                                <div class="card-body">
+                                    <!-- Conversations are loaded here -->
+                                    <div class="direct-chat-messages">
+                                        <!-- Message. Default to the left -->
+                                        <div class="direct-chat-msg">
+                                            <div class="direct-chat-infos clearfix">
+                                                <span class="direct-chat-name float-left">
+                                                    Alexander Pierce
+                                                </span>
+                                                <span class="direct-chat-timestamp float-right">
+                                                    23 Jan 2:00 pm
+                                                </span>
+                                            </div>
+                                            <!-- /.direct-chat-infos -->
+                                            <img class="direct-chat-img"
+                                                 src="/static/assets/img/user1-128x128.jpg"
+                                                 alt="Message User Image">
+                                                <!-- /.direct-chat-img -->
+                                                <div class="direct-chat-text">
+                                                    Is this template really for free? That's unbelievable!
+                                                </div>
+                                                <!-- /.direct-chat-text -->
+                                            </div>
+                                            <!-- /.direct-chat-msg -->
+                                            <!-- Message to the right -->
+                                            <div class="direct-chat-msg right">
+                                                <div class="direct-chat-infos clearfix">
+                                                    <span class="direct-chat-name float-right">
+                                                        Sarah Bullock
+                                                    </span>
+                                                    <span class="direct-chat-timestamp float-left">
+                                                        23 Jan 2:05 pm
+                                                    </span>
+                                                </div>
+                                                <!-- /.direct-chat-infos -->
+                                                <img class="direct-chat-img"
+                                                     src="/static/assets/img/user3-128x128.jpg"
+                                                     alt="Message User Image">
+                                                    <!-- /.direct-chat-img -->
+                                                    <div class="direct-chat-text">
+                                                        You better believe it!
+                                                    </div>
+                                                    <!-- /.direct-chat-text -->
+                                                </div>
+                                                <!-- /.direct-chat-msg -->
+                                            </div>
+                                            <!--/.direct-chat-messages-->
+                                            <!-- Contacts are loaded here -->
+                                            <div class="direct-chat-contacts">
+                                                <ul class="contacts-list">
+                                                    <li>
+                                                        <a href="#">
+                                                            <img class="contacts-list-img"
+                                                                 src="/static/assets/img/user1-128x128.jpg"
+                                                                 alt="User Avatar">
+                                                                <div class="contacts-list-info">
+                                                                    <span class="contacts-list-name">
+                                                                        Count Dracula
+                                                                        <small class="contacts-list-date float-right">
+                                                                        2/28/2015
+                                                                        </small>
+                                                                    </span>
+                                                                    <span class="contacts-list-msg">
+                                                                        How have you been? I was...
+                                                                    </span>
+                                                                </div>
+                                                                <!-- /.contacts-list-info -->
+                                                            </a>
+                                                        </li>
+                                                        <!-- End Contact Item -->
+                                                    </ul>
+                                                    <!-- /.contatcts-list -->
+                                                </div>
+                                                <!-- /.direct-chat-pane -->
+                                            </div>
+                                            <!-- /.card-body -->
+                                            <div class="card-footer">
+                                                <form action="#" method="post">
+                                                    <div class="input-group">
+                                                        <input type="text"
+                                                               name="message"
+                                                               placeholder="Type Message ..."
+                                                               class="form-control">
+                                                        <span class="input-group-append">
+                                                            <button type="submit" class="btn btn-primary">
+                                                                Send
+                                                            </button>
+                                                        </span>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                            <!-- /.card-footer-->
+                                        </div>
+                                        <!--/.direct-chat -->
+                                    </div>
+                                    <!-- /.col -->
+                                    <div class="col-md-3">
+                                        <!-- DIRECT CHAT SUCCESS -->
+                                        <div class="card card-sucress cardutline direct-chat direct-chat-success">
+                                            <div class="card-header">
+                                                <h3 class="card-title">
+                                                    Direct Chat
+                                                </h3>
+                                                <div class="card-tools">
+                                                    <span title="3 New Messages" class="badge bg-success">
+                                                        3
+                                                    </span>
+                                                    <button type="button"
+                                                            class="btn btn-tool"
+                                                            data-card-widget="collapse">
+                                                        <i class="fas fa-minus"></i>
+                                                    </button>
+                                                    <button type="button"
+                                                            class="btn btn-tool"
+                                                            title="Contacts"
+                                                            data-widget="chat-pane-toggle">
+                                                        <i class="fas fa-comments"></i>
+                                                    </button>
+                                                    <button type="button"
+                                                            class="btn btn-tool"
+                                                            data-card-widget="remove">
+                                                        <i class="fas fa-times"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                            <!-- /.card-header -->
+                                            <div class="card-body">
+                                                <!-- Conversations are loaded here -->
+                                                <div class="direct-chat-messages">
+                                                    <!-- Message. Default to the left -->
+                                                    <div class="direct-chat-msg">
+                                                        <div class="direct-chat-infos clearfix">
+                                                            <span class="direct-chat-name float-left">
+                                                                Alexander Pierce
+                                                            </span>
+                                                            <span class="direct-chat-timestamp float-right">
+                                                                23 Jan 2:00 pm
+                                                            </span>
+                                                        </div>
+                                                        <!-- /.direct-chat-infos -->
+                                                        <img class="direct-chat-img"
+                                                             src="/static/assets/img/user1-128x128.jpg"
+                                                             alt="Message User Image">
+                                                            <!-- /.direct-chat-img -->
+                                                            <div class="direct-chat-text">
+                                                                Is this template really for free? That's unbelievable!
+                                                            </div>
+                                                            <!-- /.direct-chat-text -->
+                                                        </div>
+                                                        <!-- /.direct-chat-msg -->
+                                                        <!-- Message to the right -->
+                                                        <div class="direct-chat-msg right">
+                                                            <div class="direct-chat-infos clearfix">
+                                                                <span class="direct-chat-name float-right">
+                                                                    Sarah Bullock
+                                                                </span>
+                                                                <span class="direct-chat-timestamp float-left">
+                                                                    23 Jan 2:05 pm
+                                                                </span>
+                                                            </div>
+                                                            <!-- /.direct-chat-infos -->
+                                                            <img class="direct-chat-img"
+                                                                 src="/static/assets/img/user3-128x128.jpg"
+                                                                 alt="Message User Image">
+                                                                <!-- /.direct-chat-img -->
+                                                                <div class="direct-chat-text">
+                                                                    You better believe it!
+                                                                </div>
+                                                                <!-- /.direct-chat-text -->
+                                                            </div>
+                                                            <!-- /.direct-chat-msg -->
+                                                        </div>
+                                                        <!--/.direct-chat-messages-->
+                                                        <!-- Contacts are loaded here -->
+                                                        <div class="direct-chat-contacts">
+                                                            <ul class="contacts-list">
+                                                                <li>
+                                                                    <a href="#">
+                                                                        <img class="contacts-list-img"
+                                                                             src="/static/assets/img/user1-128x128.jpg"
+                                                                             alt="User Avatar">
+                                                                            <div class="contacts-list-info">
+                                                                                <span class="contacts-list-name">
+                                                                                    Count Dracula
+                                                                                    <small class="contacts-list-date float-right">
+                                                                                    2/28/2015
+                                                                                    </small>
+                                                                                </span>
+                                                                                <span class="contacts-list-msg">
+                                                                                    How have you been? I was...
+                                                                                </span>
+                                                                            </div>
+                                                                            <!-- /.contacts-list-info -->
+                                                                        </a>
+                                                                    </li>
+                                                                    <!-- End Contact Item -->
+                                                                </ul>
+                                                                <!-- /.contatcts-list -->
+                                                            </div>
+                                                            <!-- /.direct-chat-pane -->
+                                                        </div>
+                                                        <!-- /.card-body -->
+                                                        <div class="card-footer">
+                                                            <form action="#" method="post">
+                                                                <div class="input-group">
+                                                                    <input type="text"
+                                                                           name="message"
+                                                                           placeholder="Type Message ..."
+                                                                           class="form-control">
+                                                                    <span class="input-group-append">
+                                                                        <button type="submit" class="btn btn-success">
+                                                                            Send
+                                                                        </button>
+                                                                    </span>
+                                                                </div>
+                                                            </form>
+                                                        </div>
+                                                        <!-- /.card-footer-->
+                                                    </div>
+                                                    <!--/.direct-chat -->
+                                                </div>
+                                                <!-- /.col -->
+                                                <div class="col-md-3">
+                                                    <!-- DIRECT CHAT WARNING -->
+                                                    <div class="card card-warning direct-chat direct-chat-warning">
+                                                        <div class="card-header">
+                                                            <h3 class="card-title">
+                                                                Direct Chat
+                                                            </h3>
+                                                            <div class="card-tools">
+                                                                <span title="3 New Messages" class="badge bg-danger">
+                                                                    3
+                                                                </span>
+                                                                <button type="button"
+                                                                        class="btn btn-tool"
+                                                                        data-card-widget="collapse">
+                                                                    <i class="fas fa-minus"></i>
+                                                                </button>
+                                                                <button type="button"
+                                                                        class="btn btn-tool"
+                                                                        title="Contacts"
+                                                                        data-widget="chat-pane-toggle">
+                                                                    <i class="fas fa-comments"></i>
+                                                                </button>
+                                                                <button type="button"
+                                                                        class="btn btn-tool"
+                                                                        data-card-widget="remove">
+                                                                    <i class="fas fa-times"></i>
+                                                                </button>
+                                                            </div>
+                                                        </div>
+                                                        <!-- /.card-header -->
+                                                        <div class="card-body">
+                                                            <!-- Conversations are loaded here -->
+                                                            <div class="direct-chat-messages">
+                                                                <!-- Message. Default to the left -->
+                                                                <div class="direct-chat-msg">
+                                                                    <div class="direct-chat-infos clearfix">
+                                                                        <span class="direct-chat-name float-left">
+                                                                            Alexander Pierce
+                                                                        </span>
+                                                                        <span class="direct-chat-timestamp float-right">
+                                                                            23 Jan 2:00 pm
+                                                                        </span>
+                                                                    </div>
+                                                                    <!-- /.direct-chat-infos -->
+                                                                    <img class="direct-chat-img"
+                                                                         src="/static/assets/img/user1-128x128.jpg"
+                                                                         alt="Message User Image">
+                                                                        <!-- /.direct-chat-img -->
+                                                                        <div class="direct-chat-text">
+                                                                            Is this template really for free? That's unbelievable!
+                                                                        </div>
+                                                                        <!-- /.direct-chat-text -->
+                                                                    </div>
+                                                                    <!-- /.direct-chat-msg -->
+                                                                    <!-- Message to the right -->
+                                                                    <div class="direct-chat-msg right">
+                                                                        <div class="direct-chat-infos clearfix">
+                                                                            <span class="direct-chat-name float-right">
+                                                                                Sarah Bullock
+                                                                            </span>
+                                                                            <span class="direct-chat-timestamp float-left">
+                                                                                23 Jan 2:05 pm
+                                                                            </span>
+                                                                        </div>
+                                                                        <!-- /.direct-chat-infos -->
+                                                                        <img class="direct-chat-img"
+                                                                             src="/static/assets/img/user3-128x128.jpg"
+                                                                             alt="Message User Image">
+                                                                            <!-- /.direct-chat-img -->
+                                                                            <div class="direct-chat-text">
+                                                                                You better believe it!
+                                                                            </div>
+                                                                            <!-- /.direct-chat-text -->
+                                                                        </div>
+                                                                        <!-- /.direct-chat-msg -->
+                                                                    </div>
+                                                                    <!--/.direct-chat-messages-->
+                                                                    <!-- Contacts are loaded here -->
+                                                                    <div class="direct-chat-contacts">
+                                                                        <ul class="contacts-list">
+                                                                            <li>
+                                                                                <a href="#">
+                                                                                    <img class="contacts-list-img"
+                                                                                         src="/static/assets/img/user1-128x128.jpg"
+                                                                                         alt="User Avatar">
+                                                                                        <div class="contacts-list-info">
+                                                                                            <span class="contacts-list-name">
+                                                                                                Count Dracula
+                                                                                                <small class="contacts-list-date float-right">
+                                                                                                2/28/2015
+                                                                                                </small>
+                                                                                            </span>
+                                                                                            <span class="contacts-list-msg">
+                                                                                                How have you been? I was...
+                                                                                            </span>
+                                                                                        </div>
+                                                                                        <!-- /.contacts-list-info -->
+                                                                                    </a>
+                                                                                </li>
+                                                                                <!-- End Contact Item -->
+                                                                            </ul>
+                                                                            <!-- /.contatcts-list -->
+                                                                        </div>
+                                                                        <!-- /.direct-chat-pane -->
+                                                                    </div>
+                                                                    <!-- /.card-body -->
+                                                                    <div class="card-footer">
+                                                                        <form action="#" method="post">
+                                                                            <div class="input-group">
+                                                                                <input type="text"
+                                                                                       name="message"
+                                                                                       placeholder="Type Message ..."
+                                                                                       class="form-control">
+                                                                                <span class="input-group-append">
+                                                                                    <button type="submit"
+                                                                                            class="btn btn-warning">
+                                                                                        Send
+                                                                                    </button>
+                                                                                </span>
+                                                                            </div>
+                                                                        </form>
+                                                                    </div>
+                                                                    <!-- /.card-footer-->
+                                                                </div>
+                                                                <!--/.direct-chat -->
+                                                            </div>
+                                                            <!-- /.col -->
+                                                            <div class="col-md-3">
+                                                                <!-- DIRECT CHAT DANGER -->
+                                                                <div class="card card-danger direct-chat direct-chat-danger">
+                                                                    <div class="card-header">
+                                                                        <h3 class="card-title">
+                                                                            Direct Chat
+                                                                        </h3>
+                                                                        <div class="card-tools">
+                                                                            <span title="3 New Messages" class="badge">
+                                                                                3
+                                                                            </span>
+                                                                            <button type="button"
+                                                                                    class="btn btn-tool"
+                                                                                    data-card-widget="collapse">
+                                                                                <i class="fas fa-minus"></i>
+                                                                            </button>
+                                                                            <button type="button"
+                                                                                    class="btn btn-tool"
+                                                                                    title="Contacts"
+                                                                                    data-widget="chat-pane-toggle">
+                                                                                <i class="fas fa-comments"></i>
+                                                                            </button>
+                                                                            <button type="button"
+                                                                                    class="btn btn-tool"
+                                                                                    data-card-widget="remove">
+                                                                                <i class="fas fa-times"></i>
+                                                                            </button>
+                                                                        </div>
+                                                                    </div>
+                                                                    <!-- /.card-header -->
+                                                                    <div class="card-body">
+                                                                        <!-- Conversations are loaded here -->
+                                                                        <div class="direct-chat-messages">
+                                                                            <!-- Message. Default to the left -->
+                                                                            <div class="direct-chat-msg">
+                                                                                <div class="direct-chat-infos clearfix">
+                                                                                    <span class="direct-chat-name float-left">
+                                                                                        Alexander Pierce
+                                                                                    </span>
+                                                                                    <span class="direct-chat-timestamp float-right">
+                                                                                        23 Jan 2:00 pm
+                                                                                    </span>
+                                                                                </div>
+                                                                                <!-- /.direct-chat-infos -->
+                                                                                <img class="direct-chat-img"
+                                                                                     src="/static/assets/img/user1-128x128.jpg"
+                                                                                     alt="Message User Image">
+                                                                                    <!-- /.direct-chat-img -->
+                                                                                    <div class="direct-chat-text">
+                                                                                        Is this template really for free? That's unbelievable!
+                                                                                    </div>
+                                                                                    <!-- /.direct-chat-text -->
+                                                                                </div>
+                                                                                <!-- /.direct-chat-msg -->
+                                                                                <!-- Message to the right -->
+                                                                                <div class="direct-chat-msg right">
+                                                                                    <div class="direct-chat-infos clearfix">
+                                                                                        <span class="direct-chat-name float-right">
+                                                                                            Sarah Bullock
+                                                                                        </span>
+                                                                                        <span class="direct-chat-timestamp float-left">
+                                                                                            23 Jan 2:05 pm
+                                                                                        </span>
+                                                                                    </div>
+                                                                                    <!-- /.direct-chat-infos -->
+                                                                                    <img class="direct-chat-img"
+                                                                                         src="/static/assets/img/user3-128x128.jpg"
+                                                                                         alt="Message User Image">
+                                                                                        <!-- /.direct-chat-img -->
+                                                                                        <div class="direct-chat-text">
+                                                                                            You better believe it!
+                                                                                        </div>
+                                                                                        <!-- /.direct-chat-text -->
+                                                                                    </div>
+                                                                                    <!-- /.direct-chat-msg -->
+                                                                                </div>
+                                                                                <!--/.direct-chat-messages-->
+                                                                                <!-- Contacts are loaded here -->
+                                                                                <div class="direct-chat-contacts">
+                                                                                    <ul class="contacts-list">
+                                                                                        <li>
+                                                                                            <a href="#">
+                                                                                                <img class="contacts-list-img"
+                                                                                                     src="/static/assets/img/user1-128x128.jpg"
+                                                                                                     alt="User Avatar">
+                                                                                                    <div class="contacts-list-info">
+                                                                                                        <span class="contacts-list-name">
+                                                                                                            Count Dracula
+                                                                                                            <small class="contacts-list-date float-right">
+                                                                                                            2/28/2015
+                                                                                                            </small>
+                                                                                                        </span>
+                                                                                                        <span class="contacts-list-msg">
+                                                                                                            How have you been? I was...
+                                                                                                        </span>
+                                                                                                    </div>
+                                                                                                    <!-- /.contacts-list-info -->
+                                                                                                </a>
+                                                                                            </li>
+                                                                                            <!-- End Contact Item -->
+                                                                                        </ul>
+                                                                                        <!-- /.contatcts-list -->
+                                                                                    </div>
+                                                                                    <!-- /.direct-chat-pane -->
+                                                                                </div>
+                                                                                <!-- /.card-body -->
+                                                                                <div class="card-footer">
+                                                                                    <form action="#" method="post">
+                                                                                        <div class="input-group">
+                                                                                            <input type="text"
+                                                                                                   name="message"
+                                                                                                   placeholder="Type Message ..."
+                                                                                                   class="form-control">
+                                                                                            <span class="input-group-append">
+                                                                                                <button type="submit"
+                                                                                                        class="btn btn-danger">
+                                                                                                    Send
+                                                                                                </button>
+                                                                                            </span>
+                                                                                        </div>
+                                                                                    </form>
+                                                                                </div>
+                                                                                <!-- /.card-footer-->
+                                                                            </div>
+                                                                            <!--/.direct-chat -->
+                                                                        </div>
+                                                                        <!-- /.col -->
+                                                                    </div>
+                                                                    <!-- /.row -->
+                                                                    <!-- =========================================================== -->
+                                                                    <h5 class="mb-2">
+                                                                        Custom Shadows Variations
+                                                                        <small>
+                                                                        <i>
+                                                                        Using Bootstrap's Shadow Utility
+                                                                        </i>
+                                                                        </small>
+                                                                    </h5>
+                                                                    <div class="row">
+                                                                        <div class="col-md-3">
+                                                                            <!-- DIRECT CHAT PRIMARY -->
+                                                                            <div class="card card-prirary cardutline direct-chat direct-chat-primary shadow-none">
+                                                                                <div class="card-header">
+                                                                                    <h3 class="card-title">
+                                                                                        Shadow - None
+                                                                                    </h3>
+                                                                                    <div class="card-tools">
+                                                                                        <span title="3 New Messages"
+                                                                                              class="badge bg-primary">
+                                                                                            3
+                                                                                        </span>
+                                                                                        <button type="button"
+                                                                                                class="btn btn-tool"
+                                                                                                data-card-widget="collapse">
+                                                                                            <i class="fas fa-minus"></i>
+                                                                                        </button>
+                                                                                        <button type="button"
+                                                                                                class="btn btn-tool"
+                                                                                                title="Contacts"
+                                                                                                data-widget="chat-pane-toggle">
+                                                                                            <i class="fas fa-comments"></i>
+                                                                                        </button>
+                                                                                        <button type="button"
+                                                                                                class="btn btn-tool"
+                                                                                                data-card-widget="remove">
+                                                                                            <i class="fas fa-times"></i>
+                                                                                        </button>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <!-- /.card-header -->
+                                                                                <div class="card-body">
+                                                                                    <!-- Conversations are loaded here -->
+                                                                                    <div class="direct-chat-messages">
+                                                                                        <!-- Message. Default to the left -->
+                                                                                        <div class="direct-chat-msg">
+                                                                                            <div class="direct-chat-infos clearfix">
+                                                                                                <span class="direct-chat-name float-left">
+                                                                                                    Alexander Pierce
+                                                                                                </span>
+                                                                                                <span class="direct-chat-timestamp float-right">
+                                                                                                    23 Jan 2:00 pm
+                                                                                                </span>
+                                                                                            </div>
+                                                                                            <!-- /.direct-chat-infos -->
+                                                                                            <img class="direct-chat-img"
+                                                                                                 src="/static/assets/img/user1-128x128.jpg"
+                                                                                                 alt="Message User Image">
+                                                                                                <!-- /.direct-chat-img -->
+                                                                                                <div class="direct-chat-text">
+                                                                                                    Is this template really for free? That's unbelievable!
+                                                                                                </div>
+                                                                                                <!-- /.direct-chat-text -->
+                                                                                            </div>
+                                                                                            <!-- /.direct-chat-msg -->
+                                                                                            <!-- Message to the right -->
+                                                                                            <div class="direct-chat-msg right">
+                                                                                                <div class="direct-chat-infos clearfix">
+                                                                                                    <span class="direct-chat-name float-right">
+                                                                                                        Sarah Bullock
+                                                                                                    </span>
+                                                                                                    <span class="direct-chat-timestamp float-left">
+                                                                                                        23 Jan 2:05 pm
+                                                                                                    </span>
+                                                                                                </div>
+                                                                                                <!-- /.direct-chat-infos -->
+                                                                                                <img class="direct-chat-img"
+                                                                                                     src="/static/assets/img/user3-128x128.jpg"
+                                                                                                     alt="Message User Image">
+                                                                                                    <!-- /.direct-chat-img -->
+                                                                                                    <div class="direct-chat-text">
+                                                                                                        You better believe it!
+                                                                                                    </div>
+                                                                                                    <!-- /.direct-chat-text -->
+                                                                                                </div>
+                                                                                                <!-- /.direct-chat-msg -->
+                                                                                            </div>
+                                                                                            <!--/.direct-chat-messages-->
+                                                                                            <!-- Contacts are loaded here -->
+                                                                                            <div class="direct-chat-contacts">
+                                                                                                <ul class="contacts-list">
+                                                                                                    <li>
+                                                                                                        <a href="#">
+                                                                                                            <img class="contacts-list-img"
+                                                                                                                 src="/static/assets/img/user1-128x128.jpg"
+                                                                                                                 alt="User Avatar">
+                                                                                                                <div class="contacts-list-info">
+                                                                                                                    <span class="contacts-list-name">
+                                                                                                                        Count Dracula
+                                                                                                                        <small class="contacts-list-date float-right">
+                                                                                                                        2/28/2015
+                                                                                                                        </small>
+                                                                                                                    </span>
+                                                                                                                    <span class="contacts-list-msg">
+                                                                                                                        How have you been? I was...
+                                                                                                                    </span>
+                                                                                                                </div>
+                                                                                                                <!-- /.contacts-list-info -->
+                                                                                                            </a>
+                                                                                                        </li>
+                                                                                                        <!-- End Contact Item -->
+                                                                                                    </ul>
+                                                                                                    <!-- /.contatcts-list -->
+                                                                                                </div>
+                                                                                                <!-- /.direct-chat-pane -->
+                                                                                            </div>
+                                                                                            <!-- /.card-body -->
+                                                                                            <div class="card-footer">
+                                                                                                <form action="#"
+                                                                                                      method="post">
+                                                                                                    <div class="input-group">
+                                                                                                        <input type="text"
+                                                                                                               name="message"
+                                                                                                               placeholder="Type Message ..."
+                                                                                                               class="form-control">
+                                                                                                        <span class="input-group-append">
+                                                                                                            <button type="submit"
+                                                                                                                    class="btn btn-primary">
+                                                                                                                Send
+                                                                                                            </button>
+                                                                                                        </span>
+                                                                                                    </div>
+                                                                                                </form>
+                                                                                            </div>
+                                                                                            <!-- /.card-footer-->
+                                                                                        </div>
+                                                                                        <!--/.direct-chat -->
+                                                                                    </div>
+                                                                                    <!-- /.col -->
+                                                                                    <div class="col-md-3">
+                                                                                        <!-- DIRECT CHAT SUCCESS -->
+                                                                                        <div class="card card-sucress cardutline direct-chat direct-chat-success shadow-sm">
+                                                                                            <div class="card-header">
+                                                                                                <h3 class="card-title">
+                                                                                                    Shadow - Small
+                                                                                                </h3>
+                                                                                                <div class="card-tools">
+                                                                                                    <span title="3 New Messages"
+                                                                                                          class="badge bg-success">
+                                                                                                        3
+                                                                                                    </span>
+                                                                                                    <button type="button"
+                                                                                                            class="btn btn-tool"
+                                                                                                            data-card-widget="collapse">
+                                                                                                        <i class="fas fa-minus"></i>
+                                                                                                    </button>
+                                                                                                    <button type="button"
+                                                                                                            class="btn btn-tool"
+                                                                                                            title="Contacts"
+                                                                                                            data-widget="chat-pane-toggle">
+                                                                                                        <i class="fas fa-comments"></i>
+                                                                                                    </button>
+                                                                                                    <button type="button"
+                                                                                                            class="btn btn-tool"
+                                                                                                            data-card-widget="remove">
+                                                                                                        <i class="fas fa-times"></i>
+                                                                                                    </button>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                            <!-- /.card-header -->
+                                                                                            <div class="card-body">
+                                                                                                <!-- Conversations are loaded here -->
+                                                                                                <div class="direct-chat-messages">
+                                                                                                    <!-- Message. Default to the left -->
+                                                                                                    <div class="direct-chat-msg">
+                                                                                                        <div class="direct-chat-infos clearfix">
+                                                                                                            <span class="direct-chat-name float-left">
+                                                                                                                Alexander Pierce
+                                                                                                            </span>
+                                                                                                            <span class="direct-chat-timestamp float-right">
+                                                                                                                23 Jan 2:00 pm
+                                                                                                            </span>
+                                                                                                        </div>
+                                                                                                        <!-- /.direct-chat-infos -->
+                                                                                                        <img class="direct-chat-img"
+                                                                                                             src="/static/assets/img/user1-128x128.jpg"
+                                                                                                             alt="Message User Image">
+                                                                                                            <!-- /.direct-chat-img -->
+                                                                                                            <div class="direct-chat-text">
+                                                                                                                Is this template really for free? That's unbelievable!
+                                                                                                            </div>
+                                                                                                            <!-- /.direct-chat-text -->
+                                                                                                        </div>
+                                                                                                        <!-- /.direct-chat-msg -->
+                                                                                                        <!-- Message to the right -->
+                                                                                                        <div class="direct-chat-msg right">
+                                                                                                            <div class="direct-chat-infos clearfix">
+                                                                                                                <span class="direct-chat-name float-right">
+                                                                                                                    Sarah Bullock
+                                                                                                                </span>
+                                                                                                                <span class="direct-chat-timestamp float-left">
+                                                                                                                    23 Jan 2:05 pm
+                                                                                                                </span>
+                                                                                                            </div>
+                                                                                                            <!-- /.direct-chat-infos -->
+                                                                                                            <img class="direct-chat-img"
+                                                                                                                 src="/static/assets/img/user3-128x128.jpg"
+                                                                                                                 alt="Message User Image">
+                                                                                                                <!-- /.direct-chat-img -->
+                                                                                                                <div class="direct-chat-text">
+                                                                                                                    You better believe it!
+                                                                                                                </div>
+                                                                                                                <!-- /.direct-chat-text -->
+                                                                                                            </div>
+                                                                                                            <!-- /.direct-chat-msg -->
+                                                                                                        </div>
+                                                                                                        <!--/.direct-chat-messages-->
+                                                                                                        <!-- Contacts are loaded here -->
+                                                                                                        <div class="direct-chat-contacts">
+                                                                                                            <ul class="contacts-list">
+                                                                                                                <li>
+                                                                                                                    <a href="#">
+                                                                                                                        <img class="contacts-list-img"
+                                                                                                                             src="/static/assets/img/user1-128x128.jpg"
+                                                                                                                             alt="User Avatar">
+                                                                                                                            <div class="contacts-list-info">
+                                                                                                                                <span class="contacts-list-name">
+                                                                                                                                    Count Dracula
+                                                                                                                                    <small class="contacts-list-date float-right">
+                                                                                                                                    2/28/2015
+                                                                                                                                    </small>
+                                                                                                                                </span>
+                                                                                                                                <span class="contacts-list-msg">
+                                                                                                                                    How have you been? I was...
+                                                                                                                                </span>
+                                                                                                                            </div>
+                                                                                                                            <!-- /.contacts-list-info -->
+                                                                                                                        </a>
+                                                                                                                    </li>
+                                                                                                                    <!-- End Contact Item -->
+                                                                                                                </ul>
+                                                                                                                <!-- /.contatcts-list -->
+                                                                                                            </div>
+                                                                                                            <!-- /.direct-chat-pane -->
+                                                                                                        </div>
+                                                                                                        <!-- /.card-body -->
+                                                                                                        <div class="card-footer">
+                                                                                                            <form action="#"
+                                                                                                                  method="post">
+                                                                                                                <div class="input-group">
+                                                                                                                    <input type="text"
+                                                                                                                           name="message"
+                                                                                                                           placeholder="Type Message ..."
+                                                                                                                           class="form-control">
+                                                                                                                    <span class="input-group-append">
+                                                                                                                        <button type="submit"
+                                                                                                                                class="btn btn-success">
+                                                                                                                            Send
+                                                                                                                        </button>
+                                                                                                                    </span>
+                                                                                                                </div>
+                                                                                                            </form>
+                                                                                                        </div>
+                                                                                                        <!-- /.card-footer-->
+                                                                                                    </div>
+                                                                                                    <!--/.direct-chat -->
+                                                                                                </div>
+                                                                                                <!-- /.col -->
+                                                                                                <div class="col-md-3">
+                                                                                                    <!-- DIRECT CHAT WARNING -->
+                                                                                                    <div class="card card-warning direct-chat direct-chat-warning shadow">
+                                                                                                        <div class="card-header">
+                                                                                                            <h3 class="card-title">
+                                                                                                                Shadow - Regular
+                                                                                                            </h3>
+                                                                                                            <div class="card-tools">
+                                                                                                                <span title="3 New Messages"
+                                                                                                                      class="badge bg-danger">
+                                                                                                                    3
+                                                                                                                </span>
+                                                                                                                <button type="button"
+                                                                                                                        class="btn btn-tool"
+                                                                                                                        data-card-widget="collapse">
+                                                                                                                    <i class="fas fa-minus"></i>
+                                                                                                                </button>
+                                                                                                                <button type="button"
+                                                                                                                        class="btn btn-tool"
+                                                                                                                        title="Contacts"
+                                                                                                                        data-widget="chat-pane-toggle">
+                                                                                                                    <i class="fas fa-comments"></i>
+                                                                                                                </button>
+                                                                                                                <button type="button"
+                                                                                                                        class="btn btn-tool"
+                                                                                                                        data-card-widget="remove">
+                                                                                                                    <i class="fas fa-times"></i>
+                                                                                                                </button>
+                                                                                                            </div>
+                                                                                                        </div>
+                                                                                                        <!-- /.card-header -->
+                                                                                                        <div class="card-body">
+                                                                                                            <!-- Conversations are loaded here -->
+                                                                                                            <div class="direct-chat-messages">
+                                                                                                                <!-- Message. Default to the left -->
+                                                                                                                <div class="direct-chat-msg">
+                                                                                                                    <div class="direct-chat-infos clearfix">
+                                                                                                                        <span class="direct-chat-name float-left">
+                                                                                                                            Alexander Pierce
+                                                                                                                        </span>
+                                                                                                                        <span class="direct-chat-timestamp float-right">
+                                                                                                                            23 Jan 2:00 pm
+                                                                                                                        </span>
+                                                                                                                    </div>
+                                                                                                                    <!-- /.direct-chat-infos -->
+                                                                                                                    <img class="direct-chat-img"
+                                                                                                                         src="/static/assets/img/user1-128x128.jpg"
+                                                                                                                         alt="Message User Image">
+                                                                                                                        <!-- /.direct-chat-img -->
+                                                                                                                        <div class="direct-chat-text">
+                                                                                                                            Is this template really for free? That's unbelievable!
+                                                                                                                        </div>
+                                                                                                                        <!-- /.direct-chat-text -->
+                                                                                                                    </div>
+                                                                                                                    <!-- /.direct-chat-msg -->
+                                                                                                                    <!-- Message to the right -->
+                                                                                                                    <div class="direct-chat-msg right">
+                                                                                                                        <div class="direct-chat-infos clearfix">
+                                                                                                                            <span class="direct-chat-name float-right">
+                                                                                                                                Sarah Bullock
+                                                                                                                            </span>
+                                                                                                                            <span class="direct-chat-timestamp float-left">
+                                                                                                                                23 Jan 2:05 pm
+                                                                                                                            </span>
+                                                                                                                        </div>
+                                                                                                                        <!-- /.direct-chat-infos -->
+                                                                                                                        <img class="direct-chat-img"
+                                                                                                                             src="/static/assets/img/user3-128x128.jpg"
+                                                                                                                             alt="Message User Image">
+                                                                                                                            <!-- /.direct-chat-img -->
+                                                                                                                            <div class="direct-chat-text">
+                                                                                                                                You better believe it!
+                                                                                                                            </div>
+                                                                                                                            <!-- /.direct-chat-text -->
+                                                                                                                        </div>
+                                                                                                                        <!-- /.direct-chat-msg -->
+                                                                                                                    </div>
+                                                                                                                    <!--/.direct-chat-messages-->
+                                                                                                                    <!-- Contacts are loaded here -->
+                                                                                                                    <div class="direct-chat-contacts">
+                                                                                                                        <ul class="contacts-list">
+                                                                                                                            <li>
+                                                                                                                                <a href="#">
+                                                                                                                                    <img class="contacts-list-img"
+                                                                                                                                         src="/static/assets/img/user1-128x128.jpg"
+                                                                                                                                         alt="User Avatar">
+                                                                                                                                        <div class="contacts-list-info">
+                                                                                                                                            <span class="contacts-list-name">
+                                                                                                                                                Count Dracula
+                                                                                                                                                <small class="contacts-list-date float-right">
+                                                                                                                                                2/28/2015
+                                                                                                                                                </small>
+                                                                                                                                            </span>
+                                                                                                                                            <span class="contacts-list-msg">
+                                                                                                                                                How have you been? I was...
+                                                                                                                                            </span>
+                                                                                                                                        </div>
+                                                                                                                                        <!-- /.contacts-list-info -->
+                                                                                                                                    </a>
+                                                                                                                                </li>
+                                                                                                                                <!-- End Contact Item -->
+                                                                                                                            </ul>
+                                                                                                                            <!-- /.contatcts-list -->
+                                                                                                                        </div>
+                                                                                                                        <!-- /.direct-chat-pane -->
+                                                                                                                    </div>
+                                                                                                                    <!-- /.card-body -->
+                                                                                                                    <div class="card-footer">
+                                                                                                                        <form action="#"
+                                                                                                                              method="post">
+                                                                                                                            <div class="input-group">
+                                                                                                                                <input type="text"
+                                                                                                                                       name="message"
+                                                                                                                                       placeholder="Type Message ..."
+                                                                                                                                       class="form-control">
+                                                                                                                                <span class="input-group-append">
+                                                                                                                                    <button type="submit"
+                                                                                                                                            class="btn btn-warning">
+                                                                                                                                        Send
+                                                                                                                                    </button>
+                                                                                                                                </span>
+                                                                                                                            </div>
+                                                                                                                        </form>
+                                                                                                                    </div>
+                                                                                                                    <!-- /.card-footer-->
+                                                                                                                </div>
+                                                                                                                <!--/.direct-chat -->
+                                                                                                            </div>
+                                                                                                            <!-- /.col -->
+                                                                                                            <div class="col-md-3">
+                                                                                                                <!-- DIRECT CHAT DANGER -->
+                                                                                                                <div class="card card-danger direct-chat direct-chat-danger shadow-lg">
+                                                                                                                    <div class="card-header">
+                                                                                                                        <h3 class="card-title">
+                                                                                                                            Shadow - Large
+                                                                                                                        </h3>
+                                                                                                                        <div class="card-tools">
+                                                                                                                            <span title="3 New Messages"
+                                                                                                                                  class="badge">
+                                                                                                                                3
+                                                                                                                            </span>
+                                                                                                                            <button type="button"
+                                                                                                                                    class="btn btn-tool"
+                                                                                                                                    data-card-widget="collapse">
+                                                                                                                                <i class="fas fa-minus"></i>
+                                                                                                                            </button>
+                                                                                                                            <button type="button"
+                                                                                                                                    class="btn btn-tool"
+                                                                                                                                    title="Contacts"
+                                                                                                                                    data-widget="chat-pane-toggle">
+                                                                                                                                <i class="fas fa-comments"></i>
+                                                                                                                            </button>
+                                                                                                                            <button type="button"
+                                                                                                                                    class="btn btn-tool"
+                                                                                                                                    data-card-widget="remove">
+                                                                                                                                <i class="fas fa-times"></i>
+                                                                                                                            </button>
+                                                                                                                        </div>
+                                                                                                                    </div>
+                                                                                                                    <!-- /.card-header -->
+                                                                                                                    <div class="card-body">
+                                                                                                                        <!-- Conversations are loaded here -->
+                                                                                                                        <div class="direct-chat-messages">
+                                                                                                                            <!-- Message. Default to the left -->
+                                                                                                                            <div class="direct-chat-msg">
+                                                                                                                                <div class="direct-chat-infos clearfix">
+                                                                                                                                    <span class="direct-chat-name float-left">
+                                                                                                                                        Alexander Pierce
+                                                                                                                                    </span>
+                                                                                                                                    <span class="direct-chat-timestamp float-right">
+                                                                                                                                        23 Jan 2:00 pm
+                                                                                                                                    </span>
+                                                                                                                                </div>
+                                                                                                                                <!-- /.direct-chat-infos -->
+                                                                                                                                <img class="direct-chat-img"
+                                                                                                                                     src="/static/assets/img/user1-128x128.jpg"
+                                                                                                                                     alt="Message User Image">
+                                                                                                                                    <!-- /.direct-chat-img -->
+                                                                                                                                    <div class="direct-chat-text">
+                                                                                                                                        Is this template really for free? That's unbelievable!
+                                                                                                                                    </div>
+                                                                                                                                    <!-- /.direct-chat-text -->
+                                                                                                                                </div>
+                                                                                                                                <!-- /.direct-chat-msg -->
+                                                                                                                                <!-- Message to the right -->
+                                                                                                                                <div class="direct-chat-msg right">
+                                                                                                                                    <div class="direct-chat-infos clearfix">
+                                                                                                                                        <span class="direct-chat-name float-right">
+                                                                                                                                            Sarah Bullock
+                                                                                                                                        </span>
+                                                                                                                                        <span class="direct-chat-timestamp float-left">
+                                                                                                                                            23 Jan 2:05 pm
+                                                                                                                                        </span>
+                                                                                                                                    </div>
+                                                                                                                                    <!-- /.direct-chat-infos -->
+                                                                                                                                    <img class="direct-chat-img"
+                                                                                                                                         src="/static/assets/img/user3-128x128.jpg"
+                                                                                                                                         alt="Message User Image">
+                                                                                                                                        <!-- /.direct-chat-img -->
+                                                                                                                                        <div class="direct-chat-text">
+                                                                                                                                            You better believe it!
+                                                                                                                                        </div>
+                                                                                                                                        <!-- /.direct-chat-text -->
+                                                                                                                                    </div>
+                                                                                                                                    <!-- /.direct-chat-msg -->
+                                                                                                                                </div>
+                                                                                                                                <!--/.direct-chat-messages-->
+                                                                                                                                <!-- Contacts are loaded here -->
+                                                                                                                                <div class="direct-chat-contacts">
+                                                                                                                                    <ul class="contacts-list">
+                                                                                                                                        <li>
+                                                                                                                                            <a href="#">
+                                                                                                                                                <img class="contacts-list-img"
+                                                                                                                                                     src="/static/assets/img/user1-128x128.jpg"
+                                                                                                                                                     alt="User Avatar">
+                                                                                                                                                    <div class="contacts-list-info">
+                                                                                                                                                        <span class="contacts-list-name">
+                                                                                                                                                            Count Dracula
+                                                                                                                                                            <small class="contacts-list-date float-right">
+                                                                                                                                                            2/28/2015
+                                                                                                                                                            </small>
+                                                                                                                                                        </span>
+                                                                                                                                                        <span class="contacts-list-msg">
+                                                                                                                                                            How have you been? I was...
+                                                                                                                                                        </span>
+                                                                                                                                                    </div>
+                                                                                                                                                    <!-- /.contacts-list-info -->
+                                                                                                                                                </a>
+                                                                                                                                            </li>
+                                                                                                                                            <!-- End Contact Item -->
+                                                                                                                                        </ul>
+                                                                                                                                        <!-- /.contatcts-list -->
+                                                                                                                                    </div>
+                                                                                                                                    <!-- /.direct-chat-pane -->
+                                                                                                                                </div>
+                                                                                                                                <!-- /.card-body -->
+                                                                                                                                <div class="card-footer">
+                                                                                                                                    <form action="#"
+                                                                                                                                          method="post">
+                                                                                                                                        <div class="input-group">
+                                                                                                                                            <input type="text"
+                                                                                                                                                   name="message"
+                                                                                                                                                   placeholder="Type Message ..."
+                                                                                                                                                   class="form-control">
+                                                                                                                                            <span class="input-group-append">
+                                                                                                                                                <button type="submit"
+                                                                                                                                                        class="btn btn-danger">
+                                                                                                                                                    Send
+                                                                                                                                                </button>
+                                                                                                                                            </span>
+                                                                                                                                        </div>
+                                                                                                                                    </form>
+                                                                                                                                </div>
+                                                                                                                                <!-- /.card-footer-->
+                                                                                                                            </div>
+                                                                                                                            <!--/.direct-chat -->
+                                                                                                                        </div>
+                                                                                                                        <!-- /.col -->
+                                                                                                                    </div>
+                                                                                                                    <!-- /.row -->
+                                                                                                                    <h3 class="mt-4 mb-4">
+                                                                                                                        Social Widgets
+                                                                                                                    </h3>
+                                                                                                                    <div class="row">
+                                                                                                                        <div class="col-md-4">
+                                                                                                                            <!-- Widget: user widget style 2 -->
+                                                                                                                            <div class="card card-widget widget-user-2">
+                                                                                                                                <!-- Add the bg color to the header using any of the bg-* classes -->
+                                                                                                                                <div class="widget-user-header bg-warning">
+                                                                                                                                    <div class="widget-user-image">
+                                                                                                                                        <img class="img-circle elevation-2"
+                                                                                                                                             src="/static/assets/img/user7-128x128.jpg"
+                                                                                                                                             alt="User Avatar">
+                                                                                                                                        </div>
+                                                                                                                                        <!-- /.widget-user-image -->
+                                                                                                                                        <h3 class="widget-user-username">
+                                                                                                                                            Nadia Carmichael
+                                                                                                                                        </h3>
+                                                                                                                                        <h5 class="widget-user-desc">
+                                                                                                                                            Lead Developer
+                                                                                                                                        </h5>
+                                                                                                                                    </div>
+                                                                                                                                    <div class="card-footer p-0">
+                                                                                                                                        <ul class="nav flex-column">
+                                                                                                                                            <li class="nav-item">
+                                                                                                                                                <a href="#"
+                                                                                                                                                   class="nav-link">
+                                                                                                                                                    Projects
+                                                                                                                                                    <span class="float-right badge bg-primary">
+                                                                                                                                                        31
+                                                                                                                                                    </span>
+                                                                                                                                                </a>
+                                                                                                                                            </li>
+                                                                                                                                            <li class="nav-item">
+                                                                                                                                                <a href="#"
+                                                                                                                                                   class="nav-link">
+                                                                                                                                                    Tasks
+                                                                                                                                                    <span class="float-right badge bg-info">
+                                                                                                                                                        5
+                                                                                                                                                    </span>
+                                                                                                                                                </a>
+                                                                                                                                            </li>
+                                                                                                                                            <li class="nav-item">
+                                                                                                                                                <a href="#"
+                                                                                                                                                   class="nav-link">
+                                                                                                                                                    Completed Projects
+                                                                                                                                                    <span class="float-right badge bg-success">
+                                                                                                                                                        12
+                                                                                                                                                    </span>
+                                                                                                                                                </a>
+                                                                                                                                            </li>
+                                                                                                                                            <li class="nav-item">
+                                                                                                                                                <a href="#"
+                                                                                                                                                   class="nav-link">
+                                                                                                                                                    Followers
+                                                                                                                                                    <span class="float-right badge bg-danger">
+                                                                                                                                                        842
+                                                                                                                                                    </span>
+                                                                                                                                                </a>
+                                                                                                                                            </li>
+                                                                                                                                        </ul>
+                                                                                                                                    </div>
+                                                                                                                                </div>
+                                                                                                                                <!-- /.widget-user -->
+                                                                                                                            </div>
+                                                                                                                            <!-- /.col -->
+                                                                                                                            <div class="col-md-4">
+                                                                                                                                <!-- Widget: user widget style 1 -->
+                                                                                                                                <div class="card card-widget widget-user">
+                                                                                                                                    <!-- Add the bg color to the header using any of the bg-* classes -->
+                                                                                                                                    <div class="widget-user-header bg-info">
+                                                                                                                                        <h3 class="widget-user-username">
+                                                                                                                                            Alexander Pierce
+                                                                                                                                        </h3>
+                                                                                                                                        <h5 class="widget-user-desc">
+                                                                                                                                            Founder & CEO
+                                                                                                                                        </h5>
+                                                                                                                                    </div>
+                                                                                                                                    <div class="widget-user-image">
+                                                                                                                                        <img class="img-circle elevation-2"
+                                                                                                                                             src="/static/assets/img/user1-128x128.jpg"
+                                                                                                                                             alt="User Avatar">
+                                                                                                                                        </div>
+                                                                                                                                        <div class="card-footer">
+                                                                                                                                            <div class="row">
+                                                                                                                                                <div class="col-sm-4 border-right">
+                                                                                                                                                    <div class="description-block">
+                                                                                                                                                        <h5 class="description-header">
+                                                                                                                                                            3,200
+                                                                                                                                                        </h5>
+                                                                                                                                                        <span class="description-text">
+                                                                                                                                                            SALES
+                                                                                                                                                        </span>
+                                                                                                                                                    </div>
+                                                                                                                                                    <!-- /.description-block -->
+                                                                                                                                                </div>
+                                                                                                                                                <!-- /.col -->
+                                                                                                                                                <div class="col-sm-4 border-right">
+                                                                                                                                                    <div class="description-block">
+                                                                                                                                                        <h5 class="description-header">
+                                                                                                                                                            13,000
+                                                                                                                                                        </h5>
+                                                                                                                                                        <span class="description-text">
+                                                                                                                                                            FOLLOWERS
+                                                                                                                                                        </span>
+                                                                                                                                                    </div>
+                                                                                                                                                    <!-- /.description-block -->
+                                                                                                                                                </div>
+                                                                                                                                                <!-- /.col -->
+                                                                                                                                                <div class="col-sm-4">
+                                                                                                                                                    <div class="description-block">
+                                                                                                                                                        <h5 class="description-header">
+                                                                                                                                                            35
+                                                                                                                                                        </h5>
+                                                                                                                                                        <span class="description-text">
+                                                                                                                                                            PRODUCTS
+                                                                                                                                                        </span>
+                                                                                                                                                    </div>
+                                                                                                                                                    <!-- /.description-block -->
+                                                                                                                                                </div>
+                                                                                                                                                <!-- /.col -->
+                                                                                                                                            </div>
+                                                                                                                                            <!-- /.row -->
+                                                                                                                                        </div>
+                                                                                                                                    </div>
+                                                                                                                                    <!-- /.widget-user -->
+                                                                                                                                </div>
+                                                                                                                                <!-- /.col -->
+                                                                                                                                <div class="col-md-4">
+                                                                                                                                    <!-- Widget: user widget style 1 -->
+                                                                                                                                    <div class="card card-widget widget-user">
+                                                                                                                                        <!-- Add the bg color to the header using any of the bg-* classes -->
+                                                                                                                                        <div class="widget-user-header text-white"
+                                                                                                                                             style="background: url('/static/assets/img/photo1.png') center center;">
+                                                                                                                                            <h3 class="widget-user-username text-right">
+                                                                                                                                                Elizabeth Pierce
+                                                                                                                                            </h3>
+                                                                                                                                            <h5 class="widget-user-desc text-right">
+                                                                                                                                                Web Designer
+                                                                                                                                            </h5>
+                                                                                                                                        </div>
+                                                                                                                                        <div class="widget-user-image">
+                                                                                                                                            <img class="img-circle"
+                                                                                                                                                 src="/static/assets/img/user3-128x128.jpg"
+                                                                                                                                                 alt="User Avatar">
+                                                                                                                                            </div>
+                                                                                                                                            <div class="card-footer">
+                                                                                                                                                <div class="row">
+                                                                                                                                                    <div class="col-sm-4 border-right">
+                                                                                                                                                        <div class="description-block">
+                                                                                                                                                            <h5 class="description-header">
+                                                                                                                                                                3,200
+                                                                                                                                                            </h5>
+                                                                                                                                                            <span class="description-text">
+                                                                                                                                                                SALES
+                                                                                                                                                            </span>
+                                                                                                                                                        </div>
+                                                                                                                                                        <!-- /.description-block -->
+                                                                                                                                                    </div>
+                                                                                                                                                    <!-- /.col -->
+                                                                                                                                                    <div class="col-sm-4 border-right">
+                                                                                                                                                        <div class="description-block">
+                                                                                                                                                            <h5 class="description-header">
+                                                                                                                                                                13,000
+                                                                                                                                                            </h5>
+                                                                                                                                                            <span class="description-text">
+                                                                                                                                                                FOLLOWERS
+                                                                                                                                                            </span>
+                                                                                                                                                        </div>
+                                                                                                                                                        <!-- /.description-block -->
+                                                                                                                                                    </div>
+                                                                                                                                                    <!-- /.col -->
+                                                                                                                                                    <div class="col-sm-4">
+                                                                                                                                                        <div class="description-block">
+                                                                                                                                                            <h5 class="description-header">
+                                                                                                                                                                35
+                                                                                                                                                            </h5>
+                                                                                                                                                            <span class="description-text">
+                                                                                                                                                                PRODUCTS
+                                                                                                                                                            </span>
+                                                                                                                                                        </div>
+                                                                                                                                                        <!-- /.description-block -->
+                                                                                                                                                    </div>
+                                                                                                                                                    <!-- /.col -->
+                                                                                                                                                </div>
+                                                                                                                                                <!-- /.row -->
+                                                                                                                                            </div>
+                                                                                                                                        </div>
+                                                                                                                                        <!-- /.widget-user -->
+                                                                                                                                    </div>
+                                                                                                                                    <!-- /.col -->
+                                                                                                                                </div>
+                                                                                                                                <!-- /.row -->
+                                                                                                                                <div class="row">
+                                                                                                                                    <div class="col-md-6">
+                                                                                                                                        <!-- Box Comment -->
+                                                                                                                                        <div class="card card-widget">
+                                                                                                                                            <div class="card-header">
+                                                                                                                                                <div class="user-block">
+                                                                                                                                                    <img class="img-circle"
+                                                                                                                                                         src="/static/assets/img/user1-128x128.jpg"
+                                                                                                                                                         alt="User Image">
+                                                                                                                                                        <span class="username">
+                                                                                                                                                            <a href="#">
+                                                                                                                                                                Jonathan Burke Jr.
+                                                                                                                                                            </a>
+                                                                                                                                                        </span>
+                                                                                                                                                        <span class="description">
+                                                                                                                                                            Shared publicly - 7:30 PM Today
+                                                                                                                                                        </span>
+                                                                                                                                                    </div>
+                                                                                                                                                    <!-- /.user-block -->
+                                                                                                                                                    <div class="card-tools">
+                                                                                                                                                        <button type="button"
+                                                                                                                                                                class="btn btn-tool"
+                                                                                                                                                                title="Mark as read">
+                                                                                                                                                            <i class="far fa-circle"></i>
+                                                                                                                                                        </button>
+                                                                                                                                                        <button type="button"
+                                                                                                                                                                class="btn btn-tool"
+                                                                                                                                                                data-card-widget="collapse">
+                                                                                                                                                            <i class="fas fa-minus"></i>
+                                                                                                                                                        </button>
+                                                                                                                                                        <button type="button"
+                                                                                                                                                                class="btn btn-tool"
+                                                                                                                                                                data-card-widget="remove">
+                                                                                                                                                            <i class="fas fa-times"></i>
+                                                                                                                                                        </button>
+                                                                                                                                                    </div>
+                                                                                                                                                    <!-- /.card-tools -->
+                                                                                                                                                </div>
+                                                                                                                                                <!-- /.card-header -->
+                                                                                                                                                <div class="card-body">
+                                                                                                                                                    <img class="img-fluid pad"
+                                                                                                                                                         src="/static/assets/img/photo2.png"
+                                                                                                                                                         alt="Photo">
+                                                                                                                                                        <p>
+                                                                                                                                                            I took this photo this morning. What do you guys think?
+                                                                                                                                                        </p>
+                                                                                                                                                        <button type="button"
+                                                                                                                                                                class="btn btn-default btn-sm">
+                                                                                                                                                            <i class="fas fa-share"></i>
+                                                                                                                                                            Share
+                                                                                                                                                        </button>
+                                                                                                                                                        <button type="button"
+                                                                                                                                                                class="btn btn-default btn-sm">
+                                                                                                                                                            <i class="far fa-thumbs-up"></i>
+                                                                                                                                                            Like
+                                                                                                                                                        </button>
+                                                                                                                                                        <span class="float-right text-muted">
+                                                                                                                                                            127 likes - 3 comments
+                                                                                                                                                        </span>
+                                                                                                                                                    </div>
+                                                                                                                                                    <!-- /.card-body -->
+                                                                                                                                                    <div class="card-footer card-comments">
+                                                                                                                                                        <div class="card-comment">
+                                                                                                                                                            <!-- User image -->
+                                                                                                                                                            <img class="img-circle img-sm"
+                                                                                                                                                                 src="/static/assets/img/user3-128x128.jpg"
+                                                                                                                                                                 alt="User Image">
+                                                                                                                                                                <div class="comment-text">
+                                                                                                                                                                    <span class="username">
+                                                                                                                                                                        Maria Gonzales
+                                                                                                                                                                        <span class="text-muted float-right">
+                                                                                                                                                                            8:03 PM Today
+                                                                                                                                                                        </span>
+                                                                                                                                                                    </span>
+                                                                                                                                                                    <!-- /.username -->
+                                                                                                                                                                    It is a long established fact that a reader will be distracted
+                                                                                                                                                                    by the readable content of a page when looking at its layout.
+                                                                                                                                                                </div>
+                                                                                                                                                                <!-- /.comment-text -->
+                                                                                                                                                            </div>
+                                                                                                                                                            <!-- /.card-comment -->
+                                                                                                                                                            <div class="card-comment">
+                                                                                                                                                                <!-- User image -->
+                                                                                                                                                                <img class="img-circle img-sm"
+                                                                                                                                                                     src="/static/assets/img/user4-128x128.jpg"
+                                                                                                                                                                     alt="User Image">
+                                                                                                                                                                    <div class="comment-text">
+                                                                                                                                                                        <span class="username">
+                                                                                                                                                                            Luna Stark
+                                                                                                                                                                            <span class="text-muted float-right">
+                                                                                                                                                                                8:03 PM Today
+                                                                                                                                                                            </span>
+                                                                                                                                                                        </span>
+                                                                                                                                                                        <!-- /.username -->
+                                                                                                                                                                        It is a long established fact that a reader will be distracted
+                                                                                                                                                                        by the readable content of a page when looking at its layout.
+                                                                                                                                                                    </div>
+                                                                                                                                                                    <!-- /.comment-text -->
+                                                                                                                                                                </div>
+                                                                                                                                                                <!-- /.card-comment -->
+                                                                                                                                                            </div>
+                                                                                                                                                            <!-- /.card-footer -->
+                                                                                                                                                            <div class="card-footer">
+                                                                                                                                                                <form action="#"
+                                                                                                                                                                      method="post">
+                                                                                                                                                                    <img class="img-fluid img-circle img-sm"
+                                                                                                                                                                         src="/static/assets/img/user4-128x128.jpg"
+                                                                                                                                                                         alt="Alt Text">
+                                                                                                                                                                        <!-- .img-push is used to add margin to elements next to floating images -->
+                                                                                                                                                                        <div class="img-push">
+                                                                                                                                                                            <input type="text"
+                                                                                                                                                                                   class="form-control form-control-sm"
+                                                                                                                                                                                   placeholder="Press enter to post comment">
+                                                                                                                                                                        </div>
+                                                                                                                                                                    </form>
+                                                                                                                                                                </div>
+                                                                                                                                                                <!-- /.card-footer -->
+                                                                                                                                                            </div>
+                                                                                                                                                            <!-- /.card -->
+                                                                                                                                                        </div>
+                                                                                                                                                        <!-- /.col -->
+                                                                                                                                                        <div class="col-md-6">
+                                                                                                                                                            <!-- Box Comment -->
+                                                                                                                                                            <div class="card card-widget">
+                                                                                                                                                                <div class="card-header">
+                                                                                                                                                                    <div class="user-block">
+                                                                                                                                                                        <img class="img-circle"
+                                                                                                                                                                             src="/static/assets/img/user1-128x128.jpg"
+                                                                                                                                                                             alt="User Image">
+                                                                                                                                                                            <span class="username">
+                                                                                                                                                                                <a href="#">
+                                                                                                                                                                                    Jonathan Burke Jr.
+                                                                                                                                                                                </a>
+                                                                                                                                                                            </span>
+                                                                                                                                                                            <span class="description">
+                                                                                                                                                                                Shared publicly - 7:30 PM Today
+                                                                                                                                                                            </span>
+                                                                                                                                                                        </div>
+                                                                                                                                                                        <!-- /.user-block -->
+                                                                                                                                                                        <div class="card-tools">
+                                                                                                                                                                            <button type="button"
+                                                                                                                                                                                    class="btn btn-tool"
+                                                                                                                                                                                    title="Mark as read">
+                                                                                                                                                                                <i class="far fa-circle"></i>
+                                                                                                                                                                            </button>
+                                                                                                                                                                            <button type="button"
+                                                                                                                                                                                    class="btn btn-tool"
+                                                                                                                                                                                    data-card-widget="collapse">
+                                                                                                                                                                                <i class="fas fa-minus"></i>
+                                                                                                                                                                            </button>
+                                                                                                                                                                            <button type="button"
+                                                                                                                                                                                    class="btn btn-tool"
+                                                                                                                                                                                    data-card-widget="remove">
+                                                                                                                                                                                <i class="fas fa-times"></i>
+                                                                                                                                                                            </button>
+                                                                                                                                                                        </div>
+                                                                                                                                                                        <!-- /.card-tools -->
+                                                                                                                                                                    </div>
+                                                                                                                                                                    <!-- /.card-header -->
+                                                                                                                                                                    <div class="card-body">
+                                                                                                                                                                        <!-- post text -->
+                                                                                                                                                                        <p>
+                                                                                                                                                                            Far far away, behind the word mountains, far from the
+                                                                                                                                                                            countries Vokalia and Consonantia, there live the blind
+                                                                                                                                                                            texts. Separated they live in Bookmarksgrove right at
+                                                                                                                                                                        </p>
+                                                                                                                                                                        <p>
+                                                                                                                                                                            the coast of the Semantics, a large language ocean.
+                                                                                                                                                                            A small river named Duden flows by their place and supplies
+                                                                                                                                                                            it with the necessary regelialia. It is a paradisematic
+                                                                                                                                                                            country, in which roasted parts of sentences fly into
+                                                                                                                                                                            your mouth.
+                                                                                                                                                                        </p>
+                                                                                                                                                                        <!-- Attachment -->
+                                                                                                                                                                        <div class="attachment-block clearfix">
+                                                                                                                                                                            <img class="attachment-img"
+                                                                                                                                                                                 src="/static/assets/img/photo1.png"
+                                                                                                                                                                                 alt="Attachment Image">
+                                                                                                                                                                                <div class="attachment-pushed">
+                                                                                                                                                                                    <h4 class="attachment-heading">
+                                                                                                                                                                                        <a href="https://www.lipsum.com/">
+                                                                                                                                                                                            Lorem ipsum text generator
+                                                                                                                                                                                        </a>
+                                                                                                                                                                                    </h4>
+                                                                                                                                                                                    <div class="attachment-text">
+                                                                                                                                                                                        Description about the attachment can be placed here.
+                                                                                                                                                                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry...
+                                                                                                                                                                                        <a href="#">
+                                                                                                                                                                                            more
+                                                                                                                                                                                        </a>
+                                                                                                                                                                                    </div>
+                                                                                                                                                                                    <!-- /.attachment-text -->
+                                                                                                                                                                                </div>
+                                                                                                                                                                                <!-- /.attachment-pushed -->
+                                                                                                                                                                            </div>
+                                                                                                                                                                            <!-- /.attachment-block -->
+                                                                                                                                                                            <!-- Social sharing buttons -->
+                                                                                                                                                                            <button type="button"
+                                                                                                                                                                                    class="btn btn-default btn-sm">
+                                                                                                                                                                                <i class="fas fa-share"></i>
+                                                                                                                                                                                Share
+                                                                                                                                                                            </button>
+                                                                                                                                                                            <button type="button"
+                                                                                                                                                                                    class="btn btn-default btn-sm">
+                                                                                                                                                                                <i class="far fa-thumbs-up"></i>
+                                                                                                                                                                                Like
+                                                                                                                                                                            </button>
+                                                                                                                                                                            <span class="float-right text-muted">
+                                                                                                                                                                                45 likes - 2 comments
+                                                                                                                                                                            </span>
+                                                                                                                                                                        </div>
+                                                                                                                                                                        <!-- /.card-body -->
+                                                                                                                                                                        <div class="card-footer card-comments">
+                                                                                                                                                                            <div class="card-comment">
+                                                                                                                                                                                <!-- User image -->
+                                                                                                                                                                                <img class="img-circle img-sm"
+                                                                                                                                                                                     src="/static/assets/img/user3-128x128.jpg"
+                                                                                                                                                                                     alt="User Image">
+                                                                                                                                                                                    <div class="comment-text">
+                                                                                                                                                                                        <span class="username">
+                                                                                                                                                                                            Maria Gonzales
+                                                                                                                                                                                            <span class="text-muted float-right">
+                                                                                                                                                                                                8:03 PM Today
+                                                                                                                                                                                            </span>
+                                                                                                                                                                                        </span>
+                                                                                                                                                                                        <!-- /.username -->
+                                                                                                                                                                                        It is a long established fact that a reader will be distracted
+                                                                                                                                                                                        by the readable content of a page when looking at its layout.
+                                                                                                                                                                                    </div>
+                                                                                                                                                                                    <!-- /.comment-text -->
+                                                                                                                                                                                </div>
+                                                                                                                                                                                <!-- /.card-comment -->
+                                                                                                                                                                                <div class="card-comment">
+                                                                                                                                                                                    <!-- User image -->
+                                                                                                                                                                                    <img class="img-circle img-sm"
+                                                                                                                                                                                         src="/static/assets/img/user5-128x128.jpg"
+                                                                                                                                                                                         alt="User Image">
+                                                                                                                                                                                        <div class="comment-text">
+                                                                                                                                                                                            <span class="username">
+                                                                                                                                                                                                Nora Havisham
+                                                                                                                                                                                                <span class="text-muted float-right">
+                                                                                                                                                                                                    8:03 PM Today
+                                                                                                                                                                                                </span>
+                                                                                                                                                                                            </span>
+                                                                                                                                                                                            <!-- /.username -->
+                                                                                                                                                                                            The point of using Lorem Ipsum is that it hrs a morer-less
+                                                                                                                                                                                            normal distribution of letters, as opposed to using
+                                                                                                                                                                                            'Content here, content here', making it look like readable English.
+                                                                                                                                                                                        </div>
+                                                                                                                                                                                        <!-- /.comment-text -->
+                                                                                                                                                                                    </div>
+                                                                                                                                                                                    <!-- /.card-comment -->
+                                                                                                                                                                                </div>
+                                                                                                                                                                                <!-- /.card-footer -->
+                                                                                                                                                                                <div class="card-footer">
+                                                                                                                                                                                    <form action="#"
+                                                                                                                                                                                          method="post">
+                                                                                                                                                                                        <img class="img-fluid img-circle img-sm"
+                                                                                                                                                                                             src="/static/assets/img/user4-128x128.jpg"
+                                                                                                                                                                                             alt="Alt Text">
+                                                                                                                                                                                            <!-- .img-push is used to add margin to elements next to floating images -->
+                                                                                                                                                                                            <div class="img-push">
+                                                                                                                                                                                                <input type="text"
+                                                                                                                                                                                                       class="form-control form-control-sm"
+                                                                                                                                                                                                       placeholder="Press enter to post comment">
+                                                                                                                                                                                            </div>
+                                                                                                                                                                                        </form>
+                                                                                                                                                                                    </div>
+                                                                                                                                                                                    <!-- /.card-footer -->
+                                                                                                                                                                                </div>
+                                                                                                                                                                                <!-- /.card -->
+                                                                                                                                                                            </div>
+                                                                                                                                                                            <!-- /.col -->
+                                                                                                                                                                        </div>
+                                                                                                                                                                        <!-- /.row -->
+                                                                                                                                                                        <!-- =========================================================== -->
+                                                                                                                                                                        <h5 class="mb-2">
+                                                                                                                                                                            Custom Shadows Variations
+                                                                                                                                                                            <small>
+                                                                                                                                                                            <i>
+                                                                                                                                                                            Using Bootstrap's Shadow Utility
+                                                                                                                                                                            </i>
+                                                                                                                                                                            </small>
+                                                                                                                                                                        </h5>
+                                                                                                                                                                        <div class="row">
+                                                                                                                                                                            <div class="col-md-4">
+                                                                                                                                                                                <!-- Widget: user widget style 2 -->
+                                                                                                                                                                                <div class="card card-widget widget-user-2 shadow-sm">
+                                                                                                                                                                                    <!-- Add the bg color to the header using any of the bg-* classes -->
+                                                                                                                                                                                    <div class="widget-user-header bg-warning">
+                                                                                                                                                                                        <div class="widget-user-image">
+                                                                                                                                                                                            <img class="img-circle elevation-2"
+                                                                                                                                                                                                 src="/static/assets/img/user7-128x128.jpg"
+                                                                                                                                                                                                 alt="User Avatar">
+                                                                                                                                                                                            </div>
+                                                                                                                                                                                            <!-- /.widget-user-image -->
+                                                                                                                                                                                            <h3 class="widget-user-username">
+                                                                                                                                                                                                Nadia Carmichael
+                                                                                                                                                                                            </h3>
+                                                                                                                                                                                            <h5 class="widget-user-desc">
+                                                                                                                                                                                                Lead Developer
+                                                                                                                                                                                            </h5>
+                                                                                                                                                                                        </div>
+                                                                                                                                                                                        <div class="card-footer p-0">
+                                                                                                                                                                                            <ul class="nav flex-column">
+                                                                                                                                                                                                <li class="nav-item">
+                                                                                                                                                                                                    <a href="#"
+                                                                                                                                                                                                       class="nav-link">
+                                                                                                                                                                                                        Projects
+                                                                                                                                                                                                        <span class="float-right badge bg-primary">
+                                                                                                                                                                                                            31
+                                                                                                                                                                                                        </span>
+                                                                                                                                                                                                    </a>
+                                                                                                                                                                                                </li>
+                                                                                                                                                                                                <li class="nav-item">
+                                                                                                                                                                                                    <a href="#"
+                                                                                                                                                                                                       class="nav-link">
+                                                                                                                                                                                                        Tasks
+                                                                                                                                                                                                        <span class="float-right badge bg-info">
+                                                                                                                                                                                                            5
+                                                                                                                                                                                                        </span>
+                                                                                                                                                                                                    </a>
+                                                                                                                                                                                                </li>
+                                                                                                                                                                                                <li class="nav-item">
+                                                                                                                                                                                                    <a href="#"
+                                                                                                                                                                                                       class="nav-link">
+                                                                                                                                                                                                        Completed Projects
+                                                                                                                                                                                                        <span class="float-right badge bg-success">
+                                                                                                                                                                                                            12
+                                                                                                                                                                                                        </span>
+                                                                                                                                                                                                    </a>
+                                                                                                                                                                                                </li>
+                                                                                                                                                                                                <li class="nav-item">
+                                                                                                                                                                                                    <a href="#"
+                                                                                                                                                                                                       class="nav-link">
+                                                                                                                                                                                                        Followers
+                                                                                                                                                                                                        <span class="float-right badge bg-danger">
+                                                                                                                                                                                                            842
+                                                                                                                                                                                                        </span>
+                                                                                                                                                                                                    </a>
+                                                                                                                                                                                                </li>
+                                                                                                                                                                                            </ul>
+                                                                                                                                                                                        </div>
+                                                                                                                                                                                    </div>
+                                                                                                                                                                                    <!-- /.widget-user -->
+                                                                                                                                                                                </div>
+                                                                                                                                                                                <!-- /.col -->
+                                                                                                                                                                                <div class="col-md-4">
+                                                                                                                                                                                    <!-- Widget: user widget style 1 -->
+                                                                                                                                                                                    <div class="card card-widget widget-user shadow">
+                                                                                                                                                                                        <!-- Add the bg color to the header using any of the bg-* classes -->
+                                                                                                                                                                                        <div class="widget-user-header bg-info">
+                                                                                                                                                                                            <h3 class="widget-user-username">
+                                                                                                                                                                                                Alexander Pierce
+                                                                                                                                                                                            </h3>
+                                                                                                                                                                                            <h5 class="widget-user-desc">
+                                                                                                                                                                                                Founder & CEO
+                                                                                                                                                                                            </h5>
+                                                                                                                                                                                        </div>
+                                                                                                                                                                                        <div class="widget-user-image">
+                                                                                                                                                                                            <img class="img-circle elevation-2"
+                                                                                                                                                                                                 src="/static/assets/img/user1-128x128.jpg"
+                                                                                                                                                                                                 alt="User Avatar">
+                                                                                                                                                                                            </div>
+                                                                                                                                                                                            <div class="card-footer">
+                                                                                                                                                                                                <div class="row">
+                                                                                                                                                                                                    <div class="col-sm-4 border-right">
+                                                                                                                                                                                                        <div class="description-block">
+                                                                                                                                                                                                            <h5 class="description-header">
+                                                                                                                                                                                                                3,200
+                                                                                                                                                                                                            </h5>
+                                                                                                                                                                                                            <span class="description-text">
+                                                                                                                                                                                                                SALES
+                                                                                                                                                                                                            </span>
+                                                                                                                                                                                                        </div>
+                                                                                                                                                                                                        <!-- /.description-block -->
+                                                                                                                                                                                                    </div>
+                                                                                                                                                                                                    <!-- /.col -->
+                                                                                                                                                                                                    <div class="col-sm-4 border-right">
+                                                                                                                                                                                                        <div class="description-block">
+                                                                                                                                                                                                            <h5 class="description-header">
+                                                                                                                                                                                                                13,000
+                                                                                                                                                                                                            </h5>
+                                                                                                                                                                                                            <span class="description-text">
+                                                                                                                                                                                                                FOLLOWERS
+                                                                                                                                                                                                            </span>
+                                                                                                                                                                                                        </div>
+                                                                                                                                                                                                        <!-- /.description-block -->
+                                                                                                                                                                                                    </div>
+                                                                                                                                                                                                    <!-- /.col -->
+                                                                                                                                                                                                    <div class="col-sm-4">
+                                                                                                                                                                                                        <div class="description-block">
+                                                                                                                                                                                                            <h5 class="description-header">
+                                                                                                                                                                                                                35
+                                                                                                                                                                                                            </h5>
+                                                                                                                                                                                                            <span class="description-text">
+                                                                                                                                                                                                                PRODUCTS
+                                                                                                                                                                                                            </span>
+                                                                                                                                                                                                        </div>
+                                                                                                                                                                                                        <!-- /.description-block -->
+                                                                                                                                                                                                    </div>
+                                                                                                                                                                                                    <!-- /.col -->
+                                                                                                                                                                                                </div>
+                                                                                                                                                                                                <!-- /.row -->
+                                                                                                                                                                                            </div>
+                                                                                                                                                                                        </div>
+                                                                                                                                                                                        <!-- /.widget-user -->
+                                                                                                                                                                                    </div>
+                                                                                                                                                                                    <!-- /.col -->
+                                                                                                                                                                                    <div class="col-md-4">
+                                                                                                                                                                                        <!-- Widget: user widget style 1 -->
+                                                                                                                                                                                        <div class="card card-widget widget-user shadow-lg">
+                                                                                                                                                                                            <!-- Add the bg color to the header using any of the bg-* classes -->
+                                                                                                                                                                                            <div class="widget-user-header text-white"
+                                                                                                                                                                                                 style="background: url('/static/assets/img/photo1.png') center center;">
+                                                                                                                                                                                                <h3 class="widget-user-username text-right">
+                                                                                                                                                                                                    Elizabeth Pierce
+                                                                                                                                                                                                </h3>
+                                                                                                                                                                                                <h5 class="widget-user-desc text-right">
+                                                                                                                                                                                                    Web Designer
+                                                                                                                                                                                                </h5>
+                                                                                                                                                                                            </div>
+                                                                                                                                                                                            <div class="widget-user-image">
+                                                                                                                                                                                                <img class="img-circle"
+                                                                                                                                                                                                     src="/static/assets/img/user3-128x128.jpg"
+                                                                                                                                                                                                     alt="User Avatar">
+                                                                                                                                                                                                </div>
+                                                                                                                                                                                                <div class="card-footer">
+                                                                                                                                                                                                    <div class="row">
+                                                                                                                                                                                                        <div class="col-sm-4 border-right">
+                                                                                                                                                                                                            <div class="description-block">
+                                                                                                                                                                                                                <h5 class="description-header">
+                                                                                                                                                                                                                    3,200
+                                                                                                                                                                                                                </h5>
+                                                                                                                                                                                                                <span class="description-text">
+                                                                                                                                                                                                                    SALES
+                                                                                                                                                                                                                </span>
+                                                                                                                                                                                                            </div>
+                                                                                                                                                                                                            <!-- /.description-block -->
+                                                                                                                                                                                                        </div>
+                                                                                                                                                                                                        <!-- /.col -->
+                                                                                                                                                                                                        <div class="col-sm-4 border-right">
+                                                                                                                                                                                                            <div class="description-block">
+                                                                                                                                                                                                                <h5 class="description-header">
+                                                                                                                                                                                                                    13,000
+                                                                                                                                                                                                                </h5>
+                                                                                                                                                                                                                <span class="description-text">
+                                                                                                                                                                                                                    FOLLOWERS
+                                                                                                                                                                                                                </span>
+                                                                                                                                                                                                            </div>
+                                                                                                                                                                                                            <!-- /.description-block -->
+                                                                                                                                                                                                        </div>
+                                                                                                                                                                                                        <!-- /.col -->
+                                                                                                                                                                                                        <div class="col-sm-4">
+                                                                                                                                                                                                            <div class="description-block">
+                                                                                                                                                                                                                <h5 class="description-header">
+                                                                                                                                                                                                                    35
+                                                                                                                                                                                                                </h5>
+                                                                                                                                                                                                                <span class="description-text">
+                                                                                                                                                                                                                    PRODUCTS
+                                                                                                                                                                                                                </span>
+                                                                                                                                                                                                            </div>
+                                                                                                                                                                                                            <!-- /.description-block -->
+                                                                                                                                                                                                        </div>
+                                                                                                                                                                                                        <!-- /.col -->
+                                                                                                                                                                                                    </div>
+                                                                                                                                                                                                    <!-- /.row -->
+                                                                                                                                                                                                </div>
+                                                                                                                                                                                            </div>
+                                                                                                                                                                                            <!-- /.widget-user -->
+                                                                                                                                                                                        </div>
+                                                                                                                                                                                        <!-- /.col -->
+                                                                                                                                                                                    </div>
+                                                                                                                                                                                    <!-- /.row -->
+                                                                                                                                                                                </div>
+                                                                                                                                                                                <!-- /.container-fluid -->
+                                                                                                                                                                            </section>
+                                                                                                                                                                            <!-- /.content -->
+                                                                                                                                                                            <a id="back-to-top"
+                                                                                                                                                                               href="#"
+                                                                                                                                                                               class="btn btn-primary back-to-top"
+                                                                                                                                                                               role="button"
+                                                                                                                                                                               aria-label="Scroll to top">
+                                                                                                                                                                                <i class="fas fa-chevron-up"></i>
+                                                                                                                                                                            </a>
+                                                                                                                                                                        </div>
+                                                                                                                                                                        <!-- /.content-wrapper -->
+                                                                                                                                                                    {% endblock content %}
+                                                                                                                                                                    <!-- Specific Page JS goes HERE -->
+                                                                                                                                                                    {% block javascripts %}
+                                                                                                                                                                        <!-- jQuery -->
+                                                                                                                                                                        <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
+                                                                                                                                                                        <!-- Bootstrap 4 -->
+                                                                                                                                                                        <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+                                                                                                                                                                        <!-- AdminLTE App -->
+                                                                                                                                                                        <script src="/static/assets/js/adminlte.min.js"></script>
+                                                                                                                                                                        <!-- AdminLTE for demo purposes -->
+                                                                                                                                                                        <script src="/static/assets/js/demo.js"></script>
+                                                                                                                                                                    {% endblock javascripts %}
diff --git a/tests/test_djlint.py b/tests/test_djlint.py
index 80ece90..9be44a4 100644
--- a/tests/test_djlint.py
+++ b/tests/test_djlint.py
@@ -198,3 +198,29 @@ def test_W017(runner, tmp_file):
     result = runner.invoke(djlint, [tmp_file.name])
     assert result.exit_code == 0
     assert "W017 1:" in result.output
+
+
+def test_check(runner, tmp_file):
+    write_to_file(tmp_file.name, b"<div></div>")
+    result = runner.invoke(djlint, [tmp_file.name], "--check")
+    assert result.exit_code == 0
+    assert "Linting 1 file!" in result.output
+    assert "Linted 1 file, found 0 errors" in result.output
+
+
+def test_check_non_existing_file(runner, tmp_file):
+    result = runner.invoke(djlint, "tests/nothing.html", "--check")
+    assert result.exit_code == 2
+
+
+def test_check_non_existing_folder(runner, tmp_file):
+    result = runner.invoke(djlint, "tests/nothing", "--check")
+    assert result.exit_code == 2
+
+
+def test_check_django_ledger(runner, tmp_file):
+    # source from https://github.com/arrobalytics/django-ledger
+    result = runner.invoke(djlint, "tests/django_ledger", "--check")
+    assert result.exit_code == 0
+    # assert "Linting 120 files!" in result.output
+    # assert "0 files were updated." in result.output
diff --git a/tox.ini b/tox.ini
index 21f956f..e9246e9 100644
--- a/tox.ini
+++ b/tox.ini
@@ -6,6 +6,7 @@ envlist =
 skip_missing_interpreters = True
 isolated_build = True
 
+
 [testenv:isort]
 deps = isort
 commands = isort src/djlint
@@ -40,11 +41,13 @@ deps =
     pylint
     mypy
     types-PyYAML
+    check-manifest
 commands =
     flake8 src/djlint
     black --fast --check src/djlint
     pylint src/djlint
     mypy src/djlint
+    ; check-manifest -v
 skip_install: true
 
 
@@ -60,6 +63,7 @@ commands =
 depends =
     test: clean
     cov: test
+skip_install: true
 
 [testenv:cov]
 skip_install: true