initial

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.9
+
+# set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+
+COPY requirements.txt .
+# install python dependencies
+RUN pip install --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# running migrations
+RUN python manage.py migrate
+
+# gunicorn
+CMD ["gunicorn", "--config", "gunicorn-cfg.py", "core.wsgi"]

apps/api/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

apps/api/config.py

@@ -0,0 +1,8 @@
+# -*- encoding: utf-8 -*-
+
+from django.apps import AppConfig
+
+
+class MyConfig(AppConfig):
+    name = 'apps.api'
+    label = 'apps_api'

apps/api/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

apps/api/serializers.py

@@ -0,0 +1,105 @@
+# -*- encoding: utf-8 -*-
+
+import logging
+
+from django.apps import apps
+from django.conf import settings
+from rest_framework import serializers
+
+log = logging.getLogger(__name__)
+
+
+class DynamicModelSerializer(serializers.ModelSerializer):
+    """For use with GET requests, to specify which fields to include or exclude
+    Mimics some graphql functionality.
+
+    Usage: Inherit your ModelSerializer with this class. Add "only_fields" or
+    "exclude_fields" to the query parameters of your GET request.
+
+    This also works with nested foreign keys, for example:
+    ?only_fields=name,age&company__only_fields=id,name
+
+    Some more examples:
+
+    ?only_fields=company,name&company__exclude_fields=name
+    ?exclude_fields=name&company__only_fields=id
+    ?company__exclude_fields=name
+
+    Note: the Foreign Key serializer must also inherit from this class
+    """
+
+    def only_keep_fields(self, fields_to_keep):
+        fields_to_keep = set(fields_to_keep.split(","))
+        all_fields = set(self.fields.keys())
+        for field in all_fields - fields_to_keep:
+            self.fields.pop(field, None)
+
+    def exclude_fields(self, fields_to_exclude):
+        fields_to_exclude = fields_to_exclude.split(",")
+        for field in fields_to_exclude:
+            self.fields.pop(field, None)
+
+    def remove_unwanted_fields(self, dynamic_params):
+        if fields_to_keep := dynamic_params.pop("only_fields", None):
+            self.only_keep_fields(fields_to_keep)
+
+        if fields_to_exclude := dynamic_params.pop("exclude_fields", None):
+            self.exclude_fields(fields_to_exclude)
+
+    def get_or_create_dynamic_params(self, child):
+        if "dynamic_params" not in self.fields[child]._context:
+            self.fields[child]._context.update({"dynamic_params": {}})
+        return self.fields[child]._context["dynamic_params"]
+
+    @staticmethod
+    def split_param(dynamic_param):
+        crumbs = dynamic_param.split("__")
+        return crumbs[0], "__".join(crumbs[1:]) if len(crumbs) > 1 else None
+
+    def set_dynamic_params_for_children(self, dynamic_params):
+        for param, fields in dynamic_params.items():
+            child, child_dynamic_param = self.split_param(param)
+            if child in set(self.fields.keys()):
+                dynamic_params = self.get_or_create_dynamic_params(child)
+                dynamic_params.update({child_dynamic_param: fields})
+
+    @staticmethod
+    def is_param_dynamic(p):
+        return p.endswith("only_fields") or p.endswith("exclude_fields")
+
+    def get_dynamic_params_for_root(self, request):
+        query_params = request.query_params.items()
+        return {k: v for k, v in query_params if self.is_param_dynamic(k)}
+
+    def get_dynamic_params(self):
+        """
+        When dynamic params get passed down in set_context_for_children
+        If the child is a subclass of ListSerializer (has many=True)
+        The context must be fetched from ListSerializer Class
+        """
+        if isinstance(self.parent, serializers.ListSerializer):
+            return self.parent._context.get("dynamic_params", {})
+        return self._context.get("dynamic_params", {})
+
+    def __init__(self, *args, **kwargs):
+        request = kwargs.get("context", {}).get("request")
+        super().__init__(*args, **kwargs)
+        is_root = bool(request)
+
+        if is_root:
+            if request.method != "GET":
+                return
+
+            dynamic_params = self.get_dynamic_params_for_root(request)
+            self._context.update({"dynamic_params": dynamic_params})
+
+    def to_representation(self, *args, **kwargs):
+        if dynamic_params := self.get_dynamic_params().copy():
+            self.remove_unwanted_fields(dynamic_params)
+            self.set_dynamic_params_for_children(dynamic_params)
+
+        return super().to_representation(*args, **kwargs)
+
+    class Meta:
+        abstract = True
+

apps/api/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

apps/api/urls.py

@@ -0,0 +1,13 @@
+# -*- encoding: utf-8 -*-
+
+from django.urls import path, include
+from rest_framework.authtoken.views import obtain_auth_token
+
+from . import views
+
+
+urlpatterns = [
+    path("api-auth/", include("rest_framework.urls", namespace="rest_framework")),
+    path("api-token-auth/", obtain_auth_token),
+
+]

apps/api/views.py

@@ -0,0 +1,16 @@
+# -*- encoding: utf-8 -*-
+
+import logging
+
+from django_filters import rest_framework as rest_filters
+from django.views.decorators.cache import cache_page
+from django.utils.decorators import method_decorator
+
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from rest_framework import status, permissions, filters, generics
+from rest_framework.pagination import PageNumberPagination
+from rest_framework.authentication import SessionAuthentication, TokenAuthentication
+
+log = logging.getLogger(__name__)
+

apps/authentication/__init__.py

@@ -0,0 +1,4 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""

apps/authentication/admin.py

@@ -0,0 +1,14 @@
+# -*- encoding: utf-8 -*-
+
+from django.contrib import admin
+
+from .models import User
+
+
+class UserAdmin(admin.ModelAdmin):
+
+    list_display = ["uuid", "forename", "surname", "email", "icon", "is_staff", "is_superuser", "is_active"]
+    list_filter = ["is_staff", "is_superuser", "is_active"]
+
+
+admin.site.register(User, UserAdmin)

apps/authentication/config.py

@@ -0,0 +1,11 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.apps import AppConfig
+
+
+class AuthConfig(AppConfig):
+    name = 'apps.auth'
+    label = 'apps_auth'

apps/authentication/forms.py

@@ -0,0 +1,68 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django import forms
+from django.contrib.auth.forms import UserCreationForm
+
+from .models import User
+
+
+class LoginForm(forms.Form):
+    email = forms.EmailField(
+        widget=forms.EmailInput(
+            attrs={
+                "placeholder": "Email Address",
+                "class": "form-control"
+            }
+        ))
+    password = forms.CharField(
+        widget=forms.PasswordInput(
+            attrs={
+                "placeholder": "Password",
+                "class": "form-control"
+            }
+        ))
+
+
+class SignUpForm(UserCreationForm):
+    forename = forms.CharField(
+        widget=forms.TextInput(
+            attrs={
+                "placeholder": "Forename",
+                "class": "form-control"
+            }
+        ))
+    surname = forms.CharField(
+        widget=forms.TextInput(
+            attrs={
+                "placeholder": "Surname",
+                "class": "form-control"
+            }
+        ))
+    email = forms.EmailField(
+        widget=forms.EmailInput(
+            attrs={
+                "placeholder": "Email",
+                "class": "form-control"
+            }
+        ))
+    password1 = forms.CharField(
+        widget=forms.PasswordInput(
+            attrs={
+                "placeholder": "Password",
+                "class": "form-control"
+            }
+        ))
+    password2 = forms.CharField(
+        widget=forms.PasswordInput(
+            attrs={
+                "placeholder": "Password (Again)",
+                "class": "form-control"
+            }
+        ))
+
+    class Meta:
+        model = User
+        fields = ('forename', 'surname', 'email', 'password1', 'password2')

apps/authentication/migrations/0001_initial.py

@@ -0,0 +1,53 @@
+# Generated by Django 3.2.16 on 2024-01-22 14:39
+
+import apps.authentication.models
+from django.db import migrations, models
+import django.db.models.deletion
+import django.utils.timezone
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('auth', '0012_alter_user_first_name_max_length'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Department',
+            fields=[
+                ('uuid', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('title', models.CharField(max_length=150)),
+                ('colour', models.CharField(max_length=7)),
+                ('backgroundcolour', models.CharField(max_length=7)),
+                ('order', models.PositiveIntegerField(default=0)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='User',
+            fields=[
+                ('password', models.CharField(max_length=128, verbose_name='password')),
+                ('last_login', models.DateTimeField(blank=True, null=True, verbose_name='last login')),
+                ('uuid', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('icon', models.ImageField(default='../static/images/defaultuser.webp', storage=apps.authentication.models.OverwriteStorage(), upload_to=apps.authentication.models.IconPathGenerator(), verbose_name='profile picture')),
+                ('email', models.EmailField(error_messages={'unique': 'A user with this email address already exists.'}, max_length=254, unique=True, verbose_name='email address')),
+                ('forename', models.CharField(help_text='This should be your real first name.', max_length=150, verbose_name='first name')),
+                ('surname', models.CharField(help_text='This should be your real last name.', max_length=150, verbose_name='last name')),
+                ('create_timestamp', models.DateTimeField(default=django.utils.timezone.now, help_text='When the user was created.', verbose_name='Creation Date')),
+                ('edit_timestamp', models.DateTimeField(default=django.utils.timezone.now, help_text='When the user was last edited.', verbose_name='Last Edited')),
+                ('is_active', models.BooleanField(default=True, help_text='Use as a "soft delete" rather than deleting the user.', verbose_name='active status')),
+                ('is_staff', models.BooleanField(default=False, help_text='Designates whether the user can log into this admin site.', verbose_name='staff status')),
+                ('is_superuser', models.BooleanField(default=False, help_text='Designates whether the user has unrestricted site control.', verbose_name='superuser status')),
+                ('department', models.ForeignKey(blank=True, help_text='Which department does this user belong to?', null=True, on_delete=django.db.models.deletion.SET_NULL, to='authentication.department', verbose_name='department')),
+                ('groups', models.ManyToManyField(blank=True, help_text='The groups this user belongs to. A user will get all permissions granted to each of their groups.', related_name='user_set', related_query_name='user', to='auth.Group', verbose_name='groups')),
+                ('user_permissions', models.ManyToManyField(blank=True, help_text='Specific permissions for this user.', related_name='user_set', related_query_name='user', to='auth.Permission', verbose_name='user permissions')),
+            ],
+            options={
+                'verbose_name': 'user',
+                'verbose_name_plural': 'users',
+            },
+        ),
+    ]

apps/authentication/models.py

@@ -0,0 +1,140 @@
+# -*- encoding: utf-8 -*-
+
+from uuid import uuid4
+
+import os
+from django.db import models
+from django.conf import settings
+from django.utils import timezone
+from django.contrib.auth.models import AbstractBaseUser, BaseUserManager, PermissionsMixin
+from django.utils.translation import gettext_lazy as _
+from django.core.files.storage import FileSystemStorage
+from django.utils.deconstruct import deconstructible
+
+
+class OverwriteStorage(FileSystemStorage):
+    def get_available_name(self, name, max_length=None):
+
+        if self.exists(name):
+            os.remove(os.path.join(self.location, name))
+
+        return name
+
+
+@deconstructible
+class IconPathGenerator:
+    def __call__(self, instance, filename: str) -> str:
+        return os.path.join("users", str(instance.uuid), "icon.webp")
+
+
+class UserManager(BaseUserManager):
+
+    def create_user(self, email: str, forename: str, surname: str, password: str=None, **extra_fields):
+        if not email:
+            raise ValueError("Please provide an email address")
+
+        email = self.normalize_email(email)
+        user = self.model(email=email, forename=forename, surname=surname, **extra_fields)
+        user.set_password(password)
+        user.save()
+
+        return user
+
+    def create_superuser(self, email: str, forename: str, surname: str, password: str, **extra_fields):
+        extra_fields.setdefault("is_staff", True)
+        extra_fields.setdefault("is_superuser", True)
+        extra_fields.setdefault("is_active", True)
+
+        if not extra_fields.get("is_staff"):
+            raise ValueError("Superuser must have is_staff=True")
+
+        if not extra_fields.get("is_superuser"):
+            raise ValueError("Superuser must have is_superuser=True")
+
+        return self.create_user(email, forename, surname, password, **extra_fields)
+
+
+class User(AbstractBaseUser, PermissionsMixin):
+    uuid = models.UUIDField(primary_key=True, default=uuid4, editable=False)
+
+    icon = models.ImageField(
+        _("profile picture"),
+        upload_to=IconPathGenerator(),
+        default="../static/images/defaultuser.webp",  # Path starts from media dir
+        storage=OverwriteStorage()
+    )
+    email = models.EmailField(
+        _("email address"),
+        unique=True,
+        error_messages = {
+            "unique": _("A user with this email address already exists.")
+        }
+    )
+    forename = models.CharField(
+        _("first name"),
+        max_length=150,
+        help_text=_("This should be your real first name.")
+    )
+    surname = models.CharField(
+        _("last name"),
+        max_length=150,
+        help_text=_("This should be your real last name.")
+    )
+
+    create_timestamp = models.DateTimeField(
+        _("Creation Date"),
+        editable=True,
+        default=timezone.now,
+        help_text=_("When the user was created.")
+    )
+    edit_timestamp = models.DateTimeField(
+        _("Last Edited"),
+        editable=True,
+        default=timezone.now,
+        help_text=_("When the user was last edited.")
+    )
+
+    is_active = models.BooleanField(
+        _("active status"),
+        default=True,
+        help_text=_('Use as a "soft delete" rather than deleting the user.')
+    )
+    is_staff = models.BooleanField(
+        _("staff status"),
+        default=False,
+        help_text=_("Designates whether the user can log into this admin site.")
+    )
+    is_superuser = models.BooleanField(
+        _("superuser status"),
+        default=False,
+        help_text=_("Designates whether the user has unrestricted site control.")
+    )
+
+    USERNAME_FIELD = "email"
+    EMAIL_FIELD = "email"
+    REQUIRED_FIELDS = ["forename", "surname"]
+
+    objects = UserManager()
+
+    class Meta:
+        verbose_name = _('user')
+        verbose_name_plural = _('users')
+
+    def __str__(self):
+        return self.formal_fullname
+
+    def save(self, *args, **kwargs):
+        self.edit_timestamp = timezone.now()
+        super().save(*args, **kwargs)
+
+    def clean(self):
+        super().clean()
+        self.email = self.__class__.objects.normalize_email(self.email)
+
+    @property
+    def fullname(self) -> str:
+        return f"{self.forename} {self.surname}"
+
+    @property
+    def formal_fullname(self) -> str:
+        return f"{self.surname}, {self.forename}"

apps/authentication/tests.py

@@ -0,0 +1,8 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.test import TestCase
+
+# Create your tests here.

apps/authentication/urls.py

@@ -0,0 +1,15 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.urls import path
+from .views import login_view, register_user, profile_view
+from django.contrib.auth.views import LogoutView
+
+urlpatterns = [
+    path('login/', login_view, name="login"),
+    path('register/', register_user, name="register"),
+    path("logout/", LogoutView.as_view(), name="logout"),
+    path("profile/", profile_view, name="profile"),
+]

apps/authentication/views.py

@@ -0,0 +1,64 @@
+# -*- encoding: utf-8 -*-
+
+from django.shortcuts import render, redirect
+from django.contrib.auth import authenticate, login
+from django.contrib.auth.decorators import login_required
+
+from .forms import LoginForm, SignUpForm
+
+
+def login_view(request):
+    form = LoginForm(request.POST or None)
+
+    msg = None
+
+    if request.method == "POST":
+
+        if form.is_valid():
+            email = form.cleaned_data.get("email")
+            password = form.cleaned_data.get("password")
+            user = authenticate(username=email, password=password)
+            if user is not None:
+                login(request, user)
+                return redirect("/")
+            else:
+                msg = 'Invalid credentials'
+        else:
+            msg = 'Error validating the form'
+
+    return render(request, "accounts/login.html", {"form": form, "msg": msg})
+
+
+def register_user(request):
+    msg = None
+    success = False
+
+    if request.method == "POST":
+        form = SignUpForm(request.POST)
+        if form.is_valid():
+            user = form.save(commit=False)
+
+            # Develepment, give all new users admin
+            user.is_staff = True
+            user.is_superuser = True
+            user.save()
+
+            email = form.cleaned_data.get("email")
+            raw_password = form.cleaned_data.get("password1")
+            user = authenticate(username=email, password=raw_password)
+
+            msg = 'User created successfully.'
+            success = True
+
+            # return redirect("/login/")
+
+        else:
+            msg = 'Form is not valid'
+    else:
+        form = SignUpForm()
+
+    return render(request, "accounts/register.html", {"form": form, "msg": msg, "success": success})
+
+@login_required()
+def profile_view(request):
+    return render(request, "accounts/profile.html")

apps/config.py

@@ -0,0 +1,7 @@
+from django.apps import AppConfig
+
+
+class AppsConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'apps'
+    label = 'apps'

apps/context_processors.py

@@ -0,0 +1,6 @@
+from django.conf import settings
+
+def cfg_assets_root(request):
+
+    return { 'ASSETS_ROOT' : settings.ASSETS_ROOT }
+

apps/home/__init__.py

@@ -0,0 +1,4 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""

apps/home/admin.py

@@ -0,0 +1,3 @@
+# -*- encoding: utf-8 -*-
+
+from django.contrib import admin

apps/home/config.py

@@ -0,0 +1,8 @@
+# -*- encoding: utf-8 -*-
+
+from django.apps import AppConfig
+
+
+class MyConfig(AppConfig):
+    name = 'apps.home'
+    label = 'apps_home'

apps/home/migrations/0001_initial.py

@@ -0,0 +1,50 @@
+# Generated by Django 3.2.16 on 2024-01-07 18:40
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import django.utils.timezone
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='TicketPriority',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('title', models.CharField(max_length=32)),
+                ('colour', models.CharField(max_length=7)),
+                ('backgroundcolour', models.CharField(max_length=7)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='TicketTag',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('title', models.CharField(max_length=32)),
+                ('colour', models.CharField(max_length=7)),
+                ('backgroundcolour', models.CharField(max_length=7)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Ticket',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('title', models.CharField(help_text='An extremely short summary of the ticket subject.', max_length=100, verbose_name='title')),
+                ('description', models.TextField(help_text='Detailed description of the ticket subject.', max_length=650, verbose_name='description')),
+                ('create_timestamp', models.DateTimeField(default=django.utils.timezone.now, help_text='When the user was created.', verbose_name='Creation Date')),
+                ('edit_timestamp', models.DateTimeField(default=django.utils.timezone.now, help_text='When the user was last edited.', verbose_name='Last Edited')),
+                ('author', models.ForeignKey(help_text='The creator of the ticket.', on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL, verbose_name='author')),
+                ('priority', models.ForeignKey(help_text='The importance level of this ticket.', on_delete=django.db.models.deletion.CASCADE, to='home.ticketpriority', verbose_name='priority')),
+                ('tags', models.ManyToManyField(blank=True, help_text='Categories of the ticket.', to='home.TicketTag', verbose_name='tags')),
+            ],
+        ),
+    ]

apps/home/migrations/0002_auto_20240112_1604.py

@@ -0,0 +1,28 @@
+# Generated by Django 3.2.16 on 2024-01-12 16:04
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='ticket',
+            old_name='id',
+            new_name='uuid',
+        ),
+        migrations.RenameField(
+            model_name='ticketpriority',
+            old_name='id',
+            new_name='uuid',
+        ),
+        migrations.RenameField(
+            model_name='tickettag',
+            old_name='id',
+            new_name='uuid',
+        ),
+    ]

apps/home/migrations/0003_auto_20240122_1323.py

@@ -0,0 +1,23 @@
+# Generated by Django 3.2.16 on 2024-01-22 13:23
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0002_auto_20240112_1604'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='ticketpriority',
+            name='order',
+            field=models.PositiveIntegerField(default=0),
+        ),
+        migrations.AddField(
+            model_name='tickettag',
+            name='order',
+            field=models.PositiveIntegerField(default=0),
+        ),
+    ]

apps/home/models.py

@@ -0,0 +1,8 @@
+# -*- encoding: utf-8 -*-
+
+import logging
+
+from django.utils.translation import gettext_lazy as _
+
+log = logging.getLogger(__name__)
+

apps/home/tests.py

@@ -0,0 +1,8 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from django.test import TestCase
+
+# Create your tests here.

apps/home/urls.py

@@ -0,0 +1,17 @@
+# -*- encoding: utf-8 -*-
+
+from django.urls import path, include, re_path
+from django.shortcuts import redirect
+
+from apps.home import views
+
+def reverse_to_index(reqeust):
+    return redirect("dashboard")
+
+urlpatterns = [
+    path("", reverse_to_index, name="index"),
+
+    # # Matches any html file
+    re_path(r'^.*\.*', views.pages, name='pages'),
+
+]

apps/home/views.py

@@ -0,0 +1,33 @@
+# -*- encoding: utf-8 -*-
+
+from django import template
+from django.contrib.auth.decorators import login_required
+from django.http import HttpResponse, HttpResponseRedirect
+from django.template import loader
+
+from django.urls import reverse
+
+
+@login_required()
+def pages(request):
+    context = {}
+    # All resource paths end in .html.
+    # Pick out the html file name from the url. And load that template.
+    try:
+
+        load_template = request.path.split('/')[-1]
+
+        if load_template == 'admin':
+            return HttpResponseRedirect(reverse('admin:index'))
+        context['segment'] = load_template
+
+        html_template = loader.get_template('home/' + load_template)
+        return HttpResponse(html_template.render(context, request))
+
+    except template.TemplateDoesNotExist:
+        html_template = loader.get_template('home/page-404.html')
+        return HttpResponse(html_template.render(context, request))
+
+    except:
+        html_template = loader.get_template('home/page-500.html')
+        return HttpResponse(html_template.render(context, request))

apps/static/css/index.css

@@ -0,0 +1,127 @@
+@charset "UTF-8";
+
+:root, 
+[data-bs-theme="light"] {
+    --border-colour: var(--bs-light-border-subtle);
+}
+[data-bs-theme="dark"] {
+    --border-colour: var(--bs-dark-border-subtle)
+}
+
+.select2-container {
+  z-index: 99999;
+}
+
+.select2-selection__choice {
+  display: flex;
+  align-items: center;
+  padding-left: 3px !important;
+}
+
+.select2-selection__choice > button {
+  border: none;
+  background-color: var(--bs-white-rgb);
+}
+
+.select2-results__option--selected { display: none; }
+
+.ck-editor .ck.ck-editor__top .ck-toolbar {
+  border-top-left-radius: 0.375rem !important;
+  border-top-right-radius: 0.375rem !important;
+}
+
+.ck-editor .ck.ck-editor__main {
+  overflow: hidden;
+}
+
+.ck-editor .ck.ck-editor__main > div {
+  border-bottom-left-radius: 0.375rem !important;
+  border-bottom-right-radius: 0.375rem !important;
+}
+
+.ck-editor__editable[role="textbox"] {
+  /* editing area */
+  min-height: 200px;
+  max-height: 200px;
+}
+
+.bg-none {
+    background: none;
+}
+
+.border-none {
+    border: none
+}
+
+a {
+  text-decoration: none;
+}
+
+body {
+  font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
+  color: #72777a;
+  line-height: 1.5;
+  letter-spacing: 0.2px;
+  overflow-x: hidden;
+}
+
+.bdT {
+    border-top: 1px solid var(--border-colour) !important;
+}
+
+.bdB {
+    border-bottom: 1px solid var(--border-colour) !important;
+}
+
+.w-fc {
+    width: fit-content;
+}
+
+.h-fc {
+    height: fit-content;
+}
+
+.loading .email-list-item {
+    cursor: progress;
+}
+
+
+/* Tickets Side Nav */
+
+.email-app .email-side-nav {
+    border-right: 1px solid var(--border-colour);
+}
+
+.email-app .email-side-nav .nav-item .nav-link {
+    color: var(--bs-tertiary-color);
+}
+
+.email-app .email-wrapper {
+    min-height: 0;
+}
+
+@media screen and (min-width: 992px) {
+    .email-app .email-wrapper .email-list {
+        border-right: 1px solid var(--border-colour);
+    }
+}
+
+
+/* Base Sidebar Navigation */
+
+.sidebar-menu {
+    border-right: 1px solid var(--border-colour);
+}
+
+.sidebar-logo {
+    border-right: 1px solid var(--border-colour);
+    border-bottom: 1px solid var(--border-colour);
+}
+
+
+/* Top Navigation */
+
+.header {
+    border-bottom: 1px solid var(--border-colour);
+}

apps/static/css/jvectormap.css

