Repository: testpress/design
Pull request #441: Add UI for platform preference in OTT
Author: login: Karthikeyantestpress
Created: 2025-04-16T09:57:45Z | Merged: 2025-04-22T09:41:16Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a comprehensive "Platform Preference" section under Settings, accessible via the sidebar with active state highlighting.
  - Added dedicated pages and navigation tabs for General, Player Preferences, and Integrations within Platform Preferences.
  - Implemented detailed forms for organization info, localization (languages and timezones), and theme preferences (including light/dark mode and user toggle).
  - Enabled player preference customization, including playback settings, player controls, appearance (with color pickers), and subtitle/audio options.
  - Provided integration management interfaces for payment gateways (Stripe, PayPal, Razorpay), accounting and billing (Zoho), and analytics (Google Analytics), each with connect/disconnect toggles and integration details.
- **Style**
  - Enhanced responsive design and dark mode support across all new settings pages and components for improved user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/src/flimix/partials/sidebar.html b/src/flimix/partials/sidebar.html
index d8805ef2c4..3037b07b5f 100644
--- a/src/flimix/partials/sidebar.html
+++ b/src/flimix/partials/sidebar.html
@@ -193,8 +193,8 @@
           <li><a href="/flimix/settings/domain_management/"
               class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700 {% if 'flimix/settings/domain_management' in page.url %}bg-gray-50{% endif %}">Domain
               Management</a></li>
-          <li><a href="#"
-              class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700">Platform
+          <li><a href="/flimix/settings/platform_preference/"
+              class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700 {% if 'flimix/settings/platform_preference' in page.url %}bg-gray-50{% endif %} ">Platform
               Preferences</a></li>
           <li><a href="/flimix/settings/staff_management/" class="hover:bg-gray-50 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700 {% if 'flimix/settings/staff_management' in page.url %}bg-gray-50{% endif %}">Staff
               Management</a></li>
