diff --git a/README.md b/README.md
index 07e1764..ba6fdcd 100644
--- a/README.md
+++ b/README.md
@@ -30,6 +30,7 @@ Then use ``uv`` to install the project and run its commands while you’re devel
 ```bash
 uv sync --dev
 uv run --env-file=.env src/manage.py migrate
+uv run --env-file=.env src/manage.py createcachetable
 uv run --env-file=.env src/manage.py runserver
 ```
 
diff --git a/docker/run.sh b/docker/run.sh
index f3c7f9a..bab8a08 100644
--- a/docker/run.sh
+++ b/docker/run.sh
@@ -8,6 +8,7 @@ export XDG_CONFIG_HOME="/app/config"
 
 echo "Applying database migrations"
 uv run src/manage.py migrate
+uv run src/manage.py createcachetable
 
 echo "Starting Caddy"
 exec caddy run --config /app/config/caddy/Caddyfile --adapter caddyfile 2>&1 &
diff --git a/src/servala/core/crd.py b/src/servala/core/crd.py
new file mode 100644
index 0000000..6fc4219
--- /dev/null
+++ b/src/servala/core/crd.py
@@ -0,0 +1,127 @@
+import re
+
+from django.core.validators import MaxValueValidator, MinValueValidator, RegexValidator
+from django.db import models
+from django.forms.models import ModelForm, ModelFormMetaclass
+from django.utils.translation import gettext_lazy as _
+
+
+def generate_django_model(schema, group, version, kind):
+    """
+    Generates a virtual Django model from a Kubernetes CRD's OpenAPI v3 schema.
+    """
+    spec = schema["properties"].get("spec") or {}
+    # defaults = {"apiVersion": f"{group}/{version}", "kind": kind}
+
+    model_fields = {"__module__": "crd_models"}
+    model_fields.update(build_object_fields(spec, "spec"))
+
+    meta_class = type("Meta", (), {"app_label": "crd_models"})
+    model_fields["Meta"] = meta_class
+
+    # create the model class
+    model_name = kind
+    model_class = type(model_name, (models.Model,), model_fields)
+    return model_class
+
+
+def build_object_fields(schema, name, verbose_name_prefix=None):
+    required_fields = schema.get("required") or []
+    properties = schema.get("properties") or {}
+    fields = {}
+
+    for field_name, field_schema in properties.items():
+        is_required = field_name in required_fields
+        full_name = f"{name}.{field_name}"
+        result = get_django_field(
+            field_schema,
+            is_required,
+            field_name,
+            full_name,
+            verbose_name_prefix=verbose_name_prefix,
+        )
+        if isinstance(result, dict):
+            fields.update(result)
+        else:
+            fields[full_name] = result
+    return fields
+
+
+def deslugify(title):
+    if "_" in title:
+        title.replace("_", " ")
+        return title.title()
+    return re.sub(r"(?<!^)(?=[A-Z])", " ", title).capitalize()
+
+
+def get_django_field(
+    field_schema, is_required, field_name, full_name, verbose_name_prefix=None
+):
+    field_type = field_schema.get("type") or "string"
+    format = field_schema.get("format")
+    verbose_name_prefix = verbose_name_prefix or ""
+    verbose_name = f"{verbose_name_prefix} {deslugify(field_name)}".strip()
+
+    kwargs = {
+        "blank": not is_required,
+        "null": not is_required,
+        "help_text": field_schema.get("description"),
+        "validators": [],
+        "verbose_name": verbose_name,
+        "default": field_schema.get("default"),
+    }
+
+    if minimum := field_schema.get("minimum"):
+        kwargs["validators"].append(MinValueValidator(minimum))
+    if maximum := field_schema.get("maximum"):
+        kwargs["validators"].append(MaxValueValidator(maximum))
+
+    if field_type == "string":
+        if format == "date-time":
+            return models.DateTimeField(**kwargs)
+        elif format == "date":
+            return models.DateField(**kwargs)
+        else:
+            max_length = field_schema.get("max_length") or 255
+            if pattern := field_schema.get("pattern"):
+                kwargs["validators"].append(RegexValidator(regex=pattern))
+            if choices := field_schema.get("enum"):
+                kwargs["choices"] = ((choice, choice) for choice in choices)
+            return models.CharField(max_length=max_length, **kwargs)
+    elif field_type == "integer":
+        return models.IntegerField(**kwargs)
+    elif field_type == "number":
+        return models.FloatField(**kwargs)
+    elif field_type == "boolean":
+        return models.BooleanField(**kwargs)
+    elif field_type == "object":
+        return build_object_fields(
+            field_schema, full_name, verbose_name_prefix=f"{verbose_name}:"
+        )
+    elif field_type == "array":
+        # TODO: handle items / validate items, build multi-select input
+        # if field_schema.get("items") and (choices := field_schema["items"].get("enum")):
+        #   choices = [c, c for c in choices]
+        kwargs["help_text"] = _("JSON field (array)")
+        return models.JSONField(**kwargs)
+    return models.CharField(max_length=255, **kwargs)
+
+
+class CrdModelFormMixin:
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        # self.fields["apiVersion"].disabled = True
+        # self.fields["kind"].disabled = True
+
+
+def generate_model_form_class(model):
+    meta_attrs = {
+        "model": model,
+        "fields": "__all__",
+    }
+    fields = {
+        "Meta": type("Meta", (object,), meta_attrs),
+        "__module__": "crd_models",
+    }
+    class_name = f"{model.__name__}ModelForm"
+    return ModelFormMetaclass(class_name, (CrdModelFormMixin, ModelForm), fields)
diff --git a/src/servala/core/models/service.py b/src/servala/core/models/service.py
index f1dc20b..c4d2b79 100644
--- a/src/servala/core/models/service.py
+++ b/src/servala/core/models/service.py
@@ -1,6 +1,8 @@
 import kubernetes