@@ -0,0 +1,136 @@
+svg {
+    touch-action: none;
+  }
+  
+  .jvectormap-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    touch-action: none;
+  }
+  
+  .jvectormap-tip {
+    position: absolute;
+    display: none;
+    border: solid 1px #CDCDCD;
+    border-radius: 3px;
+    background: #292929;
+    color: white;
+    font-family: sans-serif, Verdana;
+    font-size: smaller;
+    padding: 3px;
+  }
+  
+  .jvectormap-zoomin, .jvectormap-zoomout, .jvectormap-goback {
+    position: absolute;
+    left: 10px;
+    border-radius: 3px;
+    background: #292929;
+    padding: 3px;
+    color: white;
+    cursor: pointer;
+    line-height: 10px;
+    text-align: center;
+    box-sizing: content-box;
+  }
+  
+  .jvectormap-zoomin, .jvectormap-zoomout {
+    width: 10px;
+    height: 10px;
+  }
+  
+  .jvectormap-zoomin {
+    top: 10px;
+  }
+  
+  .jvectormap-zoomout {
+    top: 30px;
+  }
+  
+  .jvectormap-goback {
+    bottom: 10px;
+    z-index: 1000;
+    padding: 6px;
+  }
+  
+  .jvectormap-spinner {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: center no-repeat url(data:image/gif;base64,R0lGODlhIAAgAPMAAP///wAAAMbGxoSEhLa2tpqamjY2NlZWVtjY2OTk5Ly8vB4eHgQEBAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==);
+  }
+  
+  .jvectormap-legend-title {
+    font-weight: bold;
+    font-size: 14px;
+    text-align: center;
+  }
+  
+  .jvectormap-legend-cnt {
+    position: absolute;
+  }
+  
+  .jvectormap-legend-cnt-h {
+    bottom: 0;
+    right: 0;
+  }
+  
+  .jvectormap-legend-cnt-v {
+    top: 0;
+    right: 0;
+  }
+  
+  .jvectormap-legend {
+    background: black;
+    color: white;
+    border-radius: 3px;
+  }
+  
+  .jvectormap-legend-cnt-h .jvectormap-legend {
+    float: left;
+    margin: 0 10px 10px 0;
+    padding: 3px 3px 1px 3px;
+  }
+  
+  .jvectormap-legend-cnt-h .jvectormap-legend .jvectormap-legend-tick {
+    float: left;
+  }
+  
+  .jvectormap-legend-cnt-v .jvectormap-legend {
+    margin: 10px 10px 0 0;
+    padding: 3px;
+  }
+  
+  .jvectormap-legend-cnt-h .jvectormap-legend-tick {
+    width: 40px;
+  }
+  
+  .jvectormap-legend-cnt-h .jvectormap-legend-tick-sample {
+    height: 15px;
+  }
+  
+  .jvectormap-legend-cnt-v .jvectormap-legend-tick-sample {
+    height: 20px;
+    width: 20px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  
+  .jvectormap-legend-tick-text {
+    font-size: 12px;
+  }
+  
+  .jvectormap-legend-cnt-h .jvectormap-legend-tick-text {
+    text-align: center;
+  }
+  
+  .jvectormap-legend-cnt-v .jvectormap-legend-tick-text {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 20px;
+    padding-left: 3px;
+  }
+  

apps/static/css/perfectscrollbar.css

@@ -0,0 +1,116 @@
+/*
+ * Container style
+ */
+ .ps {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  -ms-overflow-style: none;
+  touch-action: auto;
+  -ms-touch-action: auto;
+}
+
+/*
+ * Scrollbar rail styles
+ */
+.ps__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  height: 15px;
+  /* there must be 'bottom' or 'top' for ps__rail-x */
+  bottom: 0px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  width: 15px;
+  /* there must be 'right' or 'left' for ps__rail-y */
+  right: 0;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y {
+  display: block;
+  background-color: transparent;
+}
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+  opacity: 0.6;
+}
+
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+/*
+ * Scrollbar thumb styles
+ */
+.ps__thumb-x {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color .2s linear, height .2s ease-in-out;
+  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
+  height: 6px;
+  /* there must be 'bottom' for ps__thumb-x */
+  bottom: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__thumb-y {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color .2s linear, width .2s ease-in-out;
+  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
+  width: 6px;
+  /* there must be 'right' for ps__thumb-y */
+  right: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x {
+  background-color: #999;
+  height: 11px;
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+  background-color: #999;
+  width: 11px;
+}
+
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}

apps/static/images/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3388.25 3014.2"><title>react-1</title><circle cx="1694.17" cy="1504.25" r="302.6" fill="#fff"/><path d="M1806.5,1191.9c406.2,0,783.6,58.3,1068.1,156.2,342.8,118,553.6,296.9,553.6,458.9,0,168.8-223.4,358.9-591.5,480.8-278.3,92.2-644.6,140.4-1030.2,140.4-395.4,0-769.7-45.2-1051.2-141.4C399.2,2165.1,184.7,1972.6,184.7,1807c0-160.7,201.3-338.2,539.3-456,285.6-99.5,672.3-159.1,1082.5-159.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271,1501.3c202.9-351.9,442-649.7,669-847.2,273.5-238,533.8-331.2,674.1-250.3,146.2,84.3,199.3,372.8,121,752.7-59.2,287.2-200.4,628.5-393.1,962.6-197.5,342.5-423.7,644.2-647.6,840-283.3,247.7-557.3,337.3-700.7,254.6-139.2-80.3-192.4-343.3-125.7-695,56.4-297.4,198-662.1,403-1017.4Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271.5,2119.8C1068,1768.2,929.4,1412.4,871.6,1117.1c-69.6-355.8-20.4-627.9,119.8-709,146.1-84.6,422.5,13.5,712.5,271,219.3,194.7,444.4,487.5,637.6,821.3,198.1,342.2,346.6,688.8,404.3,980.5,73.1,369.2,13.9,651.3-129.4,734.2-139.1,80.5-393.5-4.7-664.9-238.2-229.2-197.3-474.5-502.1-680-857.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/></svg>

apps/static/js/_tickets.js

@@ -0,0 +1,373 @@
+var displayedTicketID = -1;
+    filters = {"ordering": "-edit_timestamp", "page_size": 100};
+    editor = null;
+    searchTimeout = null;
+    loadingTickets = false;
+
+const formControls = [
+    {
+        id: "newTitle",
+        validation: function(element) {
+            const value = element.val();
+            return (!element.attr("required") || value.trim() !== "")
+        },
+        errorMessage: function(element) {
+            return "This field is required."
+        }
+    }
+];
+
+$(document).ready(function() {
+    ClassicEditor
+        .create( document.getElementById("newDesc"), {})
+        .then( newEditor => {
+            editor = newEditor;
+        })
+        .catch( error => {
+            console.error(error)
+        });
+
+    $("#searchTickets").keyup(() => {
+        $("#ticketsContainer .content").empty();
+        $("#ticketsContainer .none-found").hide();
+        $("#ticketsContainer .loading").show();
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+            console.debug("searching");
+            value = $("#searchTickets").val();
+            if (value === "") {
+                console.debug("deleted search filters");
+                delete filters["search"];
+            }
+            else {
+                console.debug("updated search filters");
+                filters["search"] = value;
+            }
+
+            loadAllTickets();
+        }, 500);
+    })
+
+    setupFilter("#filterSidebar .filter-department", "author__department");
+    setupFilter("#filterSidebar .filter-tags", "tags");
+    setupFilter("#filterSidebar .filter-priority", "priority");
+ 
+    loadFilterCounts();
+    loadAllTickets();
+
+    $(".select2-selection__choice").each(function() {
+        // Work out how to apply the colours of the tags to the selection choices.
+    })
+});
+
+function setupFilter(selector, key) {
+    $(selector).each(function () {
+        var input = $(this).find("input[type=checkbox], input[type=radio]");
+        var uuid = input.val();
+
+        input.on("change", function () {
+
+            if (input.is(":checkbox")) {
+
+                if ($(this).is(":checked")) {
+                    filters[key] = filters[key] || [];
+                    filters[key].push(uuid);
+                }
+                else {
+                    filters[key] = filters[key].filter(id => id !== uuid);
+                    if (filters[key].length === 0) {
+                        delete filters[key];
+                    }
+                }
+            }
+            else if (input.is(":radio") && input.is(":checked")) {
+                if (uuid === "all") {
+                    delete filters[key];
+                }
+                else {
+                    filters[key] = [uuid];
+                }
+            }
+
+            console.debug(`Filter applied '${key}' as '${uuid}'`)
+            loadAllTickets();
+        });
+    });
+}
+
+function validateForm() {
+
+    $("#ticketModal form").find(".form-control,.form-select").removeClass("is-valid is-invalid");
+    $("#ticketModal form .invalid-feedback").text("");
+
+    var valid = true;
+
+    formControls.forEach(function(control) {
+        var element = $("#" + control.id);
+        if (!control.validation(element)) {
+            element.addClass("is-invalid");
+            element.siblings(".invalid-feedback").text(control.errorMessage(element));
+            valid = false;
+        }
+        else {
+            element.addClass("is-valid");
+        }
+    });
+
+    return valid;
+}
+
+$("#ticketModal form").on("submit", function(event) {
+    event.preventDefault();
+
+    if (!validateForm()) {
+        return;
+    }
+
+    $.ajax({
+        url: URL_NewTicket,
+        type: "POST",
+        dataType: "json",
+        data: {
+            csrfmiddlewaretoken: CSRFMiddlewareToken,
+            title: $("#newTitle").val(),
+            description: editor.getData(),
+            author_id: CurrentUserID,
+            priority_id: $("#newPriority").val(),
+            tag_ids: $("#newTags").val()
+        },
+        success: function(data) {
+            loadAllTickets();
+            loadFilterCounts();
+        },
+        error: function(data) {
+            alert(JSON.stringify(data, null, 4))
+        }
+    });
+});
+
+function getOrdinalSuffix(day) {
+    if (day >= 11 && day <= 13) {
+        return day + 'th';
+    } else {
+        switch (day % 10) {
+            case 1: return day + 'st';
+            case 2: return day + 'nd';
+            case 3: return day + 'rd';
+            default: return day + 'th';
+        }
+    }
+}
+
+function updateFilterCounts(filterType, data) {
+    $("#filterSidebar .filter-" + filterType).each(function() {
+        var uuid = $(this).find("input[type=checkbox],input[type=radio]").val();
+        var count = data[filterType][uuid];
+        $(this).find(".badge").text(count);
+    });
+}
+
+function loadFilterCounts() {
+    $.ajax({
+        url: URL_FilterCounts,
+        type: "GET",
+        success: function(data) {
+            updateFilterCounts('priority', data);
+            updateFilterCounts('tags', data);
+            updateFilterCounts('department', data);
+
+            $("#filterPriorityAll .badge").text(data.tickets);
+            $("#filterDepartmentAll .badge").text(data.tickets)
+            $("#ticketCounts .total").text(data.tickets)
+        },
+        error: function(data) {
+            console.error(JSON.stringify(data, null, 4))
+        }
+    });
+}
+
+function timestampToHumanDate(timestamp, wasYesterday) {
+    if (wasYesterday) {
+        var day = getOrdinalSuffix(timestamp.getDate());
+        var month = timestamp.toLocaleString('en-GB', { month: 'short' });
+        var year = timestamp.toLocaleString('en-GB', { year: 'numeric' });
+        var time = timestamp.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric' });
+        return time + ', ' + day + ' ' + month + ' ' + year;
+    }
+
+    var hours = timestamp.getUTCHours();
+    var minutes = timestamp.getUTCMinutes();
+    return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
+}
+
+function loadAllTickets() {
+    if (loadingTickets === true) {
+        return;
+    }
+
+    $("#ticketsContainer .content").empty();
+    $("#ticketsContainer .none-found").hide();
+    $("#ticketsContainer .loading").show();
+
+    loadingTickets = true;
+    // alert(JSON.stringify(filters, null, 4));
+
+    $.ajax({
+        url: URL_Tickets,
+        type: "GET",
+        dataType: "json",
+        data: $.param(filters, true),
+        success: function(data) {
+            loadingTickets = false;
+            // console.log(JSON.stringify(data, null, 4))
+
+            $("#ticketCounts .current").text(data.results.length);
+            $("#ticketsContainer .loading").hide();
+
+            if (data.results.length === 0) $("#ticketsContainer .none-found").show();
+            else $("#ticketsContainer .none-found").hide();
+
+            data.results.forEach(function(ticket) {
+                var timestamp = new Date(ticket.timestamp);
+                var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
+
+                if (ticket.is_edited) {
+                    formattedTime += " • edited";
+                }
+
+                var template = $($("#ticketItemTemplate").html());
+                template.find(".ticket-item-author").text(`${ticket.author.forename} ${ticket.author.surname}`);
+                template.find(".ticket-item-datetime").text(formattedTime);
+                template.find(".ticket-item-title").text(ticket.title);
+                template.find(".ticket-item-desc").text(ticket.description);
+                template.find(".ticket-item-icon").attr("src", ticket.author.icon);
+                template.attr("data-uuid", ticket.uuid);
+
+                $("#ticketsContainer .content").append(template);
+            });
+
+            applyTicketClickFunction();
+        },
+        error: function(data) {
+            loadingTickets = false;
+            $("#ticketsContainer .content").empty();
+            $("#ticketsContainer .none-found").hide();
+            $("#ticketsContainer .loading").hide();
+
+            if (data.status === 429) {
+                alert(`HTTP ${data.status} - ${data.statusText}\n${data.responseJSON.detail}`)
+            }
+        }
+    });
+}
+
+function applyTicketClickFunction() {
+    $(".ticket-item").on("click", function(e) {
+        e.preventDefault();
+        displayTicket(this);
+        $('.email-app').removeClass('side-active');
+        $('.email-content').toggleClass('open');
+    });
+}
+
+function reloadCurrentTicket() {
+    displayTicket($(".ticket-item.bgc-grey-100"));
+}
+
+function changeTicket(next=true) {
+    var selectedTicket = $(".ticket-item.bgc-grey-100");
+
+    if (!selectedTicket.length) {
+        displayTicket($(".ticket-item").first());
+        return;
+    }
+
+    if (next) {
+        displayTicket(selectedTicket.next());
+    }
+    else {
+        displayTicket(selectedTicket.prev());
+    }
+
+    if (!$('.email-content').hasClass('open')) {
+        $('.email-content').addClass('open');
+    }
+}
+
+function displayTicket(ticketElement) {
+    ticket = $(ticketElement);
+    ticketID = ticket.data("uuid");
+
+    // $(".back-to-mailbox").off("click").on("click", function(event) {
+    //     event.preventDefault();
+    //     $('.email-content').toggleClass('open');
+    //     displayTicket(ticketElement);
+    // });
+    
+    
+    if (displayedTicketID === ticketID) {
+        // displayedTicketID = -1;
+        return;
+    }
+
+    ticket.siblings().removeClass("bgc-grey-100");
+    ticket.addClass("bgc-grey-100");
+
+    $("#ticketTitle").text("")
+    $("#ticketDesc").empty();
+    $("#ticketAuthor").text("");
+    $("#ticketAuthorImg").hide();
+    $("#ticketAuthorImg").prop("src", "");
+    $("#ticketTimestamp").text("");
+    $("#btnGroupDrop2").hide();
+    $("#ticketBadges").empty().hide();
+
+    
+    displayedTicketID = ticketID;
+
+    $.ajax({
+        url: URL_Tickets,
+        type: 'get',
+        dataType: 'json',
+        data: $.param({uuid: ticketID}, true),
+        success: function (data) {
+            console.log(JSON.stringify(data, null, 4));
+
+            var ticket = data.results[0];
+            var author = ticket.author;
+            var department = author.department;
+            var priority = ticket.priority;
+
+            $("#ticketTitle").text(ticket.title);
+            $("#ticketDesc").append($(`<div class="w-100">${ticket.description}</div>`));
+            $("#ticketAuthor").text(`${author.forename} ${author.surname}`);
+            $("#ticketAuthorImg").show();
+            $("#ticketAuthorImg").prop("src", author.icon);
+            $("#btnGroupDrop2").show();
+            $("#ticketBadges").show();
+
+            $("#ticketBadges").append($(`<div class="badge me-1" style="color: ${priority.colour}; background-color: ${priority.backgroundcolour};">${priority.title} Priority <i class="ti-control-record "></i></div>`));
+
+            if (department != null) {
+                $("#ticketBadges").append($(`<div class="badge bgc-deep-purple-500 me-1">${department.title}</div>`));
+            }
+
+            ticket.tags.forEach(function(tag) {
+                $("#ticketBadges").append($(`<div class="badge me-1" style="color: ${tag.colour}; background-color: ${tag.backgroundcolour};">${tag.title} <i class="ti-tag"></i></div>`));
+            });
+
+            // timestamp
+            var timestamp = new Date(ticket.timestamp);
+            var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);
+
+            if (ticket.is_edited) {
+                formattedTime += " • edited";
+            }
+
+            $("#ticketTimestamp").text(formattedTime);
+        },
+        error: function(message) {
+            alert(JSON.stringify(message, null, 4));
+        }
+    });
+}

apps/static/js/base.js

@@ -0,0 +1,15 @@
+$("#themeToggle").on("click", function() {
+    const currentTheme = $("body").attr("data-bs-theme");
+
+    if (currentTheme == "light") {
+        $("body").attr("data-bs-theme", "dark");
+    }
+    else {
+        $("body").attr("data-bs-theme", "light");
+    }
+});
+
+$(document).ready(function() {
+    // Activate all tooltips
+    $('[data-bs-toggle="tooltip"]').tooltip();
+});

apps/static/js/jquery.dataTables.min.js