diff --git a/src/flimix/settings/platform_preference/general/index.html b/src/flimix/settings/platform_preference/general/index.html
new file mode 100644
index 0000000000..edc3c0a421
--- /dev/null
+++ b/src/flimix/settings/platform_preference/general/index.html
@@ -0,0 +1,36 @@
+---
+permalink: flimix/settings/platform_preference/
+tags: flimix
+view: "Settings"
+title: Platform Preference
+---
+
+
+{% extends "src/flimix/layouts/sidebar_layout.html" %}
+{% block main_class %}bg-stone-50 min-h-[92vh]{% endblock %}
+
+
+{% block main_content %}
+<div class="space-y-5">
+  {% include "../includes/header.html" %}
+  {% include "./tabs.html" %}
+
+  <form>
+    <div class="space-y-12">
+
+        {% include "./organization_info.html" %}
+        {% include "./localization.html" %}
+        {% include "./theme_preference.html" %}
+
+    </div>
+
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <button type="button" class="text-sm/6 font-semibold text-gray-900">Cancel</button>
+      <button type="submit"
+        class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
+    </div>
+  </form>
+
+</div>
+
+{% endblock main_content %}
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/general/localization.html b/src/flimix/settings/platform_preference/general/localization.html
new file mode 100644
index 0000000000..ddfe5f587d
--- /dev/null
+++ b/src/flimix/settings/platform_preference/general/localization.html
@@ -0,0 +1,189 @@
+<div
+class="grid grid-cols-1 gap-x-8  border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Localization
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Configure default language, available UI languages, and timezone for the platform.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <!-- Input -->
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Default Language
+        </label>
+        <!-- Language Select -->
+        <div class="relative">
+          <select id="hs-pro-select-language" data-hs-select='{
+    "placeholder": "Select Language",
+    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
+    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-7 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm text-gray-800 hover:border-gray-300 focus:outline-hidden focus:border-gray-300 dark:bg-neutral-900 dark:border-neutral-800 dark:text-neutral-200 dark:hover:border-neutral-700 dark:focus:border-neutral-700",
+    "dropdownClasses": "end-0 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-white rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900",
+    "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
+    "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-gray-800 dark:text-neutral-200 \" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-gray-800 dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>"
+  }' class="hidden">
+            <option value="">Choose</option>
+            <option value="en" selected>English</option>
+            <option value="hi">Hindi</option>
+            <option value="ta">Tamil</option>
+            <option value="te">Telugu</option>
+            <option value="ml">Malayalam</option>
+            <option value="kn">Kannada</option>
+            <option value="mr">Marathi</option>
+            <option value="gu">Gujarati</option>
+            <option value="bn">Bengali</option>
+            <option value="pa">Punjabi</option>
+            <option value="ur">Urdu</option>
+            <option value="as">Assamese</option>
+            <option value="or">Odia</option>
+            <option value="fr">French</option>
+            <option value="es">Spanish</option>
+            <option value="de">German</option>
+            <option value="zh">Chinese</option>
+            <option value="ja">Japanese</option>
+            <option value="ko">Korean</option>
+            <option value="ar">Arabic</option>
+
+          </select>
+
+          <div class="absolute top-1/2 end-2.5 -translate-y-1/2">
+            <svg class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
+              xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m7 15 5 5 5-5" />
+              <path d="m7 9 5-5 5 5" />
+            </svg>
+          </div>
+          <!-- End Header -->
+        </div>
+        <!-- End Language Select -->
+      </div>
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Timezone
+        </label>
+        <div class="relative">
+          <select id="hs-pro-select-language" data-hs-select='{
+            "placeholder": "Select Language",
+            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
+            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-7 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm text-gray-800 hover:border-gray-300 focus:outline-hidden focus:border-gray-300 dark:bg-neutral-900 dark:border-neutral-800 dark:text-neutral-200 dark:hover:border-neutral-700 dark:focus:border-neutral-700",
+            "dropdownClasses": "end-0 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-white rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900",
+            "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
+            "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-gray-800 dark:text-neutral-200 \" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-gray-800 dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>"
+          }' class="hidden">
+            <option value="">Choose</option>
+            <option value="Asia/Kolkata" selected>Asia/Kolkata (IST)</option>
+            <option value="UTC">UTC (Coordinated Universal Time)</option>
+            <option value="Asia/Dubai">Asia/Dubai (GST)</option>
+            <option value="Asia/Shanghai">Asia/Shanghai (CST)</option>
+            <option value="Asia/Tokyo">Asia/Tokyo (JST)</option>
+            <option value="Europe/London">Europe/London (GMT/BST)</option>
+            <option value="Europe/Berlin">Europe/Berlin (CET/CEST)</option>
+            <option value="Europe/Paris">Europe/Paris (CET/CEST)</option>
+            <option value="America/New_York">America/New_York (EST/EDT)</option>
+            <option value="America/Chicago">America/Chicago (CST/CDT)</option>
+            <option value="America/Los_Angeles">America/Los_Angeles (PST/PDT)</option>
+            <option value="Australia/Sydney">Australia/Sydney (AEST/AEDT)</option>
+            <option value="Asia/Bangkok">Asia/Bangkok (ICT)</option>
+            <option value="Asia/Jakarta">Asia/Jakarta (WIB)</option>
+            <option value="Asia/Singapore">Asia/Singapore (SGT)</option>
+            <option value="Asia/Seoul">Asia/Seoul (KST)</option>
+            <option value="Asia/Hong_Kong">Asia/Hong_Kong (HKT)</option>
+            <option value="Asia/Kathmandu">Asia/Kathmandu (NPT)</option>
+            <option value="America/Toronto">America/Toronto (EST/EDT)</option>
+          </select>
+
+          <div class="absolute top-1/2 end-2.5 -translate-y-1/2">
+            <svg class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
+              xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m7 15 5 5 5-5" />
+              <path d="m7 9 5-5 5 5" />
+            </svg>
+          </div>
+          <!-- End Header -->
+        </div>
+      </div>
+      <!-- End Input -->
+    </div>
+    <!-- End Input Grid -->
+
+    <!-- Input Grid -->
+    <div class="col-span-2">
+      <label for="hs-pro-esssa" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+        Available Languages
+      </label>
+      <div class="relative w-full">
+        <select id="hs-pro-select-tags" multiple data-hs-select='{"placeholder": "Select available languages...",
+        "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
+        "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
+        "mode": "tags",
+        "wrapperClasses": "relative ps-0.5 pe-9 flex items-center flex-wrap text-nowrap w-full border border-gray-200 rounded-lg text-start text-sm focus:border-emerald-500 focus:ring-emerald-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400",
+        "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-10 bg-white border border-gray-200 rounded-full p-1 m-1 dark:bg-neutral-900 dark:border-neutral-700 \"><div class=\"size-6 me-1 text-xs\" data-icon></div><div class=\"whitespace-nowrap text-gray-800 dark:text-neutral-200 \" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-2 rounded-full text-gray-800 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 text-sm dark:bg-neutral-700/50 dark:hover:bg-neutral-700 dark:text-neutral-400 cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
+        "tagsInputClasses": "focus:ring-0 border-0 py-2 px-3 rounded-lg order-1 text-sm outline-none dark:bg-neutral-900 dark:placeholder-neutral-500 dark:text-neutral-400",
+        "optionTemplate": "<div class=\"flex items-center\"><div class=\"size-8 me-2 text-xs\" data-icon></div><div><div class=\"text-sm font-semibold text-gray-800 dark:text-neutral-200 \" data-title></div><div class=\"text-xs text-gray-500 dark:text-neutral-500 \" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4 text-green-600\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>",
+        "extraMarkup": ""
+      }' class="hidden">
+          <option value="">Choose</option>
+          <option value="en" selected>English</option>
+          <option value="hi" selected>Hindi</option>
+          <option value="ta" selected>Tamil</option>
+          <option value="te">Telugu</option>
+          <option value="ml">Malayalam</option>
+          <option value="kn">Kannada</option>
+          <option value="mr">Marathi</option>
+          <option value="gu">Gujarati</option>
+          <option value="bn">Bengali</option>
+          <option value="pa">Punjabi</option>
+          <option value="ur">Urdu</option>
+          <option value="as">Assamese</option>
+          <option value="or">Odia</option>
+          <option value="fr">French</option>
+          <option value="es">Spanish</option>
+          <option value="de">German</option>
+          <option value="zh">Chinese</option>
+          <option value="ja">Japanese</option>
+          <option value="ko">Korean</option>
+          <option value="ar">Arabic</option>
+        </select>
+
+        <div class="absolute top-1/2 end-2.5 -translate-y-1/2">
+          <svg class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg"
+            width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path d="m7 15 5 5 5-5" />
+            <path d="m7 9 5-5 5 5" />
+          </svg>
+        </div>
+      </div>
+
+      <p class="mt-1.5 text-sm   text-stone-500 dark:text-neutral-500">
+        Allows users to switch between the available languages.
+      </p>
+    </div>
+    <!-- End Input Grid -->
+
+    <!-- Input Grid -->
+
+    <!-- End Input Grid -->
+  </div>
+</div>
+<!-- End Col -->
+</div>
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/general/organization_info.html b/src/flimix/settings/platform_preference/general/organization_info.html
new file mode 100644
index 0000000000..7282d138db
--- /dev/null
+++ b/src/flimix/settings/platform_preference/general/organization_info.html
@@ -0,0 +1,114 @@
+<div
+class="grid grid-cols-1 gap-x-8  pt-4 border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Organization Info
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Basic details about the organization to be shown across the platform.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <!-- Input -->
+      <div class="col-span-2">
+        <label for="hs-pro-esssn" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Organization Name
+        </label>
+        <input id="hs-pro-esssn" type="text"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600"
+          value="Art of Living">
+      </div>
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div class="col-span-2">
+        <label for="hs-pro-epii" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Description
+        </label>
+        <textarea id="hs-pro-epii"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600"
+          rows="3" placeholder="Provide a brief description of your ott platform..."
+          spellcheck="false"></textarea>
+      </div>
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Email
+        </label>
+        <input id="hs-pro-esscp" type="email"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600"
+          value="artofliving@gmail.com">
+      </div>
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Phone number
+        </label>
+        <input id="hs-pro-esscp" type="text"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600"
+          value="9876543210">
+      </div>
+      <!-- End Input -->
+    </div>
+    <!-- End Input Grid -->
+
+    <!-- Input Grid -->
+    <div class="col-span-2">
+      <label for="hs-pro-esssa" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+        Address
+      </label>
+      <input id="hs-pro-esssa" type="email"
+        class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600">
+    </div>
+    <!-- End Input Grid -->
+
+    <!-- Input Grid -->
+    <div class="grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-5">
+      <!-- Input -->
+      <div class="sm:col-span-1">
+        <label for="hs-pro-esscy" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          City
+        </label>
+        <input id="hs-pro-esscy" type="text"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600">
+      </div>
+      <!-- End Input -->
+      <!-- Input -->
+      <div class="col-span-1">
+        <label for="hs-pro-essun" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          State
+        </label>
+        <input id="hs-pro-essun" type="text"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600">
+      </div>
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div class="col-span-1">
+        <label for="hs-pro-esszc" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          ZIP / Postal code
+        </label>
+        <input id="hs-pro-esszc" type="text"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600">
+      </div>
+      <!-- End Input -->
+    </div>
+    <!-- End Input Grid -->
+  </div>
+  <!-- End Business Vertical Settings Card -->
+</div>
+<!-- End Col -->
+</div>
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/general/tabs.html b/src/flimix/settings/platform_preference/general/tabs.html
new file mode 100644
index 0000000000..2d2994db51
--- /dev/null
+++ b/src/flimix/settings/platform_preference/general/tabs.html
@@ -0,0 +1,20 @@
+<div>
+  <div class="grid grid-cols-1 sm:hidden">
+    <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+    <select onchange="location.href=this.value"  aria-label="Select a tab" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
+      <option :value="`${previewPath}/flimix/settings/platform_preference/`" selected>General</option>
+      <option :value="`${previewPath}/flimix/settings/platform_preference/player_preference/`">Player Preferences</option>
+      <option :value="`${previewPath}/flimix/settings/platform_preference/integrations/`">Integrations</option>
+    </select>
+  </div>
+  <div class="hidden sm:block">
+    <div class="border-b border-gray-200">
+      <nav class="-mb-px flex space-x-8" aria-label="Tabs">
+        <a :href="`${previewPath}/flimix/settings/platform_preference/`" class="whitespace-nowrap border-b-2 border-indigo-500 px-1 py-4 text-sm font-medium text-indigo-600" aria-current="page">General</a>
+        <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+        <a :href="`${previewPath}/flimix/settings/platform_preference/player_preference/`" class="whitespace-nowrap border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">Player Preferences</a>
+        <a :href="`${previewPath}/flimix/settings/platform_preference/integrations/`" class="whitespace-nowrap border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">Integrations</a>
+      
+    </div>
+  </div>
+</div>
diff --git a/src/flimix/settings/platform_preference/general/theme_preference.html b/src/flimix/settings/platform_preference/general/theme_preference.html
new file mode 100644
index 0000000000..2154cc5d86
--- /dev/null
+++ b/src/flimix/settings/platform_preference/general/theme_preference.html
@@ -0,0 +1,89 @@
+<div
+class="grid grid-cols-1 gap-x-8  border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Theme Preferences
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Control the default visual mode and whether users can toggle between light and dark themes.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <!-- Input -->
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Default Theme
+        </label>
+        <!-- Language Select -->
+        <div class="relative">
+          <select id="hs-pro-select-language" data-hs-select='{
+    "placeholder": "Select Theme",
+    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
+    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-7 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm text-gray-800 hover:border-gray-300 focus:outline-hidden focus:border-gray-300 dark:bg-neutral-900 dark:border-neutral-800 dark:text-neutral-200 dark:hover:border-neutral-700 dark:focus:border-neutral-700",
+    "dropdownClasses": "end-0 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-white rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900",
+    "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
+    "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-gray-800 dark:text-neutral-200 \" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-gray-800 dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>"
+  }' class="hidden">
+            <option value="">Choose</option>
+            <option value="light" selected >Light</option>
+            <option value="dark">Dark</option>
+          </select>
+
+          <div class="absolute top-1/2 end-2.5 -translate-y-1/2">
+            <svg class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
+              xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m7 15 5 5 5-5" />
+              <path d="m7 9 5-5 5 5" />
+            </svg>
+          </div>
+          <!-- End Header -->
+        </div>
+        <!-- End Language Select -->
+      </div>
+      <!-- End Input -->
+
+      <!-- End Input -->
+    </div>
+    <!-- End Input Grid -->
+
+    <!-- Input Grid -->
+    <div class="flex gap-3">
+      <div class="flex h-6 shrink-0 items-center">
+        <div class="group grid size-4 grid-cols-1">
+          <input id="candidates" checked aria-describedby="candidates-description" name="candidates"
+            type="checkbox"
+            class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+          <svg
+            class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+            viewBox="0 0 14 14" fill="none">
+            <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round"></path>
+            <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round"></path>
+          </svg>
+        </div>
+      </div>
+      <div class="text-sm/6">
+        <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">Allow
+          Users to Switch Theme</label>
+        <p id="candidates-description" class="text-stone-500">Allows users to switch between Light and Dark
+          mode.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- End Col -->
+</div>
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/includes/header.html b/src/flimix/settings/platform_preference/includes/header.html
new file mode 100644
index 0000000000..9387c24748
--- /dev/null
+++ b/src/flimix/settings/platform_preference/includes/header.html
@@ -0,0 +1,6 @@
+<div class="flex flex-wrap justify-between items-center gap-2">
+  <div>
+    <h1 class="text-lg md:text-xl font-semibold text-stone-800 dark:text-neutral-200">Platform Preference</h1>    
+    <p class="text-sm text-stone-500 dark:text-neutral-400">View and manage platform-wide preferences and behavior.</p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/integrations/accounting_and_billing.html b/src/flimix/settings/platform_preference/integrations/accounting_and_billing.html
new file mode 100644
index 0000000000..b6dd2f1f53
--- /dev/null
+++ b/src/flimix/settings/platform_preference/integrations/accounting_and_billing.html
@@ -0,0 +1,58 @@
+<div>
+  <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+    Accounting & Billing
+  </h2>
+<p class="mt-1 text-sm text-stone-500 dark:text-neutral-500">
+  Integrate with third-party platforms to automate invoice generation, track payments, and manage financial records.
+</p>
+</div>
+<!-- Card -->
+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
+  <div
+    class="p-5 space-y-4 flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Header -->
+    <div class="flex justify-between">
+      <div
+        class="flex flex-col justify-center items-center size-9.5 border border-gray-200 rounded-lg dark:border-neutral-700 p-2">
+        <img class="shrink-0 size-5 text-gray-500 dark:text-neutral-500"
+          src="https://www.zohowebstatic.com/sites/zweb/images/favicon.ico" alt="">
+      </div>
+
+      <div>
+        <label for="hs-pro-daicn1"
+          class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-gray-200 cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-gray-100 hover:border-gray-300 focus:outline-none focus:border-gray-300 dark:border-neutral-700 dark:peer-checked:bg-neutral-800 dark:hover:border-neutral-600 dark:focus:border-neutral-600">
+          <input type="checkbox" id="hs-pro-daicn1" class="peer hidden" checked>
+          <span class="relative z-10 text-gray-800 dark:text-neutral-200 peer-checked:hidden">
+            Connect
+          </span>
+          <span
+            class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-gray-800 dark:text-neutral-200">
+            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+              fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 6 9 17l-5-5" />
+            </svg>
+            Connected
+          </span>
+        </label>
+      </div>
+    </div>
+    <!-- End Header -->
+
+    <!-- Body -->
+    <div>
+      <h3 class="font-medium text-gray-800 dark:text-neutral-200">
+        Zoho
+      </h3>
+
+      <p class="mt-1 text-sm text-gray-500 dark:text-neutral-500">
+        Integrate Zoho CRM and Books for seamless lead, contact, and invoice management.
+      </p>
+    </div>
+    <!-- End Body -->
+
+    <button type="button"
+      class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+      View integration
+    </button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/integrations/analytics.html b/src/flimix/settings/platform_preference/integrations/analytics.html
new file mode 100644
index 0000000000..30fb96d486
--- /dev/null
+++ b/src/flimix/settings/platform_preference/integrations/analytics.html
@@ -0,0 +1,58 @@
+<div>
+  <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+    Analytics & Tracking
+  </h2>
+<p class="mt-1 text-sm text-stone-500 dark:text-neutral-500">
+  Connect analytics tools to monitor user behavior, content performance, and platform metrics in real time.
+</p>
+</div>
+<!-- Card -->
+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
+  <div
+    class="p-5 space-y-4 flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Header -->
+    <div class="flex justify-between">
+      <div
+        class="flex flex-col justify-center items-center size-9.5 border border-gray-200 rounded-lg dark:border-neutral-700 p-2">
+        <img class="shrink-0 size-5 text-gray-500 dark:text-neutral-500"
+          src="https://www.vectorlogo.zone/logos/google/google-icon.svg" alt="">
+      </div>
+
+      <div>
+        <label for="hs-pro-daicn1"
+          class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-gray-200 cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-gray-100 hover:border-gray-300 focus:outline-none focus:border-gray-300 dark:border-neutral-700 dark:peer-checked:bg-neutral-800 dark:hover:border-neutral-600 dark:focus:border-neutral-600">
+          <input type="checkbox" id="hs-pro-daicn1" class="peer hidden" checked>
+          <span class="relative z-10 text-gray-800 dark:text-neutral-200 peer-checked:hidden">
+            Connect
+          </span>
+          <span
+            class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-gray-800 dark:text-neutral-200">
+            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+              fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 6 9 17l-5-5" />
+            </svg>
+            Connected
+          </span>
+        </label>
+      </div>
+    </div>
+    <!-- End Header -->
+
+    <!-- Body -->
+    <div>
+      <h3 class="font-medium text-gray-800 dark:text-neutral-200">
+        Google Analytics
+      </h3>
+
+      <p class="mt-1 text-sm text-gray-500 dark:text-neutral-500">
+        Track user activity, traffic sources, and behavior across your platform with detailed analytics and insights.
+      </p>
+    </div>
+    <!-- End Body -->
+
+    <button type="button"
+      class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+      View integration
+    </button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/integrations/index.html b/src/flimix/settings/platform_preference/integrations/index.html
new file mode 100644
index 0000000000..b20da5dc8d
--- /dev/null
+++ b/src/flimix/settings/platform_preference/integrations/index.html
@@ -0,0 +1,17 @@
+{% extends "src/flimix/layouts/sidebar_layout.html" %}
+{% block main_class %}bg-stone-50 min-h-[92vh]{% endblock %}
+
+
+
+
+{% block main_content %}
+<div class="space-y-5">
+  {% include "../includes/header.html" %}
+  {% include "./tabs.html" %}
+  {% include "./payment_gateway.html" %}
+  {% include "./accounting_and_billing.html" %}
+  {% include "./analytics.html" %}
+</div>
+
+
+{% endblock main_content %}
diff --git a/src/flimix/settings/platform_preference/integrations/payment_gateway.html b/src/flimix/settings/platform_preference/integrations/payment_gateway.html
new file mode 100644
index 0000000000..220975d1f5
--- /dev/null
+++ b/src/flimix/settings/platform_preference/integrations/payment_gateway.html
@@ -0,0 +1,126 @@
+<div>
+<h2 class="font-medium text-stone-800 dark:text-neutral-200">
+  Payment Gateways
+</h2>
+<p class="mt-1 text-sm text-stone-500 dark:text-neutral-500">
+  Connect and manage your own payment gateway to securely handle user subscriptions and pay-per-view purchases.
+</p>
+</div>
+<!-- Card -->
+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
+  <div class="p-5 space-y-4 flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Header -->
+    <div class="flex justify-between">
+      <div class="flex flex-col justify-center items-center size-9.5 border border-gray-200 rounded-lg dark:border-neutral-700 p-2">
+        <img class="shrink-0 size-5 text-gray-500 dark:text-neutral-500" src="https://www.vectorlogo.zone/logos/stripe/stripe-icon.svg" alt="">
+      </div>
+  
+      <div>
+        <label for="stripe" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-gray-200 cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-gray-100 hover:border-gray-300 focus:outline-none focus:border-gray-300 dark:border-neutral-700 dark:peer-checked:bg-neutral-800 dark:hover:border-neutral-600 dark:focus:border-neutral-600">
+          <input type="checkbox" id="stripe" class="peer hidden">
+          <span class="relative z-10 text-gray-800 dark:text-neutral-200 peer-checked:hidden">
+            Connect
+          </span>
+          <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-gray-800 dark:text-neutral-200">
+            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>
+            Connected
+          </span>
+        </label>
+      </div>
+    </div>
+    <!-- End Header -->
+  
+    <!-- Body -->
+    <div class="flex-grow">
+      <h3 class="font-medium text-gray-800 dark:text-neutral-200">
+        Stripe
+      </h3>
+  
+      <p class="mt-1 text-sm text-gray-500 dark:text-neutral-500">
+        Accept global card payments and manage subscriptions.
+      </p>
+    </div>
+    <!-- End Body -->
+  
+    <button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+      View integration
+    </button>
+  </div>
+<!-- End Card -->
+<div class="p-5 space-y-4 flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+  <!-- Header -->
+  <div class="flex justify-between">
+    <div class="flex flex-col justify-center items-center size-9.5 border border-gray-200 rounded-lg dark:border-neutral-700 p-2">
+      <img class="shrink-0 size-5 text-gray-500 dark:text-neutral-500" src="https://www.paypalobjects.com/marketing/web/logos/paypal-mark-color.svg" alt="">
+    </div>
+
+    <div>
+      <label for="paypal" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-gray-200 cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-gray-100 hover:border-gray-300 focus:outline-none focus:border-gray-300 dark:border-neutral-700 dark:peer-checked:bg-neutral-800 dark:hover:border-neutral-600 dark:focus:border-neutral-600">
+        <input type="checkbox" id="paypal" class="peer hidden">
+        <span class="relative z-10 text-gray-800 dark:text-neutral-200 peer-checked:hidden">
+          Connect
+        </span>
+        <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-gray-800 dark:text-neutral-200">
+          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>
+          Connected
+        </span>
+      </label>
+    </div>
+  </div>
+  <!-- End Header -->
+
+  <!-- Body -->
+  <div class="flex-grow">
+    <h3 class="font-medium text-gray-800 dark:text-neutral-200">
+      PayPal
+    </h3>
+
+    <p class="mt-1 text-sm text-gray-500 dark:text-neutral-500">
+      Let users pay securely using PayPal or linked cards.
+    </p>
+  </div>
+  <!-- End Body -->
+
+  <button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+    View integration
+  </button>
+</div>
+<div class="p-5 space-y-4 flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+  <!-- Header -->
+  <div class="flex justify-between">
+    <div class="flex flex-col justify-center items-center size-9.5 border border-gray-200 rounded-lg dark:border-neutral-700 p-2">
+     <svg viewBox="0 0 1896 401" focusable="false" class="w-16" xmlns="http://www.w3.org/2000/svg"><path fill="#3395FF" d="M122.63 105.7l-15.75 57.97 90.15-58.3-58.96 219.98 59.88.05L285.05.48"></path><path d="M25.6 232.92L.8 325.4h122.73l50.22-188.13L25.6 232.92m426.32-81.42c-3 11.15-8.78 19.34-17.4 24.57-8.6 5.22-20.67 7.84-36.25 7.84h-49.5l17.38-64.8h49.5c15.56 0 26.25 2.6 32.05 7.9 5.8 5.3 7.2 13.4 4.22 24.6m51.25-1.4c6.3-23.4 3.7-41.4-7.82-54-11.5-12.5-31.68-18.8-60.48-18.8H324.4l-66.5 248.1h53.67l26.8-100h35.2c7.9 0 14.12 1.3 18.66 3.8 4.55 2.6 7.22 7.1 8.04 13.6l9.58 82.6h57.5l-9.32-77c-1.9-17.2-9.77-27.3-23.6-30.3 17.63-5.1 32.4-13.6 44.3-25.4a92.6 92.6 0 0 0 24.44-42.5m130.46 86.4c-4.5 16.8-11.4 29.5-20.73 38.4-9.34 8.9-20.5 13.3-33.52 13.3-13.26 0-22.25-4.3-27-13-4.76-8.7-4.92-21.3-.5-37.8 4.42-16.5 11.47-29.4 21.17-38.7 9.7-9.3 21.04-13.95 34.06-13.95 13 0 21.9 4.5 26.4 13.43 4.6 8.97 4.7 21.8.2 38.5zm23.52-87.8l-6.72 25.1c-2.9-9-8.53-16.2-16.85-21.6-8.34-5.3-18.66-8-30.97-8-15.1 0-29.6 3.9-43.5 11.7-13.9 7.8-26.1 18.8-36.5 33-10.4 14.2-18 30.3-22.9 48.4-4.8 18.2-5.8 34.1-2.9 47.9 3 13.9 9.3 24.5 19 31.9 9.8 7.5 22.3 11.2 37.6 11.2a82.4 82.4 0 0 0 35.2-7.7 82.11 82.11 0 0 0 28.4-21.2l-7 26.16h51.9L709.3 149h-52zm238.65 0H744.87l-10.55 39.4h87.82l-116.1 100.3-9.92 37h155.8l10.55-39.4h-94.1l117.88-101.8m142.4 52c-4.67 17.4-11.6 30.48-20.75 39-9.15 8.6-20.23 12.9-33.24 12.9-27.2 0-36.14-17.3-26.86-51.9 4.6-17.2 11.56-30.13 20.86-38.84 9.3-8.74 20.57-13.1 33.82-13.1 13 0 21.78 4.33 26.3 13.05 4.52 8.7 4.48 21.67-.13 38.87m30.38-80.83c-11.95-7.44-27.2-11.16-45.8-11.16-18.83 0-36.26 3.7-52.3 11.1a113.09 113.09 0 0 0-41 32.06c-11.3 13.9-19.43 30.2-24.42 48.8-4.9 18.53-5.5 34.8-1.7 48.73 3.8 13.9 11.8 24.6 23.8 32 12.1 7.46 27.5 11.17 46.4 11.17 18.6 0 35.9-3.74 51.8-11.18 15.9-7.48 29.5-18.1 40.8-32.1 11.3-13.94 19.4-30.2 24.4-48.8 5-18.6 5.6-34.84 1.8-48.8-3.8-13.9-11.7-24.6-23.6-32.05m185.1 40.8l13.3-48.1c-4.5-2.3-10.4-3.5-17.8-3.5-11.9 0-23.3 2.94-34.3 8.9-9.46 5.06-17.5 12.2-24.3 21.14l6.9-25.9-15.07.06h-37l-47.7 176.7h52.63l24.75-92.37c3.6-13.43 10.08-24 19.43-31.5 9.3-7.53 20.9-11.3 34.9-11.3 8.6 0 16.6 1.97 24.2 5.9m146.5 41.1c-4.5 16.5-11.3 29.1-20.6 37.8-9.3 8.74-20.5 13.1-33.5 13.1s-21.9-4.4-26.6-13.2c-4.8-8.85-4.9-21.6-.4-38.36 4.5-16.75 11.4-29.6 20.9-38.5 9.5-8.97 20.7-13.45 33.7-13.45 12.8 0 21.4 4.6 26 13.9 4.6 9.3 4.7 22.2.28 38.7m36.8-81.4c-9.75-7.8-22.2-11.7-37.3-11.7-13.23 0-25.84 3-37.8 9.06-11.95 6.05-21.65 14.3-29.1 24.74l.18-1.2 8.83-28.1h-51.4l-13.1 48.9-.4 1.7-54 201.44h52.7l27.2-101.4c2.7 9.02 8.2 16.1 16.6 21.22 8.4 5.1 18.77 7.63 31.1 7.63 15.3 0 29.9-3.7 43.75-11.1 13.9-7.42 25.9-18.1 36.1-31.9 10.2-13.8 17.77-29.8 22.6-47.9 4.9-18.13 5.9-34.3 3.1-48.45-2.85-14.17-9.16-25.14-18.9-32.9m174.65 80.65c-4.5 16.7-11.4 29.5-20.7 38.3-9.3 8.86-20.5 13.27-33.5 13.27-13.3 0-22.3-4.3-27-13-4.8-8.7-4.9-21.3-.5-37.8 4.4-16.5 11.42-29.4 21.12-38.7 9.7-9.3 21.05-13.94 34.07-13.94 13 0 21.8 4.5 26.4 13.4 4.6 8.93 4.63 21.76.15 38.5zm23.5-87.85l-6.73 25.1c-2.9-9.05-8.5-16.25-16.8-21.6-8.4-5.34-18.7-8-31-8-15.1 0-29.68 3.9-43.6 11.7-13.9 7.8-26.1 18.74-36.5 32.9-10.4 14.16-18 30.3-22.9 48.4-4.85 18.17-5.8 34.1-2.9 47.96 2.93 13.8 9.24 24.46 19 31.9 9.74 7.4 22.3 11.14 37.6 11.14 12.3 0 24.05-2.56 35.2-7.7a82.3 82.3 0 0 0 28.33-21.23l-7 26.18h51.9l47.38-176.7h-51.9zm269.87.06l.03-.05h-31.9c-1.02 0-1.92.05-2.85.07h-16.55l-8.5 11.8-2.1 2.8-.9 1.4-67.25 93.68-13.9-109.7h-55.08l27.9 166.7-61.6 85.3h54.9l14.9-21.13c.42-.62.8-1.14 1.3-1.8l17.4-24.7.5-.7 77.93-110.5 65.7-93 .1-.06h-.03z"></path></svg>
+    </div>
+
+    <div>
+      <label for="razorpay" class="relative py-2 px-3 flex items-center justify-center sm:justify-start border border-gray-200 cursor-pointer font-medium text-xs rounded-lg peer-checked:bg-gray-100 hover:border-gray-300 focus:outline-none focus:border-gray-300 dark:border-neutral-700 dark:peer-checked:bg-neutral-800 dark:hover:border-neutral-600 dark:focus:border-neutral-600">
+        <input type="checkbox" id="razorpay" class="peer hidden">
+        <span class="relative z-10 text-gray-800 dark:text-neutral-200 peer-checked:hidden">
+          Connect
+        </span>
+        <span class="relative z-10 hidden peer-checked:flex items-center gap-x-1.5 text-gray-800 dark:text-neutral-200">
+          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>
+          Connected
+        </span>
+      </label>
+    </div>
+  </div>
+  <!-- End Header -->
+
+  <!-- Body -->
+  <div class="flex-grow">
+    <h3 class="font-medium text-gray-800 dark:text-neutral-200">
+      Razorpay
+    </h3>
+
+    <p class="mt-1 text-sm text-gray-500 dark:text-neutral-500">
+      Accept UPI, cards, wallets & more - ideal for Indian transactions.
+    </p>
+  </div>
+  <!-- End Body -->
+
+  <button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+    View integration
+  </button>
+</div>
+</div>
diff --git a/src/flimix/settings/platform_preference/integrations/tabs.html b/src/flimix/settings/platform_preference/integrations/tabs.html
new file mode 100644
index 0000000000..e662700e91
--- /dev/null
+++ b/src/flimix/settings/platform_preference/integrations/tabs.html
@@ -0,0 +1,21 @@
+<div>
+  <div class="grid grid-cols-1 sm:hidden">
+    <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+    <select onchange="location.href=this.value"  aria-label="Select a tab" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
+      <option :value="`${previewPath}/flimix/settings/platform_preference/`">General</option>
+      <option :value="`${previewPath}/flimix/settings/platform_preference/player_preference/`" >Player Preferences</option>
+      <option :value="`${previewPath}/flimix/settings/platform_preference/integrations/`" selected >Integrations</option>
+    </select>
+  </div>
+  <div class="hidden sm:block">
+    <div class="border-b border-gray-200">
+      <nav class="-mb-px flex space-x-8" aria-label="Tabs">
+
+        <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+        <a :href="`${previewPath}/flimix/settings/platform_preference/`" class="whitespace-nowrap border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">General</a>
+        <a :href="`${previewPath}/flimix/settings/platform_preference/player_preference/`" class="whitespace-nowrap border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" >Player Preferences</a>
+        <a :href="`${previewPath}/flimix/settings/platform_preference/integrations/`" class="whitespace-nowrap border-b-2 border-indigo-500 px-1 py-4 text-sm font-medium text-indigo-600" aria-current="page">Integrations</a>
+      
+    </div>
+  </div>
+</div>
diff --git a/src/flimix/settings/platform_preference/player_preference/color_picker_script.html b/src/flimix/settings/platform_preference/player_preference/color_picker_script.html
new file mode 100644
index 0000000000..2206e4ce5c
--- /dev/null
+++ b/src/flimix/settings/platform_preference/player_preference/color_picker_script.html
@@ -0,0 +1,81 @@
+<script>
+  document.addEventListener('DOMContentLoaded', (event) => {
+
+    const pickers = [
+      {
+        element: '#primary_color_picker',
+        input: '#primary_color_input',
+        defaultColor: '#03a4eb'
+      },
+      {
+        element: '#icons_color_picker',
+        input: '#icons_color_input',
+        defaultColor: '#ffffff'
+      },
+      {
+        element: '#accent_color_picker',
+        input: '#accent_color_input',
+        defaultColor: '#ff5733'
+      },
+      {
+        element: '#background_color_picker',
+        input: '#background_color_input',
+        defaultColor: '#000000'
+      }
+    ];
+
+    pickers.forEach(pickerConfig => {
+
+      const colorPickerElement = document.querySelector(pickerConfig.element);
+      const colorInputElement = document.querySelector(pickerConfig.input);
+      const pickr = Pickr.create({
+        el: colorPickerElement,
+        theme: 'classic', // or 'monolith', or 'nano'
+        default: pickerConfig.defaultColor,
+        lockOpacity: true,
+        comparison: false,
+        inline: false,
+        swatches: [
+          'rgba(244, 67, 54, 1)',
+          'rgba(233, 30, 99, 1)',
+          'rgba(156, 39, 176, 1)',
+          'rgba(103, 58, 183, 1)',
+          'rgba(63, 81, 181, 1)',
+          'rgba(33, 150, 243, 1)',
+          'rgba(3, 169, 244, 1)',
+          'rgba(0, 188, 212, 1)',
+          'rgba(0, 150, 136, 1)',
+          'rgba(76, 175, 80, 1)',
+          'rgba(139, 195, 74, 1)',
+          'rgba(205, 220, 57, 1)',
+          'rgba(255, 235, 59, 1)',
+          'rgba(255, 193, 7, 1)'
+        ],
+        components: {
+          preview: true,
+          opacity: false,
+          hue: true,
+          interaction: {
+            hex: false,
+            rgba: false,
+            hsla: false,
+            hsva: false,
+            cmyk: false,
+            input: true,
+            clear: false,
+            save: false
+          }
+        }
+      });
+
+      pickr.on('change', (color, source, instance) => {
+        const hexaColor = color.toHEXA().toString();
+        console.log('rgbacolor', hexaColor);
+        //document.getElementById('primary_color_picker').style.background = rgbaColor;
+        // Store the color value in a hidden input or any other place you need
+        colorInputElement.value = hexaColor;
+      });
+
+    });
+  });
+</script>
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/player_preference/index.html b/src/flimix/settings/platform_preference/player_preference/index.html
new file mode 100644
index 0000000000..b519166898
--- /dev/null
+++ b/src/flimix/settings/platform_preference/player_preference/index.html
@@ -0,0 +1,46 @@
+
+
+{% extends "src/flimix/layouts/sidebar_layout.html" %}
+{% block main_class %}bg-stone-50 min-h-[92vh]{% endblock %}
+
+{% block extra_head %} 
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr"></script>
+<style>
+  .pcr-button {
+    border: 1px solid #efefef;
+  }
+
+  .pickr .pcr-button::after {
+    border-radius: 0;
+  }
+</style>
+{% endblock extra_head %}
+
+
+{% block main_content %}
+<div class="space-y-5">
+  {% include "../includes/header.html" %}
+  {% include "./tabs.html" %}
+
+  <form>
+    <div class="space-y-12">
+    {% include "./playback_settings.html" %}
+    {% include "./player_controls.html" %}
+    {% include "./player_appearance.html" %}
+    {% include "./subtitle_and_audio_preference.html" %}
+    </div>
+
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <button type="button" class="text-sm/6 font-semibold text-gray-900">Cancel</button>
+      <button type="submit"
+        class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
+    </div>
+  </form>
+</div>
+
+{% endblock main_content %}
+
+{% block script %}
+{% include "./color_picker_script.html" %}
+{% endblock script %}
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/player_preference/playback_settings.html b/src/flimix/settings/platform_preference/player_preference/playback_settings.html
new file mode 100644
index 0000000000..65420cf9b9
--- /dev/null
+++ b/src/flimix/settings/platform_preference/player_preference/playback_settings.html
@@ -0,0 +1,194 @@
+<div
+class="grid grid-cols-1 gap-x-8  pt-4 border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Playback Settings
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Control how videos behave during playback.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable subtitles</label>
+          <p id="candidates-description" class="text-stone-500">Show subtitles for the video.</p>
+        </div>
+      </div>
+      
+      
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">Enable autoplay</label>
+          <p id="candidates-description" class="text-stone-500">Automatically start playback on video load.</p>
+        </div>
+      </div><!-- Input -->
+    </div>
+
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable loop playback</label>
+          <p id="candidates-description" class="text-stone-500">Automatically replay the video when it ends.</p>
+        </div>
+      </div>
+      
+      
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">Mute video on start</label>
+          <p id="candidates-description" class="text-stone-500">Start the video with the sound muted.</p>
+        </div>
+      </div><!-- Input -->
+    </div>
+    <!-- End Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable picture-in-picture mode</label>
+          <p id="candidates-description" class="text-stone-500">Allow video playback in a small overlay.
+          </p>
+        </div>
+      </div>
+      
+    </div>
+
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <!-- Input -->
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Default Video Quality
+        </label>
+        <!-- Language Select -->
+        <div class="relative">
+          <select id="hs-pro-select-quality" data-hs-select='{
+    "placeholder": "Select video quality",
+    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
+    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-7 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm text-gray-800 hover:border-gray-300 focus:outline-hidden focus:border-gray-300 dark:bg-neutral-900 dark:border-neutral-800 dark:text-neutral-200 dark:hover:border-neutral-700 dark:focus:border-neutral-700",
+    "dropdownClasses": "end-0 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-white rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900",
+    "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
+    "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-gray-800 dark:text-neutral-200 \" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-gray-800 dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>"
+  }' class="hidden">
+            <option value="">Choose</option>
+            <option value="auto" selected >Auto</option>
+            <option value="144">144p</option>
+            <option value="240">240p</option>
+            <option value="360">360p</option>
+            <option value="480">480p (SD)</option>
+            <option value="720">720p (HD)</option>
+            <option value="1080">1080p (Full HD)</option>
+            <option value="1440">1440p (2K)</option>
+            <option value="2160">2160p (4K)</option>
+          </select>
+
+          <div class="absolute top-1/2 end-2.5 -translate-y-1/2">
+            <svg class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
+              xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m7 15 5 5 5-5" />
+              <path d="m7 9 5-5 5 5" />
+            </svg>
+          </div>
+          <!-- End Header -->
+        </div>
+        <!-- End Language Select -->
+      </div>
+
+      
+      <!-- End Input -->
+      <!-- End Input -->
+    </div>
+  </div>
+</div>
+<!-- End Col -->
+</div>
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/player_preference/player_appearance.html b/src/flimix/settings/platform_preference/player_preference/player_appearance.html
new file mode 100644
index 0000000000..ffa56f935d
--- /dev/null
+++ b/src/flimix/settings/platform_preference/player_preference/player_appearance.html
@@ -0,0 +1,85 @@
+<div
+class="grid grid-cols-1 gap-x-8  border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Player Appearance                 
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Set the look and layout of the player to match your brand and viewing style.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+
+    <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+         Primary Color
+        </label>
+                  <div class="mt-2">
+            <div id="primary_color_picker"
+              class="w-full rounded-md border border-gray-300 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm sm:leading-6">
+            </div>
+          </div>
+          <input type="hidden" id="primary_color_input" name="primary_color" value="#03a4eb">
+    </div>
+
+    <div>
+      <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+       Icon Color
+      </label> <!-- End Language Select -->
+      <div class="mt-2">
+        <div id="icons_color_picker"
+          class="w-full rounded-md border border-gray-300 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm sm:leading-6">
+        </div>
+      </div>
+      <input type="hidden" id="icons_color_input" name="icons_color" value="#ffffff">
+  </div> 
+
+      <!-- End Input -->
+
+      <!-- End Input -->
+    </div>
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+
+      <div>
+          <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+           Accent Color
+          </label> <!-- End Language Select -->
+          <div class="mt-2">
+            <div id="accent_color_picker"
+              class="w-full rounded-md border border-gray-300 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm sm:leading-6">
+            </div>
+          </div>
+          <input type="hidden" id="accent_color_input" name="accent_color" value="#ff5733">
+      </div>
+  
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Background Color
+        </label> <!-- End Language Select -->
+        <div class="mt-2">
+          <div id="background_color_picker"
+            class="w-full rounded-md border border-gray-300 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm sm:leading-6">
+          </div>
+        </div>
+        <input type="hidden" id="background_color_input" name="background_color" value="#000000">
+    </div> 
+  
+        <!-- End Input -->
+  
+        <!-- End Input -->
+      </div>
+  </div>
+</div>
+<!-- End Col -->
+</div>
+
+
diff --git a/src/flimix/settings/platform_preference/player_preference/player_controls.html b/src/flimix/settings/platform_preference/player_preference/player_controls.html
new file mode 100644
index 0000000000..172bec4fd0
--- /dev/null
+++ b/src/flimix/settings/platform_preference/player_preference/player_controls.html
@@ -0,0 +1,144 @@
+<div
+class="grid grid-cols-1 gap-x-8  border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Player Controls
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Configure which controls and UI elements are visible on the video player.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable player controls</label>
+          <p id="candidates-description" class="text-stone-500">Show the player controls for video playback.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Show video title</label>
+          <p id="candidates-description" class="text-stone-500">Display the title of the video on the player.</p>
+        </div>
+      </div>
+      
+      
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">Enable play icon</label>
+          <p id="candidates-description" class="text-stone-500">Show the play icon on the video player.</p>
+        </div>
+      </div><!-- Input -->
+    </div>
+    <!-- End Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable progress bar</label>
+          <p id="candidates-description" class="text-stone-500">Show the progress bar on the video player.
+          </p>
+        </div>
+      </div>
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable speed controls</label>
+          <p id="candidates-description" class="text-stone-500">Allow viewers to change the playback speed.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- End Col -->
+</div>
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/player_preference/subtitle_and_audio_preference.html b/src/flimix/settings/platform_preference/player_preference/subtitle_and_audio_preference.html
new file mode 100644
index 0000000000..09e90453f9
--- /dev/null
+++ b/src/flimix/settings/platform_preference/player_preference/subtitle_and_audio_preference.html
@@ -0,0 +1,157 @@
+<div
+class="grid grid-cols-1 gap-x-8  border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Subtitle & Audio Preferences
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Manage default languages and subtitle settings for a personalized experience.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable subtitles</label>
+          <p id="candidates-description" class="text-stone-500">Show subtitles for the video.</p>
+        </div>
+      </div>
+
+    </div>
+
+
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <!-- Input -->
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Default Subtitle Language
+        </label>
+        <!-- Language Select -->
+        <div class="relative">
+          <select id="hs-pro-select-quality" data-hs-select='{
+    "placeholder": "Select video quality",
+    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
+    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-7 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm text-gray-800 hover:border-gray-300 focus:outline-hidden focus:border-gray-300 dark:bg-neutral-900 dark:border-neutral-800 dark:text-neutral-200 dark:hover:border-neutral-700 dark:focus:border-neutral-700",
+    "dropdownClasses": "end-0 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-white rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900",
+    "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
+    "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-gray-800 dark:text-neutral-200 \" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-gray-800 dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>"
+  }' class="hidden">
+            <option value="">Choose</option>
+            <option value="en" selected>English</option>
+            <option value="hi">Hindi</option>
+            <option value="ta">Tamil</option>
+            <option value="te">Telugu</option>
+            <option value="ml">Malayalam</option>
+            <option value="kn">Kannada</option>
+            <option value="mr">Marathi</option>
+            <option value="gu">Gujarati</option>
+            <option value="bn">Bengali</option>
+            <option value="pa">Punjabi</option>
+            <option value="ur">Urdu</option>
+            <option value="as">Assamese</option>
+            <option value="or">Odia</option>
+            <option value="fr">French</option>
+            <option value="es">Spanish</option>
+            <option value="de">German</option>
+            <option value="zh">Chinese</option>
+            <option value="ja">Japanese</option>
+            <option value="ko">Korean</option>
+            <option value="ar">Arabic</option>
+          </select>
+
+          <div class="absolute top-1/2 end-2.5 -translate-y-1/2">
+            <svg class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
+              xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m7 15 5 5 5-5" />
+              <path d="m7 9 5-5 5 5" />
+            </svg>
+          </div>
+          <!-- End Header -->
+        </div>
+        <!-- End Language Select -->
+      </div>
+
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Default Audio Language
+        </label>
+        <!-- Language Select -->
+        <div class="relative">
+          <select id="hs-pro-select-quality" data-hs-select='{
+    "placeholder": "Select video quality",
+    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
+    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-7 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm text-gray-800 hover:border-gray-300 focus:outline-hidden focus:border-gray-300 dark:bg-neutral-900 dark:border-neutral-800 dark:text-neutral-200 dark:hover:border-neutral-700 dark:focus:border-neutral-700",
+    "dropdownClasses": "end-0 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-white rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900",
+    "optionClasses": "hs-selected:bg-gray-100 dark:hs-selected:bg-neutral-800 py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800",
+    "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-gray-800 dark:text-neutral-200 \" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-gray-800 dark:text-neutral-200 \" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>"
+  }' class="hidden">
+            <option value="">Choose</option>
+            <option value="en">English</option>
+            <option value="hi">Hindi</option>
+            <option value="ta" selected>Tamil</option>
+            <option value="te">Telugu</option>
+            <option value="ml">Malayalam</option>
+            <option value="kn">Kannada</option>
+            <option value="mr">Marathi</option>
+            <option value="gu">Gujarati</option>
+            <option value="bn">Bengali</option>
+            <option value="pa">Punjabi</option>
+            <option value="ur">Urdu</option>
+            <option value="as">Assamese</option>
+            <option value="or">Odia</option>
+            <option value="fr">French</option>
+            <option value="es">Spanish</option>
+            <option value="de">German</option>
+            <option value="zh">Chinese</option>
+            <option value="ja">Japanese</option>
+            <option value="ko">Korean</option>
+            <option value="ar">Arabic</option>
+          </select>
+
+          <div class="absolute top-1/2 end-2.5 -translate-y-1/2">
+            <svg class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
+              xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m7 15 5 5 5-5" />
+              <path d="m7 9 5-5 5 5" />
+            </svg>
+          </div>
+          <!-- End Header -->
+        </div>
+        <!-- End Language Select -->
+      </div>
+      <!-- End Input -->
+      <!-- End Input -->
+    </div>
+  </div>
+</div>
+<!-- End Col -->
+</div>
\ No newline at end of file
diff --git a/src/flimix/settings/platform_preference/player_preference/tabs.html b/src/flimix/settings/platform_preference/player_preference/tabs.html
new file mode 100644
index 0000000000..3e89d406dd
--- /dev/null
+++ b/src/flimix/settings/platform_preference/player_preference/tabs.html
@@ -0,0 +1,21 @@
+<div>
+  <div class="grid grid-cols-1 sm:hidden">
+    <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+    <select onchange="location.href=this.value"  aria-label="Select a tab" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
+      <option :value="`${previewPath}/flimix/settings/platform_preference/`">General</option>
+      <option :value="`${previewPath}/flimix/settings/platform_preference/player_preference/`" selected>Player Preferences</option>
+      <option :value="`${previewPath}/flimix/settings/platform_preference/integrations/`">Integrations</option>
+    </select>
+  </div>
+  <div class="hidden sm:block">
+    <div class="border-b border-gray-200">
+      <nav class="-mb-px flex space-x-8" aria-label="Tabs">
+
+        <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+        <a :href="`${previewPath}/flimix/settings/platform_preference/`" class="whitespace-nowrap border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">General</a>
+        <a :href="`${previewPath}/flimix/settings/platform_preference/player_preference/`" class="whitespace-nowrap border-b-2 border-indigo-500 px-1 py-4 text-sm font-medium text-indigo-600" aria-current="page">Player Preferences</a>
+        <a :href="`${previewPath}/flimix/settings/platform_preference/integrations/`" class="whitespace-nowrap border-b-2 border-transparent px-1 py-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">Integrations</a>
+      
+    </div>
+  </div>
+</div>