+from django.core.cache import cache
 from django.core.exceptions import ValidationError
 from django.db import models
+from django.utils.functional import cached_property
 from django.utils.translation import gettext_lazy as _
 from encrypted_fields.fields import EncryptedJSONField
 from kubernetes import config
@@ -310,6 +312,58 @@ class ServiceOfferingControlPlane(models.Model):
     def __str__(self):
         return f"{self.service_offering} on {self.control_plane} with {self.service_definition}"
 
+    @cached_property
+    def resource_definition(self):
+        kind = self.service_definition.api_definition["kind"]
+        group = self.service_definition.api_definition["group"]
+        version = self.service_definition.api_definition["version"]
+        client = self.control_plane.get_kubernetes_client()
+
+        extensions_api = kubernetes.client.ApiextensionsV1Api(client)
+        crds = extensions_api.list_custom_resource_definition()
+        matching_crd = None
+        for crd in crds.items:
+            if matching_crd:
+                break
+            if crd.spec.group == group:
+                for served_version in crd.spec.versions:
+                    if served_version.name == version and served_version.served:
+                        if crd.spec.names.kind == kind:
+                            matching_crd = crd
+                            break
+        return matching_crd
+
+    @cached_property
+    def resource_schema(self):
+        cache_key = f"servala:crd:schema:{self.pk}"
+        if result := cache.get(cache_key):
+            return result
+
+        version = self.service_definition.api_definition["version"]
+        for v in self.resource_definition.spec.versions:
+            if v.name == version:
+                result = v.schema.open_apiv3_schema.to_dict()
+                timeout_seconds = 60 * 60 * 24
+                cache.set(cache_key, result, timeout=timeout_seconds)
+                return result
+
+    @cached_property
+    def django_model(self):
+        from servala.core.crd import generate_django_model
+
+        kwargs = {
+            key: value
+            for key, value in self.service_definition.api_definition.items()
+            if key in ("group", "version", "kind")
+        }
+        return generate_django_model(self.resource_schema, **kwargs)
+
+    @cached_property
+    def model_form_class(self):
+        from servala.core.crd import generate_model_form_class
+
+        return generate_model_form_class(self.django_model)
+
 
 class ServiceOffering(models.Model):
     """
diff --git a/src/servala/frontend/forms/service.py b/src/servala/frontend/forms/service.py
index d7ea60f..0afb1b5 100644
--- a/src/servala/frontend/forms/service.py
+++ b/src/servala/frontend/forms/service.py
@@ -1,6 +1,6 @@
 from django import forms
 
-from servala.core.models import CloudProvider, ServiceCategory
+from servala.core.models import CloudProvider, ControlPlane, ServiceCategory
 
 
 class ServiceFilterForm(forms.Form):
@@ -20,3 +20,11 @@ class ServiceFilterForm(forms.Form):
                 offerings__control_planes__cloud_provider=cloud_provider
             )
         return queryset
+
+
+class ControlPlaneSelectForm(forms.Form):
+    control_plane = forms.ModelChoiceField(queryset=ControlPlane.objects.none())
+
+    def __init__(self, *args, planes=None, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["control_plane"].queryset = planes
diff --git a/src/servala/frontend/templates/frontend/organizations/service_offering_detail.html b/src/servala/frontend/templates/frontend/organizations/service_offering_detail.html
index 1ed9a12..066c1af 100644
--- a/src/servala/frontend/templates/frontend/organizations/service_offering_detail.html
+++ b/src/servala/frontend/templates/frontend/organizations/service_offering_detail.html
@@ -1,11 +1,28 @@
 {% extends "frontend/base.html" %}
 {% load i18n %}
 {% load static %}
+{% load partials %}
 {% block html_title %}
     {% block page_title %}
         {{ offering }}
     {% endblock page_title %}
 {% endblock html_title %}
+{% partialdef service-form %}
+{% if service_form %}
+    <div class="card">
+        <div class="card-header d-flex align-items-center"></div>
+        <div class="card-body">
+            {% if form_error %}
+                <div class="alert alert-danger">
+                    {% translate "Oops! Something went wrong with the service form generation. Please try again later." %}
+                </div>
+            {% else %}
+                {% include "includes/form.html" with form=service_form %}
+            {% endif %}
+        </div>
+    </div>
+{% endif %}
+{% endpartialdef %}
 {% block content %}
     <section class="section">
         <div class="card">
@@ -23,18 +40,17 @@
                 </div>
             </div>
             <div class="card-body">
-                <div class="row">
-                    {% if offering.control_planes.all.count > 1 %}
-                        <p>{% translate "Please choose your zone." %}</p>
-                    {% else %}
-                        <p>
-                            {% blocktranslate trimmed with zone=offering.control_planes.all.first.name %}
-                                Your zone will be <strong>{{ zone }}</strong>.
-                            {% endblocktranslate %}
-                        </p>
-                    {% endif %}
-                </div>
+                {% if not has_control_planes %}
+                    <p>{% translate "We currently cannot offer this service, sorry!" %}</p>
+                {% else %}
+                    <form hx-trigger="change"
+                          hx-get="{{ request.path }}?fragment=service-form"
+                          hx-target="#service-form">
+                        {{ select_form }}
+                    </form>
+                {% endif %}
             </div>
         </div>
+        <div id="service-form">{% partial service-form %}</div>
     </section>
 {% endblock content %}
diff --git a/src/servala/frontend/views/mixins.py b/src/servala/frontend/views/mixins.py
index f304e42..fd5a494 100644
--- a/src/servala/frontend/views/mixins.py
+++ b/src/servala/frontend/views/mixins.py
@@ -5,13 +5,30 @@ from rules.contrib.views import AutoPermissionRequiredMixin, PermissionRequiredM
 from servala.core.models import Organization
 
 
-class HtmxUpdateView(AutoPermissionRequiredMixin, UpdateView):
+class HtmxViewMixin:
     fragments = []
 
     @cached_property
     def is_htmx(self):
         return self.request.headers.get("HX-Request")
 
+    def _get_fragment(self):
+        if self.request.method == "POST":
+            fragment = self.request.POST.get("fragment")
+        else:
+            fragment = self.request.GET.get("fragment")
+        if fragment and fragment in self.fragments:
+            return fragment
+
+    def get_template_names(self):
+        template_names = super().get_template_names()
+        if self.is_htmx and (fragment := self._get_fragment()):
+            return [f"{template_names[0]}#{fragment}"]
+        return template_names
+
+
+class HtmxUpdateView(AutoPermissionRequiredMixin, HtmxViewMixin, UpdateView):
+
     @property
     def permission_type(self):
         if self.request.method == "POST" or getattr(
@@ -31,20 +48,6 @@ class HtmxUpdateView(AutoPermissionRequiredMixin, UpdateView):
         result["has_change_permission"] = self.has_change_permission()
         return result
 
-    def _get_fragment(self):
-        if self.request.method == "POST":
-            fragment = self.request.POST.get("fragment")
-        else:
-            fragment = self.request.GET.get("fragment")
-        if fragment and fragment in self.fragments:
-            return fragment
-
-    def get_template_names(self):
-        template_names = super().get_template_names()
-        if self.is_htmx and (fragment := self._get_fragment()):
-            return [f"{template_names[0]}#{fragment}"]
-        return template_names
-
     def get_form_kwargs(self):
         result = super().get_form_kwargs()
         if self.is_htmx:
@@ -82,8 +85,8 @@ class OrganizationViewMixin(PermissionRequiredMixin):
     def get_permission_object(self):
         return self.organization
 
+    def has_organization_permission(self):
+        return self.request.user.has_perm("core.view_organization", self.organization)
+
     def has_permission(self):
-        return (
-            self.request.user.has_perm("core.view_organization", self.organization)
-            and super().has_permission()
-        )
+        return self.has_organization_permission() and super().has_permission()
diff --git a/src/servala/frontend/views/service.py b/src/servala/frontend/views/service.py
index f5c33f0..00b7edd 100644
--- a/src/servala/frontend/views/service.py
+++ b/src/servala/frontend/views/service.py
@@ -1,9 +1,9 @@
 from django.utils.functional import cached_property
 from django.views.generic import DetailView, ListView
 
-from servala.core.models import Service, ServiceOffering
-from servala.frontend.forms.service import ServiceFilterForm
-from servala.frontend.views.mixins import OrganizationViewMixin
+from servala.core.models import Service, ServiceOffering, ServiceOfferingControlPlane
+from servala.frontend.forms.service import ControlPlaneSelectForm, ServiceFilterForm
+from servala.frontend.views.mixins import HtmxViewMixin, OrganizationViewMixin
 
 
 class ServiceListView(OrganizationViewMixin, ListView):
@@ -44,13 +44,50 @@ class ServiceDetailView(OrganizationViewMixin, DetailView):
         )
 
 
-class ServiceOfferingDetailView(OrganizationViewMixin, DetailView):
+class ServiceOfferingDetailView(OrganizationViewMixin, HtmxViewMixin, DetailView):
     template_name = "frontend/organizations/service_offering_detail.html"
     context_object_name = "offering"
     model = ServiceOffering
     permission_type = "view"
+    fragments = ("service-form",)
+
+    def has_permission(self):
+        return self.has_organization_permission()
 
     def get_queryset(self):
         return ServiceOffering.objects.all().select_related(
             "service", "service__category", "provider"
         )
+
+    @cached_property
+    def planes(self):
+        return self.object.control_planes.all()
+
+    @cached_property
+    def select_form(self):
+        data = None
+        if "control_plane" in self.request.GET:
+            data = self.request.GET
+        return ControlPlaneSelectForm(data=data, planes=self.planes)
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["select_form"] = self.select_form
+        context["has_control_planes"] = self.planes.exists()
+        if "control_plane" in self.request.GET:
+            if self.select_form.is_valid():
+                context["selected_plane"] = self.select_form.cleaned_data[
+                    "control_plane"
+                ]
+                try:
+                    so_cp = ServiceOfferingControlPlane.objects.filter(
+                        control_plane=self.select_form.cleaned_data["control_plane"],
+                        service_offering=self.object,
+                    ).first()
+                    if not so_cp:
+                        context["form_error"] = True
+                except Exception:
+                    context["form_error"] = True
+                else:
+                    context["service_form"] = so_cp.model_form_class()
+        return context
diff --git a/src/servala/settings.py b/src/servala/settings.py
index 5d670ae..3e27e35 100644
--- a/src/servala/settings.py
+++ b/src/servala/settings.py
@@ -132,6 +132,13 @@ STATIC_URL = "static/"  # CSS, JavaScript, etc.
 STATIC_ROOT = BASE_DIR / "static.dist"
 MEDIA_URL = "media/"  # User uploads, e.g. images
 
+CACHES = {
+    "default": {
+        "BACKEND": "django.core.cache.backends.db.DatabaseCache",
+        "LOCATION": "servala_cache",
+    }
+}
+
 # Additional locations of static files
 STATICFILES_FINDERS = (
     "django.contrib.staticfiles.finders.FileSystemFinder",
diff --git a/src/servala/static/mazer/extensions/perfect-scrollbar/perfect-scrollbar.min.js b/src/servala/static/mazer/extensions/perfect-scrollbar/perfect-scrollbar.min.js
new file mode 100644
index 0000000..7465c13
--- /dev/null
+++ b/src/servala/static/mazer/extensions/perfect-scrollbar/perfect-scrollbar.min.js
@@ -0,0 +1,19 @@
+/*!
+ * perfect-scrollbar v1.5.3
+ * Copyright 2021 Hyunje Jun, MDBootstrap and Contributors
+ * Licensed under MIT
+ */(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b():"function"==typeof define&&define.amd?define(b):(a=a||self,a.PerfectScrollbar=b())})(this,function(){'use strict';var u=Math.abs,v=Math.floor;function a(a){return getComputedStyle(a)}function b(a,b){for(var c in b){var d=b[c];"number"==typeof d&&(d+="px"),a.style[c]=d}return a}function c(a){var b=document.createElement("div");return b.className=a,b}function d(a,b){if(!w)throw new Error("No element matching method supported");return w.call(a,b)}function e(a){a.remove?a.remove():a.parentNode&&a.parentNode.removeChild(a)}function f(a,b){return Array.prototype.filter.call(a.children,function(a){return d(a,b)})}function g(a,b){var c=a.element.classList,d=z.state.scrolling(b);c.contains(d)?clearTimeout(A[b]):c.add(d)}function h(a,b){A[b]=setTimeout(function(){return a.isAlive&&a.element.classList.remove(z.state.scrolling(b))},a.settings.scrollingThreshold)}function j(a,b){g(a,b),h(a,b)}function k(a){if("function"==typeof window.CustomEvent)return new CustomEvent(a);var b=document.createEvent("CustomEvent");return b.initCustomEvent(a,!1,!1,void 0),b}function l(a,b,c,d,e){void 0===d&&(d=!0),void 0===e&&(e=!1);var f;if("top"===b)f=["contentHeight","containerHeight","scrollTop","y","up","down"];else if("left"===b)f=["contentWidth","containerWidth","scrollLeft","x","left","right"];else throw new Error("A proper axis should be provided");m(a,c,f,d,e)}function m(a,b,c,d,e){var f=c[0],g=c[1],h=c[2],i=c[3],l=c[4],m=c[5];void 0===d&&(d=!0),void 0===e&&(e=!1);var n=a.element;// reset reach
+a.reach[i]=null,1>n[h]&&(a.reach[i]="start"),n[h]>a[f]-a[g]-1&&(a.reach[i]="end"),b&&(n.dispatchEvent(k("ps-scroll-"+i)),0>b?n.dispatchEvent(k("ps-scroll-"+l)):0<b&&n.dispatchEvent(k("ps-scroll-"+m)),d&&j(a,i)),a.reach[i]&&(b||e)&&n.dispatchEvent(k("ps-"+i+"-reach-"+a.reach[i]))}function n(a){return parseInt(a,10)||0}function o(a){return d(a,"input,[contenteditable]")||d(a,"select,[contenteditable]")||d(a,"textarea,[contenteditable]")||d(a,"button,[contenteditable]")}function p(b){var c=a(b);return n(c.width)+n(c.paddingLeft)+n(c.paddingRight)+n(c.borderLeftWidth)+n(c.borderRightWidth)}function q(a){var b=Math.round,c=a.element,d=v(c.scrollTop),g=c.getBoundingClientRect();a.containerWidth=b(g.width),a.containerHeight=b(g.height),a.contentWidth=c.scrollWidth,a.contentHeight=c.scrollHeight,c.contains(a.scrollbarXRail)||(f(c,z.element.rail("x")).forEach(function(a){return e(a)}),c.appendChild(a.scrollbarXRail)),c.contains(a.scrollbarYRail)||(f(c,z.element.rail("y")).forEach(function(a){return e(a)}),c.appendChild(a.scrollbarYRail)),!a.settings.suppressScrollX&&a.containerWidth+a.settings.scrollXMarginOffset<a.contentWidth?(a.scrollbarXActive=!0,a.railXWidth=a.containerWidth-a.railXMarginWidth,a.railXRatio=a.containerWidth/a.railXWidth,a.scrollbarXWidth=r(a,n(a.railXWidth*a.containerWidth/a.contentWidth)),a.scrollbarXLeft=n((a.negativeScrollAdjustment+c.scrollLeft)*(a.railXWidth-a.scrollbarXWidth)/(a.contentWidth-a.containerWidth))):a.scrollbarXActive=!1,!a.settings.suppressScrollY&&a.containerHeight+a.settings.scrollYMarginOffset<a.contentHeight?(a.scrollbarYActive=!0,a.railYHeight=a.containerHeight-a.railYMarginHeight,a.railYRatio=a.containerHeight/a.railYHeight,a.scrollbarYHeight=r(a,n(a.railYHeight*a.containerHeight/a.contentHeight)),a.scrollbarYTop=n(d*(a.railYHeight-a.scrollbarYHeight)/(a.contentHeight-a.containerHeight))):a.scrollbarYActive=!1,a.scrollbarXLeft>=a.railXWidth-a.scrollbarXWidth&&(a.scrollbarXLeft=a.railXWidth-a.scrollbarXWidth),a.scrollbarYTop>=a.railYHeight-a.scrollbarYHeight&&(a.scrollbarYTop=a.railYHeight-a.scrollbarYHeight),s(c,a),a.scrollbarXActive?c.classList.add(z.state.active("x")):(c.classList.remove(z.state.active("x")),a.scrollbarXWidth=0,a.scrollbarXLeft=0,c.scrollLeft=!0===a.isRtl?a.contentWidth:0),a.scrollbarYActive?c.classList.add(z.state.active("y")):(c.classList.remove(z.state.active("y")),a.scrollbarYHeight=0,a.scrollbarYTop=0,c.scrollTop=0)}function r(a,b){var c=Math.min,d=Math.max;return a.settings.minScrollbarLength&&(b=d(b,a.settings.minScrollbarLength)),a.settings.maxScrollbarLength&&(b=c(b,a.settings.maxScrollbarLength)),b}function s(a,c){var d={width:c.railXWidth},e=v(a.scrollTop);d.left=c.isRtl?c.negativeScrollAdjustment+a.scrollLeft+c.containerWidth-c.contentWidth:a.scrollLeft,c.isScrollbarXUsingBottom?d.bottom=c.scrollbarXBottom-e:d.top=c.scrollbarXTop+e,b(c.scrollbarXRail,d);var f={top:e,height:c.railYHeight};c.isScrollbarYUsingRight?c.isRtl?f.right=c.contentWidth-(c.negativeScrollAdjustment+a.scrollLeft)-c.scrollbarYRight-c.scrollbarYOuterWidth-9:f.right=c.scrollbarYRight-a.scrollLeft:c.isRtl?f.left=c.negativeScrollAdjustment+a.scrollLeft+2*c.containerWidth-c.contentWidth-c.scrollbarYLeft-c.scrollbarYOuterWidth:f.left=c.scrollbarYLeft+a.scrollLeft,b(c.scrollbarYRail,f),b(c.scrollbarX,{left:c.scrollbarXLeft,width:c.scrollbarXWidth-c.railBorderXWidth}),b(c.scrollbarY,{top:c.scrollbarYTop,height:c.scrollbarYHeight-c.railBorderYWidth})}function t(a,b){function c(b){b.touches&&b.touches[0]&&(b[k]=b.touches[0].pageY),s[o]=t+v*(b[k]-u),g(a,p),q(a),b.stopPropagation(),b.type.startsWith("touch")&&1<b.changedTouches.length&&b.preventDefault()}function d(){h(a,p),a[r].classList.remove(z.state.clicking),a.event.unbind(a.ownerDocument,"mousemove",c)}function f(b,e){t=s[o],e&&b.touches&&(b[k]=b.touches[0].pageY),u=b[k],v=(a[j]-a[i])/(a[l]-a[n]),e?a.event.bind(a.ownerDocument,"touchmove",c):(a.event.bind(a.ownerDocument,"mousemove",c),a.event.once(a.ownerDocument,"mouseup",d),b.preventDefault()),a[r].classList.add(z.state.clicking),b.stopPropagation()}var i=b[0],j=b[1],k=b[2],l=b[3],m=b[4],n=b[5],o=b[6],p=b[7],r=b[8],s=a.element,t=null,u=null,v=null;a.event.bind(a[m],"mousedown",function(a){f(a)}),a.event.bind(a[m],"touchstart",function(a){f(a,!0)})}var w="undefined"!=typeof Element&&(Element.prototype.matches||Element.prototype.webkitMatchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector),z={main:"ps",rtl:"ps__rtl",element:{thumb:function(a){return"ps__thumb-"+a},rail:function(a){return"ps__rail-"+a},consuming:"ps__child--consume"},state:{focus:"ps--focus",clicking:"ps--clicking",active:function(a){return"ps--active-"+a},scrolling:function(a){return"ps--scrolling-"+a}}},A={x:null,y:null},B=function(a){this.element=a,this.handlers={}},C={isEmpty:{configurable:!0}};B.prototype.bind=function(a,b){"undefined"==typeof this.handlers[a]&&(this.handlers[a]=[]),this.handlers[a].push(b),this.element.addEventListener(a,b,!1)},B.prototype.unbind=function(a,b){var c=this;this.handlers[a]=this.handlers[a].filter(function(d){return!!(b&&d!==b)||(c.element.removeEventListener(a,d,!1),!1)})},B.prototype.unbindAll=function(){for(var a in this.handlers)this.unbind(a)},C.isEmpty.get=function(){var a=this;return Object.keys(this.handlers).every(function(b){return 0===a.handlers[b].length})},Object.defineProperties(B.prototype,C);var D=function(){this.eventElements=[]};D.prototype.eventElement=function(a){var b=this.eventElements.filter(function(b){return b.element===a})[0];return b||(b=new B(a),this.eventElements.push(b)),b},D.prototype.bind=function(a,b,c){this.eventElement(a).bind(b,c)},D.prototype.unbind=function(a,b,c){var d=this.eventElement(a);d.unbind(b,c),d.isEmpty&&this.eventElements.splice(this.eventElements.indexOf(d),1)},D.prototype.unbindAll=function(){this.eventElements.forEach(function(a){return a.unbindAll()}),this.eventElements=[]},D.prototype.once=function(a,b,c){var d=this.eventElement(a),e=function(a){d.unbind(b,e),c(a)};d.bind(b,e)};var E={isWebKit:"undefined"!=typeof document&&"WebkitAppearance"in document.documentElement.style,supportsTouch:"undefined"!=typeof window&&("ontouchstart"in window||"maxTouchPoints"in window.navigator&&0<window.navigator.maxTouchPoints||window.DocumentTouch&&document instanceof window.DocumentTouch),supportsIePointer:"undefined"!=typeof navigator&&navigator.msMaxTouchPoints,isChrome:"undefined"!=typeof navigator&&/Chrome/i.test(navigator&&navigator.userAgent)},F=function(){return{handlers:["click-rail","drag-thumb","keyboard","wheel","touch"],maxScrollbarLength:null,minScrollbarLength:null,scrollingThreshold:1e3,scrollXMarginOffset:0,scrollYMarginOffset:0,suppressScrollX:!1,suppressScrollY:!1,swipeEasing:!0,useBothWheelAxes:!1,wheelPropagation:!0,wheelSpeed:1}},G={"click-rail":function(a){a.element;a.event.bind(a.scrollbarY,"mousedown",function(a){return a.stopPropagation()}),a.event.bind(a.scrollbarYRail,"mousedown",function(b){var c=b.pageY-window.pageYOffset-a.scrollbarYRail.getBoundingClientRect().top,d=c>a.scrollbarYTop?1:-1;a.element.scrollTop+=d*a.containerHeight,q(a),b.stopPropagation()}),a.event.bind(a.scrollbarX,"mousedown",function(a){return a.stopPropagation()}),a.event.bind(a.scrollbarXRail,"mousedown",function(b){var c=b.pageX-window.pageXOffset-a.scrollbarXRail.getBoundingClientRect().left,d=c>a.scrollbarXLeft?1:-1;a.element.scrollLeft+=d*a.containerWidth,q(a),b.stopPropagation()})},"drag-thumb":function(a){t(a,["containerWidth","contentWidth","pageX","railXWidth","scrollbarX","scrollbarXWidth","scrollLeft","x","scrollbarXRail"]),t(a,["containerHeight","contentHeight","pageY","railYHeight","scrollbarY","scrollbarYHeight","scrollTop","y","scrollbarYRail"])},keyboard:function(a){function b(b,d){var e=v(c.scrollTop);if(0===b){if(!a.scrollbarYActive)return!1;if(0===e&&0<d||e>=a.contentHeight-a.containerHeight&&0>d)return!a.settings.wheelPropagation}var f=c.scrollLeft;if(0===d){if(!a.scrollbarXActive)return!1;if(0===f&&0>b||f>=a.contentWidth-a.containerWidth&&0<b)return!a.settings.wheelPropagation}return!0}var c=a.element,f=function(){return d(c,":hover")},g=function(){return d(a.scrollbarX,":focus")||d(a.scrollbarY,":focus")};a.event.bind(a.ownerDocument,"keydown",function(d){if(!(d.isDefaultPrevented&&d.isDefaultPrevented()||d.defaultPrevented)&&(f()||g())){var e=document.activeElement?document.activeElement:a.ownerDocument.activeElement;if(e){if("IFRAME"===e.tagName)e=e.contentDocument.activeElement;else// go deeper if element is a webcomponent
+for(;e.shadowRoot;)e=e.shadowRoot.activeElement;if(o(e))return}var h=0,i=0;switch(d.which){case 37:h=d.metaKey?-a.contentWidth:d.altKey?-a.containerWidth:-30;break;case 38:i=d.metaKey?a.contentHeight:d.altKey?a.containerHeight:30;break;case 39:h=d.metaKey?a.contentWidth:d.altKey?a.containerWidth:30;break;case 40:i=d.metaKey?-a.contentHeight:d.altKey?-a.containerHeight:-30;break;case 32:i=d.shiftKey?a.containerHeight:-a.containerHeight;break;case 33:i=a.containerHeight;break;case 34:i=-a.containerHeight;break;case 36:i=a.contentHeight;break;case 35:i=-a.contentHeight;break;default:return;}a.settings.suppressScrollX&&0!==h||a.settings.suppressScrollY&&0!==i||(c.scrollTop-=i,c.scrollLeft+=h,q(a),b(h,i)&&d.preventDefault())}})},wheel:function(b){function c(a,c){var d,e=v(h.scrollTop),f=0===h.scrollTop,g=e+h.offsetHeight===h.scrollHeight,i=0===h.scrollLeft,j=h.scrollLeft+h.offsetWidth===h.scrollWidth;return d=u(c)>u(a)?f||g:i||j,!d||!b.settings.wheelPropagation}function d(a){var b=a.deltaX,c=-1*a.deltaY;return("undefined"==typeof b||"undefined"==typeof c)&&(b=-1*a.wheelDeltaX/6,c=a.wheelDeltaY/6),a.deltaMode&&1===a.deltaMode&&(b*=10,c*=10),b!==b&&c!==c/* NaN checks */&&(b=0,c=a.wheelDelta),a.shiftKey?[-c,-b]:[b,c]}function f(b,c,d){// FIXME: this is a workaround for <select> issue in FF and IE #571
+if(!E.isWebKit&&h.querySelector("select:focus"))return!0;if(!h.contains(b))return!1;for(var e=b;e&&e!==h;){if(e.classList.contains(z.element.consuming))return!0;var f=a(e);// if deltaY && vertical scrollable
+if(d&&f.overflowY.match(/(scroll|auto)/)){var g=e.scrollHeight-e.clientHeight;if(0<g&&(0<e.scrollTop&&0>d||e.scrollTop<g&&0<d))return!0}// if deltaX && horizontal scrollable
+if(c&&f.overflowX.match(/(scroll|auto)/)){var i=e.scrollWidth-e.clientWidth;if(0<i&&(0<e.scrollLeft&&0>c||e.scrollLeft<i&&0<c))return!0}e=e.parentNode}return!1}function g(a){var e=d(a),g=e[0],i=e[1];if(!f(a.target,g,i)){var j=!1;b.settings.useBothWheelAxes?b.scrollbarYActive&&!b.scrollbarXActive?(i?h.scrollTop-=i*b.settings.wheelSpeed:h.scrollTop+=g*b.settings.wheelSpeed,j=!0):b.scrollbarXActive&&!b.scrollbarYActive&&(g?h.scrollLeft+=g*b.settings.wheelSpeed:h.scrollLeft-=i*b.settings.wheelSpeed,j=!0):(h.scrollTop-=i*b.settings.wheelSpeed,h.scrollLeft+=g*b.settings.wheelSpeed),q(b),j=j||c(g,i),j&&!a.ctrlKey&&(a.stopPropagation(),a.preventDefault())}}var h=b.element;"undefined"==typeof window.onwheel?"undefined"!=typeof window.onmousewheel&&b.event.bind(h,"mousewheel",g):b.event.bind(h,"wheel",g)},touch:function(b){function c(a,c){var d=v(l.scrollTop),e=l.scrollLeft,f=u(a),g=u(c);if(g>f){// user is perhaps trying to swipe up/down the page
+if(0>c&&d===b.contentHeight-b.containerHeight||0<c&&0===d)// set prevent for mobile Chrome refresh
+return 0===window.scrollY&&0<c&&E.isChrome;}else if(f>g&&(0>a&&e===b.contentWidth-b.containerWidth||0<a&&0===e))// user is perhaps trying to swipe left/right across the page
+return!0;return!0}function d(a,c){l.scrollTop-=c,l.scrollLeft-=a,q(b)}function f(a){return a.targetTouches?a.targetTouches[0]:a}function g(a){return!(a.pointerType&&"pen"===a.pointerType&&0===a.buttons)&&(!!(a.targetTouches&&1===a.targetTouches.length)||!!(a.pointerType&&"mouse"!==a.pointerType&&a.pointerType!==a.MSPOINTER_TYPE_MOUSE))}function h(a){if(g(a)){var b=f(a);m.pageX=b.pageX,m.pageY=b.pageY,n=new Date().getTime(),null!==p&&clearInterval(p)}}function i(b,c,d){if(!l.contains(b))return!1;for(var e=b;e&&e!==l;){if(e.classList.contains(z.element.consuming))return!0;var f=a(e);// if deltaY && vertical scrollable
+if(d&&f.overflowY.match(/(scroll|auto)/)){var g=e.scrollHeight-e.clientHeight;if(0<g&&(0<e.scrollTop&&0>d||e.scrollTop<g&&0<d))return!0}// if deltaX && horizontal scrollable
+if(c&&f.overflowX.match(/(scroll|auto)/)){var h=e.scrollWidth-e.clientWidth;if(0<h&&(0<e.scrollLeft&&0>c||e.scrollLeft<h&&0<c))return!0}e=e.parentNode}return!1}function j(a){if(g(a)){var b=f(a),e={pageX:b.pageX,pageY:b.pageY},h=e.pageX-m.pageX,j=e.pageY-m.pageY;if(i(a.target,h,j))return;d(h,j),m=e;var k=new Date().getTime(),l=k-n;0<l&&(o.x=h/l,o.y=j/l,n=k),c(h,j)&&a.preventDefault()}}function k(){b.settings.swipeEasing&&(clearInterval(p),p=setInterval(function(){return b.isInitialized?void clearInterval(p):o.x||o.y?.01>u(o.x)&&.01>u(o.y)?void clearInterval(p):b.element?void(d(30*o.x,30*o.y),o.x*=.8,o.y*=.8):void clearInterval(p):void clearInterval(p)},10))}if(E.supportsTouch||E.supportsIePointer){var l=b.element,m={},n=0,o={},p=null;E.supportsTouch?(b.event.bind(l,"touchstart",h),b.event.bind(l,"touchmove",j),b.event.bind(l,"touchend",k)):E.supportsIePointer&&(window.PointerEvent?(b.event.bind(l,"pointerdown",h),b.event.bind(l,"pointermove",j),b.event.bind(l,"pointerup",k)):window.MSPointerEvent&&(b.event.bind(l,"MSPointerDown",h),b.event.bind(l,"MSPointerMove",j),b.event.bind(l,"MSPointerUp",k)))}}},H=function(d,e){var f=this;if(void 0===e&&(e={}),"string"==typeof d&&(d=document.querySelector(d)),!d||!d.nodeName)throw new Error("no element is specified to initialize PerfectScrollbar");for(var g in this.element=d,d.classList.add(z.main),this.settings=F(),e)this.settings[g]=e[g];this.containerWidth=null,this.containerHeight=null,this.contentWidth=null,this.contentHeight=null;var h=function(){return d.classList.add(z.state.focus)},i=function(){return d.classList.remove(z.state.focus)};this.isRtl="rtl"===a(d).direction,!0===this.isRtl&&d.classList.add(z.rtl),this.isNegativeScroll=function(){var a=d.scrollLeft,b=null;return d.scrollLeft=-1,b=0>d.scrollLeft,d.scrollLeft=a,b}(),this.negativeScrollAdjustment=this.isNegativeScroll?d.scrollWidth-d.clientWidth:0,this.event=new D,this.ownerDocument=d.ownerDocument||document,this.scrollbarXRail=c(z.element.rail("x")),d.appendChild(this.scrollbarXRail),this.scrollbarX=c(z.element.thumb("x")),this.scrollbarXRail.appendChild(this.scrollbarX),this.scrollbarX.setAttribute("tabindex",0),this.event.bind(this.scrollbarX,"focus",h),this.event.bind(this.scrollbarX,"blur",i),this.scrollbarXActive=null,this.scrollbarXWidth=null,this.scrollbarXLeft=null;var j=a(this.scrollbarXRail);this.scrollbarXBottom=parseInt(j.bottom,10),isNaN(this.scrollbarXBottom)?(this.isScrollbarXUsingBottom=!1,this.scrollbarXTop=n(j.top)):this.isScrollbarXUsingBottom=!0,this.railBorderXWidth=n(j.borderLeftWidth)+n(j.borderRightWidth),b(this.scrollbarXRail,{display:"block"}),this.railXMarginWidth=n(j.marginLeft)+n(j.marginRight),b(this.scrollbarXRail,{display:""}),this.railXWidth=null,this.railXRatio=null,this.scrollbarYRail=c(z.element.rail("y")),d.appendChild(this.scrollbarYRail),this.scrollbarY=c(z.element.thumb("y")),this.scrollbarYRail.appendChild(this.scrollbarY),this.scrollbarY.setAttribute("tabindex",0),this.event.bind(this.scrollbarY,"focus",h),this.event.bind(this.scrollbarY,"blur",i),this.scrollbarYActive=null,this.scrollbarYHeight=null,this.scrollbarYTop=null;var k=a(this.scrollbarYRail);this.scrollbarYRight=parseInt(k.right,10),isNaN(this.scrollbarYRight)?(this.isScrollbarYUsingRight=!1,this.scrollbarYLeft=n(k.left)):this.isScrollbarYUsingRight=!0,this.scrollbarYOuterWidth=this.isRtl?p(this.scrollbarY):null,this.railBorderYWidth=n(k.borderTopWidth)+n(k.borderBottomWidth),b(this.scrollbarYRail,{display:"block"}),this.railYMarginHeight=n(k.marginTop)+n(k.marginBottom),b(this.scrollbarYRail,{display:""}),this.railYHeight=null,this.railYRatio=null,this.reach={x:0>=d.scrollLeft?"start":d.scrollLeft>=this.contentWidth-this.containerWidth?"end":null,y:0>=d.scrollTop?"start":d.scrollTop>=this.contentHeight-this.containerHeight?"end":null},this.isAlive=!0,this.settings.handlers.forEach(function(a){return G[a](f)}),this.lastScrollTop=v(d.scrollTop),this.lastScrollLeft=d.scrollLeft,this.event.bind(this.element,"scroll",function(a){return f.onScroll(a)}),q(this)};return H.prototype.update=function(){this.isAlive&&(// Recalcuate negative scrollLeft adjustment
+// Recalculate rail margins
+// Hide scrollbars not to affect scrollWidth and scrollHeight
+this.negativeScrollAdjustment=this.isNegativeScroll?this.element.scrollWidth-this.element.clientWidth:0,b(this.scrollbarXRail,{display:"block"}),b(this.scrollbarYRail,{display:"block"}),this.railXMarginWidth=n(a(this.scrollbarXRail).marginLeft)+n(a(this.scrollbarXRail).marginRight),this.railYMarginHeight=n(a(this.scrollbarYRail).marginTop)+n(a(this.scrollbarYRail).marginBottom),b(this.scrollbarXRail,{display:"none"}),b(this.scrollbarYRail,{display:"none"}),q(this),l(this,"top",0,!1,!0),l(this,"left",0,!1,!0),b(this.scrollbarXRail,{display:""}),b(this.scrollbarYRail,{display:""}))},H.prototype.onScroll=function(){this.isAlive&&(q(this),l(this,"top",this.element.scrollTop-this.lastScrollTop),l(this,"left",this.element.scrollLeft-this.lastScrollLeft),this.lastScrollTop=v(this.element.scrollTop),this.lastScrollLeft=this.element.scrollLeft)},H.prototype.destroy=function(){this.isAlive&&(// unset elements
+this.event.unbindAll(),e(this.scrollbarX),e(this.scrollbarY),e(this.scrollbarXRail),e(this.scrollbarYRail),this.removePsClasses(),this.element=null,this.scrollbarX=null,this.scrollbarY=null,this.scrollbarXRail=null,this.scrollbarYRail=null,this.isAlive=!1)},H.prototype.removePsClasses=function(){this.element.className=this.element.className.split(" ").filter(function(a){return!a.match(/^ps([-_].+|)$/)}).join(" ")},H});