@@ -0,0 +1,181 @@
+/*!
+   Copyright 2008-2020 SpryMedia Ltd.
+
+ This source file is free software, available under the following license:
+   MIT license - http://datatables.net/license
+
+ This source file is distributed in the hope that it will be useful, but
+ WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
+
+ For details please refer to: http://www.datatables.net
+ DataTables 1.10.21
+ ©2008-2020 SpryMedia Ltd - datatables.net/license
+*/
+var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.findInternal=function(f,y,w){f instanceof String&&(f=String(f));for(var n=f.length,H=0;H<n;H++){var L=f[H];if(y.call(w,L,H,f))return{i:H,v:L}}return{i:-1,v:void 0}};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;$jscomp.SIMPLE_FROUND_POLYFILL=!1;
+$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(f,y,w){f!=Array.prototype&&f!=Object.prototype&&(f[y]=w.value)};$jscomp.getGlobal=function(f){f=["object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global,f];for(var y=0;y<f.length;++y){var w=f[y];if(w&&w.Math==Math)return w}throw Error("Cannot find global object");};$jscomp.global=$jscomp.getGlobal(this);
+$jscomp.polyfill=function(f,y,w,n){if(y){w=$jscomp.global;f=f.split(".");for(n=0;n<f.length-1;n++){var H=f[n];H in w||(w[H]={});w=w[H]}f=f[f.length-1];n=w[f];y=y(n);y!=n&&null!=y&&$jscomp.defineProperty(w,f,{configurable:!0,writable:!0,value:y})}};$jscomp.polyfill("Array.prototype.find",function(f){return f?f:function(f,w){return $jscomp.findInternal(this,f,w).v}},"es6","es3");
+(function(f){"function"===typeof define&&define.amd?define(["jquery"],function(y){return f(y,window,document)}):"object"===typeof exports?module.exports=function(y,w){y||(y=window);w||(w="undefined"!==typeof window?require("jquery"):require("jquery")(y));return f(w,y,y.document)}:f(jQuery,window,document)})(function(f,y,w,n){function H(a){var b,c,d={};f.each(a,function(e,h){(b=e.match(/^([^A-Z]+?)([A-Z])/))&&-1!=="a aa ai ao as b fn i m o s ".indexOf(b[1]+" ")&&(c=e.replace(b[0],b[2].toLowerCase()),
+d[c]=e,"o"===b[1]&&H(a[e]))});a._hungarianMap=d}function L(a,b,c){a._hungarianMap||H(a);var d;f.each(b,function(e,h){d=a._hungarianMap[e];d===n||!c&&b[d]!==n||("o"===d.charAt(0)?(b[d]||(b[d]={}),f.extend(!0,b[d],b[e]),L(a[d],b[d],c)):b[d]=b[e])})}function Fa(a){var b=q.defaults.oLanguage,c=b.sDecimal;c&&Ga(c);if(a){var d=a.sZeroRecords;!a.sEmptyTable&&d&&"No data available in table"===b.sEmptyTable&&M(a,a,"sZeroRecords","sEmptyTable");!a.sLoadingRecords&&d&&"Loading..."===b.sLoadingRecords&&M(a,a,
+"sZeroRecords","sLoadingRecords");a.sInfoThousands&&(a.sThousands=a.sInfoThousands);(a=a.sDecimal)&&c!==a&&Ga(a)}}function ib(a){E(a,"ordering","bSort");E(a,"orderMulti","bSortMulti");E(a,"orderClasses","bSortClasses");E(a,"orderCellsTop","bSortCellsTop");E(a,"order","aaSorting");E(a,"orderFixed","aaSortingFixed");E(a,"paging","bPaginate");E(a,"pagingType","sPaginationType");E(a,"pageLength","iDisplayLength");E(a,"searching","bFilter");"boolean"===typeof a.sScrollX&&(a.sScrollX=a.sScrollX?"100%":
+"");"boolean"===typeof a.scrollX&&(a.scrollX=a.scrollX?"100%":"");if(a=a.aoSearchCols)for(var b=0,c=a.length;b<c;b++)a[b]&&L(q.models.oSearch,a[b])}function jb(a){E(a,"orderable","bSortable");E(a,"orderData","aDataSort");E(a,"orderSequence","asSorting");E(a,"orderDataType","sortDataType");var b=a.aDataSort;"number"!==typeof b||f.isArray(b)||(a.aDataSort=[b])}function kb(a){if(!q.__browser){var b={};q.__browser=b;var c=f("<div/>").css({position:"fixed",top:0,left:-1*f(y).scrollLeft(),height:1,width:1,
+overflow:"hidden"}).append(f("<div/>").css({position:"absolute",top:1,left:1,width:100,overflow:"scroll"}).append(f("<div/>").css({width:"100%",height:10}))).appendTo("body"),d=c.children(),e=d.children();b.barWidth=d[0].offsetWidth-d[0].clientWidth;b.bScrollOversize=100===e[0].offsetWidth&&100!==d[0].clientWidth;b.bScrollbarLeft=1!==Math.round(e.offset().left);b.bBounding=c[0].getBoundingClientRect().width?!0:!1;c.remove()}f.extend(a.oBrowser,q.__browser);a.oScroll.iBarWidth=q.__browser.barWidth}
+function lb(a,b,c,d,e,h){var g=!1;if(c!==n){var k=c;g=!0}for(;d!==e;)a.hasOwnProperty(d)&&(k=g?b(k,a[d],d,a):a[d],g=!0,d+=h);return k}function Ha(a,b){var c=q.defaults.column,d=a.aoColumns.length;c=f.extend({},q.models.oColumn,c,{nTh:b?b:w.createElement("th"),sTitle:c.sTitle?c.sTitle:b?b.innerHTML:"",aDataSort:c.aDataSort?c.aDataSort:[d],mData:c.mData?c.mData:d,idx:d});a.aoColumns.push(c);c=a.aoPreSearchCols;c[d]=f.extend({},q.models.oSearch,c[d]);la(a,d,f(b).data())}function la(a,b,c){b=a.aoColumns[b];
+var d=a.oClasses,e=f(b.nTh);if(!b.sWidthOrig){b.sWidthOrig=e.attr("width")||null;var h=(e.attr("style")||"").match(/width:\s*(\d+[pxem%]+)/);h&&(b.sWidthOrig=h[1])}c!==n&&null!==c&&(jb(c),L(q.defaults.column,c,!0),c.mDataProp===n||c.mData||(c.mData=c.mDataProp),c.sType&&(b._sManualType=c.sType),c.className&&!c.sClass&&(c.sClass=c.className),c.sClass&&e.addClass(c.sClass),f.extend(b,c),M(b,c,"sWidth","sWidthOrig"),c.iDataSort!==n&&(b.aDataSort=[c.iDataSort]),M(b,c,"aDataSort"));var g=b.mData,k=T(g),
+l=b.mRender?T(b.mRender):null;c=function(a){return"string"===typeof a&&-1!==a.indexOf("@")};b._bAttrSrc=f.isPlainObject(g)&&(c(g.sort)||c(g.type)||c(g.filter));b._setter=null;b.fnGetData=function(a,b,c){var d=k(a,b,n,c);return l&&b?l(d,b,a,c):d};b.fnSetData=function(a,b,c){return Q(g)(a,b,c)};"number"!==typeof g&&(a._rowReadObject=!0);a.oFeatures.bSort||(b.bSortable=!1,e.addClass(d.sSortableNone));a=-1!==f.inArray("asc",b.asSorting);c=-1!==f.inArray("desc",b.asSorting);b.bSortable&&(a||c)?a&&!c?(b.sSortingClass=
+d.sSortableAsc,b.sSortingClassJUI=d.sSortJUIAscAllowed):!a&&c?(b.sSortingClass=d.sSortableDesc,b.sSortingClassJUI=d.sSortJUIDescAllowed):(b.sSortingClass=d.sSortable,b.sSortingClassJUI=d.sSortJUI):(b.sSortingClass=d.sSortableNone,b.sSortingClassJUI="")}function Z(a){if(!1!==a.oFeatures.bAutoWidth){var b=a.aoColumns;Ia(a);for(var c=0,d=b.length;c<d;c++)b[c].nTh.style.width=b[c].sWidth}b=a.oScroll;""===b.sY&&""===b.sX||ma(a);A(a,null,"column-sizing",[a])}function aa(a,b){a=na(a,"bVisible");return"number"===
+typeof a[b]?a[b]:null}function ba(a,b){a=na(a,"bVisible");b=f.inArray(b,a);return-1!==b?b:null}function V(a){var b=0;f.each(a.aoColumns,function(a,d){d.bVisible&&"none"!==f(d.nTh).css("display")&&b++});return b}function na(a,b){var c=[];f.map(a.aoColumns,function(a,e){a[b]&&c.push(e)});return c}function Ja(a){var b=a.aoColumns,c=a.aoData,d=q.ext.type.detect,e,h,g;var k=0;for(e=b.length;k<e;k++){var f=b[k];var m=[];if(!f.sType&&f._sManualType)f.sType=f._sManualType;else if(!f.sType){var p=0;for(h=
+d.length;p<h;p++){var v=0;for(g=c.length;v<g;v++){m[v]===n&&(m[v]=F(a,v,k,"type"));var u=d[p](m[v],a);if(!u&&p!==d.length-1)break;if("html"===u)break}if(u){f.sType=u;break}}f.sType||(f.sType="string")}}}function mb(a,b,c,d){var e,h,g,k=a.aoColumns;if(b)for(e=b.length-1;0<=e;e--){var l=b[e];var m=l.targets!==n?l.targets:l.aTargets;f.isArray(m)||(m=[m]);var p=0;for(h=m.length;p<h;p++)if("number"===typeof m[p]&&0<=m[p]){for(;k.length<=m[p];)Ha(a);d(m[p],l)}else if("number"===typeof m[p]&&0>m[p])d(k.length+
+m[p],l);else if("string"===typeof m[p]){var v=0;for(g=k.length;v<g;v++)("_all"==m[p]||f(k[v].nTh).hasClass(m[p]))&&d(v,l)}}if(c)for(e=0,a=c.length;e<a;e++)d(e,c[e])}function R(a,b,c,d){var e=a.aoData.length,h=f.extend(!0,{},q.models.oRow,{src:c?"dom":"data",idx:e});h._aData=b;a.aoData.push(h);for(var g=a.aoColumns,k=0,l=g.length;k<l;k++)g[k].sType=null;a.aiDisplayMaster.push(e);b=a.rowIdFn(b);b!==n&&(a.aIds[b]=h);!c&&a.oFeatures.bDeferRender||Ka(a,e,c,d);return e}function oa(a,b){var c;b instanceof
+f||(b=f(b));return b.map(function(b,e){c=La(a,e);return R(a,c.data,e,c.cells)})}function F(a,b,c,d){var e=a.iDraw,h=a.aoColumns[c],g=a.aoData[b]._aData,k=h.sDefaultContent,f=h.fnGetData(g,d,{settings:a,row:b,col:c});if(f===n)return a.iDrawError!=e&&null===k&&(O(a,0,"Requested unknown parameter "+("function"==typeof h.mData?"{function}":"'"+h.mData+"'")+" for row "+b+", column "+c,4),a.iDrawError=e),k;if((f===g||null===f)&&null!==k&&d!==n)f=k;else if("function"===typeof f)return f.call(g);return null===
+f&&"display"==d?"":f}function nb(a,b,c,d){a.aoColumns[c].fnSetData(a.aoData[b]._aData,d,{settings:a,row:b,col:c})}function Ma(a){return f.map(a.match(/(\\.|[^\.])+/g)||[""],function(a){return a.replace(/\\\./g,".")})}function T(a){if(f.isPlainObject(a)){var b={};f.each(a,function(a,c){c&&(b[a]=T(c))});return function(a,c,h,g){var d=b[c]||b._;return d!==n?d(a,c,h,g):a}}if(null===a)return function(a){return a};if("function"===typeof a)return function(b,c,h,g){return a(b,c,h,g)};if("string"!==typeof a||
+-1===a.indexOf(".")&&-1===a.indexOf("[")&&-1===a.indexOf("("))return function(b,c){return b[a]};var c=function(a,b,h){if(""!==h){var d=Ma(h);for(var e=0,l=d.length;e<l;e++){h=d[e].match(ca);var m=d[e].match(W);if(h){d[e]=d[e].replace(ca,"");""!==d[e]&&(a=a[d[e]]);m=[];d.splice(0,e+1);d=d.join(".");if(f.isArray(a))for(e=0,l=a.length;e<l;e++)m.push(c(a[e],b,d));a=h[0].substring(1,h[0].length-1);a=""===a?m:m.join(a);break}else if(m){d[e]=d[e].replace(W,"");a=a[d[e]]();continue}if(null===a||a[d[e]]===
+n)return n;a=a[d[e]]}}return a};return function(b,e){return c(b,e,a)}}function Q(a){if(f.isPlainObject(a))return Q(a._);if(null===a)return function(){};if("function"===typeof a)return function(b,d,e){a(b,"set",d,e)};if("string"!==typeof a||-1===a.indexOf(".")&&-1===a.indexOf("[")&&-1===a.indexOf("("))return function(b,d){b[a]=d};var b=function(a,d,e){e=Ma(e);var c=e[e.length-1];for(var g,k,l=0,m=e.length-1;l<m;l++){g=e[l].match(ca);k=e[l].match(W);if(g){e[l]=e[l].replace(ca,"");a[e[l]]=[];c=e.slice();
+c.splice(0,l+1);g=c.join(".");if(f.isArray(d))for(k=0,m=d.length;k<m;k++)c={},b(c,d[k],g),a[e[l]].push(c);else a[e[l]]=d;return}k&&(e[l]=e[l].replace(W,""),a=a[e[l]](d));if(null===a[e[l]]||a[e[l]]===n)a[e[l]]={};a=a[e[l]]}if(c.match(W))a[c.replace(W,"")](d);else a[c.replace(ca,"")]=d};return function(c,d){return b(c,d,a)}}function Na(a){return K(a.aoData,"_aData")}function pa(a){a.aoData.length=0;a.aiDisplayMaster.length=0;a.aiDisplay.length=0;a.aIds={}}function qa(a,b,c){for(var d=-1,e=0,h=a.length;e<
+h;e++)a[e]==b?d=e:a[e]>b&&a[e]--; -1!=d&&c===n&&a.splice(d,1)}function da(a,b,c,d){var e=a.aoData[b],h,g=function(c,d){for(;c.childNodes.length;)c.removeChild(c.firstChild);c.innerHTML=F(a,b,d,"display")};if("dom"!==c&&(c&&"auto"!==c||"dom"!==e.src)){var k=e.anCells;if(k)if(d!==n)g(k[d],d);else for(c=0,h=k.length;c<h;c++)g(k[c],c)}else e._aData=La(a,e,d,d===n?n:e._aData).data;e._aSortData=null;e._aFilterData=null;g=a.aoColumns;if(d!==n)g[d].sType=null;else{c=0;for(h=g.length;c<h;c++)g[c].sType=null;
+Oa(a,e)}}function La(a,b,c,d){var e=[],h=b.firstChild,g,k=0,l,m=a.aoColumns,p=a._rowReadObject;d=d!==n?d:p?{}:[];var v=function(a,b){if("string"===typeof a){var c=a.indexOf("@");-1!==c&&(c=a.substring(c+1),Q(a)(d,b.getAttribute(c)))}},u=function(a){if(c===n||c===k)g=m[k],l=f.trim(a.innerHTML),g&&g._bAttrSrc?(Q(g.mData._)(d,l),v(g.mData.sort,a),v(g.mData.type,a),v(g.mData.filter,a)):p?(g._setter||(g._setter=Q(g.mData)),g._setter(d,l)):d[k]=l;k++};if(h)for(;h;){var q=h.nodeName.toUpperCase();if("TD"==
+q||"TH"==q)u(h),e.push(h);h=h.nextSibling}else for(e=b.anCells,h=0,q=e.length;h<q;h++)u(e[h]);(b=b.firstChild?b:b.nTr)&&(b=b.getAttribute("id"))&&Q(a.rowId)(d,b);return{data:d,cells:e}}function Ka(a,b,c,d){var e=a.aoData[b],h=e._aData,g=[],k,l;if(null===e.nTr){var m=c||w.createElement("tr");e.nTr=m;e.anCells=g;m._DT_RowIndex=b;Oa(a,e);var p=0;for(k=a.aoColumns.length;p<k;p++){var v=a.aoColumns[p];var n=(l=c?!1:!0)?w.createElement(v.sCellType):d[p];n._DT_CellIndex={row:b,column:p};g.push(n);if(l||
+!(c&&!v.mRender&&v.mData===p||f.isPlainObject(v.mData)&&v.mData._===p+".display"))n.innerHTML=F(a,b,p,"display");v.sClass&&(n.className+=" "+v.sClass);v.bVisible&&!c?m.appendChild(n):!v.bVisible&&c&&n.parentNode.removeChild(n);v.fnCreatedCell&&v.fnCreatedCell.call(a.oInstance,n,F(a,b,p),h,b,p)}A(a,"aoRowCreatedCallback",null,[m,h,b,g])}e.nTr.setAttribute("role","row")}function Oa(a,b){var c=b.nTr,d=b._aData;if(c){if(a=a.rowIdFn(d))c.id=a;d.DT_RowClass&&(a=d.DT_RowClass.split(" "),b.__rowc=b.__rowc?
+sa(b.__rowc.concat(a)):a,f(c).removeClass(b.__rowc.join(" ")).addClass(d.DT_RowClass));d.DT_RowAttr&&f(c).attr(d.DT_RowAttr);d.DT_RowData&&f(c).data(d.DT_RowData)}}function ob(a){var b,c,d=a.nTHead,e=a.nTFoot,h=0===f("th, td",d).length,g=a.oClasses,k=a.aoColumns;h&&(c=f("<tr/>").appendTo(d));var l=0;for(b=k.length;l<b;l++){var m=k[l];var p=f(m.nTh).addClass(m.sClass);h&&p.appendTo(c);a.oFeatures.bSort&&(p.addClass(m.sSortingClass),!1!==m.bSortable&&(p.attr("tabindex",a.iTabIndex).attr("aria-controls",
+a.sTableId),Pa(a,m.nTh,l)));m.sTitle!=p[0].innerHTML&&p.html(m.sTitle);Qa(a,"header")(a,p,m,g)}h&&ea(a.aoHeader,d);f(d).find(">tr").attr("role","row");f(d).find(">tr>th, >tr>td").addClass(g.sHeaderTH);f(e).find(">tr>th, >tr>td").addClass(g.sFooterTH);if(null!==e)for(a=a.aoFooter[0],l=0,b=a.length;l<b;l++)m=k[l],m.nTf=a[l].cell,m.sClass&&f(m.nTf).addClass(m.sClass)}function fa(a,b,c){var d,e,h=[],g=[],k=a.aoColumns.length;if(b){c===n&&(c=!1);var l=0;for(d=b.length;l<d;l++){h[l]=b[l].slice();h[l].nTr=
+b[l].nTr;for(e=k-1;0<=e;e--)a.aoColumns[e].bVisible||c||h[l].splice(e,1);g.push([])}l=0;for(d=h.length;l<d;l++){if(a=h[l].nTr)for(;e=a.firstChild;)a.removeChild(e);e=0;for(b=h[l].length;e<b;e++){var m=k=1;if(g[l][e]===n){a.appendChild(h[l][e].cell);for(g[l][e]=1;h[l+k]!==n&&h[l][e].cell==h[l+k][e].cell;)g[l+k][e]=1,k++;for(;h[l][e+m]!==n&&h[l][e].cell==h[l][e+m].cell;){for(c=0;c<k;c++)g[l+c][e+m]=1;m++}f(h[l][e].cell).attr("rowspan",k).attr("colspan",m)}}}}}function S(a){var b=A(a,"aoPreDrawCallback",
+"preDraw",[a]);if(-1!==f.inArray(!1,b))J(a,!1);else{b=[];var c=0,d=a.asStripeClasses,e=d.length,h=a.oLanguage,g=a.iInitDisplayStart,k="ssp"==I(a),l=a.aiDisplay;a.bDrawing=!0;g!==n&&-1!==g&&(a._iDisplayStart=k?g:g>=a.fnRecordsDisplay()?0:g,a.iInitDisplayStart=-1);g=a._iDisplayStart;var m=a.fnDisplayEnd();if(a.bDeferLoading)a.bDeferLoading=!1,a.iDraw++,J(a,!1);else if(!k)a.iDraw++;else if(!a.bDestroying&&!pb(a))return;if(0!==l.length)for(h=k?a.aoData.length:m,k=k?0:g;k<h;k++){var p=l[k],v=a.aoData[p];
+null===v.nTr&&Ka(a,p);var u=v.nTr;if(0!==e){var q=d[c%e];v._sRowStripe!=q&&(f(u).removeClass(v._sRowStripe).addClass(q),v._sRowStripe=q)}A(a,"aoRowCallback",null,[u,v._aData,c,k,p]);b.push(u);c++}else c=h.sZeroRecords,1==a.iDraw&&"ajax"==I(a)?c=h.sLoadingRecords:h.sEmptyTable&&0===a.fnRecordsTotal()&&(c=h.sEmptyTable),b[0]=f("<tr/>",{"class":e?d[0]:""}).append(f("<td />",{valign:"top",colSpan:V(a),"class":a.oClasses.sRowEmpty}).html(c))[0];A(a,"aoHeaderCallback","header",[f(a.nTHead).children("tr")[0],
+Na(a),g,m,l]);A(a,"aoFooterCallback","footer",[f(a.nTFoot).children("tr")[0],Na(a),g,m,l]);d=f(a.nTBody);d.children().detach();d.append(f(b));A(a,"aoDrawCallback","draw",[a]);a.bSorted=!1;a.bFiltered=!1;a.bDrawing=!1}}function U(a,b){var c=a.oFeatures,d=c.bFilter;c.bSort&&qb(a);d?ha(a,a.oPreviousSearch):a.aiDisplay=a.aiDisplayMaster.slice();!0!==b&&(a._iDisplayStart=0);a._drawHold=b;S(a);a._drawHold=!1}function rb(a){var b=a.oClasses,c=f(a.nTable);c=f("<div/>").insertBefore(c);var d=a.oFeatures,e=
+f("<div/>",{id:a.sTableId+"_wrapper","class":b.sWrapper+(a.nTFoot?"":" "+b.sNoFooter)});a.nHolding=c[0];a.nTableWrapper=e[0];a.nTableReinsertBefore=a.nTable.nextSibling;for(var h=a.sDom.split(""),g,k,l,m,p,n,u=0;u<h.length;u++){g=null;k=h[u];if("<"==k){l=f("<div/>")[0];m=h[u+1];if("'"==m||'"'==m){p="";for(n=2;h[u+n]!=m;)p+=h[u+n],n++;"H"==p?p=b.sJUIHeader:"F"==p&&(p=b.sJUIFooter);-1!=p.indexOf(".")?(m=p.split("."),l.id=m[0].substr(1,m[0].length-1),l.className=m[1]):"#"==p.charAt(0)?l.id=p.substr(1,
+p.length-1):l.className=p;u+=n}e.append(l);e=f(l)}else if(">"==k)e=e.parent();else if("l"==k&&d.bPaginate&&d.bLengthChange)g=sb(a);else if("f"==k&&d.bFilter)g=tb(a);else if("r"==k&&d.bProcessing)g=ub(a);else if("t"==k)g=vb(a);else if("i"==k&&d.bInfo)g=wb(a);else if("p"==k&&d.bPaginate)g=xb(a);else if(0!==q.ext.feature.length)for(l=q.ext.feature,n=0,m=l.length;n<m;n++)if(k==l[n].cFeature){g=l[n].fnInit(a);break}g&&(l=a.aanFeatures,l[k]||(l[k]=[]),l[k].push(g),e.append(g))}c.replaceWith(e);a.nHolding=
+null}function ea(a,b){b=f(b).children("tr");var c,d,e;a.splice(0,a.length);var h=0;for(e=b.length;h<e;h++)a.push([]);h=0;for(e=b.length;h<e;h++){var g=b[h];for(c=g.firstChild;c;){if("TD"==c.nodeName.toUpperCase()||"TH"==c.nodeName.toUpperCase()){var k=1*c.getAttribute("colspan");var l=1*c.getAttribute("rowspan");k=k&&0!==k&&1!==k?k:1;l=l&&0!==l&&1!==l?l:1;var m=0;for(d=a[h];d[m];)m++;var p=m;var n=1===k?!0:!1;for(d=0;d<k;d++)for(m=0;m<l;m++)a[h+m][p+d]={cell:c,unique:n},a[h+m].nTr=g}c=c.nextSibling}}}
+function ta(a,b,c){var d=[];c||(c=a.aoHeader,b&&(c=[],ea(c,b)));b=0;for(var e=c.length;b<e;b++)for(var h=0,g=c[b].length;h<g;h++)!c[b][h].unique||d[h]&&a.bSortCellsTop||(d[h]=c[b][h].cell);return d}function ua(a,b,c){A(a,"aoServerParams","serverParams",[b]);if(b&&f.isArray(b)){var d={},e=/(.*?)\[\]$/;f.each(b,function(a,b){(a=b.name.match(e))?(a=a[0],d[a]||(d[a]=[]),d[a].push(b.value)):d[b.name]=b.value});b=d}var h=a.ajax,g=a.oInstance,k=function(b){A(a,null,"xhr",[a,b,a.jqXHR]);c(b)};if(f.isPlainObject(h)&&
+h.data){var l=h.data;var m="function"===typeof l?l(b,a):l;b="function"===typeof l&&m?m:f.extend(!0,b,m);delete h.data}m={data:b,success:function(b){var c=b.error||b.sError;c&&O(a,0,c);a.json=b;k(b)},dataType:"json",cache:!1,type:a.sServerMethod,error:function(b,c,d){d=A(a,null,"xhr",[a,null,a.jqXHR]);-1===f.inArray(!0,d)&&("parsererror"==c?O(a,0,"Invalid JSON response",1):4===b.readyState&&O(a,0,"Ajax error",7));J(a,!1)}};a.oAjaxData=b;A(a,null,"preXhr",[a,b]);a.fnServerData?a.fnServerData.call(g,
+a.sAjaxSource,f.map(b,function(a,b){return{name:b,value:a}}),k,a):a.sAjaxSource||"string"===typeof h?a.jqXHR=f.ajax(f.extend(m,{url:h||a.sAjaxSource})):"function"===typeof h?a.jqXHR=h.call(g,b,k,a):(a.jqXHR=f.ajax(f.extend(m,h)),h.data=l)}function pb(a){return a.bAjaxDataGet?(a.iDraw++,J(a,!0),ua(a,yb(a),function(b){zb(a,b)}),!1):!0}function yb(a){var b=a.aoColumns,c=b.length,d=a.oFeatures,e=a.oPreviousSearch,h=a.aoPreSearchCols,g=[],k=X(a);var l=a._iDisplayStart;var m=!1!==d.bPaginate?a._iDisplayLength:
+-1;var p=function(a,b){g.push({name:a,value:b})};p("sEcho",a.iDraw);p("iColumns",c);p("sColumns",K(b,"sName").join(","));p("iDisplayStart",l);p("iDisplayLength",m);var n={draw:a.iDraw,columns:[],order:[],start:l,length:m,search:{value:e.sSearch,regex:e.bRegex}};for(l=0;l<c;l++){var u=b[l];var ra=h[l];m="function"==typeof u.mData?"function":u.mData;n.columns.push({data:m,name:u.sName,searchable:u.bSearchable,orderable:u.bSortable,search:{value:ra.sSearch,regex:ra.bRegex}});p("mDataProp_"+l,m);d.bFilter&&
+(p("sSearch_"+l,ra.sSearch),p("bRegex_"+l,ra.bRegex),p("bSearchable_"+l,u.bSearchable));d.bSort&&p("bSortable_"+l,u.bSortable)}d.bFilter&&(p("sSearch",e.sSearch),p("bRegex",e.bRegex));d.bSort&&(f.each(k,function(a,b){n.order.push({column:b.col,dir:b.dir});p("iSortCol_"+a,b.col);p("sSortDir_"+a,b.dir)}),p("iSortingCols",k.length));b=q.ext.legacy.ajax;return null===b?a.sAjaxSource?g:n:b?g:n}function zb(a,b){var c=function(a,c){return b[a]!==n?b[a]:b[c]},d=va(a,b),e=c("sEcho","draw"),h=c("iTotalRecords",
+"recordsTotal");c=c("iTotalDisplayRecords","recordsFiltered");if(e!==n){if(1*e<a.iDraw)return;a.iDraw=1*e}pa(a);a._iRecordsTotal=parseInt(h,10);a._iRecordsDisplay=parseInt(c,10);e=0;for(h=d.length;e<h;e++)R(a,d[e]);a.aiDisplay=a.aiDisplayMaster.slice();a.bAjaxDataGet=!1;S(a);a._bInitComplete||wa(a,b);a.bAjaxDataGet=!0;J(a,!1)}function va(a,b){a=f.isPlainObject(a.ajax)&&a.ajax.dataSrc!==n?a.ajax.dataSrc:a.sAjaxDataProp;return"data"===a?b.aaData||b[a]:""!==a?T(a)(b):b}function tb(a){var b=a.oClasses,
+c=a.sTableId,d=a.oLanguage,e=a.oPreviousSearch,h=a.aanFeatures,g='<input type="search" class="'+b.sFilterInput+'"/>',k=d.sSearch;k=k.match(/_INPUT_/)?k.replace("_INPUT_",g):k+g;b=f("<div/>",{id:h.f?null:c+"_filter","class":b.sFilter}).append(f("<label/>").append(k));var l=function(){var b=this.value?this.value:"";b!=e.sSearch&&(ha(a,{sSearch:b,bRegex:e.bRegex,bSmart:e.bSmart,bCaseInsensitive:e.bCaseInsensitive}),a._iDisplayStart=0,S(a))};h=null!==a.searchDelay?a.searchDelay:"ssp"===I(a)?400:0;var m=
+f("input",b).val(e.sSearch).attr("placeholder",d.sSearchPlaceholder).on("keyup.DT search.DT input.DT paste.DT cut.DT",h?Ra(l,h):l).on("mouseup",function(a){setTimeout(function(){l.call(m[0])},10)}).on("keypress.DT",function(a){if(13==a.keyCode)return!1}).attr("aria-controls",c);f(a.nTable).on("search.dt.DT",function(b,c){if(a===c)try{m[0]!==w.activeElement&&m.val(e.sSearch)}catch(u){}});return b[0]}function ha(a,b,c){var d=a.oPreviousSearch,e=a.aoPreSearchCols,h=function(a){d.sSearch=a.sSearch;d.bRegex=
+a.bRegex;d.bSmart=a.bSmart;d.bCaseInsensitive=a.bCaseInsensitive},g=function(a){return a.bEscapeRegex!==n?!a.bEscapeRegex:a.bRegex};Ja(a);if("ssp"!=I(a)){Ab(a,b.sSearch,c,g(b),b.bSmart,b.bCaseInsensitive);h(b);for(b=0;b<e.length;b++)Bb(a,e[b].sSearch,b,g(e[b]),e[b].bSmart,e[b].bCaseInsensitive);Cb(a)}else h(b);a.bFiltered=!0;A(a,null,"search",[a])}function Cb(a){for(var b=q.ext.search,c=a.aiDisplay,d,e,h=0,g=b.length;h<g;h++){for(var k=[],l=0,m=c.length;l<m;l++)e=c[l],d=a.aoData[e],b[h](a,d._aFilterData,
+e,d._aData,l)&&k.push(e);c.length=0;f.merge(c,k)}}function Bb(a,b,c,d,e,h){if(""!==b){var g=[],k=a.aiDisplay;d=Sa(b,d,e,h);for(e=0;e<k.length;e++)b=a.aoData[k[e]]._aFilterData[c],d.test(b)&&g.push(k[e]);a.aiDisplay=g}}function Ab(a,b,c,d,e,h){e=Sa(b,d,e,h);var g=a.oPreviousSearch.sSearch,k=a.aiDisplayMaster;h=[];0!==q.ext.search.length&&(c=!0);var f=Db(a);if(0>=b.length)a.aiDisplay=k.slice();else{if(f||c||d||g.length>b.length||0!==b.indexOf(g)||a.bSorted)a.aiDisplay=k.slice();b=a.aiDisplay;for(c=
+0;c<b.length;c++)e.test(a.aoData[b[c]]._sFilterRow)&&h.push(b[c]);a.aiDisplay=h}}function Sa(a,b,c,d){a=b?a:Ta(a);c&&(a="^(?=.*?"+f.map(a.match(/"[^"]+"|[^ ]+/g)||[""],function(a){if('"'===a.charAt(0)){var b=a.match(/^"(.*)"$/);a=b?b[1]:a}return a.replace('"',"")}).join(")(?=.*?")+").*$");return new RegExp(a,d?"i":"")}function Db(a){var b=a.aoColumns,c,d,e=q.ext.type.search;var h=!1;var g=0;for(c=a.aoData.length;g<c;g++){var k=a.aoData[g];if(!k._aFilterData){var f=[];var m=0;for(d=b.length;m<d;m++){h=
+b[m];if(h.bSearchable){var p=F(a,g,m,"filter");e[h.sType]&&(p=e[h.sType](p));null===p&&(p="");"string"!==typeof p&&p.toString&&(p=p.toString())}else p="";p.indexOf&&-1!==p.indexOf("&")&&(xa.innerHTML=p,p=$b?xa.textContent:xa.innerText);p.replace&&(p=p.replace(/[\r\n\u2028]/g,""));f.push(p)}k._aFilterData=f;k._sFilterRow=f.join("  ");h=!0}}return h}function Eb(a){return{search:a.sSearch,smart:a.bSmart,regex:a.bRegex,caseInsensitive:a.bCaseInsensitive}}function Fb(a){return{sSearch:a.search,bSmart:a.smart,
+bRegex:a.regex,bCaseInsensitive:a.caseInsensitive}}function wb(a){var b=a.sTableId,c=a.aanFeatures.i,d=f("<div/>",{"class":a.oClasses.sInfo,id:c?null:b+"_info"});c||(a.aoDrawCallback.push({fn:Gb,sName:"information"}),d.attr("role","status").attr("aria-live","polite"),f(a.nTable).attr("aria-describedby",b+"_info"));return d[0]}function Gb(a){var b=a.aanFeatures.i;if(0!==b.length){var c=a.oLanguage,d=a._iDisplayStart+1,e=a.fnDisplayEnd(),h=a.fnRecordsTotal(),g=a.fnRecordsDisplay(),k=g?c.sInfo:c.sInfoEmpty;
+g!==h&&(k+=" "+c.sInfoFiltered);k+=c.sInfoPostFix;k=Hb(a,k);c=c.fnInfoCallback;null!==c&&(k=c.call(a.oInstance,a,d,e,h,g,k));f(b).html(k)}}function Hb(a,b){var c=a.fnFormatNumber,d=a._iDisplayStart+1,e=a._iDisplayLength,h=a.fnRecordsDisplay(),g=-1===e;return b.replace(/_START_/g,c.call(a,d)).replace(/_END_/g,c.call(a,a.fnDisplayEnd())).replace(/_MAX_/g,c.call(a,a.fnRecordsTotal())).replace(/_TOTAL_/g,c.call(a,h)).replace(/_PAGE_/g,c.call(a,g?1:Math.ceil(d/e))).replace(/_PAGES_/g,c.call(a,g?1:Math.ceil(h/
+e)))}function ia(a){var b=a.iInitDisplayStart,c=a.aoColumns;var d=a.oFeatures;var e=a.bDeferLoading;if(a.bInitialised){rb(a);ob(a);fa(a,a.aoHeader);fa(a,a.aoFooter);J(a,!0);d.bAutoWidth&&Ia(a);var h=0;for(d=c.length;h<d;h++){var g=c[h];g.sWidth&&(g.nTh.style.width=B(g.sWidth))}A(a,null,"preInit",[a]);U(a);c=I(a);if("ssp"!=c||e)"ajax"==c?ua(a,[],function(c){var d=va(a,c);for(h=0;h<d.length;h++)R(a,d[h]);a.iInitDisplayStart=b;U(a);J(a,!1);wa(a,c)},a):(J(a,!1),wa(a))}else setTimeout(function(){ia(a)},
+200)}function wa(a,b){a._bInitComplete=!0;(b||a.oInit.aaData)&&Z(a);A(a,null,"plugin-init",[a,b]);A(a,"aoInitComplete","init",[a,b])}function Ua(a,b){b=parseInt(b,10);a._iDisplayLength=b;Va(a);A(a,null,"length",[a,b])}function sb(a){var b=a.oClasses,c=a.sTableId,d=a.aLengthMenu,e=f.isArray(d[0]),h=e?d[0]:d;d=e?d[1]:d;e=f("<select/>",{name:c+"_length","aria-controls":c,"class":b.sLengthSelect});for(var g=0,k=h.length;g<k;g++)e[0][g]=new Option("number"===typeof d[g]?a.fnFormatNumber(d[g]):d[g],h[g]);
+var l=f("<div><label/></div>").addClass(b.sLength);a.aanFeatures.l||(l[0].id=c+"_length");l.children().append(a.oLanguage.sLengthMenu.replace("_MENU_",e[0].outerHTML));f("select",l).val(a._iDisplayLength).on("change.DT",function(b){Ua(a,f(this).val());S(a)});f(a.nTable).on("length.dt.DT",function(b,c,d){a===c&&f("select",l).val(d)});return l[0]}function xb(a){var b=a.sPaginationType,c=q.ext.pager[b],d="function"===typeof c,e=function(a){S(a)};b=f("<div/>").addClass(a.oClasses.sPaging+b)[0];var h=
+a.aanFeatures;d||c.fnInit(a,b,e);h.p||(b.id=a.sTableId+"_paginate",a.aoDrawCallback.push({fn:function(a){if(d){var b=a._iDisplayStart,g=a._iDisplayLength,f=a.fnRecordsDisplay(),p=-1===g;b=p?0:Math.ceil(b/g);g=p?1:Math.ceil(f/g);f=c(b,g);var n;p=0;for(n=h.p.length;p<n;p++)Qa(a,"pageButton")(a,h.p[p],p,f,b,g)}else c.fnUpdate(a,e)},sName:"pagination"}));return b}function Wa(a,b,c){var d=a._iDisplayStart,e=a._iDisplayLength,h=a.fnRecordsDisplay();0===h||-1===e?d=0:"number"===typeof b?(d=b*e,d>h&&(d=0)):
+"first"==b?d=0:"previous"==b?(d=0<=e?d-e:0,0>d&&(d=0)):"next"==b?d+e<h&&(d+=e):"last"==b?d=Math.floor((h-1)/e)*e:O(a,0,"Unknown paging action: "+b,5);b=a._iDisplayStart!==d;a._iDisplayStart=d;b&&(A(a,null,"page",[a]),c&&S(a));return b}function ub(a){return f("<div/>",{id:a.aanFeatures.r?null:a.sTableId+"_processing","class":a.oClasses.sProcessing}).html(a.oLanguage.sProcessing).insertBefore(a.nTable)[0]}function J(a,b){a.oFeatures.bProcessing&&f(a.aanFeatures.r).css("display",b?"block":"none");A(a,
+null,"processing",[a,b])}function vb(a){var b=f(a.nTable);b.attr("role","grid");var c=a.oScroll;if(""===c.sX&&""===c.sY)return a.nTable;var d=c.sX,e=c.sY,h=a.oClasses,g=b.children("caption"),k=g.length?g[0]._captionSide:null,l=f(b[0].cloneNode(!1)),m=f(b[0].cloneNode(!1)),p=b.children("tfoot");p.length||(p=null);l=f("<div/>",{"class":h.sScrollWrapper}).append(f("<div/>",{"class":h.sScrollHead}).css({overflow:"hidden",position:"relative",border:0,width:d?d?B(d):null:"100%"}).append(f("<div/>",{"class":h.sScrollHeadInner}).css({"box-sizing":"content-box",
+width:c.sXInner||"100%"}).append(l.removeAttr("id").css("margin-left",0).append("top"===k?g:null).append(b.children("thead"))))).append(f("<div/>",{"class":h.sScrollBody}).css({position:"relative",overflow:"auto",width:d?B(d):null}).append(b));p&&l.append(f("<div/>",{"class":h.sScrollFoot}).css({overflow:"hidden",border:0,width:d?d?B(d):null:"100%"}).append(f("<div/>",{"class":h.sScrollFootInner}).append(m.removeAttr("id").css("margin-left",0).append("bottom"===k?g:null).append(b.children("tfoot")))));
+b=l.children();var n=b[0];h=b[1];var u=p?b[2]:null;if(d)f(h).on("scroll.DT",function(a){a=this.scrollLeft;n.scrollLeft=a;p&&(u.scrollLeft=a)});f(h).css("max-height",e);c.bCollapse||f(h).css("height",e);a.nScrollHead=n;a.nScrollBody=h;a.nScrollFoot=u;a.aoDrawCallback.push({fn:ma,sName:"scrolling"});return l[0]}function ma(a){var b=a.oScroll,c=b.sX,d=b.sXInner,e=b.sY;b=b.iBarWidth;var h=f(a.nScrollHead),g=h[0].style,k=h.children("div"),l=k[0].style,m=k.children("table");k=a.nScrollBody;var p=f(k),v=
+k.style,u=f(a.nScrollFoot).children("div"),q=u.children("table"),t=f(a.nTHead),r=f(a.nTable),x=r[0],ya=x.style,w=a.nTFoot?f(a.nTFoot):null,y=a.oBrowser,A=y.bScrollOversize,ac=K(a.aoColumns,"nTh"),Xa=[],z=[],C=[],G=[],H,I=function(a){a=a.style;a.paddingTop="0";a.paddingBottom="0";a.borderTopWidth="0";a.borderBottomWidth="0";a.height=0};var D=k.scrollHeight>k.clientHeight;if(a.scrollBarVis!==D&&a.scrollBarVis!==n)a.scrollBarVis=D,Z(a);else{a.scrollBarVis=D;r.children("thead, tfoot").remove();if(w){var E=
+w.clone().prependTo(r);var F=w.find("tr");E=E.find("tr")}var J=t.clone().prependTo(r);t=t.find("tr");D=J.find("tr");J.find("th, td").removeAttr("tabindex");c||(v.width="100%",h[0].style.width="100%");f.each(ta(a,J),function(b,c){H=aa(a,b);c.style.width=a.aoColumns[H].sWidth});w&&N(function(a){a.style.width=""},E);h=r.outerWidth();""===c?(ya.width="100%",A&&(r.find("tbody").height()>k.offsetHeight||"scroll"==p.css("overflow-y"))&&(ya.width=B(r.outerWidth()-b)),h=r.outerWidth()):""!==d&&(ya.width=B(d),
+h=r.outerWidth());N(I,D);N(function(a){C.push(a.innerHTML);Xa.push(B(f(a).css("width")))},D);N(function(a,b){-1!==f.inArray(a,ac)&&(a.style.width=Xa[b])},t);f(D).height(0);w&&(N(I,E),N(function(a){G.push(a.innerHTML);z.push(B(f(a).css("width")))},E),N(function(a,b){a.style.width=z[b]},F),f(E).height(0));N(function(a,b){a.innerHTML='<div class="dataTables_sizing">'+C[b]+"</div>";a.childNodes[0].style.height="0";a.childNodes[0].style.overflow="hidden";a.style.width=Xa[b]},D);w&&N(function(a,b){a.innerHTML=
+'<div class="dataTables_sizing">'+G[b]+"</div>";a.childNodes[0].style.height="0";a.childNodes[0].style.overflow="hidden";a.style.width=z[b]},E);r.outerWidth()<h?(F=k.scrollHeight>k.offsetHeight||"scroll"==p.css("overflow-y")?h+b:h,A&&(k.scrollHeight>k.offsetHeight||"scroll"==p.css("overflow-y"))&&(ya.width=B(F-b)),""!==c&&""===d||O(a,1,"Possible column misalignment",6)):F="100%";v.width=B(F);g.width=B(F);w&&(a.nScrollFoot.style.width=B(F));!e&&A&&(v.height=B(x.offsetHeight+b));c=r.outerWidth();m[0].style.width=
+B(c);l.width=B(c);d=r.height()>k.clientHeight||"scroll"==p.css("overflow-y");e="padding"+(y.bScrollbarLeft?"Left":"Right");l[e]=d?b+"px":"0px";w&&(q[0].style.width=B(c),u[0].style.width=B(c),u[0].style[e]=d?b+"px":"0px");r.children("colgroup").insertBefore(r.children("thead"));p.trigger("scroll");!a.bSorted&&!a.bFiltered||a._drawHold||(k.scrollTop=0)}}function N(a,b,c){for(var d=0,e=0,h=b.length,g,k;e<h;){g=b[e].firstChild;for(k=c?c[e].firstChild:null;g;)1===g.nodeType&&(c?a(g,k,d):a(g,d),d++),g=
+g.nextSibling,k=c?k.nextSibling:null;e++}}function Ia(a){var b=a.nTable,c=a.aoColumns,d=a.oScroll,e=d.sY,h=d.sX,g=d.sXInner,k=c.length,l=na(a,"bVisible"),m=f("th",a.nTHead),p=b.getAttribute("width"),n=b.parentNode,u=!1,q,t=a.oBrowser;d=t.bScrollOversize;(q=b.style.width)&&-1!==q.indexOf("%")&&(p=q);for(q=0;q<l.length;q++){var r=c[l[q]];null!==r.sWidth&&(r.sWidth=Ib(r.sWidthOrig,n),u=!0)}if(d||!u&&!h&&!e&&k==V(a)&&k==m.length)for(q=0;q<k;q++)l=aa(a,q),null!==l&&(c[l].sWidth=B(m.eq(q).width()));else{k=
+f(b).clone().css("visibility","hidden").removeAttr("id");k.find("tbody tr").remove();var w=f("<tr/>").appendTo(k.find("tbody"));k.find("thead, tfoot").remove();k.append(f(a.nTHead).clone()).append(f(a.nTFoot).clone());k.find("tfoot th, tfoot td").css("width","");m=ta(a,k.find("thead")[0]);for(q=0;q<l.length;q++)r=c[l[q]],m[q].style.width=null!==r.sWidthOrig&&""!==r.sWidthOrig?B(r.sWidthOrig):"",r.sWidthOrig&&h&&f(m[q]).append(f("<div/>").css({width:r.sWidthOrig,margin:0,padding:0,border:0,height:1}));
+if(a.aoData.length)for(q=0;q<l.length;q++)u=l[q],r=c[u],f(Jb(a,u)).clone(!1).append(r.sContentPadding).appendTo(w);f("[name]",k).removeAttr("name");r=f("<div/>").css(h||e?{position:"absolute",top:0,left:0,height:1,right:0,overflow:"hidden"}:{}).append(k).appendTo(n);h&&g?k.width(g):h?(k.css("width","auto"),k.removeAttr("width"),k.width()<n.clientWidth&&p&&k.width(n.clientWidth)):e?k.width(n.clientWidth):p&&k.width(p);for(q=e=0;q<l.length;q++)n=f(m[q]),g=n.outerWidth()-n.width(),n=t.bBounding?Math.ceil(m[q].getBoundingClientRect().width):
+n.outerWidth(),e+=n,c[l[q]].sWidth=B(n-g);b.style.width=B(e);r.remove()}p&&(b.style.width=B(p));!p&&!h||a._reszEvt||(b=function(){f(y).on("resize.DT-"+a.sInstance,Ra(function(){Z(a)}))},d?setTimeout(b,1E3):b(),a._reszEvt=!0)}function Ib(a,b){if(!a)return 0;a=f("<div/>").css("width",B(a)).appendTo(b||w.body);b=a[0].offsetWidth;a.remove();return b}function Jb(a,b){var c=Kb(a,b);if(0>c)return null;var d=a.aoData[c];return d.nTr?d.anCells[b]:f("<td/>").html(F(a,c,b,"display"))[0]}function Kb(a,b){for(var c,
+d=-1,e=-1,h=0,g=a.aoData.length;h<g;h++)c=F(a,h,b,"display")+"",c=c.replace(bc,""),c=c.replace(/&nbsp;/g," "),c.length>d&&(d=c.length,e=h);return e}function B(a){return null===a?"0px":"number"==typeof a?0>a?"0px":a+"px":a.match(/\d$/)?a+"px":a}function X(a){var b=[],c=a.aoColumns;var d=a.aaSortingFixed;var e=f.isPlainObject(d);var h=[];var g=function(a){a.length&&!f.isArray(a[0])?h.push(a):f.merge(h,a)};f.isArray(d)&&g(d);e&&d.pre&&g(d.pre);g(a.aaSorting);e&&d.post&&g(d.post);for(a=0;a<h.length;a++){var k=
+h[a][0];g=c[k].aDataSort;d=0;for(e=g.length;d<e;d++){var l=g[d];var m=c[l].sType||"string";h[a]._idx===n&&(h[a]._idx=f.inArray(h[a][1],c[l].asSorting));b.push({src:k,col:l,dir:h[a][1],index:h[a]._idx,type:m,formatter:q.ext.type.order[m+"-pre"]})}}return b}function qb(a){var b,c=[],d=q.ext.type.order,e=a.aoData,h=0,g=a.aiDisplayMaster;Ja(a);var k=X(a);var f=0;for(b=k.length;f<b;f++){var m=k[f];m.formatter&&h++;Lb(a,m.col)}if("ssp"!=I(a)&&0!==k.length){f=0;for(b=g.length;f<b;f++)c[g[f]]=f;h===k.length?
+g.sort(function(a,b){var d,h=k.length,g=e[a]._aSortData,f=e[b]._aSortData;for(d=0;d<h;d++){var l=k[d];var m=g[l.col];var p=f[l.col];m=m<p?-1:m>p?1:0;if(0!==m)return"asc"===l.dir?m:-m}m=c[a];p=c[b];return m<p?-1:m>p?1:0}):g.sort(function(a,b){var h,g=k.length,f=e[a]._aSortData,l=e[b]._aSortData;for(h=0;h<g;h++){var m=k[h];var p=f[m.col];var n=l[m.col];m=d[m.type+"-"+m.dir]||d["string-"+m.dir];p=m(p,n);if(0!==p)return p}p=c[a];n=c[b];return p<n?-1:p>n?1:0})}a.bSorted=!0}function Mb(a){var b=a.aoColumns,
+c=X(a);a=a.oLanguage.oAria;for(var d=0,e=b.length;d<e;d++){var h=b[d];var g=h.asSorting;var k=h.sTitle.replace(/<.*?>/g,"");var f=h.nTh;f.removeAttribute("aria-sort");h.bSortable&&(0<c.length&&c[0].col==d?(f.setAttribute("aria-sort","asc"==c[0].dir?"ascending":"descending"),h=g[c[0].index+1]||g[0]):h=g[0],k+="asc"===h?a.sSortAscending:a.sSortDescending);f.setAttribute("aria-label",k)}}function Ya(a,b,c,d){var e=a.aaSorting,h=a.aoColumns[b].asSorting,g=function(a,b){var c=a._idx;c===n&&(c=f.inArray(a[1],
+h));return c+1<h.length?c+1:b?null:0};"number"===typeof e[0]&&(e=a.aaSorting=[e]);c&&a.oFeatures.bSortMulti?(c=f.inArray(b,K(e,"0")),-1!==c?(b=g(e[c],!0),null===b&&1===e.length&&(b=0),null===b?e.splice(c,1):(e[c][1]=h[b],e[c]._idx=b)):(e.push([b,h[0],0]),e[e.length-1]._idx=0)):e.length&&e[0][0]==b?(b=g(e[0]),e.length=1,e[0][1]=h[b],e[0]._idx=b):(e.length=0,e.push([b,h[0]]),e[0]._idx=0);U(a);"function"==typeof d&&d(a)}function Pa(a,b,c,d){var e=a.aoColumns[c];Za(b,{},function(b){!1!==e.bSortable&&
+(a.oFeatures.bProcessing?(J(a,!0),setTimeout(function(){Ya(a,c,b.shiftKey,d);"ssp"!==I(a)&&J(a,!1)},0)):Ya(a,c,b.shiftKey,d))})}function za(a){var b=a.aLastSort,c=a.oClasses.sSortColumn,d=X(a),e=a.oFeatures,h;if(e.bSort&&e.bSortClasses){e=0;for(h=b.length;e<h;e++){var g=b[e].src;f(K(a.aoData,"anCells",g)).removeClass(c+(2>e?e+1:3))}e=0;for(h=d.length;e<h;e++)g=d[e].src,f(K(a.aoData,"anCells",g)).addClass(c+(2>e?e+1:3))}a.aLastSort=d}function Lb(a,b){var c=a.aoColumns[b],d=q.ext.order[c.sSortDataType],
+e;d&&(e=d.call(a.oInstance,a,b,ba(a,b)));for(var h,g=q.ext.type.order[c.sType+"-pre"],f=0,l=a.aoData.length;f<l;f++)if(c=a.aoData[f],c._aSortData||(c._aSortData=[]),!c._aSortData[b]||d)h=d?e[f]:F(a,f,b,"sort"),c._aSortData[b]=g?g(h):h}function Aa(a){if(a.oFeatures.bStateSave&&!a.bDestroying){var b={time:+new Date,start:a._iDisplayStart,length:a._iDisplayLength,order:f.extend(!0,[],a.aaSorting),search:Eb(a.oPreviousSearch),columns:f.map(a.aoColumns,function(b,d){return{visible:b.bVisible,search:Eb(a.aoPreSearchCols[d])}})};
+A(a,"aoStateSaveParams","stateSaveParams",[a,b]);a.oSavedState=b;a.fnStateSaveCallback.call(a.oInstance,a,b)}}function Nb(a,b,c){var d,e,h=a.aoColumns;b=function(b){if(b&&b.time){var g=A(a,"aoStateLoadParams","stateLoadParams",[a,b]);if(-1===f.inArray(!1,g)&&(g=a.iStateDuration,!(0<g&&b.time<+new Date-1E3*g||b.columns&&h.length!==b.columns.length))){a.oLoadedState=f.extend(!0,{},b);b.start!==n&&(a._iDisplayStart=b.start,a.iInitDisplayStart=b.start);b.length!==n&&(a._iDisplayLength=b.length);b.order!==
+n&&(a.aaSorting=[],f.each(b.order,function(b,c){a.aaSorting.push(c[0]>=h.length?[0,c[1]]:c)}));b.search!==n&&f.extend(a.oPreviousSearch,Fb(b.search));if(b.columns)for(d=0,e=b.columns.length;d<e;d++)g=b.columns[d],g.visible!==n&&(h[d].bVisible=g.visible),g.search!==n&&f.extend(a.aoPreSearchCols[d],Fb(g.search));A(a,"aoStateLoaded","stateLoaded",[a,b])}}c()};if(a.oFeatures.bStateSave){var g=a.fnStateLoadCallback.call(a.oInstance,a,b);g!==n&&b(g)}else c()}function Ba(a){var b=q.settings;a=f.inArray(a,
+K(b,"nTable"));return-1!==a?b[a]:null}function O(a,b,c,d){c="DataTables warning: "+(a?"table id="+a.sTableId+" - ":"")+c;d&&(c+=". For more information about this error, please see http://datatables.net/tn/"+d);if(b)y.console&&console.log&&console.log(c);else if(b=q.ext,b=b.sErrMode||b.errMode,a&&A(a,null,"error",[a,d,c]),"alert"==b)alert(c);else{if("throw"==b)throw Error(c);"function"==typeof b&&b(a,d,c)}}function M(a,b,c,d){f.isArray(c)?f.each(c,function(c,d){f.isArray(d)?M(a,b,d[0],d[1]):M(a,b,
+d)}):(d===n&&(d=c),b[c]!==n&&(a[d]=b[c]))}function $a(a,b,c){var d;for(d in b)if(b.hasOwnProperty(d)){var e=b[d];f.isPlainObject(e)?(f.isPlainObject(a[d])||(a[d]={}),f.extend(!0,a[d],e)):c&&"data"!==d&&"aaData"!==d&&f.isArray(e)?a[d]=e.slice():a[d]=e}return a}function Za(a,b,c){f(a).on("click.DT",b,function(b){f(a).trigger("blur");c(b)}).on("keypress.DT",b,function(a){13===a.which&&(a.preventDefault(),c(a))}).on("selectstart.DT",function(){return!1})}function D(a,b,c,d){c&&a[b].push({fn:c,sName:d})}
+function A(a,b,c,d){var e=[];b&&(e=f.map(a[b].slice().reverse(),function(b,c){return b.fn.apply(a.oInstance,d)}));null!==c&&(b=f.Event(c+".dt"),f(a.nTable).trigger(b,d),e.push(b.result));return e}function Va(a){var b=a._iDisplayStart,c=a.fnDisplayEnd(),d=a._iDisplayLength;b>=c&&(b=c-d);b-=b%d;if(-1===d||0>b)b=0;a._iDisplayStart=b}function Qa(a,b){a=a.renderer;var c=q.ext.renderer[b];return f.isPlainObject(a)&&a[b]?c[a[b]]||c._:"string"===typeof a?c[a]||c._:c._}function I(a){return a.oFeatures.bServerSide?
+"ssp":a.ajax||a.sAjaxSource?"ajax":"dom"}function ja(a,b){var c=Ob.numbers_length,d=Math.floor(c/2);b<=c?a=Y(0,b):a<=d?(a=Y(0,c-2),a.push("ellipsis"),a.push(b-1)):(a>=b-1-d?a=Y(b-(c-2),b):(a=Y(a-d+2,a+d-1),a.push("ellipsis"),a.push(b-1)),a.splice(0,0,"ellipsis"),a.splice(0,0,0));a.DT_el="span";return a}function Ga(a){f.each({num:function(b){return Ca(b,a)},"num-fmt":function(b){return Ca(b,a,ab)},"html-num":function(b){return Ca(b,a,Da)},"html-num-fmt":function(b){return Ca(b,a,Da,ab)}},function(b,
+c){C.type.order[b+a+"-pre"]=c;b.match(/^html\-/)&&(C.type.search[b+a]=C.type.search.html)})}function Pb(a){return function(){var b=[Ba(this[q.ext.iApiIndex])].concat(Array.prototype.slice.call(arguments));return q.ext.internal[a].apply(this,b)}}var q=function(a){this.$=function(a,b){return this.api(!0).$(a,b)};this._=function(a,b){return this.api(!0).rows(a,b).data()};this.api=function(a){return a?new x(Ba(this[C.iApiIndex])):new x(this)};this.fnAddData=function(a,b){var c=this.api(!0);a=f.isArray(a)&&
+(f.isArray(a[0])||f.isPlainObject(a[0]))?c.rows.add(a):c.row.add(a);(b===n||b)&&c.draw();return a.flatten().toArray()};this.fnAdjustColumnSizing=function(a){var b=this.api(!0).columns.adjust(),c=b.settings()[0],d=c.oScroll;a===n||a?b.draw(!1):(""!==d.sX||""!==d.sY)&&ma(c)};this.fnClearTable=function(a){var b=this.api(!0).clear();(a===n||a)&&b.draw()};this.fnClose=function(a){this.api(!0).row(a).child.hide()};this.fnDeleteRow=function(a,b,c){var d=this.api(!0);a=d.rows(a);var e=a.settings()[0],h=e.aoData[a[0][0]];
+a.remove();b&&b.call(this,e,h);(c===n||c)&&d.draw();return h};this.fnDestroy=function(a){this.api(!0).destroy(a)};this.fnDraw=function(a){this.api(!0).draw(a)};this.fnFilter=function(a,b,c,d,e,f){e=this.api(!0);null===b||b===n?e.search(a,c,d,f):e.column(b).search(a,c,d,f);e.draw()};this.fnGetData=function(a,b){var c=this.api(!0);if(a!==n){var d=a.nodeName?a.nodeName.toLowerCase():"";return b!==n||"td"==d||"th"==d?c.cell(a,b).data():c.row(a).data()||null}return c.data().toArray()};this.fnGetNodes=
+function(a){var b=this.api(!0);return a!==n?b.row(a).node():b.rows().nodes().flatten().toArray()};this.fnGetPosition=function(a){var b=this.api(!0),c=a.nodeName.toUpperCase();return"TR"==c?b.row(a).index():"TD"==c||"TH"==c?(a=b.cell(a).index(),[a.row,a.columnVisible,a.column]):null};this.fnIsOpen=function(a){return this.api(!0).row(a).child.isShown()};this.fnOpen=function(a,b,c){return this.api(!0).row(a).child(b,c).show().child()[0]};this.fnPageChange=function(a,b){a=this.api(!0).page(a);(b===n||
+b)&&a.draw(!1)};this.fnSetColumnVis=function(a,b,c){a=this.api(!0).column(a).visible(b);(c===n||c)&&a.columns.adjust().draw()};this.fnSettings=function(){return Ba(this[C.iApiIndex])};this.fnSort=function(a){this.api(!0).order(a).draw()};this.fnSortListener=function(a,b,c){this.api(!0).order.listener(a,b,c)};this.fnUpdate=function(a,b,c,d,e){var h=this.api(!0);c===n||null===c?h.row(b).data(a):h.cell(b,c).data(a);(e===n||e)&&h.columns.adjust();(d===n||d)&&h.draw();return 0};this.fnVersionCheck=C.fnVersionCheck;
+var b=this,c=a===n,d=this.length;c&&(a={});this.oApi=this.internal=C.internal;for(var e in q.ext.internal)e&&(this[e]=Pb(e));this.each(function(){var e={},g=1<d?$a(e,a,!0):a,k=0,l;e=this.getAttribute("id");var m=!1,p=q.defaults,v=f(this);if("table"!=this.nodeName.toLowerCase())O(null,0,"Non-table node initialisation ("+this.nodeName+")",2);else{ib(p);jb(p.column);L(p,p,!0);L(p.column,p.column,!0);L(p,f.extend(g,v.data()),!0);var u=q.settings;k=0;for(l=u.length;k<l;k++){var t=u[k];if(t.nTable==this||
+t.nTHead&&t.nTHead.parentNode==this||t.nTFoot&&t.nTFoot.parentNode==this){var w=g.bRetrieve!==n?g.bRetrieve:p.bRetrieve;if(c||w)return t.oInstance;if(g.bDestroy!==n?g.bDestroy:p.bDestroy){t.oInstance.fnDestroy();break}else{O(t,0,"Cannot reinitialise DataTable",3);return}}if(t.sTableId==this.id){u.splice(k,1);break}}if(null===e||""===e)this.id=e="DataTables_Table_"+q.ext._unique++;var r=f.extend(!0,{},q.models.oSettings,{sDestroyWidth:v[0].style.width,sInstance:e,sTableId:e});r.nTable=this;r.oApi=
+b.internal;r.oInit=g;u.push(r);r.oInstance=1===b.length?b:v.dataTable();ib(g);Fa(g.oLanguage);g.aLengthMenu&&!g.iDisplayLength&&(g.iDisplayLength=f.isArray(g.aLengthMenu[0])?g.aLengthMenu[0][0]:g.aLengthMenu[0]);g=$a(f.extend(!0,{},p),g);M(r.oFeatures,g,"bPaginate bLengthChange bFilter bSort bSortMulti bInfo bProcessing bAutoWidth bSortClasses bServerSide bDeferRender".split(" "));M(r,g,["asStripeClasses","ajax","fnServerData","fnFormatNumber","sServerMethod","aaSorting","aaSortingFixed","aLengthMenu",
+"sPaginationType","sAjaxSource","sAjaxDataProp","iStateDuration","sDom","bSortCellsTop","iTabIndex","fnStateLoadCallback","fnStateSaveCallback","renderer","searchDelay","rowId",["iCookieDuration","iStateDuration"],["oSearch","oPreviousSearch"],["aoSearchCols","aoPreSearchCols"],["iDisplayLength","_iDisplayLength"]]);M(r.oScroll,g,[["sScrollX","sX"],["sScrollXInner","sXInner"],["sScrollY","sY"],["bScrollCollapse","bCollapse"]]);M(r.oLanguage,g,"fnInfoCallback");D(r,"aoDrawCallback",g.fnDrawCallback,
+"user");D(r,"aoServerParams",g.fnServerParams,"user");D(r,"aoStateSaveParams",g.fnStateSaveParams,"user");D(r,"aoStateLoadParams",g.fnStateLoadParams,"user");D(r,"aoStateLoaded",g.fnStateLoaded,"user");D(r,"aoRowCallback",g.fnRowCallback,"user");D(r,"aoRowCreatedCallback",g.fnCreatedRow,"user");D(r,"aoHeaderCallback",g.fnHeaderCallback,"user");D(r,"aoFooterCallback",g.fnFooterCallback,"user");D(r,"aoInitComplete",g.fnInitComplete,"user");D(r,"aoPreDrawCallback",g.fnPreDrawCallback,"user");r.rowIdFn=
+T(g.rowId);kb(r);var x=r.oClasses;f.extend(x,q.ext.classes,g.oClasses);v.addClass(x.sTable);r.iInitDisplayStart===n&&(r.iInitDisplayStart=g.iDisplayStart,r._iDisplayStart=g.iDisplayStart);null!==g.iDeferLoading&&(r.bDeferLoading=!0,e=f.isArray(g.iDeferLoading),r._iRecordsDisplay=e?g.iDeferLoading[0]:g.iDeferLoading,r._iRecordsTotal=e?g.iDeferLoading[1]:g.iDeferLoading);var y=r.oLanguage;f.extend(!0,y,g.oLanguage);y.sUrl&&(f.ajax({dataType:"json",url:y.sUrl,success:function(a){Fa(a);L(p.oLanguage,
+a);f.extend(!0,y,a);ia(r)},error:function(){ia(r)}}),m=!0);null===g.asStripeClasses&&(r.asStripeClasses=[x.sStripeOdd,x.sStripeEven]);e=r.asStripeClasses;var z=v.children("tbody").find("tr").eq(0);-1!==f.inArray(!0,f.map(e,function(a,b){return z.hasClass(a)}))&&(f("tbody tr",this).removeClass(e.join(" ")),r.asDestroyStripes=e.slice());e=[];u=this.getElementsByTagName("thead");0!==u.length&&(ea(r.aoHeader,u[0]),e=ta(r));if(null===g.aoColumns)for(u=[],k=0,l=e.length;k<l;k++)u.push(null);else u=g.aoColumns;
+k=0;for(l=u.length;k<l;k++)Ha(r,e?e[k]:null);mb(r,g.aoColumnDefs,u,function(a,b){la(r,a,b)});if(z.length){var B=function(a,b){return null!==a.getAttribute("data-"+b)?b:null};f(z[0]).children("th, td").each(function(a,b){var c=r.aoColumns[a];if(c.mData===a){var d=B(b,"sort")||B(b,"order");b=B(b,"filter")||B(b,"search");if(null!==d||null!==b)c.mData={_:a+".display",sort:null!==d?a+".@data-"+d:n,type:null!==d?a+".@data-"+d:n,filter:null!==b?a+".@data-"+b:n},la(r,a)}})}var C=r.oFeatures;e=function(){if(g.aaSorting===
+n){var a=r.aaSorting;k=0;for(l=a.length;k<l;k++)a[k][1]=r.aoColumns[k].asSorting[0]}za(r);C.bSort&&D(r,"aoDrawCallback",function(){if(r.bSorted){var a=X(r),b={};f.each(a,function(a,c){b[c.src]=c.dir});A(r,null,"order",[r,a,b]);Mb(r)}});D(r,"aoDrawCallback",function(){(r.bSorted||"ssp"===I(r)||C.bDeferRender)&&za(r)},"sc");a=v.children("caption").each(function(){this._captionSide=f(this).css("caption-side")});var b=v.children("thead");0===b.length&&(b=f("<thead/>").appendTo(v));r.nTHead=b[0];b=v.children("tbody");
+0===b.length&&(b=f("<tbody/>").appendTo(v));r.nTBody=b[0];b=v.children("tfoot");0===b.length&&0<a.length&&(""!==r.oScroll.sX||""!==r.oScroll.sY)&&(b=f("<tfoot/>").appendTo(v));0===b.length||0===b.children().length?v.addClass(x.sNoFooter):0<b.length&&(r.nTFoot=b[0],ea(r.aoFooter,r.nTFoot));if(g.aaData)for(k=0;k<g.aaData.length;k++)R(r,g.aaData[k]);else(r.bDeferLoading||"dom"==I(r))&&oa(r,f(r.nTBody).children("tr"));r.aiDisplay=r.aiDisplayMaster.slice();r.bInitialised=!0;!1===m&&ia(r)};g.bStateSave?
+(C.bStateSave=!0,D(r,"aoDrawCallback",Aa,"state_save"),Nb(r,g,e)):e()}});b=null;return this},C,t,z,bb={},Qb=/[\r\n\u2028]/g,Da=/<.*?>/g,cc=/^\d{2,4}[\.\/\-]\d{1,2}[\.\/\-]\d{1,2}([T ]{1}\d{1,2}[:\.]\d{2}([\.:]\d{2})?)?$/,dc=/(\/|\.|\*|\+|\?|\||\(|\)|\[|\]|\{|\}|\\|\$|\^|\-)/g,ab=/[',$£€¥%\u2009\u202F\u20BD\u20a9\u20BArfkɃΞ]/gi,P=function(a){return a&&!0!==a&&"-"!==a?!1:!0},Rb=function(a){var b=parseInt(a,10);return!isNaN(b)&&isFinite(a)?b:null},Sb=function(a,b){bb[b]||(bb[b]=new RegExp(Ta(b),"g"));
+return"string"===typeof a&&"."!==b?a.replace(/\./g,"").replace(bb[b],"."):a},cb=function(a,b,c){var d="string"===typeof a;if(P(a))return!0;b&&d&&(a=Sb(a,b));c&&d&&(a=a.replace(ab,""));return!isNaN(parseFloat(a))&&isFinite(a)},Tb=function(a,b,c){return P(a)?!0:P(a)||"string"===typeof a?cb(a.replace(Da,""),b,c)?!0:null:null},K=function(a,b,c){var d=[],e=0,h=a.length;if(c!==n)for(;e<h;e++)a[e]&&a[e][b]&&d.push(a[e][b][c]);else for(;e<h;e++)a[e]&&d.push(a[e][b]);return d},ka=function(a,b,c,d){var e=[],
+h=0,g=b.length;if(d!==n)for(;h<g;h++)a[b[h]][c]&&e.push(a[b[h]][c][d]);else for(;h<g;h++)e.push(a[b[h]][c]);return e},Y=function(a,b){var c=[];if(b===n){b=0;var d=a}else d=b,b=a;for(a=b;a<d;a++)c.push(a);return c},Ub=function(a){for(var b=[],c=0,d=a.length;c<d;c++)a[c]&&b.push(a[c]);return b},sa=function(a){a:{if(!(2>a.length)){var b=a.slice().sort();for(var c=b[0],d=1,e=b.length;d<e;d++){if(b[d]===c){b=!1;break a}c=b[d]}}b=!0}if(b)return a.slice();b=[];e=a.length;var h,g=0;d=0;a:for(;d<e;d++){c=
+a[d];for(h=0;h<g;h++)if(b[h]===c)continue a;b.push(c);g++}return b};q.util={throttle:function(a,b){var c=b!==n?b:200,d,e;return function(){var b=this,g=+new Date,f=arguments;d&&g<d+c?(clearTimeout(e),e=setTimeout(function(){d=n;a.apply(b,f)},c)):(d=g,a.apply(b,f))}},escapeRegex:function(a){return a.replace(dc,"\\$1")}};var E=function(a,b,c){a[b]!==n&&(a[c]=a[b])},ca=/\[.*?\]$/,W=/\(\)$/,Ta=q.util.escapeRegex,xa=f("<div>")[0],$b=xa.textContent!==n,bc=/<.*?>/g,Ra=q.util.throttle,Vb=[],G=Array.prototype,
+ec=function(a){var b,c=q.settings,d=f.map(c,function(a,b){return a.nTable});if(a){if(a.nTable&&a.oApi)return[a];if(a.nodeName&&"table"===a.nodeName.toLowerCase()){var e=f.inArray(a,d);return-1!==e?[c[e]]:null}if(a&&"function"===typeof a.settings)return a.settings().toArray();"string"===typeof a?b=f(a):a instanceof f&&(b=a)}else return[];if(b)return b.map(function(a){e=f.inArray(this,d);return-1!==e?c[e]:null}).toArray()};var x=function(a,b){if(!(this instanceof x))return new x(a,b);var c=[],d=function(a){(a=
+ec(a))&&c.push.apply(c,a)};if(f.isArray(a))for(var e=0,h=a.length;e<h;e++)d(a[e]);else d(a);this.context=sa(c);b&&f.merge(this,b);this.selector={rows:null,cols:null,opts:null};x.extend(this,this,Vb)};q.Api=x;f.extend(x.prototype,{any:function(){return 0!==this.count()},concat:G.concat,context:[],count:function(){return this.flatten().length},each:function(a){for(var b=0,c=this.length;b<c;b++)a.call(this,this[b],b,this);return this},eq:function(a){var b=this.context;return b.length>a?new x(b[a],this[a]):
+null},filter:function(a){var b=[];if(G.filter)b=G.filter.call(this,a,this);else for(var c=0,d=this.length;c<d;c++)a.call(this,this[c],c,this)&&b.push(this[c]);return new x(this.context,b)},flatten:function(){var a=[];return new x(this.context,a.concat.apply(a,this.toArray()))},join:G.join,indexOf:G.indexOf||function(a,b){b=b||0;for(var c=this.length;b<c;b++)if(this[b]===a)return b;return-1},iterator:function(a,b,c,d){var e=[],h,g,f=this.context,l,m=this.selector;"string"===typeof a&&(d=c,c=b,b=a,
+a=!1);var p=0;for(h=f.length;p<h;p++){var q=new x(f[p]);if("table"===b){var u=c.call(q,f[p],p);u!==n&&e.push(u)}else if("columns"===b||"rows"===b)u=c.call(q,f[p],this[p],p),u!==n&&e.push(u);else if("column"===b||"column-rows"===b||"row"===b||"cell"===b){var t=this[p];"column-rows"===b&&(l=Ea(f[p],m.opts));var w=0;for(g=t.length;w<g;w++)u=t[w],u="cell"===b?c.call(q,f[p],u.row,u.column,p,w):c.call(q,f[p],u,p,w,l),u!==n&&e.push(u)}}return e.length||d?(a=new x(f,a?e.concat.apply([],e):e),b=a.selector,
+b.rows=m.rows,b.cols=m.cols,b.opts=m.opts,a):this},lastIndexOf:G.lastIndexOf||function(a,b){return this.indexOf.apply(this.toArray.reverse(),arguments)},length:0,map:function(a){var b=[];if(G.map)b=G.map.call(this,a,this);else for(var c=0,d=this.length;c<d;c++)b.push(a.call(this,this[c],c));return new x(this.context,b)},pluck:function(a){return this.map(function(b){return b[a]})},pop:G.pop,push:G.push,reduce:G.reduce||function(a,b){return lb(this,a,b,0,this.length,1)},reduceRight:G.reduceRight||function(a,
+b){return lb(this,a,b,this.length-1,-1,-1)},reverse:G.reverse,selector:null,shift:G.shift,slice:function(){return new x(this.context,this)},sort:G.sort,splice:G.splice,toArray:function(){return G.slice.call(this)},to$:function(){return f(this)},toJQuery:function(){return f(this)},unique:function(){return new x(this.context,sa(this))},unshift:G.unshift});x.extend=function(a,b,c){if(c.length&&b&&(b instanceof x||b.__dt_wrapper)){var d,e=function(a,b,c){return function(){var d=b.apply(a,arguments);x.extend(d,
+d,c.methodExt);return d}};var h=0;for(d=c.length;h<d;h++){var f=c[h];b[f.name]="function"===f.type?e(a,f.val,f):"object"===f.type?{}:f.val;b[f.name].__dt_wrapper=!0;x.extend(a,b[f.name],f.propExt)}}};x.register=t=function(a,b){if(f.isArray(a))for(var c=0,d=a.length;c<d;c++)x.register(a[c],b);else{d=a.split(".");var e=Vb,h;a=0;for(c=d.length;a<c;a++){var g=(h=-1!==d[a].indexOf("()"))?d[a].replace("()",""):d[a];a:{var k=0;for(var l=e.length;k<l;k++)if(e[k].name===g){k=e[k];break a}k=null}k||(k={name:g,
+val:{},methodExt:[],propExt:[],type:"object"},e.push(k));a===c-1?(k.val=b,k.type="function"===typeof b?"function":f.isPlainObject(b)?"object":"other"):e=h?k.methodExt:k.propExt}}};x.registerPlural=z=function(a,b,c){x.register(a,c);x.register(b,function(){var a=c.apply(this,arguments);return a===this?this:a instanceof x?a.length?f.isArray(a[0])?new x(a.context,a[0]):a[0]:n:a})};var Wb=function(a,b){if(f.isArray(a))return f.map(a,function(a){return Wb(a,b)});if("number"===typeof a)return[b[a]];var c=
+f.map(b,function(a,b){return a.nTable});return f(c).filter(a).map(function(a){a=f.inArray(this,c);return b[a]}).toArray()};t("tables()",function(a){return a!==n&&null!==a?new x(Wb(a,this.context)):this});t("table()",function(a){a=this.tables(a);var b=a.context;return b.length?new x(b[0]):a});z("tables().nodes()","table().node()",function(){return this.iterator("table",function(a){return a.nTable},1)});z("tables().body()","table().body()",function(){return this.iterator("table",function(a){return a.nTBody},
+1)});z("tables().header()","table().header()",function(){return this.iterator("table",function(a){return a.nTHead},1)});z("tables().footer()","table().footer()",function(){return this.iterator("table",function(a){return a.nTFoot},1)});z("tables().containers()","table().container()",function(){return this.iterator("table",function(a){return a.nTableWrapper},1)});t("draw()",function(a){return this.iterator("table",function(b){"page"===a?S(b):("string"===typeof a&&(a="full-hold"===a?!1:!0),U(b,!1===
+a))})});t("page()",function(a){return a===n?this.page.info().page:this.iterator("table",function(b){Wa(b,a)})});t("page.info()",function(a){if(0===this.context.length)return n;a=this.context[0];var b=a._iDisplayStart,c=a.oFeatures.bPaginate?a._iDisplayLength:-1,d=a.fnRecordsDisplay(),e=-1===c;return{page:e?0:Math.floor(b/c),pages:e?1:Math.ceil(d/c),start:b,end:a.fnDisplayEnd(),length:c,recordsTotal:a.fnRecordsTotal(),recordsDisplay:d,serverSide:"ssp"===I(a)}});t("page.len()",function(a){return a===
+n?0!==this.context.length?this.context[0]._iDisplayLength:n:this.iterator("table",function(b){Ua(b,a)})});var Xb=function(a,b,c){if(c){var d=new x(a);d.one("draw",function(){c(d.ajax.json())})}if("ssp"==I(a))U(a,b);else{J(a,!0);var e=a.jqXHR;e&&4!==e.readyState&&e.abort();ua(a,[],function(c){pa(a);c=va(a,c);for(var d=0,e=c.length;d<e;d++)R(a,c[d]);U(a,b);J(a,!1)})}};t("ajax.json()",function(){var a=this.context;if(0<a.length)return a[0].json});t("ajax.params()",function(){var a=this.context;if(0<
+a.length)return a[0].oAjaxData});t("ajax.reload()",function(a,b){return this.iterator("table",function(c){Xb(c,!1===b,a)})});t("ajax.url()",function(a){var b=this.context;if(a===n){if(0===b.length)return n;b=b[0];return b.ajax?f.isPlainObject(b.ajax)?b.ajax.url:b.ajax:b.sAjaxSource}return this.iterator("table",function(b){f.isPlainObject(b.ajax)?b.ajax.url=a:b.ajax=a})});t("ajax.url().load()",function(a,b){return this.iterator("table",function(c){Xb(c,!1===b,a)})});var db=function(a,b,c,d,e){var h=
+[],g,k,l;var m=typeof b;b&&"string"!==m&&"function"!==m&&b.length!==n||(b=[b]);m=0;for(k=b.length;m<k;m++){var p=b[m]&&b[m].split&&!b[m].match(/[\[\(:]/)?b[m].split(","):[b[m]];var q=0;for(l=p.length;q<l;q++)(g=c("string"===typeof p[q]?f.trim(p[q]):p[q]))&&g.length&&(h=h.concat(g))}a=C.selector[a];if(a.length)for(m=0,k=a.length;m<k;m++)h=a[m](d,e,h);return sa(h)},eb=function(a){a||(a={});a.filter&&a.search===n&&(a.search=a.filter);return f.extend({search:"none",order:"current",page:"all"},a)},fb=
+function(a){for(var b=0,c=a.length;b<c;b++)if(0<a[b].length)return a[0]=a[b],a[0].length=1,a.length=1,a.context=[a.context[b]],a;a.length=0;return a},Ea=function(a,b){var c=[],d=a.aiDisplay;var e=a.aiDisplayMaster;var h=b.search;var g=b.order;b=b.page;if("ssp"==I(a))return"removed"===h?[]:Y(0,e.length);if("current"==b)for(g=a._iDisplayStart,a=a.fnDisplayEnd();g<a;g++)c.push(d[g]);else if("current"==g||"applied"==g)if("none"==h)c=e.slice();else if("applied"==h)c=d.slice();else{if("removed"==h){var k=
+{};g=0;for(a=d.length;g<a;g++)k[d[g]]=null;c=f.map(e,function(a){return k.hasOwnProperty(a)?null:a})}}else if("index"==g||"original"==g)for(g=0,a=a.aoData.length;g<a;g++)"none"==h?c.push(g):(e=f.inArray(g,d),(-1===e&&"removed"==h||0<=e&&"applied"==h)&&c.push(g));return c},fc=function(a,b,c){var d;return db("row",b,function(b){var e=Rb(b),g=a.aoData;if(null!==e&&!c)return[e];d||(d=Ea(a,c));if(null!==e&&-1!==f.inArray(e,d))return[e];if(null===b||b===n||""===b)return d;if("function"===typeof b)return f.map(d,
+function(a){var c=g[a];return b(a,c._aData,c.nTr)?a:null});if(b.nodeName){e=b._DT_RowIndex;var k=b._DT_CellIndex;if(e!==n)return g[e]&&g[e].nTr===b?[e]:[];if(k)return g[k.row]&&g[k.row].nTr===b.parentNode?[k.row]:[];e=f(b).closest("*[data-dt-row]");return e.length?[e.data("dt-row")]:[]}if("string"===typeof b&&"#"===b.charAt(0)&&(e=a.aIds[b.replace(/^#/,"")],e!==n))return[e.idx];e=Ub(ka(a.aoData,d,"nTr"));return f(e).filter(b).map(function(){return this._DT_RowIndex}).toArray()},a,c)};t("rows()",function(a,
+b){a===n?a="":f.isPlainObject(a)&&(b=a,a="");b=eb(b);var c=this.iterator("table",function(c){return fc(c,a,b)},1);c.selector.rows=a;c.selector.opts=b;return c});t("rows().nodes()",function(){return this.iterator("row",function(a,b){return a.aoData[b].nTr||n},1)});t("rows().data()",function(){return this.iterator(!0,"rows",function(a,b){return ka(a.aoData,b,"_aData")},1)});z("rows().cache()","row().cache()",function(a){return this.iterator("row",function(b,c){b=b.aoData[c];return"search"===a?b._aFilterData:
+b._aSortData},1)});z("rows().invalidate()","row().invalidate()",function(a){return this.iterator("row",function(b,c){da(b,c,a)})});z("rows().indexes()","row().index()",function(){return this.iterator("row",function(a,b){return b},1)});z("rows().ids()","row().id()",function(a){for(var b=[],c=this.context,d=0,e=c.length;d<e;d++)for(var f=0,g=this[d].length;f<g;f++){var k=c[d].rowIdFn(c[d].aoData[this[d][f]]._aData);b.push((!0===a?"#":"")+k)}return new x(c,b)});z("rows().remove()","row().remove()",function(){var a=
+this;this.iterator("row",function(b,c,d){var e=b.aoData,f=e[c],g,k;e.splice(c,1);var l=0;for(g=e.length;l<g;l++){var m=e[l];var p=m.anCells;null!==m.nTr&&(m.nTr._DT_RowIndex=l);if(null!==p)for(m=0,k=p.length;m<k;m++)p[m]._DT_CellIndex.row=l}qa(b.aiDisplayMaster,c);qa(b.aiDisplay,c);qa(a[d],c,!1);0<b._iRecordsDisplay&&b._iRecordsDisplay--;Va(b);c=b.rowIdFn(f._aData);c!==n&&delete b.aIds[c]});this.iterator("table",function(a){for(var b=0,d=a.aoData.length;b<d;b++)a.aoData[b].idx=b});return this});t("rows.add()",
+function(a){var b=this.iterator("table",function(b){var c,d=[];var f=0;for(c=a.length;f<c;f++){var k=a[f];k.nodeName&&"TR"===k.nodeName.toUpperCase()?d.push(oa(b,k)[0]):d.push(R(b,k))}return d},1),c=this.rows(-1);c.pop();f.merge(c,b);return c});t("row()",function(a,b){return fb(this.rows(a,b))});t("row().data()",function(a){var b=this.context;if(a===n)return b.length&&this.length?b[0].aoData[this[0]]._aData:n;var c=b[0].aoData[this[0]];c._aData=a;f.isArray(a)&&c.nTr&&c.nTr.id&&Q(b[0].rowId)(a,c.nTr.id);
+da(b[0],this[0],"data");return this});t("row().node()",function(){var a=this.context;return a.length&&this.length?a[0].aoData[this[0]].nTr||null:null});t("row.add()",function(a){a instanceof f&&a.length&&(a=a[0]);var b=this.iterator("table",function(b){return a.nodeName&&"TR"===a.nodeName.toUpperCase()?oa(b,a)[0]:R(b,a)});return this.row(b[0])});var gc=function(a,b,c,d){var e=[],h=function(b,c){if(f.isArray(b)||b instanceof f)for(var d=0,g=b.length;d<g;d++)h(b[d],c);else b.nodeName&&"tr"===b.nodeName.toLowerCase()?
+e.push(b):(d=f("<tr><td/></tr>").addClass(c),f("td",d).addClass(c).html(b)[0].colSpan=V(a),e.push(d[0]))};h(c,d);b._details&&b._details.detach();b._details=f(e);b._detailsShow&&b._details.insertAfter(b.nTr)},gb=function(a,b){var c=a.context;c.length&&(a=c[0].aoData[b!==n?b:a[0]])&&a._details&&(a._details.remove(),a._detailsShow=n,a._details=n)},Yb=function(a,b){var c=a.context;c.length&&a.length&&(a=c[0].aoData[a[0]],a._details&&((a._detailsShow=b)?a._details.insertAfter(a.nTr):a._details.detach(),
+hc(c[0])))},hc=function(a){var b=new x(a),c=a.aoData;b.off("draw.dt.DT_details column-visibility.dt.DT_details destroy.dt.DT_details");0<K(c,"_details").length&&(b.on("draw.dt.DT_details",function(d,e){a===e&&b.rows({page:"current"}).eq(0).each(function(a){a=c[a];a._detailsShow&&a._details.insertAfter(a.nTr)})}),b.on("column-visibility.dt.DT_details",function(b,e,f,g){if(a===e)for(e=V(e),f=0,g=c.length;f<g;f++)b=c[f],b._details&&b._details.children("td[colspan]").attr("colspan",e)}),b.on("destroy.dt.DT_details",
+function(d,e){if(a===e)for(d=0,e=c.length;d<e;d++)c[d]._details&&gb(b,d)}))};t("row().child()",function(a,b){var c=this.context;if(a===n)return c.length&&this.length?c[0].aoData[this[0]]._details:n;!0===a?this.child.show():!1===a?gb(this):c.length&&this.length&&gc(c[0],c[0].aoData[this[0]],a,b);return this});t(["row().child.show()","row().child().show()"],function(a){Yb(this,!0);return this});t(["row().child.hide()","row().child().hide()"],function(){Yb(this,!1);return this});t(["row().child.remove()",
+"row().child().remove()"],function(){gb(this);return this});t("row().child.isShown()",function(){var a=this.context;return a.length&&this.length?a[0].aoData[this[0]]._detailsShow||!1:!1});var ic=/^([^:]+):(name|visIdx|visible)$/,Zb=function(a,b,c,d,e){c=[];d=0;for(var f=e.length;d<f;d++)c.push(F(a,e[d],b));return c},jc=function(a,b,c){var d=a.aoColumns,e=K(d,"sName"),h=K(d,"nTh");return db("column",b,function(b){var g=Rb(b);if(""===b)return Y(d.length);if(null!==g)return[0<=g?g:d.length+g];if("function"===
+typeof b){var l=Ea(a,c);return f.map(d,function(c,d){return b(d,Zb(a,d,0,0,l),h[d])?d:null})}var m="string"===typeof b?b.match(ic):"";if(m)switch(m[2]){case "visIdx":case "visible":g=parseInt(m[1],10);if(0>g){var p=f.map(d,function(a,b){return a.bVisible?b:null});return[p[p.length+g]]}return[aa(a,g)];case "name":return f.map(e,function(a,b){return a===m[1]?b:null});default:return[]}if(b.nodeName&&b._DT_CellIndex)return[b._DT_CellIndex.column];g=f(h).filter(b).map(function(){return f.inArray(this,
+h)}).toArray();if(g.length||!b.nodeName)return g;g=f(b).closest("*[data-dt-column]");return g.length?[g.data("dt-column")]:[]},a,c)};t("columns()",function(a,b){a===n?a="":f.isPlainObject(a)&&(b=a,a="");b=eb(b);var c=this.iterator("table",function(c){return jc(c,a,b)},1);c.selector.cols=a;c.selector.opts=b;return c});z("columns().header()","column().header()",function(a,b){return this.iterator("column",function(a,b){return a.aoColumns[b].nTh},1)});z("columns().footer()","column().footer()",function(a,
+b){return this.iterator("column",function(a,b){return a.aoColumns[b].nTf},1)});z("columns().data()","column().data()",function(){return this.iterator("column-rows",Zb,1)});z("columns().dataSrc()","column().dataSrc()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].mData},1)});z("columns().cache()","column().cache()",function(a){return this.iterator("column-rows",function(b,c,d,e,f){return ka(b.aoData,f,"search"===a?"_aFilterData":"_aSortData",c)},1)});z("columns().nodes()",
+"column().nodes()",function(){return this.iterator("column-rows",function(a,b,c,d,e){return ka(a.aoData,e,"anCells",b)},1)});z("columns().visible()","column().visible()",function(a,b){var c=this,d=this.iterator("column",function(b,c){if(a===n)return b.aoColumns[c].bVisible;var d=b.aoColumns,e=d[c],h=b.aoData,m;if(a!==n&&e.bVisible!==a){if(a){var p=f.inArray(!0,K(d,"bVisible"),c+1);d=0;for(m=h.length;d<m;d++){var q=h[d].nTr;b=h[d].anCells;q&&q.insertBefore(b[c],b[p]||null)}}else f(K(b.aoData,"anCells",
+c)).detach();e.bVisible=a}});a!==n&&this.iterator("table",function(d){fa(d,d.aoHeader);fa(d,d.aoFooter);d.aiDisplay.length||f(d.nTBody).find("td[colspan]").attr("colspan",V(d));Aa(d);c.iterator("column",function(c,d){A(c,null,"column-visibility",[c,d,a,b])});(b===n||b)&&c.columns.adjust()});return d});z("columns().indexes()","column().index()",function(a){return this.iterator("column",function(b,c){return"visible"===a?ba(b,c):c},1)});t("columns.adjust()",function(){return this.iterator("table",function(a){Z(a)},
+1)});t("column.index()",function(a,b){if(0!==this.context.length){var c=this.context[0];if("fromVisible"===a||"toData"===a)return aa(c,b);if("fromData"===a||"toVisible"===a)return ba(c,b)}});t("column()",function(a,b){return fb(this.columns(a,b))});var kc=function(a,b,c){var d=a.aoData,e=Ea(a,c),h=Ub(ka(d,e,"anCells")),g=f([].concat.apply([],h)),k,l=a.aoColumns.length,m,p,q,u,t,w;return db("cell",b,function(b){var c="function"===typeof b;if(null===b||b===n||c){m=[];p=0;for(q=e.length;p<q;p++)for(k=
+e[p],u=0;u<l;u++)t={row:k,column:u},c?(w=d[k],b(t,F(a,k,u),w.anCells?w.anCells[u]:null)&&m.push(t)):m.push(t);return m}if(f.isPlainObject(b))return b.column!==n&&b.row!==n&&-1!==f.inArray(b.row,e)?[b]:[];c=g.filter(b).map(function(a,b){return{row:b._DT_CellIndex.row,column:b._DT_CellIndex.column}}).toArray();if(c.length||!b.nodeName)return c;w=f(b).closest("*[data-dt-row]");return w.length?[{row:w.data("dt-row"),column:w.data("dt-column")}]:[]},a,c)};t("cells()",function(a,b,c){f.isPlainObject(a)&&
+(a.row===n?(c=a,a=null):(c=b,b=null));f.isPlainObject(b)&&(c=b,b=null);if(null===b||b===n)return this.iterator("table",function(b){return kc(b,a,eb(c))});var d=c?{page:c.page,order:c.order,search:c.search}:{},e=this.columns(b,d),h=this.rows(a,d),g,k,l,m;d=this.iterator("table",function(a,b){a=[];g=0;for(k=h[b].length;g<k;g++)for(l=0,m=e[b].length;l<m;l++)a.push({row:h[b][g],column:e[b][l]});return a},1);d=c&&c.selected?this.cells(d,c):d;f.extend(d.selector,{cols:b,rows:a,opts:c});return d});z("cells().nodes()",
+"cell().node()",function(){return this.iterator("cell",function(a,b,c){return(a=a.aoData[b])&&a.anCells?a.anCells[c]:n},1)});t("cells().data()",function(){return this.iterator("cell",function(a,b,c){return F(a,b,c)},1)});z("cells().cache()","cell().cache()",function(a){a="search"===a?"_aFilterData":"_aSortData";return this.iterator("cell",function(b,c,d){return b.aoData[c][a][d]},1)});z("cells().render()","cell().render()",function(a){return this.iterator("cell",function(b,c,d){return F(b,c,d,a)},
+1)});z("cells().indexes()","cell().index()",function(){return this.iterator("cell",function(a,b,c){return{row:b,column:c,columnVisible:ba(a,c)}},1)});z("cells().invalidate()","cell().invalidate()",function(a){return this.iterator("cell",function(b,c,d){da(b,c,a,d)})});t("cell()",function(a,b,c){return fb(this.cells(a,b,c))});t("cell().data()",function(a){var b=this.context,c=this[0];if(a===n)return b.length&&c.length?F(b[0],c[0].row,c[0].column):n;nb(b[0],c[0].row,c[0].column,a);da(b[0],c[0].row,
+"data",c[0].column);return this});t("order()",function(a,b){var c=this.context;if(a===n)return 0!==c.length?c[0].aaSorting:n;"number"===typeof a?a=[[a,b]]:a.length&&!f.isArray(a[0])&&(a=Array.prototype.slice.call(arguments));return this.iterator("table",function(b){b.aaSorting=a.slice()})});t("order.listener()",function(a,b,c){return this.iterator("table",function(d){Pa(d,a,b,c)})});t("order.fixed()",function(a){if(!a){var b=this.context;b=b.length?b[0].aaSortingFixed:n;return f.isArray(b)?{pre:b}:
+b}return this.iterator("table",function(b){b.aaSortingFixed=f.extend(!0,{},a)})});t(["columns().order()","column().order()"],function(a){var b=this;return this.iterator("table",function(c,d){var e=[];f.each(b[d],function(b,c){e.push([c,a])});c.aaSorting=e})});t("search()",function(a,b,c,d){var e=this.context;return a===n?0!==e.length?e[0].oPreviousSearch.sSearch:n:this.iterator("table",function(e){e.oFeatures.bFilter&&ha(e,f.extend({},e.oPreviousSearch,{sSearch:a+"",bRegex:null===b?!1:b,bSmart:null===
+c?!0:c,bCaseInsensitive:null===d?!0:d}),1)})});z("columns().search()","column().search()",function(a,b,c,d){return this.iterator("column",function(e,h){var g=e.aoPreSearchCols;if(a===n)return g[h].sSearch;e.oFeatures.bFilter&&(f.extend(g[h],{sSearch:a+"",bRegex:null===b?!1:b,bSmart:null===c?!0:c,bCaseInsensitive:null===d?!0:d}),ha(e,e.oPreviousSearch,1))})});t("state()",function(){return this.context.length?this.context[0].oSavedState:null});t("state.clear()",function(){return this.iterator("table",
+function(a){a.fnStateSaveCallback.call(a.oInstance,a,{})})});t("state.loaded()",function(){return this.context.length?this.context[0].oLoadedState:null});t("state.save()",function(){return this.iterator("table",function(a){Aa(a)})});q.versionCheck=q.fnVersionCheck=function(a){var b=q.version.split(".");a=a.split(".");for(var c,d,e=0,f=a.length;e<f;e++)if(c=parseInt(b[e],10)||0,d=parseInt(a[e],10)||0,c!==d)return c>d;return!0};q.isDataTable=q.fnIsDataTable=function(a){var b=f(a).get(0),c=!1;if(a instanceof
+q.Api)return!0;f.each(q.settings,function(a,e){a=e.nScrollHead?f("table",e.nScrollHead)[0]:null;var d=e.nScrollFoot?f("table",e.nScrollFoot)[0]:null;if(e.nTable===b||a===b||d===b)c=!0});return c};q.tables=q.fnTables=function(a){var b=!1;f.isPlainObject(a)&&(b=a.api,a=a.visible);var c=f.map(q.settings,function(b){if(!a||a&&f(b.nTable).is(":visible"))return b.nTable});return b?new x(c):c};q.camelToHungarian=L;t("$()",function(a,b){b=this.rows(b).nodes();b=f(b);return f([].concat(b.filter(a).toArray(),
+b.find(a).toArray()))});f.each(["on","one","off"],function(a,b){t(b+"()",function(){var a=Array.prototype.slice.call(arguments);a[0]=f.map(a[0].split(/\s/),function(a){return a.match(/\.dt\b/)?a:a+".dt"}).join(" ");var d=f(this.tables().nodes());d[b].apply(d,a);return this})});t("clear()",function(){return this.iterator("table",function(a){pa(a)})});t("settings()",function(){return new x(this.context,this.context)});t("init()",function(){var a=this.context;return a.length?a[0].oInit:null});t("data()",
+function(){return this.iterator("table",function(a){return K(a.aoData,"_aData")}).flatten()});t("destroy()",function(a){a=a||!1;return this.iterator("table",function(b){var c=b.nTableWrapper.parentNode,d=b.oClasses,e=b.nTable,h=b.nTBody,g=b.nTHead,k=b.nTFoot,l=f(e);h=f(h);var m=f(b.nTableWrapper),p=f.map(b.aoData,function(a){return a.nTr}),n;b.bDestroying=!0;A(b,"aoDestroyCallback","destroy",[b]);a||(new x(b)).columns().visible(!0);m.off(".DT").find(":not(tbody *)").off(".DT");f(y).off(".DT-"+b.sInstance);
+e!=g.parentNode&&(l.children("thead").detach(),l.append(g));k&&e!=k.parentNode&&(l.children("tfoot").detach(),l.append(k));b.aaSorting=[];b.aaSortingFixed=[];za(b);f(p).removeClass(b.asStripeClasses.join(" "));f("th, td",g).removeClass(d.sSortable+" "+d.sSortableAsc+" "+d.sSortableDesc+" "+d.sSortableNone);h.children().detach();h.append(p);g=a?"remove":"detach";l[g]();m[g]();!a&&c&&(c.insertBefore(e,b.nTableReinsertBefore),l.css("width",b.sDestroyWidth).removeClass(d.sTable),(n=b.asDestroyStripes.length)&&
+h.children().each(function(a){f(this).addClass(b.asDestroyStripes[a%n])}));c=f.inArray(b,q.settings);-1!==c&&q.settings.splice(c,1)})});f.each(["column","row","cell"],function(a,b){t(b+"s().every()",function(a){var c=this.selector.opts,e=this;return this.iterator(b,function(d,f,k,l,m){a.call(e[b](f,"cell"===b?k:c,"cell"===b?c:n),f,k,l,m)})})});t("i18n()",function(a,b,c){var d=this.context[0];a=T(a)(d.oLanguage);a===n&&(a=b);c!==n&&f.isPlainObject(a)&&(a=a[c]!==n?a[c]:a._);return a.replace("%d",c)});
+q.version="1.10.21";q.settings=[];q.models={};q.models.oSearch={bCaseInsensitive:!0,sSearch:"",bRegex:!1,bSmart:!0};q.models.oRow={nTr:null,anCells:null,_aData:[],_aSortData:null,_aFilterData:null,_sFilterRow:null,_sRowStripe:"",src:null,idx:-1};q.models.oColumn={idx:null,aDataSort:null,asSorting:null,bSearchable:null,bSortable:null,bVisible:null,_sManualType:null,_bAttrSrc:!1,fnCreatedCell:null,fnGetData:null,fnSetData:null,mData:null,mRender:null,nTh:null,nTf:null,sClass:null,sContentPadding:null,
+sDefaultContent:null,sName:null,sSortDataType:"std",sSortingClass:null,sSortingClassJUI:null,sTitle:null,sType:null,sWidth:null,sWidthOrig:null};q.defaults={aaData:null,aaSorting:[[0,"asc"]],aaSortingFixed:[],ajax:null,aLengthMenu:[10,25,50,100],aoColumns:null,aoColumnDefs:null,aoSearchCols:[],asStripeClasses:null,bAutoWidth:!0,bDeferRender:!1,bDestroy:!1,bFilter:!0,bInfo:!0,bLengthChange:!0,bPaginate:!0,bProcessing:!1,bRetrieve:!1,bScrollCollapse:!1,bServerSide:!1,bSort:!0,bSortMulti:!0,bSortCellsTop:!1,
+bSortClasses:!0,bStateSave:!1,fnCreatedRow:null,fnDrawCallback:null,fnFooterCallback:null,fnFormatNumber:function(a){return a.toString().replace(/\B(?=(\d{3})+(?!\d))/g,this.oLanguage.sThousands)},fnHeaderCallback:null,fnInfoCallback:null,fnInitComplete:null,fnPreDrawCallback:null,fnRowCallback:null,fnServerData:null,fnServerParams:null,fnStateLoadCallback:function(a){try{return JSON.parse((-1===a.iStateDuration?sessionStorage:localStorage).getItem("DataTables_"+a.sInstance+"_"+location.pathname))}catch(b){return{}}},
+fnStateLoadParams:null,fnStateLoaded:null,fnStateSaveCallback:function(a,b){try{(-1===a.iStateDuration?sessionStorage:localStorage).setItem("DataTables_"+a.sInstance+"_"+location.pathname,JSON.stringify(b))}catch(c){}},fnStateSaveParams:null,iStateDuration:7200,iDeferLoading:null,iDisplayLength:10,iDisplayStart:0,iTabIndex:0,oClasses:{},oLanguage:{oAria:{sSortAscending:": activate to sort column ascending",sSortDescending:": activate to sort column descending"},oPaginate:{sFirst:"First",sLast:"Last",
+sNext:"Next",sPrevious:"Previous"},sEmptyTable:"No data available in table",sInfo:"Showing _START_ to _END_ of _TOTAL_ entries",sInfoEmpty:"Showing 0 to 0 of 0 entries",sInfoFiltered:"(filtered from _MAX_ total entries)",sInfoPostFix:"",sDecimal:"",sThousands:",",sLengthMenu:"Show _MENU_ entries",sLoadingRecords:"Loading...",sProcessing:"Processing...",sSearch:"Search:",sSearchPlaceholder:"",sUrl:"",sZeroRecords:"No matching records found"},oSearch:f.extend({},q.models.oSearch),sAjaxDataProp:"data",
+sAjaxSource:null,sDom:"lfrtip",searchDelay:null,sPaginationType:"simple_numbers",sScrollX:"",sScrollXInner:"",sScrollY:"",sServerMethod:"GET",renderer:null,rowId:"DT_RowId"};H(q.defaults);q.defaults.column={aDataSort:null,iDataSort:-1,asSorting:["asc","desc"],bSearchable:!0,bSortable:!0,bVisible:!0,fnCreatedCell:null,mData:null,mRender:null,sCellType:"td",sClass:"",sContentPadding:"",sDefaultContent:null,sName:"",sSortDataType:"std",sTitle:null,sType:null,sWidth:null};H(q.defaults.column);q.models.oSettings=
+{oFeatures:{bAutoWidth:null,bDeferRender:null,bFilter:null,bInfo:null,bLengthChange:null,bPaginate:null,bProcessing:null,bServerSide:null,bSort:null,bSortMulti:null,bSortClasses:null,bStateSave:null},oScroll:{bCollapse:null,iBarWidth:0,sX:null,sXInner:null,sY:null},oLanguage:{fnInfoCallback:null},oBrowser:{bScrollOversize:!1,bScrollbarLeft:!1,bBounding:!1,barWidth:0},ajax:null,aanFeatures:[],aoData:[],aiDisplay:[],aiDisplayMaster:[],aIds:{},aoColumns:[],aoHeader:[],aoFooter:[],oPreviousSearch:{},
+aoPreSearchCols:[],aaSorting:null,aaSortingFixed:[],asStripeClasses:null,asDestroyStripes:[],sDestroyWidth:0,aoRowCallback:[],aoHeaderCallback:[],aoFooterCallback:[],aoDrawCallback:[],aoRowCreatedCallback:[],aoPreDrawCallback:[],aoInitComplete:[],aoStateSaveParams:[],aoStateLoadParams:[],aoStateLoaded:[],sTableId:"",nTable:null,nTHead:null,nTFoot:null,nTBody:null,nTableWrapper:null,bDeferLoading:!1,bInitialised:!1,aoOpenRows:[],sDom:null,searchDelay:null,sPaginationType:"two_button",iStateDuration:0,
+aoStateSave:[],aoStateLoad:[],oSavedState:null,oLoadedState:null,sAjaxSource:null,sAjaxDataProp:null,bAjaxDataGet:!0,jqXHR:null,json:n,oAjaxData:n,fnServerData:null,aoServerParams:[],sServerMethod:null,fnFormatNumber:null,aLengthMenu:null,iDraw:0,bDrawing:!1,iDrawError:-1,_iDisplayLength:10,_iDisplayStart:0,_iRecordsTotal:0,_iRecordsDisplay:0,oClasses:{},bFiltered:!1,bSorted:!1,bSortCellsTop:null,oInit:null,aoDestroyCallback:[],fnRecordsTotal:function(){return"ssp"==I(this)?1*this._iRecordsTotal:
+this.aiDisplayMaster.length},fnRecordsDisplay:function(){return"ssp"==I(this)?1*this._iRecordsDisplay:this.aiDisplay.length},fnDisplayEnd:function(){var a=this._iDisplayLength,b=this._iDisplayStart,c=b+a,d=this.aiDisplay.length,e=this.oFeatures,f=e.bPaginate;return e.bServerSide?!1===f||-1===a?b+d:Math.min(b+a,this._iRecordsDisplay):!f||c>d||-1===a?d:c},oInstance:null,sInstance:null,iTabIndex:0,nScrollHead:null,nScrollFoot:null,aLastSort:[],oPlugins:{},rowIdFn:null,rowId:null};q.ext=C={buttons:{},
+classes:{},builder:"-source-",errMode:"alert",feature:[],search:[],selector:{cell:[],column:[],row:[]},internal:{},legacy:{ajax:null},pager:{},renderer:{pageButton:{},header:{}},order:{},type:{detect:[],search:{},order:{}},_unique:0,fnVersionCheck:q.fnVersionCheck,iApiIndex:0,oJUIClasses:{},sVersion:q.version};f.extend(C,{afnFiltering:C.search,aTypes:C.type.detect,ofnSearch:C.type.search,oSort:C.type.order,afnSortData:C.order,aoFeatures:C.feature,oApi:C.internal,oStdClasses:C.classes,oPagination:C.pager});
+f.extend(q.ext.classes,{sTable:"dataTable",sNoFooter:"no-footer",sPageButton:"paginate_button",sPageButtonActive:"current",sPageButtonDisabled:"disabled",sStripeOdd:"odd",sStripeEven:"even",sRowEmpty:"dataTables_empty",sWrapper:"dataTables_wrapper",sFilter:"dataTables_filter",sInfo:"dataTables_info",sPaging:"dataTables_paginate paging_",sLength:"dataTables_length",sProcessing:"dataTables_processing",sSortAsc:"sorting_asc",sSortDesc:"sorting_desc",sSortable:"sorting",sSortableAsc:"sorting_asc_disabled",
+sSortableDesc:"sorting_desc_disabled",sSortableNone:"sorting_disabled",sSortColumn:"sorting_",sFilterInput:"",sLengthSelect:"",sScrollWrapper:"dataTables_scroll",sScrollHead:"dataTables_scrollHead",sScrollHeadInner:"dataTables_scrollHeadInner",sScrollBody:"dataTables_scrollBody",sScrollFoot:"dataTables_scrollFoot",sScrollFootInner:"dataTables_scrollFootInner",sHeaderTH:"",sFooterTH:"",sSortJUIAsc:"",sSortJUIDesc:"",sSortJUI:"",sSortJUIAscAllowed:"",sSortJUIDescAllowed:"",sSortJUIWrapper:"",sSortIcon:"",
+sJUIHeader:"",sJUIFooter:""});var Ob=q.ext.pager;f.extend(Ob,{simple:function(a,b){return["previous","next"]},full:function(a,b){return["first","previous","next","last"]},numbers:function(a,b){return[ja(a,b)]},simple_numbers:function(a,b){return["previous",ja(a,b),"next"]},full_numbers:function(a,b){return["first","previous",ja(a,b),"next","last"]},first_last_numbers:function(a,b){return["first",ja(a,b),"last"]},_numbers:ja,numbers_length:7});f.extend(!0,q.ext.renderer,{pageButton:{_:function(a,b,
+c,d,e,h){var g=a.oClasses,k=a.oLanguage.oPaginate,l=a.oLanguage.oAria.paginate||{},m,p,q=0,t=function(b,d){var n,r=g.sPageButtonDisabled,u=function(b){Wa(a,b.data.action,!0)};var w=0;for(n=d.length;w<n;w++){var v=d[w];if(f.isArray(v)){var x=f("<"+(v.DT_el||"div")+"/>").appendTo(b);t(x,v)}else{m=null;p=v;x=a.iTabIndex;switch(v){case "ellipsis":b.append('<span class="ellipsis">&#x2026;</span>');break;case "first":m=k.sFirst;0===e&&(x=-1,p+=" "+r);break;case "previous":m=k.sPrevious;0===e&&(x=-1,p+=
+" "+r);break;case "next":m=k.sNext;if(0===h||e===h-1)x=-1,p+=" "+r;break;case "last":m=k.sLast;e===h-1&&(x=-1,p+=" "+r);break;default:m=v+1,p=e===v?g.sPageButtonActive:""}null!==m&&(x=f("<a>",{"class":g.sPageButton+" "+p,"aria-controls":a.sTableId,"aria-label":l[v],"data-dt-idx":q,tabindex:x,id:0===c&&"string"===typeof v?a.sTableId+"_"+v:null}).html(m).appendTo(b),Za(x,{action:v},u),q++)}}};try{var x=f(b).find(w.activeElement).data("dt-idx")}catch(lc){}t(f(b).empty(),d);x!==n&&f(b).find("[data-dt-idx="+
+x+"]").trigger("focus")}}});f.extend(q.ext.type.detect,[function(a,b){b=b.oLanguage.sDecimal;return cb(a,b)?"num"+b:null},function(a,b){if(a&&!(a instanceof Date)&&!cc.test(a))return null;b=Date.parse(a);return null!==b&&!isNaN(b)||P(a)?"date":null},function(a,b){b=b.oLanguage.sDecimal;return cb(a,b,!0)?"num-fmt"+b:null},function(a,b){b=b.oLanguage.sDecimal;return Tb(a,b)?"html-num"+b:null},function(a,b){b=b.oLanguage.sDecimal;return Tb(a,b,!0)?"html-num-fmt"+b:null},function(a,b){return P(a)||"string"===
+typeof a&&-1!==a.indexOf("<")?"html":null}]);f.extend(q.ext.type.search,{html:function(a){return P(a)?a:"string"===typeof a?a.replace(Qb," ").replace(Da,""):""},string:function(a){return P(a)?a:"string"===typeof a?a.replace(Qb," "):a}});var Ca=function(a,b,c,d){if(0!==a&&(!a||"-"===a))return-Infinity;b&&(a=Sb(a,b));a.replace&&(c&&(a=a.replace(c,"")),d&&(a=a.replace(d,"")));return 1*a};f.extend(C.type.order,{"date-pre":function(a){a=Date.parse(a);return isNaN(a)?-Infinity:a},"html-pre":function(a){return P(a)?
+"":a.replace?a.replace(/<.*?>/g,"").toLowerCase():a+""},"string-pre":function(a){return P(a)?"":"string"===typeof a?a.toLowerCase():a.toString?a.toString():""},"string-asc":function(a,b){return a<b?-1:a>b?1:0},"string-desc":function(a,b){return a<b?1:a>b?-1:0}});Ga("");f.extend(!0,q.ext.renderer,{header:{_:function(a,b,c,d){f(a.nTable).on("order.dt.DT",function(e,f,g,k){a===f&&(e=c.idx,b.removeClass(c.sSortingClass+" "+d.sSortAsc+" "+d.sSortDesc).addClass("asc"==k[e]?d.sSortAsc:"desc"==k[e]?d.sSortDesc:
+c.sSortingClass))})},jqueryui:function(a,b,c,d){f("<div/>").addClass(d.sSortJUIWrapper).append(b.contents()).append(f("<span/>").addClass(d.sSortIcon+" "+c.sSortingClassJUI)).appendTo(b);f(a.nTable).on("order.dt.DT",function(e,f,g,k){a===f&&(e=c.idx,b.removeClass(d.sSortAsc+" "+d.sSortDesc).addClass("asc"==k[e]?d.sSortAsc:"desc"==k[e]?d.sSortDesc:c.sSortingClass),b.find("span."+d.sSortIcon).removeClass(d.sSortJUIAsc+" "+d.sSortJUIDesc+" "+d.sSortJUI+" "+d.sSortJUIAscAllowed+" "+d.sSortJUIDescAllowed).addClass("asc"==
+k[e]?d.sSortJUIAsc:"desc"==k[e]?d.sSortJUIDesc:c.sSortingClassJUI))})}}});var hb=function(a){return"string"===typeof a?a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"):a};q.render={number:function(a,b,c,d,e){return{display:function(f){if("number"!==typeof f&&"string"!==typeof f)return f;var g=0>f?"-":"",h=parseFloat(f);if(isNaN(h))return hb(f);h=h.toFixed(c);f=Math.abs(h);h=parseInt(f,10);f=c?b+(f-h).toFixed(c).substring(2):"";return g+(d||"")+h.toString().replace(/\B(?=(\d{3})+(?!\d))/g,
+a)+f+(e||"")}}},text:function(){return{display:hb,filter:hb}}};f.extend(q.ext.internal,{_fnExternApiFunc:Pb,_fnBuildAjax:ua,_fnAjaxUpdate:pb,_fnAjaxParameters:yb,_fnAjaxUpdateDraw:zb,_fnAjaxDataSrc:va,_fnAddColumn:Ha,_fnColumnOptions:la,_fnAdjustColumnSizing:Z,_fnVisibleToColumnIndex:aa,_fnColumnIndexToVisible:ba,_fnVisbleColumns:V,_fnGetColumns:na,_fnColumnTypes:Ja,_fnApplyColumnDefs:mb,_fnHungarianMap:H,_fnCamelToHungarian:L,_fnLanguageCompat:Fa,_fnBrowserDetect:kb,_fnAddData:R,_fnAddTr:oa,_fnNodeToDataIndex:function(a,
+b){return b._DT_RowIndex!==n?b._DT_RowIndex:null},_fnNodeToColumnIndex:function(a,b,c){return f.inArray(c,a.aoData[b].anCells)},_fnGetCellData:F,_fnSetCellData:nb,_fnSplitObjNotation:Ma,_fnGetObjectDataFn:T,_fnSetObjectDataFn:Q,_fnGetDataMaster:Na,_fnClearTable:pa,_fnDeleteIndex:qa,_fnInvalidate:da,_fnGetRowElements:La,_fnCreateTr:Ka,_fnBuildHead:ob,_fnDrawHead:fa,_fnDraw:S,_fnReDraw:U,_fnAddOptionsHtml:rb,_fnDetectHeader:ea,_fnGetUniqueThs:ta,_fnFeatureHtmlFilter:tb,_fnFilterComplete:ha,_fnFilterCustom:Cb,
+_fnFilterColumn:Bb,_fnFilter:Ab,_fnFilterCreateSearch:Sa,_fnEscapeRegex:Ta,_fnFilterData:Db,_fnFeatureHtmlInfo:wb,_fnUpdateInfo:Gb,_fnInfoMacros:Hb,_fnInitialise:ia,_fnInitComplete:wa,_fnLengthChange:Ua,_fnFeatureHtmlLength:sb,_fnFeatureHtmlPaginate:xb,_fnPageChange:Wa,_fnFeatureHtmlProcessing:ub,_fnProcessingDisplay:J,_fnFeatureHtmlTable:vb,_fnScrollDraw:ma,_fnApplyToChildren:N,_fnCalculateColumnWidths:Ia,_fnThrottle:Ra,_fnConvertToWidth:Ib,_fnGetWidestNode:Jb,_fnGetMaxLenString:Kb,_fnStringToCss:B,
+_fnSortFlatten:X,_fnSort:qb,_fnSortAria:Mb,_fnSortListener:Ya,_fnSortAttachListener:Pa,_fnSortingClasses:za,_fnSortData:Lb,_fnSaveState:Aa,_fnLoadState:Nb,_fnSettingsFromNode:Ba,_fnLog:O,_fnMap:M,_fnBindAction:Za,_fnCallbackReg:D,_fnCallbackFire:A,_fnLengthOverflow:Va,_fnRenderer:Qa,_fnDataSource:I,_fnRowAttributes:Oa,_fnExtend:$a,_fnCalculateEnd:function(){}});f.fn.dataTable=q;q.$=f;f.fn.dataTableSettings=q.settings;f.fn.dataTableExt=q.ext;f.fn.DataTable=function(a){return f(this).dataTable(a).api()};
+f.each(q,function(a,b){f.fn.DataTable[a]=b});return f.fn.dataTable});

apps/templates/accounts/login.html

@@ -0,0 +1,62 @@
+{% extends "layouts/base-authentication.html" %}
+{% load static %}
+
+{% block title %} Sign IN {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="peers ai-s fxw-nw h-100vh">
+      <div class="d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("{% static '/images/bg.jpg' %}")'>
+        <div class="pos-a centerXY">
+          <div class="bgc-white bdrs-50p pos-r" style='width: 120px; height: 120px;'>
+            <img class="pos-a centerXY" src="{% static '/images/logo.png' %}" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
+
+        <h4 class="fw-300 c-grey-900 mB-40">Adminator - Login</h4>
+        
+        {% if msg %}
+            <p class="fw-300 c-red-900 mB-40">{{ msg | safe }}</p>
+        {% else %}
+            <p class="fw-300 c-grey-900 mB-40">
+              Add your credentials
+            </p>
+        {% endif %}
+
+        <form method="post" action="">
+
+          {% csrf_token %}
+
+          <div class="mb-3">
+            <label class="text-normal text-dark form-label">Email Address</label>
+            {{ form.email }}
+          </div>
+          <span class="text-error">{{ form.email.errors }}</span>
+
+          <div class="mb-3">
+            <label class="text-normal text-dark form-label">Password</label>
+            {{ form.password }}
+          </div>
+          <span class="text-error">{{ form.password.errors }}</span>
+
+          <div class="mb-3">
+            <button type="submit" name="login" class="btn btn-primary">Login</button>
+
+            &nbsp; &nbsp;
+            <span class="text-small font-weight-semibold">Not a member?</span>
+            <a href="{% url 'register' %}" class="text-black text-small">Register</a>  
+          </div>
+
+        </form>
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/accounts/profile.html

@@ -0,0 +1,49 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Profile {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+<!-- ### $App Screen Content ### -->
+<main class='main-content bgc-grey-100'>
+    <div id='mainContent'>
+        <div class="row gap-20 masonry pos-r">
+            <div class="masonry-sizer col-md-6"></div>
+            <div class="masonry-item col-md-6">
+                <div class="bgc-white p-20 bd">
+                    <h6 class="c-grey-900">Basic Form</h6>
+                    <div class="mT-30">
+                        <form>
+                            <div class="mb-3">
+                                <label class="form-label" for="exampleInputEmail1">Email address</label>
+                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+                                <small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
+                            </div>
+                            <button type="submit" class="btn btn-primary btn-color">Submit</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="masonry-item col-md-6">
+                <div class="bgc-white p-20 bd">
+                    <div class="row pos-r justify-content-center justify-content-md-start">
+                        <div class="col-md-4 col-8">
+                            <img src="{{ request.user.icon.url }}" alt="" class="bdrs-50p w-100">
+                        </div>
+                        <div class="col-md-6">
+                            <h3>{{ request.user.name }}</h3>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/accounts/register.html

@@ -0,0 +1,91 @@
+{% extends "layouts/base-authentication.html" %}
+{% load static %}
+
+{% block title %} Register {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="peers ai-s fxw-nw h-100vh">
+      <div class="peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("{% static '/images/bg.jpg' %}")'>
+        <div class="pos-a centerXY">
+          <div class="bgc-white bdrs-50p pos-r" style='width: 120px; height: 120px;'>
+            <img class="pos-a centerXY" src="{% static '/images/logo.png' %}" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
+        
+        <h4 class="fw-300 c-grey-900 mB-40">Adminator - Register</h4>
+
+        {% if msg %}
+            <p class="fw-300 c-grey-900 mB-40">{{ msg | safe }}</p>
+        {% else %}
+            <p class="fw-300 c-grey-900 mB-40">
+              Add your credentials
+            </p>
+        {% endif %}
+
+        {% if success %}
+
+        <div class="mb-3">
+          <a href="{% url 'login' %}" class="btn btn-primary">Sign IN</a>
+        </div>
+
+        {% else %}
+
+        <form method="post" action="">
+
+          {% csrf_token %}
+
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Forename</label>
+            {{ form.forename }}
+          </div>
+          <span class="text-error">{{ form.forename.errors }}</span>
+
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Surname</label>
+            {{ form.surname }}
+          </div>
+          <span class="text-error">{{ form.surname.errors }}</span>
+
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Email Address</label>
+            {{ form.email }}
+          </div>
+          <span class="text-error">{{ form.email.errors }}</span>
+          
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Password</label>
+            {{ form.password1 }}
+          </div>
+          <span class="text-error">{{ form.password1.errors }}</span>
+          
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Password (Again)</label>
+            {{ form.password2 }}
+          </div>
+          <span class="text-error">{{ form.password2.errors }}</span>
+
+          <div class="mb-3">
+            <button type="submit" name="register" class="btn btn-primary">Register</button>
+
+            &nbsp; &nbsp;
+            <span class="text-small font-weight-semibold">Have and account?</span>
+            <a href="{% url 'login' %}" class="text-black text-small">Login</a>  
+          </div>
+          
+        </form>
+
+        {% endif %} 
+
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/basic-table.html

@@ -0,0 +1,216 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Tables {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="container-fluid">
+          <h4 class="c-grey-900 mT-10 mB-30">Basic Tables</h4>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="bgc-white bd bdrs-3 p-20 mB-20">
+                <h4 class="c-grey-900 mB-20">Simple Table</h4>
+                <p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 5</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">First Name</th>
+                      <th scope="col">Last Name</th>
+                      <th scope="col">Username</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th scope="row">1</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@mdo</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">2</th>
+                      <td>Jacob</td>
+                      <td>Thornton</td>
+                      <td>@fat</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">3</th>
+                      <td>Larry</td>
+                      <td>the Bird</td>
+                      <td>@twitter</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="bgc-white bd bdrs-3 p-20 mB-20">
+                <h4 class="c-grey-900 mB-20">Table head options</h4>
+                <p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.table-light</code> or <code class="highlighter-rouge">.table-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
+                <table class="table">
+                  <thead class="table-dark">
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">First Name</th>
+                      <th scope="col">Last Name</th>
+                      <th scope="col">Username</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th scope="row">1</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@mdo</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">2</th>
+                      <td>Jacob</td>
+                      <td>Thornton</td>
+                      <td>@fat</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">3</th>
+                      <td>Larry</td>
+                      <td>the Bird</td>
+                      <td>@twitter</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="bgc-white bd bdrs-3 p-20 mB-20">
+                <h4 class="c-grey-900 mB-20">Striped rows</h4>
+                <p>Use <code class="highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
+                <table class="table table-striped">
+                  <thead>
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">First Name</th>
+                      <th scope="col">Last Name</th>
+                      <th scope="col">Username</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th scope="row">1</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@mdo</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">2</th>
+                      <td>Jacob</td>
+                      <td>Thornton</td>
+                      <td>@fat</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">3</th>
+                      <td>Larry</td>
+                      <td>the Bird</td>
+                      <td>@twitter</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="bgc-white bd bdrs-3 p-20 mB-20">
+                <h4 class="c-grey-900 mB-20">Bordered table</h4>
+                <p>Add <code class="highlighter-rouge">.table-bordered</code> for borders on all sides of the table and cells.</p>
+                <table class="table table-bordered">
+                  <thead>
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">First Name</th>
+                      <th scope="col">Last Name</th>
+                      <th scope="col">Username</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th scope="row">1</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@mdo</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">2</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@TwBootstrap</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">3</th>
+                      <td>Jacob</td>
+                      <td>Thornton</td>
+                      <td>@fat</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">4</th>
+                      <td colspan="2">Larry the Bird</td>
+                      <td>@twitter</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <div class="bgc-white bd bdrs-3 p-20">
+                <h4 class="c-grey-900 mB-20">Hoverable rows</h4>
+                <p>Add <code class="highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
+                <table class="table table-hover">
+                  <thead>
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">First Name</th>
+                      <th scope="col">Last Name</th>
+                      <th scope="col">Username</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th scope="row">1</th>
+                      <td>Mark</td>
+                      <td>Otto</td>
+                      <td>@mdo</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">2</th>
+                      <td>Jacob</td>
+                      <td>Thornton</td>
+                      <td>@fat</td>
+                    </tr>
+                    <tr>
+                      <th scope="row">3</th>
+                      <td colspan="2">Larry the Bird</td>
+                      <td>@twitter</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/blank.html

@@ -0,0 +1,24 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+  <!-- ### $App Screen Content ### -->
+  <main class='main-content bgc-grey-100'>
+    <div id='mainContent'>
+      <div class="full-container">
+
+        <h1>Add content here</h1>
+
+      </div>
+    </div>
+  </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/calendar.html

@@ -0,0 +1,193 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Calendar {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="container-fluid">
+          <div class="row">
+            <div class="col-md-4">
+              <div class="bdrs-3 ov-h bgc-white bd">
+                <div class="bgc-deep-purple-500 ta-c p-30">
+                  <h1 class="fw-300 mB-5 lh-1 c-white">01<span class="fsz-def">st</span></h1>
+                  <h3 class="c-white">Monday</h3>
+                </div>
+                <div class="pos-r">
+                  <button type="button" class="mT-nv-50 pos-a r-10 t-2 btn cur-p bdrs-50p p-0 w-3r h-3r btn-warning">
+                    <i class="ti-plus"></i>
+                  </button>
+                  <ul class="m-0 p-0 mT-20">
+                    <li class="bdB peers ai-c jc-sb fxw-nw">
+                      <a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
+                        <div class="peer mR-15">
+                          <i class="fa fa-fw fa-clock-o c-red-500"></i>
+                        </div>
+                        <div class="peer">
+                          <span class="fw-600">All Day Event</span>
+                          <div class="c-grey-600">
+                            <span class="c-grey-700">Nov 01 - </span>
+                            <i>Website Development</i>
+                          </div>
+                        </div>
+                      </a>
+                      <div class="peers mR-15">
+                        <div class="peer">
+                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-pencil"></i>
+                          </a>
+                        </div>
+                        <div class="peer">
+                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-trash"></i>
+                          </a>
+                        </div>
+                      </div>
+                    </li>
+                    <li class="bdB peers ai-c jc-sb fxw-nw">
+                      <a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
+                        <div class="peer mR-15">
+                          <i class="fa fa-fw fa-clock-o c-blue-500"></i>
+                        </div>
+                        <div class="peer">
+                          <span class="fw-600">All Day Event</span>
+                          <div class="c-grey-600">
+                            <span class="c-grey-700">Nov 01 - </span>
+                            <i>Website Development</i>
+                          </div>
+                        </div>
+                      </a>
+                      <div class="peers mR-15">
+                        <div class="peer">
+                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-pencil"></i>
+                          </a>
+                        </div>
+                        <div class="peer">
+                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-trash"></i>
+                          </a>
+                        </div>
+                      </div>
+                    </li>
+                    <li class="bdB peers ai-c jc-sb fxw-nw">
+                      <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
+                        <div class="peer mR-15">
+                          <i class="fa fa-fw fa-clock-o c-indigo-500"></i>
+                        </div>
+                        <div class="peer">
+                          <span class="fw-600">All Day Event</span>
+                          <div class="c-grey-600">
+                            <span class="c-grey-700">Nov 01 - </span>
+                            <i>Website Development</i>
+                          </div>
+                        </div>
+                      </a>
+                      <div class="peers mR-15">
+                        <div class="peer">
+                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-pencil"></i>
+                          </a>
+                        </div>
+                        <div class="peer">
+                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-trash"></i>
+                          </a>
+                        </div>
+                      </div>
+                    </li>
+                    <li class="bdB peers ai-c jc-sb fxw-nw">
+                      <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
+                        <div class="peer mR-15">
+                          <i class="fa fa-fw fa-clock-o c-green-500"></i>
+                        </div>
+                        <div class="peer">
+                          <span class="fw-600">All Day Event</span>
+                          <div class="c-grey-600">
+                            <span class="c-grey-700">Nov 01 - </span>
+                            <i>Website Development</i>
+                          </div>
+                        </div>
+                      </a>
+                      <div class="peers mR-15">
+                        <div class="peer">
+                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-pencil"></i>
+                          </a>
+                        </div>
+                        <div class="peer">
+                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                            <i class="ti-trash"></i>
+                          </a>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-8">
+              <div id='calendar'></div>
+            </div>
+          </div>
+          <div class="modal fade" id="calendar-edit">
+            <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                <div class="bd p-15">
+                  <h5 class="m-0">Add Event</h5>
+                </div>
+                <div class="modal-body">
+                  <form>
+                    <div class="mb-3">
+                      <label class="form-label fw-500">Event title</label>
+                      <input class="form-control bdc-grey-200">
+                    </div>
+                    <div class="row">
+                      <div class="col-md-6">
+                        <label class="fw-500 form-label">Start</label>
+                        <div class="timepicker-input input-icon mb-3">
+                          <div class="input-group">
+                            <div class="input-group-text bgc-white bd bdwR-0">
+                              <i class="ti-calendar"></i>
+                            </div>
+                            <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-md-6">
+                        <label class="fw-500 form-label">End</label>
+                        <div class="timepicker-input input-icon mb-3">
+                          <div class="input-group">
+                            <div class="input-group-text bgc-white bd bdwR-0">
+                              <i class="ti-calendar"></i>
+                            </div>
+                            <input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker">
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="mb-3">
+                      <label class="fw-500 form-label">Event title</label>
+                      <textarea class="form-control bdc-grey-200" rows='5'></textarea>
+                    </div>
+                    <div class="text-end">
+                      <button class="btn btn-primary cur-p btn-color" data-dismiss="modal">Done</button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/charts.html

@@ -0,0 +1,142 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Charts {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="row gap-20 masonry pos-r">
+          <div class="masonry-sizer col-md-6 pos-a"></div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Line Chart</h6>
+              <div class="mT-30">
+                <canvas id="line-chart" height="220"></canvas>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Area Chart</h6>
+              <div class="mT-30">
+                <canvas id="area-chart" height="220"></canvas>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Scatter Chart</h6>
+              <div class="mT-30">
+                <canvas id="scatter-chart" height="220"></canvas>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Bar Chart</h6>
+              <div class="mT-30">
+                <canvas id="bar-chart" height="220"></canvas>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">jQuery Sparkline</h6>
+              <div class="mT-30">
+                <div class="peers ai-c jc-sb fxw-nw bdB pY-15">
+                  <div class="peer">
+                    <span>Spark Line</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparkline">&nbsp;</span>
+                  </div>
+                </div>
+                <div class="peers ai-c jc-sb fxw-nw bdB pY-15">
+                  <div class="peer">
+                    <span>Spark Bar</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparkbar">&nbsp;</span>
+                  </div>
+                </div>
+                <div class="peers ai-c jc-sb fxw-nw bdB pY-15">
+                  <div class="peer">
+                    <span>Spark Tristate</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparktri">&nbsp;</span>
+                  </div>
+                </div>
+                <div class="peers ai-c jc-sb fxw-nw bdB pY-15">
+                  <div class="peer">
+                    <span>Spark Discrete</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparkdisc">&nbsp;</span>
+                  </div>
+                </div>
+                <div class="peers ai-c jc-sb fxw-nw bdB pY-15">
+                  <div class="peer">
+                    <span>Spark Bullet</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparkbull">&nbsp;</span>
+                  </div>
+                </div>
+                <div class="peers ai-c jc-sb fxw-nw pT-15">
+                  <div class="peer">
+                    <span>Spark Box</span>
+                  </div>
+                  <div class="peer">
+                    <span class="sparkbox">&nbsp;</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Easy Pie Charts</h6>
+              <div class="mT-30">
+                <div class="peers mT-20 fxw-nw@lg+ jc-sb ta-c gap-10">
+                  <div class="peer">
+                    <div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#f44336'>
+                      <span></span>
+                    </div>
+                    <h6 class="fsz-sm">New Users</h6>
+                  </div>
+                  <div class="peer">
+                    <div class="easy-pie-chart" data-size='80' data-percent="50" data-bar-color='#2196f3'>
+                      <span></span>
+                    </div>
+                    <h6 class="fsz-sm">New Purchases</h6>
+                  </div>
+                  <div class="peer">
+                    <div class="easy-pie-chart" data-size='80' data-percent="65" data-bar-color='#f44336'>
+                      <span></span>
+                    </div>
+                    <h6 class="fsz-sm">New Customers</h6>
+                  </div>
+                  <div class="peer">
+                    <div class="easy-pie-chart" data-size='80' data-percent="90" data-bar-color='#ff9800'>
+                      <span></span>
+                    </div>
+                    <h6 class="fsz-sm">Bounce Rate</h6>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/chat.html

@@ -0,0 +1,231 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Charts {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="full-container">
+          <div class="peers fxw-nw pos-r">
+            <!-- Sidebar -->
+            <div class="peer bdR" id="chat-sidebar">
+              <div class="layers h-100">
+                <!-- Search -->
+                <div class="bdB layer w-100">
+                  <input type="text" placeholder="Search contacts..." name="chatSearch" class="form-constrol p-15 bdrs-0 w-100 bdw-0">
+                </div>
+
+                <!-- List -->
+                <div class="layer w-100 fxg-1 scrollable pos-r">
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">John Doe</h6>
+                      <small class="lh-1 c-green-500">Online</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
+                      <small class="lh-1 c-amber-500">Away</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
+                      <small class="lh-1 c-grey-500">Offline</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
+                      <small class="lh-1 c-red-500">Busy</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">John Doe</h6>
+                      <small class="lh-1 c-green-500">Online</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
+                      <small class="lh-1 c-amber-500">Away</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
+                      <small class="lh-1 c-grey-500">Offline</small>
+                    </div>
+                  </div>
+                  <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                    <div class="peer">
+                      <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer peer-greed pL-20">
+                      <h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
+                      <small class="lh-1 c-red-500">Busy</small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Chat Box -->
+            <div class="peer peer-greed" id='chat-box'>
+              <div class="layers h-100">
+                <div class="layer w-100">
+                  <!-- Header -->
+                  <div class="peers fxw-nw jc-sb ai-c pY-20 pX-30 bgc-white">
+                    <div class="peers ai-c">
+                      <div class="peer d-n@md+">
+                        <a href="" title="" id='chat-sidebar-toggle' class="td-n c-grey-900 cH-blue-500 mR-30">
+                          <i class="ti-menu"></i>
+                        </a>
+                      </div>
+                      <div class="peer mR-20">
+                        <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                      </div>
+                      <div class="peer">
+                        <h6 class="lh-1 mB-0">John Doe</h6>
+                        <i class="fsz-sm lh-1">Typing...</i>
+                      </div>
+                    </div>
+                    <div class="peers">
+                      <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
+                        <i class="ti-video-camera"></i>
+                      </a>
+                      <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
+                        <i class="ti-headphone"></i>
+                      </a>
+                      <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md" title="">
+                        <i class="ti-more"></i>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div class="layer w-100 fxg-1 bgc-grey-200 scrollable pos-r">
+                  <!-- Chat Box -->
+                  <div class="p-20 gapY-15">
+                    <!-- Chat Conversation -->
+                    <div class="peers fxw-nw">
+                      <div class="peer mR-20">
+                        <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed">
+                        <div class="layers ai-fs gapY-5">
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>Lorem Ipsum is simply dummy text of</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>the printing and typesetting industry.</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>Lorem Ipsum has been the industry's</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Chat Conversation -->
+                    <div class="peers fxw-nw ai-fe">
+                      <div class="peer ord-1 mL-20">
+                        <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed ord-0">
+                        <div class="layers ai-fe gapY-10">
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mL-10 ord-1">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed ord-0">
+                                <span>Heloo</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mL-10 ord-1">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed ord-0">
+                                <span>??</span>
+                              </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                </div>
+                <div class="layer w-100">
+                  <!-- Chat Send -->
+                  <div class="p-20 bdT bgc-white">
+                    <div class="pos-r">
+                      <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
+                      <button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1 btn-color">
+                        <i class="fa fa-paper-plane-o"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/compose.html

@@ -0,0 +1,144 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Compose {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="full-container">
+          <div class="email-app">
+          <div class="email-side-nav remain-height ov-h">
+            <div class="h-100 layers">
+              <div class="p-20 bgc-grey-100 layer w-100">
+                <a href="/compose" class="btn btn-danger d-grid">New Message</a>
+              </div>
+              <div class="scrollable pos-r bdT layer w-100 fxg-1">
+                <ul class="p-20 nav flex-column">
+                  <li class="nav-item">
+                    <a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-email"></i>
+                          <span>Inbox</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-share"></i>
+                          <span>Sent</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-star"></i>
+                          <span>Important</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-file"></i>
+                          <span>Drafts</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-alert"></i>
+                          <span>Spam</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                      <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                          <i class="mR-10 ti-trash"></i>
+                          <span>Trash</span>
+                        </div>
+                        <div class="peer">
+                          <span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="email-wrapper row remain-height pos-r scrollable bgc-white">
+            <div class="email-content open no-inbox-view">
+              <div class="email-compose">
+                <div class="d-n@md+ p-20">
+                  <a class="email-side-toggle c-grey-900 cH-blue-500 td-n" href="javascript:void(0)">
+                    <i class="ti-menu"></i>
+                  </a>
+                </div>
+                <form class="email-compose-body">
+                  <h4 class="c-grey-900 mB-20">Send Message</h4>
+                  <div class="send-header">
+                    <div class="mb-3">
+                      <input type="text" class='form-control' placeholder="To">
+                    </div>
+                    <div class="mb-3">
+                      <input type="text" class='form-control' placeholder="CC">
+                    </div>
+                    <div class="mb-3">
+                      <input class="form-control" placeholder="Email Subject">
+                    </div>
+                    <div class="mb-3">
+                      <textarea name="compose" class="form-control" placeholder="Say Hi..." rows='10'></textarea>
+                    </div>
+                  </div>
+                  <div id="compose-area"></div>
+                  <div class="text-end mrg-top-30">
+                    <button class="btn btn-danger btn-color">Send</button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/datatable.html

@@ -0,0 +1,509 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Data Tables {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+      <!-- ### $App Screen Content ### -->
+      <main class='main-content bgc-grey-100'>
+        <div id='mainContent'>
+          <div class="container-fluid">
+            <h4 class="c-grey-900 mT-10 mB-30">Data Tables</h4>
+            <div class="row">
+              <div class="col-md-12">
+                <div class="bgc-white bd bdrs-3 p-20 mB-20">
+                  <h4 class="c-grey-900 mB-20">Bootstrap Data Table</h4>
+                  <table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
+                      <thead>
+                        <tr>
+                          <th>Name</th>
+                          <th>Position</th>
+                          <th>Office</th>
+                          <th>Age</th>
+                          <th>Start date</th>
+                          <th>Salary</th>
+                        </tr>
+                      </thead>
+                      <tfoot>
+                        <tr>
+                          <th>Name</th>
+                          <th>Position</th>
+                          <th>Office</th>
+                          <th>Age</th>
+                          <th>Start date</th>
+                          <th>Salary</th>
+                        </tr>
+                      </tfoot>
+                      <tbody>
+                        <tr>
+                          <td>Tiger Nixon</td>
+                          <td>System Architect</td>
+                          <td>Edinburgh</td>
+                          <td>61</td>
+                          <td>2011/04/25</td>
+                          <td>$320,800</td>
+                        </tr>
+                        <tr>
+                          <td>Garrett Winters</td>
+                          <td>Accountant</td>
+                          <td>Tokyo</td>
+                          <td>63</td>
+                          <td>2011/07/25</td>
+                          <td>$170,750</td>
+                        </tr>
+                        <tr>
+                          <td>Ashton Cox</td>
+                          <td>Junior Technical Author</td>
+                          <td>San Francisco</td>
+                          <td>66</td>
+                          <td>2009/01/12</td>
+                          <td>$86,000</td>
+                        </tr>
+                        <tr>
+                          <td>Cedric Kelly</td>
+                          <td>Senior Javascript Developer</td>
+                          <td>Edinburgh</td>
+                          <td>22</td>
+                          <td>2012/03/29</td>
+                          <td>$433,060</td>
+                        </tr>
+                        <tr>
+                          <td>Airi Satou</td>
+                          <td>Accountant</td>
+                          <td>Tokyo</td>
+                          <td>33</td>
+                          <td>2008/11/28</td>
+                          <td>$162,700</td>
+                        </tr>
+                        <tr>
+                          <td>Brielle Williamson</td>
+                          <td>Integration Specialist</td>
+                          <td>New York</td>
+                          <td>61</td>
+                          <td>2012/12/02</td>
+                          <td>$372,000</td>
+                        </tr>
+                        <tr>
+                          <td>Herrod Chandler</td>
+                          <td>Sales Assistant</td>
+                          <td>San Francisco</td>
+                          <td>59</td>
+                          <td>2012/08/06</td>
+                          <td>$137,500</td>
+                        </tr>
+                        <tr>
+                          <td>Rhona Davidson</td>
+                          <td>Integration Specialist</td>
+                          <td>Tokyo</td>
+                          <td>55</td>
+                          <td>2010/10/14</td>
+                          <td>$327,900</td>
+                        </tr>
+                        <tr>
+                          <td>Colleen Hurst</td>
+                          <td>Javascript Developer</td>
+                          <td>San Francisco</td>
+                          <td>39</td>
+                          <td>2009/09/15</td>
+                          <td>$205,500</td>
+                        </tr>
+                        <tr>
+                          <td>Sonya Frost</td>
+                          <td>Software Engineer</td>
+                          <td>Edinburgh</td>
+                          <td>23</td>
+                          <td>2008/12/13</td>
+                          <td>$103,600</td>
+                        </tr>
+                        <tr>
+                          <td>Jena Gaines</td>
+                          <td>Office Manager</td>
+                          <td>London</td>
+                          <td>30</td>
+                          <td>2008/12/19</td>
+                          <td>$90,560</td>
+                        </tr>
+                        <tr>
+                          <td>Quinn Flynn</td>
+                          <td>Support Lead</td>
+                          <td>Edinburgh</td>
+                          <td>22</td>
+                          <td>2013/03/03</td>
+                          <td>$342,000</td>
+                        </tr>
+                        <tr>
+                          <td>Charde Marshall</td>
+                          <td>Regional Director</td>
+                          <td>San Francisco</td>
+                          <td>36</td>
+                          <td>2008/10/16</td>
+                          <td>$470,600</td>
+                        </tr>
+                        <tr>
+                          <td>Haley Kennedy</td>
+                          <td>Senior Marketing Designer</td>
+                          <td>London</td>
+                          <td>43</td>
+                          <td>2012/12/18</td>
+                          <td>$313,500</td>
+                        </tr>
+                        <tr>
+                          <td>Tatyana Fitzpatrick</td>
+                          <td>Regional Director</td>
+                          <td>London</td>
+                          <td>19</td>
+                          <td>2010/03/17</td>
+                          <td>$385,750</td>
+                        </tr>
+                        <tr>
+                          <td>Michael Silva</td>
+                          <td>Marketing Designer</td>
+                          <td>London</td>
+                          <td>66</td>
+                          <td>2012/11/27</td>
+                          <td>$198,500</td>
+                        </tr>
+                        <tr>
+                          <td>Paul Byrd</td>
+                          <td>Chief Financial Officer (CFO)</td>
+                          <td>New York</td>
+                          <td>64</td>
+                          <td>2010/06/09</td>
+                          <td>$725,000</td>
+                        </tr>
+                        <tr>
+                          <td>Gloria Little</td>
+                          <td>Systems Administrator</td>
+                          <td>New York</td>
+                          <td>59</td>
+                          <td>2009/04/10</td>
+                          <td>$237,500</td>
+                        </tr>
+                        <tr>
+                          <td>Bradley Greer</td>
+                          <td>Software Engineer</td>
+                          <td>London</td>
+                          <td>41</td>
+                          <td>2012/10/13</td>
+                          <td>$132,000</td>
+                        </tr>
+                        <tr>
+                          <td>Dai Rios</td>
+                          <td>Personnel Lead</td>
+                          <td>Edinburgh</td>
+                          <td>35</td>
+                          <td>2012/09/26</td>
+                          <td>$217,500</td>
+                        </tr>
+                        <tr>
+                          <td>Jenette Caldwell</td>
+                          <td>Development Lead</td>
+                          <td>New York</td>
+                          <td>30</td>
+                          <td>2011/09/03</td>
+                          <td>$345,000</td>
+                        </tr>
+                        <tr>
+                          <td>Yuri Berry</td>
+                          <td>Chief Marketing Officer (CMO)</td>
+                          <td>New York</td>
+                          <td>40</td>
+                          <td>2009/06/25</td>
+                          <td>$675,000</td>
+                        </tr>
+                        <tr>
+                          <td>Caesar Vance</td>
+                          <td>Pre-Sales Support</td>
+                          <td>New York</td>
+                          <td>21</td>
+                          <td>2011/12/12</td>
+                          <td>$106,450</td>
+                        </tr>
+                        <tr>
+                          <td>Doris Wilder</td>
+                          <td>Sales Assistant</td>
+                          <td>Sidney</td>
+                          <td>23</td>
+                          <td>2010/09/20</td>
+                          <td>$85,600</td>
+                        </tr>
+                        <tr>
+                          <td>Angelica Ramos</td>
+                          <td>Chief Executive Officer (CEO)</td>
+                          <td>London</td>
+                          <td>47</td>
+                          <td>2009/10/09</td>
+                          <td>$1,200,000</td>
+                        </tr>
+                        <tr>
+                          <td>Gavin Joyce</td>
+                          <td>Developer</td>
+                          <td>Edinburgh</td>
+                          <td>42</td>
+                          <td>2010/12/22</td>
+                          <td>$92,575</td>
+                        </tr>
+                        <tr>
+                          <td>Jennifer Chang</td>
+                          <td>Regional Director</td>
+                          <td>Singapore</td>
+                          <td>28</td>
+                          <td>2010/11/14</td>
+                          <td>$357,650</td>
+                        </tr>
+                        <tr>
+                          <td>Brenden Wagner</td>
+                          <td>Software Engineer</td>
+                          <td>San Francisco</td>
+                          <td>28</td>
+                          <td>2011/06/07</td>
+                          <td>$206,850</td>
+                        </tr>
+                        <tr>
+                          <td>Fiona Green</td>
+                          <td>Chief Operating Officer (COO)</td>
+                          <td>San Francisco</td>
+                          <td>48</td>
+                          <td>2010/03/11</td>
+                          <td>$850,000</td>
+                        </tr>
+                        <tr>
+                          <td>Shou Itou</td>
+                          <td>Regional Marketing</td>
+                          <td>Tokyo</td>
+                          <td>20</td>
+                          <td>2011/08/14</td>
+                          <td>$163,000</td>
+                        </tr>
+                        <tr>
+                          <td>Michelle House</td>
+                          <td>Integration Specialist</td>
+                          <td>Sidney</td>
+                          <td>37</td>
+                          <td>2011/06/02</td>
+                          <td>$95,400</td>
+                        </tr>
+                        <tr>
+                          <td>Suki Burks</td>
+                          <td>Developer</td>
+                          <td>London</td>
+                          <td>53</td>
+                          <td>2009/10/22</td>
+                          <td>$114,500</td>
+                        </tr>
+                        <tr>
+                          <td>Prescott Bartlett</td>
+                          <td>Technical Author</td>
+                          <td>London</td>
+                          <td>27</td>
+                          <td>2011/05/07</td>
+                          <td>$145,000</td>
+                        </tr>
+                        <tr>
+                          <td>Gavin Cortez</td>
+                          <td>Team Leader</td>
+                          <td>San Francisco</td>
+                          <td>22</td>
+                          <td>2008/10/26</td>
+                          <td>$235,500</td>
+                        </tr>
+                        <tr>
+                          <td>Martena Mccray</td>
+                          <td>Post-Sales support</td>
+                          <td>Edinburgh</td>
+                          <td>46</td>
+                          <td>2011/03/09</td>
+                          <td>$324,050</td>
+                        </tr>
+                        <tr>
+                          <td>Unity Butler</td>
+                          <td>Marketing Designer</td>
+                          <td>San Francisco</td>
+                          <td>47</td>
+                          <td>2009/12/09</td>
+                          <td>$85,675</td>
+                        </tr>
+                        <tr>
+                          <td>Howard Hatfield</td>
+                          <td>Office Manager</td>
+                          <td>San Francisco</td>
+                          <td>51</td>
+                          <td>2008/12/16</td>
+                          <td>$164,500</td>
+                        </tr>
+                        <tr>
+                          <td>Hope Fuentes</td>
+                          <td>Secretary</td>
+                          <td>San Francisco</td>
+                          <td>41</td>
+                          <td>2010/02/12</td>
+                          <td>$109,850</td>
+                        </tr>
+                        <tr>
+                          <td>Vivian Harrell</td>
+                          <td>Financial Controller</td>
+                          <td>San Francisco</td>
+                          <td>62</td>
+                          <td>2009/02/14</td>
+                          <td>$452,500</td>
+                        </tr>
+                        <tr>
+                          <td>Timothy Mooney</td>
+                          <td>Office Manager</td>
+                          <td>London</td>
+                          <td>37</td>
+                          <td>2008/12/11</td>
+                          <td>$136,200</td>
+                        </tr>
+                        <tr>
+                          <td>Jackson Bradshaw</td>
+                          <td>Director</td>
+                          <td>New York</td>
+                          <td>65</td>
+                          <td>2008/09/26</td>
+                          <td>$645,750</td>
+                        </tr>
+                        <tr>
+                          <td>Olivia Liang</td>
+                          <td>Support Engineer</td>
+                          <td>Singapore</td>
+                          <td>64</td>
+                          <td>2011/02/03</td>
+                          <td>$234,500</td>
+                        </tr>
+                        <tr>
+                          <td>Bruno Nash</td>
+                          <td>Software Engineer</td>
+                          <td>London</td>
+                          <td>38</td>
+                          <td>2011/05/03</td>
+                          <td>$163,500</td>
+                        </tr>
+                        <tr>
+                          <td>Sakura Yamamoto</td>
+                          <td>Support Engineer</td>
+                          <td>Tokyo</td>
+                          <td>37</td>
+                          <td>2009/08/19</td>
+                          <td>$139,575</td>
+                        </tr>
+                        <tr>
+                          <td>Thor Walton</td>
+                          <td>Developer</td>
+                          <td>New York</td>
+                          <td>61</td>
+                          <td>2013/08/11</td>
+                          <td>$98,540</td>
+                        </tr>
+                        <tr>
+                          <td>Finn Camacho</td>
+                          <td>Support Engineer</td>
+                          <td>San Francisco</td>
+                          <td>47</td>
+                          <td>2009/07/07</td>
+                          <td>$87,500</td>
+                        </tr>
+                        <tr>
+                          <td>Serge Baldwin</td>
+                          <td>Data Coordinator</td>
+                          <td>Singapore</td>
+                          <td>64</td>
+                          <td>2012/04/09</td>
+                          <td>$138,575</td>
+                        </tr>
+                        <tr>
+                          <td>Zenaida Frank</td>
+                          <td>Software Engineer</td>
+                          <td>New York</td>
+                          <td>63</td>
+                          <td>2010/01/04</td>
+                          <td>$125,250</td>
+                        </tr>
+                        <tr>
+                          <td>Zorita Serrano</td>
+                          <td>Software Engineer</td>
+                          <td>San Francisco</td>
+                          <td>56</td>
+                          <td>2012/06/01</td>
+                          <td>$115,000</td>
+                        </tr>
+                        <tr>
+                          <td>Jennifer Acosta</td>
+                          <td>Junior Javascript Developer</td>
+                          <td>Edinburgh</td>
+                          <td>43</td>
+                          <td>2013/02/01</td>
+                          <td>$75,650</td>
+                        </tr>
+                        <tr>
+                          <td>Cara Stevens</td>
+                          <td>Sales Assistant</td>
+                          <td>New York</td>
+                          <td>46</td>
+                          <td>2011/12/06</td>
+                          <td>$145,600</td>
+                        </tr>
+                        <tr>
+                          <td>Hermione Butler</td>
+                          <td>Regional Director</td>
+                          <td>London</td>
+                          <td>47</td>
+                          <td>2011/03/21</td>
+                          <td>$356,250</td>
+                        </tr>
+                        <tr>
+                          <td>Lael Greer</td>
+                          <td>Systems Administrator</td>
+                          <td>London</td>
+                          <td>21</td>
+                          <td>2009/02/27</td>
+                          <td>$103,500</td>
+                        </tr>
+                        <tr>
+                          <td>Jonas Alexander</td>
+                          <td>Developer</td>
+                          <td>San Francisco</td>
+                          <td>30</td>
+                          <td>2010/07/14</td>
+                          <td>$86,500</td>
+                        </tr>
+                        <tr>
+                          <td>Shad Decker</td>
+                          <td>Regional Director</td>
+                          <td>Edinburgh</td>
+                          <td>51</td>
+                          <td>2008/11/13</td>
+                          <td>$183,000</td>
+                        </tr>
+                        <tr>
+                          <td>Michael Bruce</td>
+                          <td>Javascript Developer</td>
+                          <td>Singapore</td>
+                          <td>29</td>
+                          <td>2011/06/27</td>
+                          <td>$183,000</td>
+                        </tr>
+                        <tr>
+                          <td>Donna Snider</td>
+                          <td>Customer Support</td>
+                          <td>New York</td>
+                          <td>27</td>
+                          <td>2011/01/25</td>
+                          <td>$112,000</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/email.html

@@ -0,0 +1,513 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Email {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="full-container">
+          <div class="email-app">
+            <div class="email-side-nav remain-height ov-h">
+              <div class="h-100 layers">
+                <div class="p-20 bgc-grey-100 layer w-100">
+                  <a href="/compose" class="btn btn-danger d-grid">New Message</a>
+                </div>
+                <div class="scrollable pos-r bdT layer w-100 fxg-1">
+                  <ul class="p-20 nav flex-column">
+                    <li class="nav-item">
+                      <a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-email"></i>
+                            <span>Inbox</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="" class="nav-link c-grey-800 cH-blue-500">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-share"></i>
+                            <span>Sent</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="" class="nav-link c-grey-800 cH-blue-500">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-star"></i>
+                            <span>Important</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="" class="nav-link c-grey-800 cH-blue-500">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-file"></i>
+                            <span>Drafts</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="" class="nav-link c-grey-800 cH-blue-500">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-alert"></i>
+                            <span>Spam</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="" class="nav-link c-grey-800 cH-blue-500">
+                        <div class="peers ai-c jc-sb">
+                          <div class="peer peer-greed">
+                            <i class="mR-10 ti-trash"></i>
+                            <span>Trash</span>
+                          </div>
+                          <div class="peer">
+                            <span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          <div class="email-wrapper row remain-height bgc-white ov-h">
+            <div class="email-list h-100 layers">
+              <div class="layer w-100">
+                <div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw">
+                  <div class="peer">
+                    <div class="btn-group" role="group">
+                      <button type="button" class="email-side-toggle d-n@md+ btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-menu"></i>
+                      </button>
+                      <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-folder"></i>
+                      </button>
+                      <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-tag"></i>
+                      </button>
+                      <div class="btn-group" role="group">
+                        <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="ti-more-alt"></i>
+                        </button>
+                        <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-trash mR-10"></i>
+                              <span>Delete</span>
+                            </a>
+                          </li>
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-alert mR-10"></i>
+                              <span>Mark as Spam</span>
+                            </a>
+                          </li>
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-star mR-10"></i>
+                              <span>Star</span>
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="peer">
+                    <div class="btn-group" role="group">
+                      <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-angle-left"></i>
+                      </button>
+                      <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-angle-right"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="layer w-100">
+                <div class="bdT bdB">
+                  <input type="text" class="form-control m-0 bdw-0 pY-15 pX-20" placeholder="Search...">
+                </div>
+              </div>
+              <div class="layer w-100 fxg-1 scrollable pos-r">
+                <div class="">
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                  <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                    <div class="peer mR-10">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
+                      </div>
+                    </div>
+                    <div class="peer peer-greed ov-h">
+                      <div class="peers ai-c">
+                        <div class="peer peer-greed">
+                          <h6>John Doe</h6>
+                        </div>
+                        <div class="peer">
+                          <small>1 min ago</small>
+                        </div>
+                      </div>
+                      <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                      <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="email-content h-100">
+              <div class="h-100 scrollable pos-r">
+                <div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw d-n@md+">
+                  <div class="peer">
+                    <div class="btn-group" role="group">
+                      <button type="button" class="back-to-mailbox btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-angle-left"></i>
+                      </button>
+                      <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-folder"></i>
+                      </button>
+                      <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-tag"></i>
+                      </button>
+                      <div class="btn-group" role="group">
+                        <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          <i class="ti-more-alt"></i>
+                        </button>
+                        <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-trash mR-10"></i>
+                              <span>Delete</span>
+                            </a>
+                          </li>
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-alert mR-10"></i>
+                              <span>Mark as Spam</span>
+                            </a>
+                          </li>
+                          <li>
+                            <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                              <i class="ti-star mR-10"></i>
+                              <span>Star</span>
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="peer">
+                    <div class="btn-group" role="group">
+                      <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-angle-left"></i>
+                      </button>
+                      <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                        <i class="ti-angle-right"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="email-content-wrapper">
+                  <!-- Header -->
+                  <div class="peers ai-c jc-sb pX-40 pY-30">
+                    <div class="peers peer-greed">
+                      <div class="peer mR-20">
+                        <img class="bdrs-50p w-3r h-3r" alt="" src="https://randomuser.me/api/portraits/men/11.jpg">
+                      </div>
+                      <div class="peer">
+                        <small>Nov, 02 2017</small>
+                        <h5 class="c-grey-900 mB-5">John Doe</h5>
+                        <span>To: email@gmail.com</span>
+                      </div>
+                    </div>
+                    <div class="peer">
+                      <a href="" class="btn btn-danger bdrs-50p p-15 lh-0">
+                        <i class="fa fa-reply"></i>
+                      </a>
+                    </div>
+                  </div>
+
+                  <!-- Content -->
+                  <div class="bdT pX-40 pY-30">
+                    <h4>Title of this email goes here</h4>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/forms.html

@@ -0,0 +1,261 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Forms {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="row gap-20 masonry pos-r">
+          <div class="masonry-sizer col-md-6"></div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Basic Form</h6>
+              <div class="mT-30">
+                <form>
+                  <div class="mb-3">
+                    <label class="form-label" for="exampleInputEmail1">Email address</label>
+                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+                    <small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
+                  </div>
+                  <div class="mb-3">
+                    <label class="form-label" for="exampleInputPassword1">Password</label>
+                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+                  </div>
+                  <div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
+                      <span class="peer peer-greed">Call John for Dinner</span>
+                    </label>
+                  </div>
+                  <button type="submit" class="btn btn-primary btn-color">Submit</button>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Complex Form Layout</h6>
+              <div class="mT-30">
+                <form>
+                  <div class="row">
+                    <div class="mb-3 col-md-6">
+                      <label class="form-label" for="inputEmail4">Email</label>
+                      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
+                    </div>
+                    <div class="mb-3 col-md-6">
+                      <label class="form-label" for="inputPassword4">Password</label>
+                      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
+                    </div>
+                  </div>
+                  <div class="mb-3">
+                    <label class="form-label" for="inputAddress">Address</label>
+                    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
+                  </div>
+                  <div class="mb-3">
+                    <label class="form-label" for="inputAddress2">Address 2</label>
+                    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
+                  </div>
+                  <div class="row">
+                    <div class="mb-3 col-md-6">
+                      <label class="form-label" for="inputCity">City</label>
+                      <input type="text" class="form-control" id="inputCity">
+                    </div>
+                    <div class="mb-3 col-md-4">
+                      <label class="form-label" for="inputState">State</label>
+                      <select id="inputState" class="form-control">
+                        <option selected>Choose...</option>
+                        <option>...</option>
+                      </select>
+                    </div>
+                    <div class="mb-3 col-md-2">
+                      <label class="form-label" for="inputZip">Zip</label>
+                      <input type="text" class="form-control" id="inputZip">
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="mb-3 col-md-6">
+                      <label class="form-label fw-500">Birthdate</label>
+                      <div class="timepicker-input input-icon mb-3">
+                        <div class="input-group">
+                          <div class="input-group-text bgc-white bd bdwR-0">
+                            <i class="ti-calendar"></i>
+                          </div>
+                          <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="mb-3">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                      <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
+                      <label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
+                        <span class="peer peer-greed">Call John for Dinner</span>
+                      </label>
+                    </div>
+                  </div>
+                  <button type="submit" class="btn btn-primary btn-color">Sign in</button>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Horizontal Form</h6>
+              <div class="mT-30">
+                <form>
+                  <div class="mb-3 row">
+                    <label for="inputEmail3" class="form-label 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="mb-3 row">
+                    <label for="inputPassword3" class="form-label 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>
+                  <fieldset class="mb-3">
+                    <div class="row">
+                      <legend class="col-form-legend col-sm-2">Radios</legend>
+                      <div class="col-sm-10">
+                        <div class="form-check">
+                          <label class="form-label form-check-label">
+                            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
+                            Option one is this and that&mdash;be sure to include why it's great
+                          </label>
+                        </div>
+                        <div class="form-check">
+                          <label class="form-label form-check-label">
+                            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
+                            Option two can be something else and selecting it will deselect option one
+                          </label>
+                        </div>
+                        <div class="form-check disabled">
+                          <label class="form-label form-check-label">
+                            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
+                            Option three is disabled
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </fieldset>
+                  <div class="mb-3 row">
+                    <div class="col-sm-2">Checkbox</div>
+                    <div class="col-sm-10">
+                      <div class="form-check">
+                        <label class="form-label form-check-label">
+                          <input class="form-check-input" type="checkbox"> Check me out
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="mb-3 row">
+                    <div class="col-sm-10">
+                      <button type="submit" class="btn btn-primary btn-color">Sign in</button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Disabled Forms</h6>
+              <div class="mT-30">
+                <form>
+                  <fieldset disabled>
+                    <div class="mb-3">
+                      <label class="form-label" for="disabledTextInput">Disabled input</label>
+                      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
+                    </div>
+                    <div class="mb-3">
+                      <label class="form-label" for="disabledSelect">Disabled select menu</label>
+                      <select id="disabledSelect" class="form-control">
+                        <option>Disabled select</option>
+                      </select>
+                    </div>
+                    <div class="form-check">
+                      <label class="form-label" class="form-check-label">
+                        <input class="form-check-input" type="checkbox"> Can't check this
+                      </label>
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-color">Submit</button>
+                  </fieldset>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <div class="bgc-white p-20 bd">
+              <h6 class="c-grey-900">Validation</h6>
+              <div class="mT-30">
+                <form class="container" id="needs-validation" novalidate>
+                  <div class="row">
+                    <div class="col-md-6 mb-3">
+                      <label class="form-label" for="validationCustom01">First name</label>
+                      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
+                    </div>
+                    <div class="col-md-6 mb-3">
+                      <label class="form-label" for="validationCustom02">Last name</label>
+                      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-6 mb-3">
+                      <label class="form-label" for="validationCustom03">City</label>
+                      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
+                      <div class="invalid-feedback">
+                        Please provide a valid city.
+                      </div>
+                    </div>
+                    <div class="col-md-3 mb-3">
+                      <label class="form-label" for="validationCustom04">State</label>
+                      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
+                      <div class="invalid-feedback">
+                        Please provide a valid state.
+                      </div>
+                    </div>
+                    <div class="col-md-3 mb-3">
+                      <label class="form-label" for="validationCustom05">Zip</label>
+                      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
+                      <div class="invalid-feedback">
+                        Please provide a valid zip.
+                      </div>
+                    </div>
+                  </div>
+                  <button class="btn btn-primary btn-color" type="submit">Submit form</button>
+                </form>
+                <script>
+                  // Example starter JavaScript for disabling form submissions if there are invalid fields
+                  (function() {
+                    'use strict';
+
+                    window.addEventListener('load', function() {
+                      var form = document.getElementById('needs-validation');
+                      form.addEventListener('submit', function(event) {
+                        if (form.checkValidity() === false) {
+                          event.preventDefault();
+                          event.stopPropagation();
+                        }
+                        form.classList.add('was-validated');
+                      }, false);
+                    }, false);
+                  })();
+                </script>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/google-maps.html

@@ -0,0 +1,31 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Forms {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+  <!-- ### $App Screen Content ### -->
+  <main class='main-content bgc-grey-100'>
+    <div id='mainContent'>
+      <div class="container-fluid">
+        <h4 class="c-grey-900 mT-10 mB-30">Google Maps</h4>
+        <div class="row">
+          <div class="col-md-12">
+            <div class="bgc-white bd bdrs-3 p-20 mB-20">
+              <h6 class="c-grey-900 mB-20">Google Maps</h6>
+              <div id="google-map" style="padding-bottom: 75%;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/index.html

@@ -0,0 +1,592 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Dashboard {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- ### $App Screen Content ### -->
+    <main class='main-content bgc-grey-100'>
+      <div id='mainContent'>
+        <div class="row gap-20 masonry pos-r">
+          <div class="masonry-sizer col-md-6"></div>
+          <div class="masonry-item  w-100">
+            <div class="row gap-20">
+              <!-- #Toatl Visits ==================== -->
+              <div class='col-md-3'>
+                <div class="layers bd bgc-white p-20">
+                  <div class="layer w-100 mB-10">
+                    <h6 class="lh-1">Total Visits</h6>
+                  </div>
+                  <div class="layer w-100">
+                    <div class="peers ai-sb fxw-nw">
+                      <div class="peer peer-greed">
+                        <span id="sparklinedash"></span>
+                      </div>
+                      <div class="peer">
+                        <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">+10%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- #Total Page Views ==================== -->
+              <div class='col-md-3'>
+                <div class="layers bd bgc-white p-20">
+                  <div class="layer w-100 mB-10">
+                    <h6 class="lh-1">Total Page Views</h6>
+                  </div>
+                  <div class="layer w-100">
+                    <div class="peers ai-sb fxw-nw">
+                      <div class="peer peer-greed">
+                        <span id="sparklinedash2"></span>
+                      </div>
+                      <div class="peer">
+                        <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-red-50 c-red-500">-7%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- #Unique Visitors ==================== -->
+              <div class='col-md-3'>
+                <div class="layers bd bgc-white p-20">
+                  <div class="layer w-100 mB-10">
+                    <h6 class="lh-1">Unique Visitor</h6>
+                  </div>
+                  <div class="layer w-100">
+                    <div class="peers ai-sb fxw-nw">
+                      <div class="peer peer-greed">
+                        <span id="sparklinedash3"></span>
+                      </div>
+                      <div class="peer">
+                        <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">~12%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- #Bounce Rate ==================== -->
+              <div class='col-md-3'>
+                <div class="layers bd bgc-white p-20">
+                  <div class="layer w-100 mB-10">
+                    <h6 class="lh-1">Bounce Rate</h6>
+                  </div>
+                  <div class="layer w-100">
+                    <div class="peers ai-sb fxw-nw">
+                      <div class="peer peer-greed">
+                        <span id="sparklinedash4"></span>
+                      </div>
+                      <div class="peer">
+                        <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">33%</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-12">
+            <!-- #Site Visits ==================== -->
+            <div class="bd bgc-white">
+              <div class="peers fxw-nw@lg+ ai-s">
+                <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
+                  <div class="layers">
+                    <div class="layer w-100 mB-10">
+                      <h6 class="lh-1">Site Visits</h6>
+                    </div>
+                    <div class="layer w-100">
+                      <div id="world-map-marker"></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
+                  <div class="layers">
+                    <div class="layer w-100">
+                      <!-- Progress Bars -->
+                      <div class="layers">
+                        <div class="layer w-100">
+                          <h5 class="mB-5">100k</h5>
+                          <small class="fw-600 c-grey-700">Visitors From USA</small>
+                          <span class="pull-right c-grey-600 fsz-sm">50%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="visually-hidden">50% Complete</span></div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 mT-15">
+                          <h5 class="mB-5">1M</h5>
+                          <small class="fw-600 c-grey-700">Visitors From Europe</small>
+                          <span class="pull-right c-grey-600 fsz-sm">80%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="visually-hidden">80% Complete</span></div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 mT-15">
+                          <h5 class="mB-5">450k</h5>
+                          <small class="fw-600 c-grey-700">Visitors From Australia</small>
+                          <span class="pull-right c-grey-600 fsz-sm">40%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="visually-hidden">40% Complete</span></div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 mT-15">
+                          <h5 class="mB-5">1B</h5>
+                          <small class="fw-600 c-grey-700">Visitors From India</small>
+                          <span class="pull-right c-grey-600 fsz-sm">90%</span>
+                          <div class="progress mT-10">
+                            <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="visually-hidden">90% Complete</span></div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <!-- Pie Charts -->
+                      <div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
+                        <div class="peer">
+                          <div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#f44336'>
+                            <span></span>
+                          </div>
+                          <h6 class="fsz-sm">New Users</h6>
+                        </div>
+                        <div class="peer">
+                          <div class="easy-pie-chart" data-size='80' data-percent="50" data-bar-color='#2196f3'>
+                            <span></span>
+                          </div>
+                          <h6 class="fsz-sm">New Purchases</h6>
+                        </div>
+                        <div class="peer">
+                          <div class="easy-pie-chart" data-size='80' data-percent="90" data-bar-color='#ff9800'>
+                            <span></span>
+                          </div>
+                          <h6 class="fsz-sm">Bounce Rate</h6>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <!-- #Monthly Stats ==================== -->
+            <div class="bd bgc-white">
+              <div class="layers">
+                <div class="layer w-100 pX-20 pT-20">
+                  <h6 class="lh-1">Monthly Stats</h6>
+                </div>
+                <div class="layer w-100 p-20">
+                  <canvas id="line-chart" height="220"></canvas>
+                </div>
+                <div class="layer bdT p-20 w-100">
+                  <div class="peers ai-c jc-c gapX-20">
+                    <div class="peer">
+                      <span class="fsz-def fw-600 mR-10 c-grey-800">10% <i class="fa fa-level-up c-green-500"></i></span>
+                      <small class="c-grey-500 fw-600">APPL</small>
+                    </div>
+                    <div class="peer fw-600">
+                      <span class="fsz-def fw-600 mR-10 c-grey-800">2% <i class="fa fa-level-down c-red-500"></i></span>
+                      <small class="c-grey-500 fw-600">Average</small>
+                    </div>
+                    <div class="peer fw-600">
+                      <span class="fsz-def fw-600 mR-10 c-grey-800">15% <i class="fa fa-level-up c-green-500"></i></span>
+                      <small class="c-grey-500 fw-600">Sales</small>
+                    </div>
+                    <div class="peer fw-600">
+                      <span class="fsz-def fw-600 mR-10 c-grey-800">8% <i class="fa fa-level-down c-red-500"></i></span>
+                      <small class="c-grey-500 fw-600">Profit</small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <!-- #Todo ==================== -->
+            <div class="bd bgc-white p-20">
+              <div class="layers">
+                <div class="layer w-100 mB-10">
+                  <h6 class="lh-1">Todo List</h6>
+                </div>
+                <div class="layer w-100">
+                  <ul class="list-task list-group" data-role="tasklist">
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Call John for Dinner</span>
+                        </label>
+                      </div>
+                    </li>
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Book Boss Flight</span>
+                          <span class="peer">
+                            <span class="badge rounded-pill fl-r bg-success lh-0 p-10">2 Days</span>
+                          </span>
+                        </label>
+                      </div>
+                    </li>
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall3" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall3" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Hit the Gym</span>
+                          <span class="peer">
+                            <span class="badge rounded-pill fl-r bg-danger lh-0 p-10">3 Minutes</span>
+                          </span>
+                        </label>
+                      </div>
+                    </li>
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall4" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall4" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Give Purchase Report</span>
+                          <span class="peer">
+                            <span class="badge rounded-pill fl-r bg-warning lh-0 p-10">not important</span>
+                          </span>
+                        </label>
+                      </div>
+                    </li>
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall5" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall5" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Watch Game of Thrones Episode</span>
+                          <span class="peer">
+                            <span class="badge rounded-pill fl-r bg-info lh-0 p-10">Tomorrow</span>
+                          </span>
+                        </label>
+                      </div>
+                    </li>
+                    <li class="list-group-item bdw-0" data-role="task">
+                      <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                        <input type="checkbox" id="inputCall6" name="inputCheckboxesCall" class="peer">
+                        <label for="inputCall6" class="form-label peers peer-greed js-sb ai-c">
+                          <span class="peer peer-greed">Give Purchase report</span>
+                          <span class="peer">
+                            <span class="badge rounded-pill fl-r bg-success lh-0 p-10">Done</span>
+                          </span>
+                        </label>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <!-- #Sales Report ==================== -->
+            <div class="bd bgc-white">
+              <div class="layers">
+                <div class="layer w-100 p-20">
+                  <h6 class="lh-1">Sales Report</h6>
+                </div>
+                <div class="layer w-100">
+                  <div class="bgc-light-blue-500 c-white p-20">
+                    <div class="peers ai-c jc-sb gap-40">
+                      <div class="peer peer-greed">
+                        <h5>November 2017</h5>
+                        <p class="mB-0">Sales Report</p>
+                      </div>
+                      <div class="peer">
+                        <h3 class="text-end">$6,000</h3>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="table-responsive p-20">
+                    <table class="table">
+                      <thead>
+                        <tr>
+                          <th class=" bdwT-0">Name</th>
+                          <th class=" bdwT-0">Status</th>
+                          <th class=" bdwT-0">Date</th>
+                          <th class=" bdwT-0">Price</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td class="fw-600">Item #1 Name</td>
+                          <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span> </td>
+                          <td>Nov 18</td>
+                          <td><span class="text-success">$12</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #2 Name</td>
+                          <td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
+                          <td>Nov 19</td>
+                          <td><span class="text-info">$34</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #3 Name</td>
+                          <td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
+                          <td>Nov 20</td>
+                          <td><span class="text-danger">-$45</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #4 Name</td>
+                          <td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span></td>
+                          <td>Nov 21</td>
+                          <td><span class="text-success">$65</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #5 Name</td>
+                          <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Used</span></td>
+                          <td>Nov 22</td>
+                          <td><span class="text-success">$78</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #6 Name</td>
+                          <td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c rounded-pill">Used</span> </td>
+                          <td>Nov 23</td>
+                          <td><span class="text-danger">-$88</span></td>
+                        </tr>
+                        <tr>
+                          <td class="fw-600">Item #7 Name</td>
+                          <td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c rounded-pill">Old</span></td>
+                          <td>Nov 22</td>
+                          <td><span class="text-success">$56</span></td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    </div>
+                </div>
+              </div>
+              <div class="ta-c bdT w-100 p-20">
+                <a href="#">Check all the sales</a>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <!-- #Weather ==================== -->
+            <div class="bd bgc-white p-20">
+              <div class="layers">
+                <!-- Widget Title -->
+                <div class="layer w-100 mB-20">
+                  <h6 class="lh-1">Weather</h6>
+                </div>
+
+                <!-- Today Weather -->
+                <div class="layer w-100">
+                  <div class="peers ai-c jc-sb fxw-nw">
+                    <div class="peer peer-greed">
+                      <div class="layers">
+                        <!-- Temprature -->
+                        <div class="layer w-100">
+                          <div class="peers fxw-nw ai-c">
+                            <div class="peer mR-20">
+                              <h3>32<sup>°F</sup></h3>
+                            </div>
+                            <div class="peer">
+                              <canvas class="sleet" width="44" height="44"></canvas>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- Condition -->
+                        <div class="layer w-100">
+                          <span class="fw-600 c-grey-600">Partly Clouds</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="peer">
+                      <div class="layers ai-fe">
+                        <div class="layer">
+                          <h5 class="mB-5">Monday</h5>
+                        </div>
+                        <div class="layer">
+                          <span class="fw-600 c-grey-600">Nov, 01 2017</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Today Weather Extended -->
+                <div class="layer w-100 mY-30">
+                  <div class="layers bdB">
+                    <div class="layer w-100 bdT pY-5">
+                      <div class="peers ai-c jc-sb fxw-nw">
+                        <div class="peer">
+                          <span>Wind</span>
+                        </div>
+                        <div class="peer ta-r">
+                          <span class="fw-600 c-grey-800">10km/h</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="layer w-100 bdT pY-5">
+                      <div class="peers ai-c jc-sb fxw-nw">
+                        <div class="peer">
+                          <span>Sunrise</span>
+                        </div>
+                        <div class="peer ta-r">
+                          <span class="fw-600 c-grey-800">05:00 AM</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="layer w-100 bdT pY-5">
+                      <div class="peers ai-c jc-sb fxw-nw">
+                        <div class="peer">
+                          <span>Pressure</span>
+                        </div>
+                        <div class="peer ta-r">
+                          <span class="fw-600 c-grey-800">1B</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Week Forecast -->
+                <div class="layer w-100">
+                  <div class="peers peers-greed ai-fs ta-c">
+                    <div class="peer">
+                      <h6 class="mB-10">MON</h6>
+                      <canvas class="sleet" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">32<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">TUE</h6>
+                      <canvas class="clear-day" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">30<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">WED</h6>
+                      <canvas class="partly-cloudy-day" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">28<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">THR</h6>
+                      <canvas class="cloudy" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">32<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">FRI</h6>
+                      <canvas class="snow" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">24<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">SAT</h6>
+                      <canvas class="wind" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">28<sup>°F</sup></span>
+                    </div>
+                    <div class="peer">
+                      <h6 class="mB-10">SUN</h6>
+                      <canvas class="sleet" width="30" height="30"></canvas>
+                      <span class="d-b fw-600">32<sup>°F</sup></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="masonry-item col-md-6">
+            <!-- #Chat ==================== -->
+            <div class="bd bgc-white">
+              <div class="layers">
+                <div class="layer w-100 p-20">
+                  <h6 class="lh-1">Quick Chat</h6>
+                </div>
+                <div class="layer w-100">
+                  <!-- Chat Box -->
+                  <div class="bgc-grey-200 p-20 gapY-15">
+                    <!-- Chat Conversation -->
+                    <div class="peers fxw-nw">
+                      <div class="peer mR-20">
+                        <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed">
+                        <div class="layers ai-fs gapY-5">
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>Lorem Ipsum is simply dummy text of</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>the printing and typesetting industry.</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mR-10">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed">
+                                <span>Lorem Ipsum has been the industry's</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Chat Conversation -->
+                    <div class="peers fxw-nw ai-fe">
+                      <div class="peer ord-1 mL-20">
+                        <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed ord-0">
+                        <div class="layers ai-fe gapY-10">
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mL-10 ord-1">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed ord-0">
+                                <span>Heloo</span>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="layer">
+                            <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                              <div class="peer mL-10 ord-1">
+                                <small>10:00 AM</small>
+                              </div>
+                              <div class="peer-greed ord-0">
+                                <span>??</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- Chat Send -->
+                  <div class="p-20 bdT bgc-white">
+                    <div class="pos-r">
+                      <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
+                      <button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
+                        <i class="fa fa-paper-plane-o"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/page-404.html

@@ -0,0 +1,29 @@
+{% extends "layouts/base-error.html" %}
+{% load static %}
+
+{% block title %} Error 404 {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
+      <div class='mR-60'>
+        <img alt='#' src="{% static '/images/404.png' %}" />
+      </div>
+
+      <div class='d-f jc-c fxd-c'>
+        <h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">404</h1>
+        <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Oops Page Not Found</h3>
+        <p class='mB-30 fsz-def c-grey-700'>The page you are looking for does not exist or has been moved.</p>
+        <div>
+          <a href="index.html" type='primary' class='btn btn-primary'>Go to Home</a>
+        </div>
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/page-500.html

@@ -0,0 +1,29 @@
+{% extends "layouts/base-error.html" %}
+{% load static %}
+
+{% block title %} Error 500 {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
+      <div class='mR-60'>
+        <img alt='#' src="{% static '/images/500.png' %}" />
+      </div>
+
+      <div class='d-f jc-c fxd-c'>
+        <h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">500</h1>
+        <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Internal server error</h3>
+        <p class='mB-30 fsz-def c-grey-700'>Something goes wrong with our servers, please try again later.</p>
+        <div>
+          <a href="/" type='primary' class='btn btn-primary'>Go to Home</a>
+        </div>
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/signin.html

@@ -0,0 +1,52 @@
+{% extends "layouts/base-authentication.html" %}
+{% load static %}
+
+{% block title %} Sign IN {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="peers ai-s fxw-nw h-100vh">
+      <div class="d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("{% static '/images/bg.jpg' %}")'>
+        <div class="pos-a centerXY">
+          <div class="bgc-white bdrs-50p pos-r" style='width: 120px; height: 120px;'>
+            <img class="pos-a centerXY" src="{% static '/images/logo.png' %}" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
+        <h4 class="fw-300 c-grey-900 mB-40">Login</h4>
+        <form>
+          <div class="mb-3">
+            <label class="text-normal text-dark form-label">Username</label>
+            <input type="email" class="form-control" placeholder="John Doe">
+          </div>
+          <div class="mb-3">
+            <label class="text-normal text-dark form-label">Password</label>
+            <input type="password" class="form-control" placeholder="Password">
+          </div>
+          <div class="">
+            <div class="peers ai-c jc-sb fxw-nw">
+              <div class="peer">
+                <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                  <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                  <label for="inputCall1" class=" peers peer-greed js-sb ai-c form-label">
+                    <span class="peer peer-greed">Remember Me</span>
+                  </label>
+                </div>
+              </div>
+              <div class="peer">
+                <button class="btn btn-primary btn-color">Login</button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

apps/templates/home/signup.html

@@ -0,0 +1,48 @@
+{% extends "layouts/base-authentication.html" %}
+{% load static %}
+
+{% block title %} Register {% endblock title %}
+
+<!-- Specific CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="peers ai-s fxw-nw h-100vh">
+      <div class="peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("{% static '/images/bg.jpg' %}")'>
+        <div class="pos-a centerXY">
+          <div class="bgc-white bdrs-50p pos-r" style='width: 120px; height: 120px;'>
+            <img class="pos-a centerXY" src="{% static '/images/logo.png' %}" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
+        <h4 class="fw-300 c-grey-900 mB-40">Register</h4>
+        <form>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Username</label>
+            <input type="text" class="form-control" Placeholder='John Doe'>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Email Address</label>
+            <input type="email" class="form-control" Placeholder='name@email.com'>
+          </div>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Password</label>
+            <input type="password" class="form-control" placeholder="Password">
+          </div>
+          <div class="mb-3">
+            <label class="form-label" class="text-normal text-dark">Confirm Password</label>
+            <input type="password" class="form-control" placeholder="Password">
+          </div>
+          <div class="mb-3">
+            <button class="btn btn-primary btn-color">Register</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}