Reviews:
user: login: github-advanced-security[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-16T09:59:25Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 6**

<details>
<summary>🧹 Nitpick comments (7)</summary><blockquote>

<details>
<summary>src/flimix/settings/platform_preference/player_preference/color_picker_script.html (1)</summary><blockquote>

`1-81`: **Color picker script is modular and effective.**

The script is well-structured and DRY. Consider removing or gating the `console.log` statement for production use.

</blockquote></details>
<details>
<summary>src/flimix/settings/platform_preference/integrations/payment_gateway.html (2)</summary><blockquote>

`15-15`: **Improve logo accessibility with descriptive alt text.**

The `<img>` tags for Stripe and PayPal logos have empty `alt` attributes. For better accessibility, provide descriptive alt text such as `alt="Stripe logo"` and `alt="PayPal logo"` so screen readers can identify the payment provider.




Also applies to: 54-54

---

`20-28`: **Enhance toggle accessibility with ARIA attributes.**

The connect/disconnect toggles are visually clear, but for accessibility, consider adding `aria-checked`, `role="switch"`, and `aria-label` attributes to the checkbox or label. This will help screen readers interpret the toggle as a switch and announce its state.




Also applies to: 59-67, 97-105

</blockquote></details>
<details>
<summary>src/flimix/settings/platform_preference/general/theme_preference.html (2)</summary><blockquote>

`31-42`: **Ensure unique and descriptive IDs for form controls.**

The `select` element uses `id="hs-pro-select-language"`, which may be reused in other settings (e.g., localization). For accessibility and maintainability, use a unique and descriptive ID such as `hs-pro-select-theme`. This avoids potential conflicts and improves clarity for screen readers and automated testing.

---

`66-68`: **Use unique IDs and names for checkboxes.**

The checkbox uses `id="candidates"` and `name="candidates"`, which is generic and likely reused elsewhere. For accessibility and form processing, use a unique and descriptive ID/name, such as `allow-theme-switch`. This ensures correct label association and prevents issues if multiple checkboxes are present in the same form.

</blockquote></details>
<details>
<summary>src/flimix/settings/platform_preference/general/localization.html (1)</summary><blockquote>

`31-61`: **Use unique IDs for select elements.**

The `select` elements for default language and timezone both use `id="hs-pro-select-language"`. IDs must be unique within the page for accessibility and scripting. Use distinct IDs such as `hs-pro-select-default-language` and `hs-pro-select-timezone`.

</blockquote></details>
<details>
<summary>src/flimix/settings/platform_preference/player_preference/subtitle_and_audio_preference.html (1)</summary><blockquote>

`58-87`: **Use unique IDs for select elements.**

Both select elements for subtitle and audio language use `id="hs-pro-select-quality"`. IDs must be unique within the page for accessibility and scripting. Use distinct IDs such as `hs-pro-select-subtitle-language` and `hs-pro-select-audio-language`.



Also applies to: 108-137

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between ad3d7d5d7f9aa2452bfee584ec69ce08a399f5f1 and 7a1bdffa0d34e9563ce6c5b3d9d08925c249f865.

</details>

<details>
<summary>📒 Files selected for processing (19)</summary>

* `src/flimix/partials/sidebar.html` (1 hunks)
* `src/flimix/settings/platform_preference/general/index.html` (1 hunks)
* `src/flimix/settings/platform_preference/general/localization.html` (1 hunks)
* `src/flimix/settings/platform_preference/general/organization_info.html` (1 hunks)
* `src/flimix/settings/platform_preference/general/tabs.html` (1 hunks)
* `src/flimix/settings/platform_preference/general/theme_preference.html` (1 hunks)
* `src/flimix/settings/platform_preference/includes/header.html` (1 hunks)
* `src/flimix/settings/platform_preference/integrations/accounting_and_billing.html` (1 hunks)
* `src/flimix/settings/platform_preference/integrations/analytics.html` (1 hunks)
* `src/flimix/settings/platform_preference/integrations/index.html` (1 hunks)
* `src/flimix/settings/platform_preference/integrations/payment_gateway.html` (1 hunks)
* `src/flimix/settings/platform_preference/integrations/tabs.html` (1 hunks)
* `src/flimix/settings/platform_preference/player_preference/color_picker_script.html` (1 hunks)
* `src/flimix/settings/platform_preference/player_preference/index.html` (1 hunks)
* `src/flimix/settings/platform_preference/player_preference/playback_settings.html` (1 hunks)
* `src/flimix/settings/platform_preference/player_preference/player_appearance.html` (1 hunks)
* `src/flimix/settings/platform_preference/player_preference/player_controls.html` (1 hunks)
* `src/flimix/settings/platform_preference/player_preference/subtitle_and_audio_preference.html` (1 hunks)
* `src/flimix/settings/platform_preference/player_preference/tabs.html` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 GitHub Check: CodeQL</summary>

<details>
<summary>src/flimix/settings/platform_preference/integrations/tabs.html</summary>

[warning] 4-4: DOM text reinterpreted as HTML
[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</details>
<details>
<summary>src/flimix/settings/platform_preference/player_preference/tabs.html</summary>

[warning] 4-4: DOM text reinterpreted as HTML
[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</details>
<details>
<summary>src/flimix/settings/platform_preference/general/tabs.html</summary>

[warning] 4-4: DOM text reinterpreted as HTML
[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: Analyze (javascript-typescript)

</details>

<details>
<summary>🔇 Additional comments (20)</summary><blockquote>

<details>
<summary>src/flimix/settings/platform_preference/includes/header.html (1)</summary>

`1-6`: **Header markup is clean and accessible.**

The static header is well-structured, uses semantic tags, and supports dark mode. No issues found.

</details>
<details>
<summary>src/flimix/settings/platform_preference/general/tabs.html (3)</summary>

`4-8`: **Verify template binding compatibility.**

The use of `:value` and `:href` attributes suggests a templating engine (e.g., Vue, Alpine, etc.). Please ensure that your rendering engine supports this syntax; otherwise, these bindings will not work in plain HTML.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 GitHub Check: CodeQL</summary>

[warning] 4-4: DOM text reinterpreted as HTML
[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</details>

</details>

---

`4-4`: **Static analysis warning: DOM text reinterpreted as HTML.**

No user input is injected into the option text or value, so this warning can be safely ignored in this context.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 GitHub Check: CodeQL</summary>

[warning] 4-4: DOM text reinterpreted as HTML
[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</details>

</details>

---

`1-20`: **Tab navigation is accessible and responsive.**

The tab navigation is well-structured, responsive, and accessible. No issues found with the markup or ARIA usage.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 GitHub Check: CodeQL</summary>

[warning] 4-4: DOM text reinterpreted as HTML
[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</details>

</details>

</details>
<details>
<summary>src/flimix/settings/platform_preference/integrations/accounting_and_billing.html (1)</summary>

`1-58`: **Integration card markup is clean and accessible.**

The integration UI is well-structured, uses semantic tags, and supports dark mode. The toggle pattern is accessible and visually clear. No issues found.

</details>
<details>
<summary>src/flimix/settings/platform_preference/general/organization_info.html (1)</summary>

`1-114`: **Form structure and accessibility are strong overall.**

The form is well-structured, responsive, and uses accessible labels. Once the above issues are fixed, this will be a robust organization info form.

</details>
<details>
<summary>src/flimix/settings/platform_preference/integrations/payment_gateway.html (1)</summary>

`1-126`: **UI structure and implementation are clear and consistent.**

The payment gateway integration cards are well-structured, visually consistent, and use modern CSS utility classes. The use of peer selectors for toggling label content is effective. No functional or structural issues found.

</details>
<details>
<summary>src/flimix/partials/sidebar.html (1)</summary>

`196-198`: **Sidebar navigation to Platform Preferences is correct and consistent.**

The sidebar link to Platform Preferences is now functional and styled for active state. This improves navigation and aligns with other sidebar items.

</details>
<details>
<summary>src/flimix/settings/platform_preference/general/index.html (1)</summary>

`1-36`: **General settings page is well-structured and modular.**

The use of partials for organization info, localization, and theme preference enhances maintainability. The form structure and navigation are clear.

</details>
<details>
<summary>src/flimix/settings/platform_preference/integrations/index.html (1)</summary>

`1-17`: **Integrations page is modular and well-organized.**

The structure is clear, and the use of partials for each integration type supports maintainability and scalability.

</details>
<details>
<summary>src/flimix/settings/platform_preference/player_preference/tabs.html (1)</summary>

`1-21`: **Responsive tab navigation is accessible and well-implemented.**

The tab navigation adapts for different screen sizes and uses appropriate ARIA attributes. The static analysis warning about DOM text reinterpreted as HTML does not apply here, as no unsafe HTML injection is present.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 GitHub Check: CodeQL</summary>

[warning] 4-4: DOM text reinterpreted as HTML
[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</details>

</details>

</details>
<details>
<summary>src/flimix/settings/platform_preference/integrations/tabs.html (1)</summary>

`10-21`: **Tab navigation is clear and accessible.**

The tab navigation for desktop is well-structured, accessible, and visually consistent with modern UI patterns. Good use of `aria-current` and clear active tab indication.

</details>
<details>
<summary>src/flimix/settings/platform_preference/player_preference/index.html (1)</summary>

`3-46`: **Well-structured and modular player preference page.**

The template is clean, modular, and easy to maintain. Good use of partials for each settings section and clear separation of concerns. The inclusion of the color picker script is handled appropriately.

If the form is intended to submit data, consider specifying the `action` and `method` attributes for clarity, unless handled by JavaScript.

</details>
<details>
<summary>src/flimix/settings/platform_preference/integrations/analytics.html (1)</summary>

`1-58`: **Clear and accessible analytics integration card.**

The markup is well-structured, accessible, and visually consistent. For future enhancement, ensure the toggle reflects the actual integration state dynamically.

</details>
<details>
<summary>src/flimix/settings/platform_preference/player_preference/player_appearance.html (1)</summary>

`1-86`: **Player appearance settings are well-structured and accessible.**

The markup is clear, modular, and ready for color picker integration. No issues found.

</details>
<details>
<summary>src/flimix/settings/platform_preference/general/theme_preference.html (1)</summary>

`1-89`: **Well-structured, accessible, and visually consistent UI.**

The markup is clean, uses semantic HTML, and applies utility classes for responsive design and dark mode. Labels are present and accessible. The UI is consistent with modern design standards.

</details>
<details>
<summary>src/flimix/settings/platform_preference/general/localization.html (2)</summary>

`134-165`: **Good use of multi-select with tags for available languages.**

The multi-select for available languages is well-implemented, with clear labeling and accessible markup. The use of tags and removable selections enhances usability.

---

`1-189`: **Overall, the localization settings UI is well-structured and accessible.**

The markup is clean, responsive, and visually consistent with the rest of the settings UI. All controls are labeled and support dark mode.

</details>
<details>
<summary>src/flimix/settings/platform_preference/player_preference/player_controls.html (1)</summary>

`1-144`: **Well-structured and visually consistent player controls UI.**

The layout, styling, and use of utility classes are modern and accessible. The component is consistent with the rest of the settings UI.

</details>
<details>
<summary>src/flimix/settings/platform_preference/player_preference/subtitle_and_audio_preference.html (1)</summary>

`1-157`: **Well-structured and accessible subtitle/audio preferences UI.**

The markup is clean, responsive, and visually consistent with the rest of the settings UI. All controls are labeled and support dark mode.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-16T10:01:25Z

Review comments:
diff_hunk: @@ -0,0 +1,20 @@
+<div>
+  <div class="grid grid-cols-1 sm:hidden">
+    <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+    <select onchange="location.href=this.value"  aria-label="Select a tab" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
path: src/flimix/settings/platform_preference/general/tabs.html
user: login: github-advanced-security[bot]
body: ## DOM text reinterpreted as HTML

[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

[Show more details](https://github.com/testpress/design/security/code-scanning/18)
created_at: 2025-04-16T09:59:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,21 @@
+<div>
+  <div class="grid grid-cols-1 sm:hidden">
+    <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+    <select onchange="location.href=this.value"  aria-label="Select a tab" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
path: src/flimix/settings/platform_preference/integrations/tabs.html
user: login: github-advanced-security[bot]
body: ## DOM text reinterpreted as HTML

[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

[Show more details](https://github.com/testpress/design/security/code-scanning/19)
created_at: 2025-04-16T09:59:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,21 @@
+<div>
+  <div class="grid grid-cols-1 sm:hidden">
+    <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+    <select onchange="location.href=this.value"  aria-label="Select a tab" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
path: src/flimix/settings/platform_preference/player_preference/tabs.html
user: login: github-advanced-security[bot]
body: ## DOM text reinterpreted as HTML

[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

[Show more details](https://github.com/testpress/design/security/code-scanning/20)
created_at: 2025-04-16T09:59:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,114 @@
+<div
+class="grid grid-cols-1 gap-x-8  pt-4 border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Organization Info
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Basic details about the organization to be shown across the platform.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <!-- Input -->
+      <div class="col-span-2">
+        <label for="hs-pro-esssn" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Organization Name
+        </label>
+        <input id="hs-pro-esssn" type="text"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600"
+          value="Art of Living">
+      </div>
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div class="col-span-2">
+        <label for="hs-pro-epii" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Description
+        </label>
+        <textarea id="hs-pro-epii"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600"
+          rows="3" placeholder="Provide a brief description of your ott platform..."
+          spellcheck="false"></textarea>
+      </div>
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Email
+        </label>
+        <input id="hs-pro-esscp" type="email"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600"
+          value="support@verandarace.in">
+      </div>
path: src/flimix/settings/platform_preference/general/organization_info.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Duplicate input IDs for Email and Phone number fields.**

Both the "Email" and "Phone number" fields use the same `id` (`hs-pro-esscp`). This can cause accessibility issues and incorrect label associations. Please assign unique IDs to each input and update the corresponding `for` attributes in the labels.

```diff
-        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+        <label for="hs-pro-esscp-email" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
...
-        <input id="hs-pro-esscp" type="email"
+        <input id="hs-pro-esscp-email" type="email"
...
-        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+        <label for="hs-pro-esscp-phone" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
...
-        <input id="hs-pro-esscp" type="text"
+        <input id="hs-pro-esscp-phone" type="text"
```


Also applies to: 60-63

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-16T10:01:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,114 @@
+<div
+class="grid grid-cols-1 gap-x-8  pt-4 border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Organization Info
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Basic details about the organization to be shown across the platform.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <!-- Input -->
+      <div class="col-span-2">
+        <label for="hs-pro-esssn" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Organization Name
+        </label>
+        <input id="hs-pro-esssn" type="text"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600"
+          value="Art of Living">
+      </div>
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div class="col-span-2">
+        <label for="hs-pro-epii" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Description
+        </label>
+        <textarea id="hs-pro-epii"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600"
+          rows="3" placeholder="Provide a brief description of your ott platform..."
+          spellcheck="false"></textarea>
+      </div>
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Email
+        </label>
+        <input id="hs-pro-esscp" type="email"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600"
+          value="support@verandarace.in">
+      </div>
+      <!-- End Input -->
+
+      <!-- Input -->
+      <div>
+        <label for="hs-pro-esscp" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+          Phone number
+        </label>
+        <input id="hs-pro-esscp" type="text"
+          class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600"
+          value="9876543210">
+      </div>
+      <!-- End Input -->
+    </div>
+    <!-- End Input Grid -->
+
+    <!-- Input Grid -->
+    <div class="col-span-2">
+      <label for="hs-pro-esssa" class="block mb-2 text-sm font-medium text-stone-800 dark:text-neutral-200">
+        Address
+      </label>
+      <input id="hs-pro-esssa" type="email"
+        class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600">
path: src/flimix/settings/platform_preference/general/organization_info.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Incorrect input type for Address field.**

The "Address" field uses `type="email"`, which is not appropriate. It should be `type="text"` to accept a general address.

```diff
-      <input id="hs-pro-esssa" type="email"
+      <input id="hs-pro-esssa" type="text"
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
      <input id="hs-pro-esssa" type="text"
        class="py-1.5 sm:py-2 px-3 block w-full border-stone-200 rounded-lg sm:text-sm text-stone-800 placeholder:text-stone-500 focus:z-10 focus:border-indigo-600 focus:ring-indigo-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600">
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-16T10:01:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,21 @@
+<div>
+  <div class="grid grid-cols-1 sm:hidden">
+    <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+    <select onchange="location.href=this.value"  aria-label="Select a tab" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
+      <option :value="`${previewPath}/flimix/settings/platform_preference/`">General</option>
+      <option :value="`${previewPath}/flimix/settings/platform_preference/player_preference/`" >Player Preferences</option>
+      <option :value="`${previewPath}/flimix/settings/platform_preference/integrations/`" selected >Integrations</option>
+    </select>
path: src/flimix/settings/platform_preference/integrations/tabs.html
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Check template binding syntax for select option values.**

The use of `:value="..."` in the `<option>` elements is Vue.js syntax. If this file is not processed by Vue or a compatible frontend framework, these bindings will not work and the navigation will fail. If this is a static HTML or server-rendered template (e.g., Jinja2, Django), use standard `value="{{ ... }}"` or the appropriate template variable syntax.

If Vue is not in use, update the options as follows:

```diff
-<option :value="`${previewPath}/flimix/settings/platform_preference/`">General</option>
+<option value="/flimix/settings/platform_preference/">General</option>
```
...and similarly for the other options.




<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    <select onchange="location.href=this.value"  aria-label="Select a tab" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
      <option value="/flimix/settings/platform_preference/">General</option>
      <option value="/flimix/settings/platform_preference/player_preference/">Player Preferences</option>
      <option value="/flimix/settings/platform_preference/integrations/" selected>Integrations</option>
    </select>
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 GitHub Check: CodeQL</summary>

[warning] 4-4: DOM text reinterpreted as HTML
[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-16T10:01:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,194 @@
+<div
+class="grid grid-cols-1 gap-x-8  pt-4 border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Playback Settings
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Control how videos behave during playback.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable subtitles</label>
+          <p id="candidates-description" class="text-stone-500">Show subtitles for the video.</p>
+        </div>
+      </div>
+      
+      
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">Enable autoplay</label>
+          <p id="candidates-description" class="text-stone-500">Automatically start playback on video load.</p>
+        </div>
+      </div><!-- Input -->
+    </div>
+
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable loop playback</label>
+          <p id="candidates-description" class="text-stone-500">Automatically replay the video when it ends.</p>
+        </div>
+      </div>
+      
+      
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">Mute video on start</label>
+          <p id="candidates-description" class="text-stone-500">Start the video with the sound muted.</p>
+        </div>
+      </div><!-- Input -->
+    </div>
+    <!-- End Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable picture-in-picture mode</label>
+          <p id="candidates-description" class="text-stone-500">Allow video playback in a small overlay.
+          </p>
path: src/flimix/settings/platform_preference/player_preference/playback_settings.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix repeated checkbox id, name, and aria-describedby attributes.**

All checkboxes use the same `id="candidates"`, `name="candidates"`, and `aria-describedby="candidates-description"`. This breaks accessibility and form data handling. Each checkbox should have a unique id, name, and description reference.

Example fix for the first two checkboxes:

```diff
-<input id="candidates"  aria-describedby="candidates-description" name="candidates" type="checkbox" ...>
+<input id="enable_subtitles" aria-describedby="enable_subtitles_desc" name="enable_subtitles" type="checkbox" ...>
```
...and update the corresponding `<label for="...">` and `<p id="...">`.

Repeat for each checkbox with unique identifiers.




<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
            <input id="enable_subtitles" aria-describedby="enable_subtitles-description" name="enable_subtitles"
              type="checkbox"
              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
            <svg
              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
              viewBox="0 0 14 14" fill="none">
              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
        <div class="text-sm/6">
          <label for="enable_subtitles" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
            Enable subtitles</label>
          <p id="enable_subtitles-description" class="text-stone-500">Show subtitles for the video.</p>
        </div>
      </div>
      
      
      <div class="flex gap-3">
        <div class="flex h-6 shrink-0 items-center">
          <div class="group grid size-4 grid-cols-1">
            <input id="enable_autoplay" aria-describedby="enable_autoplay-description" name="enable_autoplay"
              type="checkbox"
              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
            <svg
              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
              viewBox="0 0 14 14" fill="none">
              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
        <div class="text-sm/6">
          <label for="enable_autoplay" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">Enable autoplay</label>
          <p id="enable_autoplay-description" class="text-stone-500">Automatically start playback on video load.</p>
        </div>
      </div><!-- Input -->
    </div>

    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
      <div class="flex gap-3">
        <div class="flex h-6 shrink-0 items-center">
          <div class="group grid size-4 grid-cols-1">
            <input id="enable_loop_playback" aria-describedby="enable_loop_playback-description" name="enable_loop_playback"
              type="checkbox"
              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
            <svg
              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
              viewBox="0 0 14 14" fill="none">
              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
        <div class="text-sm/6">
          <label for="enable_loop_playback" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
            Enable loop playback</label>
          <p id="enable_loop_playback-description" class="text-stone-500">Automatically replay the video when it ends.</p>
        </div>
      </div>
      
      
      <div class="flex gap-3">
        <div class="flex h-6 shrink-0 items-center">
          <div class="group grid size-4 grid-cols-1">
            <input id="mute_video_on_start" aria-describedby="mute_video_on_start-description" name="mute_video_on_start"
              type="checkbox"
              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
            <svg
              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
              viewBox="0 0 14 14" fill="none">
              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
        <div class="text-sm/6">
          <label for="mute_video_on_start" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">Mute video on start</label>
          <p id="mute_video_on_start-description" class="text-stone-500">Start the video with the sound muted.</p>
        </div>
      </div><!-- Input -->
    </div>
    <!-- End Input Grid -->
    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
      <div class="flex gap-3">
        <div class="flex h-6 shrink-0 items-center">
          <div class="group grid size-4 grid-cols-1">
            <input id="enable_picture_in_picture" aria-describedby="enable_picture_in_picture-description" name="enable_picture_in_picture"
              type="checkbox"
              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
            <svg
              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
              viewBox="0 0 14 14" fill="none">
              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
        <div class="text-sm/6">
          <label for="enable_picture_in_picture" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
            Enable picture-in-picture mode</label>
          <p id="enable_picture_in_picture-description" class="text-stone-500">Allow video playback in a small overlay.
          </p>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-16T10:01:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,144 @@
+<div
+class="grid grid-cols-1 gap-x-8  border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Player Controls
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Configure which controls and UI elements are visible on the video player.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable player controls</label>
+          <p id="candidates-description" class="text-stone-500">Show the player controls for video playback.</p>
+        </div>
path: src/flimix/settings/platform_preference/player_preference/player_controls.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Assign unique IDs and names to each checkbox for accessibility and form processing.**

All checkboxes use `id="candidates"` and `name="candidates"`, and reference the same description ID. This can cause accessibility issues and incorrect form data submission. Assign a unique ID and name to each checkbox (e.g., `enable-player-controls`, `show-video-title`, etc.), and use a unique description ID for each.

Example fix for one checkbox:
```diff
-<input id="candidates" aria-describedby="candidates-description" name="candidates" type="checkbox" ...>
-<label for="candidates" ...>Enable player controls</label>
-<p id="candidates-description" ...>Show the player controls for video playback.</p>
+<input id="enable-player-controls" aria-describedby="enable-player-controls-description" name="enable-player-controls" type="checkbox" ...>
+<label for="enable-player-controls" ...>Enable player controls</label>
+<p id="enable-player-controls-description" ...>Show the player controls for video playback.</p>
```
Apply similar changes to all checkboxes in this file.


Also applies to: 49-66, 73-90, 97-115, 120-138

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-16T10:01:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,157 @@
+<div
+class="grid grid-cols-1 gap-x-8  border-b border-gray-900/10 pb-12 md:grid-cols-12 gap-y-1.5 md:gap-y-0 md:gap-x-5 lg:gap-x-8">
+<div class="md:col-span-4 flex flex-col mb-3 md:mb-0">
+  <div class="space-y-2">
+    <h2 class="font-medium text-stone-800 dark:text-neutral-200">
+      Subtitle & Audio Preferences
+    </h2>
+    <p class="text-sm text-stone-500 dark:text-neutral-500">
+      Manage default languages and subtitle settings for a personalized experience.
+    </p>
+  </div>
+</div>
+<!-- End Col -->
+
+<div class="md:col-span-8">
+  <!-- Business Vertical Settings Card -->
+  <div
+    class="p-5 space-y-5 flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
+    <!-- Input Grid -->
+    <div class="grid sm:grid-cols-2 gap-3 sm:gap-5">
+      <div class="flex gap-3">
+        <div class="flex h-6 shrink-0 items-center">
+          <div class="group grid size-4 grid-cols-1">
+            <input id="candidates"  aria-describedby="candidates-description" name="candidates"
+              type="checkbox"
+              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
+            <svg
+              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+              viewBox="0 0 14 14" fill="none">
+              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="text-sm/6">
+          <label for="candidates" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
+            Enable subtitles</label>
+          <p id="candidates-description" class="text-stone-500">Show subtitles for the video.</p>
+        </div>
path: src/flimix/settings/platform_preference/player_preference/subtitle_and_audio_preference.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Assign a unique ID and name to the subtitle enable checkbox.**

The checkbox uses `id="candidates"` and `name="candidates"`, which is generic and likely reused elsewhere. For accessibility and correct form processing, use a unique ID and name (e.g., `enable-subtitles`) and update the label and description IDs accordingly.

Example fix:
```diff
-<input id="candidates" aria-describedby="candidates-description" name="candidates" type="checkbox" ...>
-<label for="candidates" ...>Enable subtitles</label>
-<p id="candidates-description" ...>Show subtitles for the video.</p>
+<input id="enable-subtitles" aria-describedby="enable-subtitles-description" name="enable-subtitles" type="checkbox" ...>
+<label for="enable-subtitles" ...>Enable subtitles</label>
+<p id="enable-subtitles-description" ...>Show subtitles for the video.</p>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
            <input id="enable-subtitles" aria-describedby="enable-subtitles-description" name="enable-subtitles"
              type="checkbox"
              class="col-start-1 row-start-1 appearance-none rounded-sm text-indigo-600 focus:ring-indigo-600 border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
            <svg
              class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
              viewBox="0 0 14 14" fill="none">
              <path class="opacity-0 group-has-checked:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
              <path class="opacity-0 group-has-indeterminate:opacity-100" d="M3 7H11" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
        <div class="text-sm/6">
          <label for="enable-subtitles" class="block text-sm font-medium text-stone-800 dark:text-neutral-200">
            Enable subtitles</label>
          <p id="enable-subtitles-description" class="text-stone-500">Show subtitles for the video.</p>
        </div>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-16T10:01:24Z
author_association: NONE

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-04-16T09:57:53Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

This update introduces a comprehensive set of HTML templates and UI components for the "Platform Preference" section within the Flimix application's settings. It implements new sidebar navigation, detailed forms for organization information, localization, and theme preferences, as well as tabbed navigation interfaces for general, player, and integration settings. The integrations area now features dedicated layouts for payment gateways, accounting and billing, and analytics, each with interactive connection toggles and descriptive content. The player preference section includes granular controls for playback, appearance, controls, and subtitle/audio options, supported by a color picker script for appearance customization. All components are styled for responsiveness and dark mode compatibility.

## Changes

| File(s)                                                                                               | Change Summary                                                                                                                                                                                                                   |
|-----------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| src/flimix/partials/sidebar.html                                                                    | Updated the "Platform Preferences" link to point to the correct URL and added conditional styling for active state.                                                                        |
| src/flimix/settings/platform_preference/general/index.html                                          | Added a new template for the "Platform Preference" general settings page, including layout, header, tabs, and a form with included partials.                                              |
| src/flimix/settings/platform_preference/general/localization.html                                   | Introduced a new UI fragment for configuring localization preferences, including language and timezone selectors and a multi-select for available languages.                               |
| src/flimix/settings/platform_preference/general/organization_info.html                              | Added a new component for collecting organization information with a grid layout and multiple input fields.                                                                               |
| src/flimix/settings/platform_preference/general/tabs.html                                           | Added a tabbed navigation UI for general platform preference settings, responsive for mobile and desktop.                                                                                  |
| src/flimix/settings/platform_preference/general/theme_preference.html                               | Introduced a new UI for theme preferences, with a default theme selector and a toggle for allowing users to switch themes.                                                                |
| src/flimix/settings/platform_preference/includes/header.html                                        | Added a header snippet for the platform preference section, including a title and description.                                                                                            |
| src/flimix/settings/platform_preference/integrations/accounting_and_billing.html                    | Added a UI section for accounting and billing integrations, including a Zoho integration card with connect toggle and description.                                                        |
| src/flimix/settings/platform_preference/integrations/analytics.html                                 | Introduced a new analytics integrations UI, including a Google Analytics card with a connect toggle and description.                                                                      |
| src/flimix/settings/platform_preference/integrations/index.html                                     | Added a template for the integrations page, composing header, tabs, and included integration sections.                                                                                    |
| src/flimix/settings/platform_preference/integrations/payment_gateway.html                           | Introduced a UI for managing payment gateway integrations, with cards for Stripe, PayPal, and Razorpay, each with connect toggles and details.                                            |
| src/flimix/settings/platform_preference/integrations/tabs.html                                      | Added tabbed navigation for the integrations section, responsive for different screen sizes.                                                                                              |
| src/flimix/settings/platform_preference/player_preference/color_picker_script.html                  | Added a script to initialize and manage multiple color pickers for player appearance customization.                                                                                       |
| src/flimix/settings/platform_preference/player_preference/index.html                                | Added a template for the player preference settings page, including external assets for color pickers, form structure, and included partials.                                             |
| src/flimix/settings/platform_preference/player_preference/playback_settings.html                    | Introduced a new UI for playback settings, with checkboxes and a dropdown for video quality.                                                                                             |
| src/flimix/settings/platform_preference/player_preference/player_appearance.html                    | Added a player appearance settings panel with color pickers for primary, icon, accent, and background colors.                                                                             |
| src/flimix/settings/platform_preference/player_preference/player_controls.html                      | Introduced a UI for configuring player controls with multiple checkboxes for toggling features.                                                                                           |
| src/flimix/settings/platform_preference/player_preference/subtitle_and_audio_preference.html        | Added a UI for managing subtitle and audio preferences, with checkboxes and language selectors.                                                                                           |
| src/flimix/settings/platform_preference/player_preference/tabs.html                                 | Added tabbed navigation for the player preference section, responsive for mobile and desktop.                                                                                             |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant Sidebar
    participant SettingsPage
    participant Tabs
    participant SectionForm
    participant IntegrationCard
    participant ColorPickerScript

    User->>Sidebar: Clicks "Platform Preferences"
    Sidebar->>SettingsPage: Loads platform preference page
    SettingsPage->>Tabs: Renders navigation tabs
    User->>Tabs: Selects a section (General, Player, Integrations)
    Tabs->>SettingsPage: Loads selected section content

    alt General Section
        SettingsPage->>SectionForm: Renders organization, localization, theme forms
        User->>SectionForm: Edits and submits preferences
    end

    alt Player Preferences
        SettingsPage->>SectionForm: Renders playback, controls, appearance, subtitle/audio forms
        SectionForm->>ColorPickerScript: Initializes color pickers for appearance
        User->>SectionForm: Edits and submits preferences
    end

    alt Integrations
        SettingsPage->>IntegrationCard: Renders payment, accounting, analytics cards
        User->>IntegrationCard: Toggles integration connect/disconnect
    end
```

## Poem

> In the warren of settings, a sidebar now gleams,  
> With forms and with tabs and with color picker dreams.  
> Player controls hop in, integrations abound,  
> Languages and themes in neat grids are found.  
> Toggle and switch, connect with delight—  
> Flimix’s preferences, now shining so bright!  
> — 🐇✨

<!-- walkthrough_end -->


---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 7a1bdffa0d34e9563ce6c5b3d9d08925c249f865 and 4122d5ca34cc7d937c43fa2cb657dfa250db47ef.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/flimix/settings/platform_preference/general/organization_info.html` (1 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* src/flimix/settings/platform_preference/general/organization_info.html

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: Analyze (javascript-typescript)

</details>

</details>
<!-- internal state start -->


<!-- DwQgtGAEAqAWCWBnSTIEMB26CuAXA9mAOYCmGJATmriQCaQDG+Ats2bgFyQAOFk+AIwBWJBrngA3EsgEBPRvlqU0AgfFwA6NPEgQAfACgjoCEejqANiS4BBWvQCqASUgAzfH24Xq7isx4UJK6UZAwkKFgA8tDQBgBy2MwClFwALKkAjAYOiCmQANJoFLgIANYkspg0iLi80ohG+sbgUGT0+K44BMRkyjT0TKzsXLz8wqLiUjLyTEpUqupaOk0mUHCoqJhdhKTkVP0KQxickFQA7pCIicxF8nIKcypqmtq6YIbNpgaIFAwA9K4LPBmPAAB5/bhFcRoCyIP6IeBKARFDSwXDMCwcAwAIlxBgAxPjIDYnD09tQ6Jdrrd+J0GLBMKQGgY4OEEUiipA2BhsJBsBg5pASuFsQBlEi4cQYIiIbGXCbwfBYM5oZDYbi0Cn0AinEheNBhdA8bxhWD4CyCoEYUpuDyQbEABW8uF8/gdgWCgQwYVlkDO6lgRtc/LEiowMMgVpt3Hw8GOcaIQvw9oBQJB4NykoTcP1Lo8zAA+nVPaESH9sRpifZ1GGYRZZAAaIWwcJRyAYfAXOMMCzYJTIJgCmtKiM1WRWxM6hBEWBAme4Zvhbm89QkfxnFtYYWMbAUL0LyGkSAOABKABkFMdtBhkNjAcCwfCJVKZRDna6ix6Qt6SBWYAgBwZaUl0UeBXHgaRF0gWAPXQSUKHgAQ8HCVwKBYe18TlHVtwNXBsAjSESnQAV0HsZBaFkcMQQYSAAGFRVFRhvEQZALHwIh4Bo3x0FDKRLlwCkIloTjqDDDQjCMQliQsGh9jDZBsJbSAlB7IpRKVZAOkgEhQRjYpKTtbhsAEIEaPYGtpCMOIlRIcTcWxRovh+f573TJ8s2lHN33zT8gm/MI/l2ZQLD+OMlFBVF0UxHE8SkkkyT6SkrlYGktPpRlLIMGx2xIC4AAloAAWQvGhmFzFD4CsW0+G3R1vL8SB3T8r0wjlTMX2QQ9wjjKCADE0zBdBuC8ETxCVaDVUgZIyFIpRaErdYFLXcrtNBGgBWQNBLkREhkT4bxZHwPBiPoJRwPITauWvS91oXIoSC2scrHof0iORBhSiIND+XoTB6BBDBgUSaCSHgecmNVXJEAWpTB1uiIez7SCtpbNA5ibcMJDB9StxURAmz+oN8xu68E2bQJuu9Xs5p4KF4AjUrysQLgPCITB4AALxxiJXRxps2IYGFOe59rswJkjhTYAJmtLGGUOJwdEf7P0AzozAwgsE7IFFNA+KQyUNKbJ7KW47Bcj4ONZNwsT/3CLqUAHJVwKIXdKVewM2AEzUBKpel0E6ygbijJsBJlJssdyoVZG4Ehxe1SxbIkgkiRsGS+nkpMoJU7w5I02lVr0g5DOM0ztPjcRMqgOJI8Z50KqqtG5q4AADZzUwfDNn2zN8fB84t/LLIKqBCsKdMijFm+UoI4zJ2qnV7hqmpLH82q7zzaaPA6jruki4fYOy8QMCAwCMNvXMfUXPJ7vM/F85eAqHmE/gFoWubGjBx+i+zk+JUlH4OZKNwKDyDSkBJkRhsrkHykVC8qE0BEG5AuFUm17CUh1LwfAWMlBGjNpQCIslXAGnlnwQcztdxk1zK6SM+BBZAjfmGaW99pBy3wZQQhhpUA1AoNgMQrtfqXUCIgGMN5JDhC+oiFWRFcBnGTDcHqTBezMBvFwLa/YGAIW4JMNkCpxqE0emvGUjAijzVtvKDyhjBYUAGEqAScYFIwRIEua6cYjILjhmhWEWIDAZErAAKl8QAESCGgbAMlIBnkZPhI84orBiA8P42w21pRWDALkWJC5aBoQ1J2LAQIahk2YKE8QXhWyRPgZBAAFLZIgGgmwAFFklIFgE2PKYV4BNmgGgEEFgmy9Ras0uiCALqx2JPMTiTYJQMA0AASkkYGBpRA8mBjqKkkg6S6CVicAuXBl0GBmwIP4TJ+BslnCwM4OZ/Fxxk0JpxPO3E0k6KwG0wW79xIGAAEx+N8eYNgHMbLazWRMeJvjbAdmFHwBEySSCrPScpLJtAcmRiQC+SAEgiiKjNkKYEJA/kXUgFUjQNSmw2ARGgP4+RzSlGoGgJsDhoC0XqbuY5ZYzxKgRRgYlbAEKCz+NXM4BYACaHhSgTNwFM2Z7tiSkvJZS6l0sYUTA2ZALZlwGSCKgogLp4Q9k1HQkck5ZyXBPWufY0p0oonaPSR4N5ABmL5Ng0WVRUFVCJ5rynIBiUCigCTiRciKfABVYg4XHIRac9AFg2L+mlPKdJDCtKFJkvAEpkYylMjcGhfw25NVSzyXdU1U9CFFJTW6o8Dy4kUErAspZLS2lxxgF0yq6BAjyrLf0GGqB3HmipMNDwuAFLwNSbgcclrHkXMCMwTBzrwih02rvfZ6FjXSjeXUg0gZ9WhqwDso03strUFwAhfW4QKnNx3WAWAiBA24GbrMnUpCwauyNDqg5MaJiHGEewC5+pTTmjmPjJMRBFnhH1gQG8TZ12IsXUQJsxz35CmWnXP9NzjjKFDONZIDIsbWtMec7s1NILeGSLCJsLYLAxxqjpXAdbbk3mqsGg1Ta0JnGhqY8yzat7HSuD24o5Eig2gndgyDWtBHCIRHxfsYMsDcWEq4ZeC5EDqMcVgBEHNmFWWTPJjRKK7TvXKCRNiHEaIbCpkjWgABuKC4EqpGUCPWAtcZILbgKsVfi3DeHNsJoJ1SLFILcW3C/OhIsDHIGcG8ySKc065xo4pcI2c1Lv00p0HShcDKeBLpxMu4gK7MirpHJzsDKrhEbnQFuZ8Bqd3MV5BehZ+4tUHr0Yez8aGvxxp/SecNSbRr801gLsHL6GPOUA0o6oLneBLYViW2LcUjvLbO/6/rL3oEdQRqqo2Xbupuh4g+Dkj5OV+O3NyfXKs32q1+WrgV6tP1ZuzehSoCxxncJ/LE384p/wuwA6kwD87pWAsySBuWYFvpsscWjtVIgUDZoDG7WAnAYHcKvVDWAGQyEU7NJVKrOH7p4XhQI/CjTCY0qIyA4j6DsaQaraRsjroKMSMo7d0h1FJq0dtDkfA9HVX8PdNALD2S7U5O1uxRpUbCWjWzgQCEggF1G9QDw8hIRUC+mgbggYVDbygldyHOMADkMhVTpaULY2ELCqGc4Rnhy6xsBjGIuQm4pVUXHHXAms2gm09wZXoD1YnyBuIKNjdG9Xwt35gBs1qHm+YWu21yG4CCFpkC4aRvwcH13uZURGWozTDCKk0DWpz6ZEy5E9J4Gacg7ZEjJAoATewgi/0MHUI2fiFI60AC0nAOghPgGoEZZi2UgCuv29uFyoAI4C36JELcXLwJVWvENvNe7tIOBENQP2K5jmpH8EQpr4CInONEWtNQUD44oZhpiqH9+QBhu2JoSBmgtHgrPC47RnRCWEtFvZIIbhCENEagsTLd9ZCmw6x0W6nSlUUa9A9EjEXmUMtGQiBoCYTYAgHgv6TYCiHgiGJE+OIiUgF0f6ZAVwCEnWSkxumomim06i7e5EYEsmlwCmM0ymqmEkcUEWOMCkyY24sWkWCWBcvaKWPAaWZk5cEE2WkA1kxemesMYChWZERoUCkAeWcGZUdcUeVU7squSW3B7QqWJk6WXeGWFkiA0yW2jkJ83we2585WHU18H4NWpY525IIUAkAg0MaIGIT2sUKcr25I72KUn2oCGUv2OU0CzmtcgkyCqO2oyYGCWChWQoTwlImM2MsGlsbCRCIOSklCxM1ha+h26+24/UHcn+pk4ef+gw76wOceysFOuoQiBOfEEcTGKidGG6L6Qay40BQcmsGmimyAFSE6agVgsybOZoCEuKAkmsDh7YusCRDC3EOcpAEKNBN4LC4GYaW6WwzcSo32pAk8JAWBC4OoOO8AgQQa24uCNUrBSkraaCKg2ux454yklEDatC9YTYkqMGGc3E2IAA4hdj0nKHVGgLIHgkvAPPjHKITNiDDjQArvFhoHKH/uMfEWzLBjMUUHMdQRTDRqsd6EMUitaMgGPpKsARYKAXRAxNPlATqFjFcHWPIMJPkuak0lBNbHxOMRUl8T8diLMqhOhHGMydOnjCwoiSLJjm5t1MgGcFQMNJSD1LkDcPGGZFYIguKarMvlkghIJDYCeE4NlHugeshLPqzgwD6AiH0bXqFj/KnFbPFpnGwaIDnMwfnGofpBobwVofwZloIY0MIf8mIdqhIbNJdDIXIcETQEoeECocdE6UXJoaXDoeZFlgYTFNtsfKfKYWVu5BYekbfJkQ/D8X8JLCQHfAPI9kmRaR4YlPQIAqlHSBIf4UGQDlwljg+qEZbGhLQDwmghEWhFETgubKwhQOwsQouFLDmdohVnMj1FtFmf4KOfKAjiwqTnyFAVtBgaJmIghC9OTjIldPIuaDTszHThpozoTrkAjlrPouOZYiYn/mnseXxKeYkcZsrCjA9MLomNiKyFLMCbVr6KLuLolrpFLrBirsdJ2hGrPEpI/kWlSfhJrPxuNvQKcf+oBkYpCKaUOlNBKGcCjtvjvKdLxsOfQX/tkVeSTALltK6GAECOUP2YORcpUXIlgGBcxn/uBBQDUA7NuvChBoCkGv3imoRpSNiEEoWmEp+bHGCRGp2GTKcSwYwGaO3kBlhSjtiGeGDGiGCSRMJbxlhC2GwH+pKqpepbgHKCspcdeQBM0QuICogpxWQEBGEJuURE+gukOhOFrOhpMXaLqYhPqbRgaMaYhJPhhUhlbAjk2OUdco0YigQABlVMBroqPm5QZJohnJKtRrNtBJgpQACDQpih3tUG8sRaIGyhtl2psPJaIKUAgaCAJcPvaKnJGseObHJaKK9H7OJQ2HKBuJxIGB2i2B9JSPcFBTJO2oBFVTVWXFOppHwHSdNUyehfIKbC1TaexChckNIjhcZbvgRfBcxujk+cjEafUIhCtioGstciRLealSyRRpLh1omOoF7iGK8mYEpKxtqiwKUQPviclU5YGBPkCBhZAT5naDATXtKMgeaKgfAYgZQH+ogAyKGmgfhfvlyIfm+qJItdziKdjuELga7LslYEUATMdSxKdSMoTDBTSZeAvvDEhUkQOSkdxHKfAhBWuHbKdqWNDEnIwVaRnNFlPKpBwY6bpOoQnq6aXPGZ6UfN6eQEsZQQGdIf9kEfBoJJZuGQGKrpsQ5smFGTwUZG6Q8PjQIapt/DtsYaVh3Bmd3NOUWWduUdIH8ELpQCWc9u4QlPsElB9iAjWX4RAgEbIQ2YDFKUgpNEVuERZgVpAK3GmdbYdpYX3FzT+KFIdXCC7RWs4RYM3GNZcCHTHG4oEBSAItICJoThnXObBpKhRVYLVfznsM2NQOGhJpleDZBE9fJZVPQDZewPtSItgtuPXZQCHC2M2hVULmTD3cDsesALABkHoNenVc9PaPPMdo1Mna1JcsvZKu4MDnQS8aDPOHWigSQsxFAdxAgVvttYTHvgfv2JWAAEJrKdhQQT2Q1Ghy7wKSmBgz3cAL2zKRE7SXRi4QSdDXXvxcDYgABqEEFwhMrNR405YA/o2Co5mVnlmGFacJSki5W6gNU+INBplwkIENUGzdRAGAiCx90NNUels8etN4D68+yKH6gmBoaELEyklB34cmCx20KmmVBZPNDB4W/Necgt7BDpWk+tLphtUtptzIIhJApZFtqZLk6ZCddto5qdUJHBfwAVR08Y0oBYf0BYfRE4btbhv8ntIeVZPhftP2Ad9ZzmiA+dEofo4dqCkdgD2CW0DNyGTNhoD50xdo2INgRphjKKAAZJAA/ZVBOHKEkdCWlQGD1NuNOYwiCdzqOo7ZdG/YmGzuA4Tp/QrkrvdTPAQXbLuDGJHlpEk3JAQYcbQGAHLhhdOUQyEgcqJNGnGBILGIaP/GGE2JCLILZfugaKUHAVrOdOrPTJrEcYgVdOGKQIgo/c/RcCUEgATEYlYv/qrnULkMcLOqwsk+NG8eNNxI3vgGaE2MENQOQj032tQkQPgNs7FShfSBNfgLVUPsvdiLREqOQGILpU3YgO1S2HJf84C4qrQN1SqZVR9INigIOH6JuFZXQHWltCAxLkU2c50Fc2aHRCeIVFrA/fgPgKUAOIrioMFYISwqRTCIgMmLk0aNA7Ayc5FnKAlUpn9bRv42Fa8qYrg1AauYTsTuScjFdbtRjYJjqATc2sw4vsDsvg9FQGvuw+QVwzJjw4Ra3Xw3QcI2FtJGI1FucTFnaXFhnNI2Lc6RLXI+ltLZlEo/S7WfwBgLZo3MrYEReOcq40mgXbvsmGCujdJvIJgPIDI3a3wcbboVloYaoyYeo/HUFondmRvWWPU8wfo+GPWOIAwE4VFK4Q5C9jY14UAr7fJf7VlIHXISUUDguL5mkfVDOem2Yh1HyAKHgpgDCLIHm7HshqczRkZvuooB2SYgdUrMjFirgMvcE+NGEzm725xMgDE9AFQB9AmHC0RKovTunnxCU9/eU4DJU7wRQDU+EGlNC6GCLou320mOaHJROoDAQHwEhRg4qKziRBk57Nysxk/U1Zs4hjsyTgCarh2kXQcGbFFaK3xOKyUE3WjIrk89yf4P8opBTAoIojRkoDHEOH7kpvq5zN3jDjzlBFeds58eSyhTYLe8uxy9zKgAc+wG7PC/pq80aO81VJ8x9JNWPuHZeEC7gH8HSYOIJ1NHgCBnWkU7dWtOgAgcdOMxu9GkhcyVPoTOMzJulky7uD6Cwpx+ENTRGvIGC+oJ88jptTNFCxgIJ5pfQFZ4J3QG1AJNUBckwHuKXWymTGwyRBlZWNlGy5HJm+/FyxJ+NIx92TtL9HsUpJfc+lpIPVbtxMGMUKPf2dbEqEsdIBJt2oXDxmjfBRcqqccuqaGSfaREIPskqTja5njUuZBLKVUOlnIYTPg8DWfaDRCm5ZdSBwAZoLzaI+nOI2a0Lfadada8lrI9G460IUo/ioPf6Y3IGSrSVGraGRrXMqoTa9GZLdoRjdN4mebSmYm/thfCm1o+mzoyQIO3CKPBFFnUW2WaW97d4RWzrXWct/IStOt6ERHakRflVpk7VvR9afbO7Gk4QWVm29mLnSGfjWtG0ObjtHtHs8dITC5SCAI1BIxTdEvkXYV8Q6IGBOljpl9IY9YmxJ+/9DPIUv4C2MZSwtj3vMDiZDQjaCy1tFIMUCJB0QJB9F9l9fWweS+WjMPTEY4XWiUBh0FwwnOzeIACgEIztlSJuUAJpNTA/IKKhM5jUzeitH+bcvD0feh19AKH8on9oZrTczn3CG1XTZza/umP240vec9s9wdbkKk4ELIE7ZOcgO5ARzE5WAj0vLQ9Fa/Xxrg3prWcFrIt434txcRt03XpfK1v6t0dEdJWcdB2Z3zb9tNhzvN4qd4UrWFyHYXBtrwY3oY3p9kM0g0G7r8gsPU0AslLWsuT8bR3Vt2fFWqbJ2MsKdBfOYAJiCBYyvKosgljxbHt/8z35bX2tZTjH363w7bZY7mcTHyrdXFsATdFLN3bHE0aivH6Y/AJwPKTmzQfxoAPs52RXULCjNdF7PIMaM3XU8R5N1dsakpTgYSW3gFTnvVTM9opX57WcFQh/YfsfwpDj8iGQEWgO5SuCOEGcqVPOITBGYtNKAYAOoqe3ShQFTyrsesGswA4ARtmMHdchIkXJ0l9QsgexBhzpJSgg0R/YHCfxmDGIDyoofdEmhGQOgAS3AgvITBPBoA/kZ7AEpWlXTAc3AD0PGnk1fJ4JJU24ZgTcTY7nlkKXHAatVW+ZL0hKALUAcC0bpyZwWute0NoIc6wtCuTyFFu/iUy8U20piBAhREdJiDSK9dfNAoOQAp5lB2LMBru2PJ4sUATzRgW4mpboU6WPeRwVbkZbMs06rLGBoFwHactxOBsHlsOmsQiIlWM7MNmQU4Z1gicUAgEixUgpZcKGOXXtHlzvpsguuN7RClAVa4zB2uRDUnEbBIZTMh0MYb/nXlCooZJgZpUxAIKEEjNxBWJCIFaHCCigoGnxZ5uxx6pVR2BGiBCo1B4ERhcEq0WSDmxQA3BS0R0X4EfmKJqCaqyMZtAgFQRPIMAriX6skM/SOIIU1g1AqtTiqlJCMcGWTjcnnxTRVQBkJile16zOdf8SkbKsPB541cH07CYKsXS35pczyt6T4RLRE5QiAhOQmgNAPPJk1TUhxM/uNH1zaBDc4fS0pHzkq2lhaUjAChNyjaJ8FGyfSOOtwz4x0u+p3Hvud374BRB+EICAccFH65CJ+WdNrDYgepY9eMw2Rtp/1GaQCERp/Avks3KS2UQsKjTvln1pGZlc+2jJkQ4QLYuFSyJbGfpWR9rz8q2f2b1nnX9buMfuXjdfhF18Zi9kg9AIUo+QITM07Q6TZtoD1LBQ914P0W/EpGxCD94cgrCdmbiFDblSBx4FwHW3959oGiyxKwbClaL3J2i6JLovil6IFYBiJEFGB4E5jcixiKgCYljCRIhN9oqJPBJ0VwJLFuKKxZclgHWLYkMo2xXYpnAOJHFou4QJCoLXMpi8bip4C8BRCojc9ni9FBxBe2QG052SdhLqivQOhAl02oJLWBCTiHMERxfmVUPfk6A9U+8nUQIJeiVTwlMxVo3MSmnBwFiFiFBIRAdHzTZpp0fYsXptFYhxhW+kqWVgyAXDThZwxlfNHsnc7HAPWvEfkgIHxTTjdGzBTkkuTJh0DuwC4BAlYi7YSw7qJ9fIU4n3zDY8G4gIGrUNr71DQOeARobAXfpo8aGKNU3EjFIKBVFqcEDgYenxI8JlcyAZuOijQBUVzq2dLWFRPVJgBXx+4SeBfWfD7iMSuoEXhCnVCFxzSfNXETaQKEEixuRI+PjGQdZkjZaSjczIB0rbAQlaW0ZxitwUKCQ/WodDbsdH4xgRZAl1CNltwNrRs4yCjDvrtiTbd95RVWPPinSoGUAbJAUE+kWE4jlAKABYd/poHu5qjp+b2WftWQUngJq2MhDyZxVbKjtHKegiIDWFfiQQbcSaLjjQx4AuT4abrKCPbA2JnjwgASSICSyZ4/U3AoSWzGxBF7jsMk08PFFsCKBUBXuiU7gMlJIROx70HBCZGIKESE9XAekkXDET3HWVFSrDa4eXmIj+wmWNeEPPxUdwWgrKHgTFgWifxuJEpL+bAN3l6h2hDegYO9C7EiwRVC6kgqdg6BckNSKeSUwatvw7xr5q65JdLAWX5is8UqsBIdDNLqBnR7MlZdxlpDBbUAzO9LWqfVL9690pqP+aWFgMJiwAlpVlBhPrC4aapAZxye6WGxIhooEIR0R2EdN5gD4TheAZADpDCCaJ/KSSFCuNOjwmJIgHwo6TrW0i7E/0WaJAfNIwCc8nmWaawZSDK46gXyoIEXjXiDguZX+6ob2A5lhgeAMCb5CIK4m0h9TjgNxRaZrSkSWUT63OGmeGiZbPN80LYdmSpGBCd5EpgtefOaB+GfVsEGOQETjkziwCqocU5NGVzqknT+2OHNoOwA9aj5KI9INCJDn5mgwrh6ycnjcMlSHClAxw0WRNOdy0Zku4KOrgJIG4i0JGMfQkeX2272t3SehZPnrUMmTdSRHpfYea2Fo8EdJjuMzGR39KKsnmTLKwLZi0hbA4www9Eozm0hJA6ANMSclgDkIa0zJltWUeYVtoKiLudktyYqM7Z3dC23k6xhqKpAvdtRjjIKR9yb7rcBRV/QEp4Fba39ykoU44Kv0coTJ4eeHApszl5x5jeumyMqedCnaM8bEuPB6FvRY7bskU4MEnt9GTEkQAYQMWnofTRAsIhcldBhCywoyUBVh4BLWAACldYaAUUArO4hbRLZv0lBqQEozholQiYSVOj3PlEN0m9Um4tyxgk7kPhyGZni3zIo0YOelAPNjTTbopDbEDdeDujMnbSCeJGMSYjmPGjKiZproI3MTENl29pSxwZMO4F3B4SaYlvBmKt0ghMBOeFCA6DpmdFhxZ5eCZisMzHGs4pSq+MIHWgQGZYrA+jPsIqEdE/hmMNgBsRvgNiodOg24V0CPQ/z3Q1YP4TWITB1h6xQuNGW8RUIKY+cAm6XHlsXUrC9ReSRnbZiFJZ5892eWAL+RQFWEhS+FmsbiDPGhB0IyYdoBBuzUw6GRfplfBHELCHThyI+kc4bpIzEmxyjJacxOTJMnkCKwyYRTPhZLlEdzrJ2jbuQ5IzZ9yS+kqXxa32biMUCwkBZuE2GbgUYqABYIXO0pjotK8pfSwmK3Bpk51pR5kk7u3Kvj0imEPcOeTUrmU6Z3JQWSfo92Hl2NXuC/CeXqMbKilaMVAsRdkRX7hSMWtNZFNEs6ArkPOmBMgT11VxyDtyx8rDugqsCuB5pWHXBVQuFk31vBH/R4XdHk4HhRFEzcRegoQjgxqcSiCQfc3VTB9zhpFSVObKqik91Q7C0WcxVowbSHmiYKIhEWBV8932WGVkJHgxWO0EW6g0EB1wBnwDjIKiuvtsCoE3Tjks8nTE2EKQopcVqUjvMUDrRkBnUFCTiHjTABxgWmgqh9PBVEF+xuOFKzigYzKjswhqYbJesoOk6f95c39PztWHfg0ltm4YqyiLOOjhdMEkXTOPSHJaR5bSolBcJyoACOsFWvC8VVjnMaMarA/omFN5hM8A+ALCMmERkYpkAgiPctaWGw6h3kGQAAGwAAGbgPilSD5ADCpiVtGLI5plEohCC7zr9GRFBUkJxEvUoVRYzxg2MaE7ZNUMQkEM6h0BJoe/Wgmw1wJ7FKTtKwEx8Te0LrL5pSrVAkr50/gUYeMIyqZxnkgkaVZSCQz65A4vJUMgVW2FKRBsw2VhaKRN7eUs1RE6usNDVL0xQyvzTKtRNzW+V811kKualT9x8AdMbQZ5uliMyTt3cW4SyhpILppKcRGS6PqJKtbiTbWCfeRunJm7JziR76qSZ+qbSZyc42c0CLnJyKWUm5BWFuWo0mU21plnchkWWGqVVLZFJjeRWqzCCrL1RvkzUaPN8LjzdRQdVWmpLW7y5bKRommDqGenF4to/xOecSDQ3qxfwoK2mOQAsC51IQrGzirsrxq44rl1RG5UTg3Io8ycUiR5VTj3JKIheb/GmSeVHT0KcGQQPCkaBIpW55N4QcFS/KFaKbMONOT5YLlfKv8sW/5e6uGBfay4v+h7ECm4i7Wcw4l3cxQeSxtCExScLCDTe8t013MpBymkPlbnrpkx+KGKqqW7hyLblxWjGHAmIIeXJhIVixUIUb3RU2IPEZymoJwS2i/Ntm4Ck6bgrwQVJhIEgC5G1JrzgQaIGa5VAEn0IzTfZM0QmU7iyoWg4lI1d5XaClnMLuFZXW/qaOHXNp3QGsz7ACwp5NgnAKLfrdNOJDHVgcI2waYTAfoTMUVJESbS1L9iSpgJVfWaUWlVnxK+AUs9BTOpjUssahErIhuDWaHRx2I39OvGBKQKqo0YnYXCbfRDZshm1xQSsPuo8nRK+AOxD9KbP839tL1YGzhG41wDmZ1Ap7NZLSXKluz68ebFzGwq1iCYFKrfGed3M/yqtGNO4XVBjwY478iE96pgtaSjnPq84cfN9ZJITlZZyReoqeaRqXxeMW41SlVgotsicj18sdMpVMtfAzKB4cy+ydo0nhUa4l88OjTYAY1ZEgsgYqDcdzMKwaOd8G2ZUhq7kobmKmGnyZ4T8n2MApmUAjbWwF4hjMVjUzaSIoBJSLEtD7dfBzx2h4qjd2/G0YaCRyYVqtK8k5RZVKS9c6uJdfjWuUE0SIotGCnTZJrDG/KmcsvZQSpqsSZc3t95HJlEOF7CzaNeCbQSO1hC2cjQngkzdzCs2XgyE+BHFUgApplVYQWsc5FPSeZqbUUFuyRWHxZAXExdTg7kQLiRV+k21Bqp5kFuAhXqvdzuRbcsm0DGyLpvzFVYHuKYWbFcsAVtTx2+bIwpKGzNau5W3BUls1U+VaeGB/y2UtIfq5GRXuhVSCRgsi/PX+k5V0qoZjK2eciyVDDM0IX0eoK8Km2j4Y4zMk3Ybji3rTdhGgrdIXNYYOLXOXalHYztuZ5UA1YsXfEgCnSVlvhiGCJvKsBiKrtYYw0/VFnvFl7qSRnISKNEb2DUXSo8WSADHUlgG3kjVclXsPxJqpMplwLVDHURCTxhlKeSg/BF3WVJsQgsIcHzNlBJj6ArbLNGQdxbQ4Ak/lJdcFTrzLjlcaGuSskA/qX5r8goO0H8IRDzhvpZUetsUO4zKRG15Qq5NGhXUYJeA66z6kdLRgVcagVXRNbjQfSoBgwyBoev9UnL4yqoeWi5OKw8xVrEwrXQQrRkXIOHMJNSNTAeq0yzUHi1ETChhg/bLzL1ckgWfId12Md8BsuQROwBxgRgOhnbBda+0jxg9L+sxAsWLsMgTiN4icERukodIE7RuL6nJanI/X5KcseoykbTupFtzpdR2Kwgrqt0LLqlSu5nX5q6nI6MVWKyLIGL+nA5EV/qC2S/tqqn5d8g+mTn10O4TKpdmjWXVzvl0Ib4QtKhOCYwFAmN1F+AGpcrqHnYaR5c/PDYFK10A5gxH6Pfssy87LGZ2cwkJMJC7IIaz8k0aaMcJHbtlHK+8rjcYeNn8cAx4rRcj7qeX7kA9Ee7RGeTZyh7nd0mvdiCcfKUL9NL/SoSnuM2/9u2Zm2mOqpH1ydVcyihOOeQ2OaLdOiamvb5rr1DtnFn49nHvr5Z9k0GXiKANlGlWTU5Wy+qqA/mAOAzsTVxgyiqSXVnVCMr/VVf8vEhrBtyeq1tDcO9wKUPea2sJByYbjJi8Tq2C1BFr9gxgjIdcf6o+i+qBBNwnu3NPnEVNLznVv26mGTCrRNIa0Q4DpA2j4EkRN8o9dBbKbNRrYjweqxrXJTNOI0XiCAKqDhAVOpoYsJYrAG6czidJukQp0xOGI7XREEFO6HdYeloz2VGNjgFwISsGmRVD+4hn9LfgowhwZ9QGWxQjU/2EM60zq1Pi53SovCPM1gj+UOBeSoFwzMDJA1vR+0FEIISRq+TvhvoqGuTzlAnGkOIYeHa1V2xGjdqYwS9TtbQ8M+E0In8Gt9hNHhZzWZR5i+TWE9UnGf1J1pygsgBAol3/2ILwzf+Nw8QWQ6sntW+4WMbQSI4dqyYv8+wyRAO2EM3k+6gBWimAWaYz1NEVaTWO+09NjTJmf7fiUB3A6G2/++rrrNLnXryhokGiLtrh2f6Z5jp3E7cfxPhApReRh9QUcyXRzslkbX9WTploVHCNF4WC791AVUgBAh+vRHidnLnITjqamo2zrqO99mjKG7Ro6dWO0B1jtxrY5yJe3frxaSS+LMgTqHQYtt1En/C7kA33QXSOctsxLppHs76jSdRYwsdmXKjtj8UdZVqIOOa6a2wdA0WHRQQUauyxqs0Q4QtFZipiYXbHYaG4gZMb+Yu4PAcHQS760G7xp/gGPExFD/j10OolJtFPWCuQZAXkNGOyGFiaMFSKDjezdbkzPtwOfYnQEOKvpmxTM7UJmPbGsHBcqYkYgzC3G0LuYKJPcfMQxLoLlRCgdzvxsjqS9HE78jSFwG+LDjGou+78tzXxQsT7ZxnVK7ni1iQkruHBbJp7LF6cVDOtmFbS7CaQXzAwhWonjREu0QTtQUExKcbFwlFctDGpLUjqVoOkSANdXdswFROrY1sM54JBUpDKtmLOxjxGmvPlxqUgorW85uHUDqLcCSgk8P1VOlx0ms8RIkoo0TtfVxypu0kquD6Xm4ZQlJelojStFvWGita2kkDZ1McUGSf1pOmNvtzMkfBVgZcdoJcq9VPdrERwE4OcD2M0g3eh+eYM8CWBvBDAGNwYCCFwB3ZncBYQIHUToDuSBIxQSm58CgAAB2NABkAEC0AZMaASNbQBtSpASAAATgACs4am1GEHDUMBJbAgG1LQHFu0BI1AADnFvvJJbDAd5KkHFuuB1b4ayWxzYxuZB3k7yWgDrbQCi2jSXNlWzai5sMBUgNqQhO8gYACBjb9tt25LeFsCBUgXNiXE0AMDU2WAtN+m4gEZs7FYGLN09foCAA== -->

<!-- internal state end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=testpress/design&utm_content=441):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-16T09:58:48Z
body: [PR Preview Action](https://github.com/rossjrw/pr-preview-action) v1.6.1
:---:
Preview removed because the pull request was closed.
2025-04-22 09:41 UTC
<!-- Sticky Pull Request Commentpr-preview -->
author_association: NONE