@stacksjs/defaults 0.70.228 → 0.70.230

package/resources/components/Dashboard/Settings/Forms/CloudForm.stx

@@ -1,441 +0,0 @@
-<script>
-interface CloudFormProps {
-  type?: string
-  driver?: string
-  environments?: string
-  apiDescription?: string
-  apiPrefix?: string
-  apiMemorySize?: string
-  apiPrewarm?: string
-  apiTimeout?: string
-  firewallRateLimit?: string
-  firewallCountryCodes?: string
-  firewallIpAddresses?: string
-  firewallQueryString?: string
-  firewallHttpHeaders?: string
-  cdnAllowedMethods?: string
-  cdnCachedMethods?: string
-  cdnOriginShieldRegion?: string
-  cdnDefaultTTL?: string
-  cdnMinTTL?: string
-  cdnMaxTTL?: string
-  cdnCookieBehavior?: string
-  cdnCookies?: string
-  cdnHeaders?: string
-  cdnQueryStrings?: string
-  cdnSamplingRate?: string
-  enableAI?: boolean
-  enableCLI?: boolean
-  enableDocs?: boolean
-  enableFileSystem?: boolean
-  apiDeploy?: boolean
-  firewallEnabled?: boolean
-  firewallIpReputation?: boolean
-  firewallBadInputs?: boolean
-  cdnCompress?: boolean
-  cdnRealTimeLogsEnabled?: boolean
-}
-
-const { type = 'serverless', driver = 'aws', environments = 'production,staging,development', apiDescription = 'My awesome Stacks API', apiPrefix = 'api', apiMemorySize = '512', apiPrewarm = '10', apiTimeout = '30', firewallRateLimit = '1000', firewallCountryCodes = 'RU,IN', firewallIpAddresses = '56.123.456.789', firewallQueryString = 'foo,bar', firewallHttpHeaders = 'x-foo,x-bar', cdnAllowedMethods = 'ALL', cdnCachedMethods = 'GET_HEAD', cdnOriginShieldRegion = 'us-east-1', cdnDefaultTTL = '86400', cdnMinTTL = '0', cdnMaxTTL = '31536000', cdnCookieBehavior = 'none', cdnCookies = '', cdnHeaders = '', cdnQueryStrings = '', cdnSamplingRate = '1', enableAI = false, enableCLI = false, enableDocs = true, enableFileSystem = true, apiDeploy = true, firewallEnabled = true, firewallIpReputation = true, firewallBadInputs = true, cdnCompress = true, cdnRealTimeLogsEnabled = true } = defineProps<CloudFormProps>()
-
-// API settings
-  // Firewall settings
-  // CDN settings
-  // API Routes
-  const routes = [
-    { name: 'Index', description: 'Endpoint to list all resources', available: true },
-    { name: 'Show', description: 'Endpoint to get one resource', available: true },
-    { name: 'Store', description: 'Endpoint to add resource', available: true },
-    { name: 'Update', description: 'Endpoint to update resource', available: true },
-    { name: 'Delete', description: 'Endpoint to delete resource', available: false }
-  ]
-</script>
-<form>
-    <main class="border-b border-gray-900/10">
-      <!-- Settings forms -->
-      <div class="divide-gray-900/10 divide-y">
-        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
-          <div>
-            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
-              Default Cloud Settings
-            </h2>
-            <p class="mt-1 leading-6 text-gray-600 text-sm">
-              Update your default cloud settings
-            </p>
-          </div>
-
-          <div class="md:col-span-2">
-            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 w-full">
-              <div class="sm:col-span-3">
-                <label for="type" class="block font-medium leading-6 text-gray-900 text-sm">Type</label>
-                <div class="mt-2">
-                  <select id="type" name="type" class="block py-1.5 w-full sm:max-w-xs text-gray-900 sm:leading-6 sm:text-sm border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
-                    <option {{ type == 'serverless' ? 'selected' : '' }}>serverless</option>
-                    <option disabled {{ type == 'server' ? 'selected' : '' }}>server</option>
-                  </select>
-                </div>
-              </div>
-
-              <div class="sm:col-span-3">
-                <label for="driver" class="block font-medium leading-6 text-gray-900 text-sm">Driver</label>
-                <div class="mt-2">
-                  <input id="driver" type="text" name="driver" value="{{ driver }}" disabled class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 bg-neutral-50 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm cursor-not-allowed">
-                </div>
-              </div>
-
-              <div class="sm:col-span-2">
-                <label for="enable-ai" class="block font-medium leading-6 text-gray-900 text-sm">Enable AI</label>
-                <div class="mt-2">
-                  <button
-                    type="button"
-                    class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ enableAI ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
-                    role="switch"
-                    aria-checked="{{ enableAI ? 'true' : 'false' }}"
-                    data-action="toggle-enable-ai"
-                  >
-                    <span class="sr-only">Enable AI</span>
-                    <span
-                      aria-hidden="true"
-                      class="pointer-events-none inline-block h-5 w-5 {{ enableAI ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                    ></span>
-                  </button>
-                </div>
-              </div>
-              <div class="sm:col-span-2">
-                <label for="enable-cli" class="block font-medium leading-6 text-gray-900 text-sm">Enable CLI</label>
-                <div class="mt-2">
-                  <button
-                    type="button"
-                    class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ enableCLI ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
-                    role="switch"
-                    aria-checked="{{ enableCLI ? 'true' : 'false' }}"
-                    data-action="toggle-enable-cli"
-                  >
-                    <span class="sr-only">Enable CLI</span>
-                    <span
-                      aria-hidden="true"
-                      class="pointer-events-none inline-block h-5 w-5 {{ enableCLI ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                    ></span>
-                  </button>
-                </div>
-              </div>
-              <div class="sm:col-span-2">
-                <label for="enable-docs" class="block font-medium leading-6 text-gray-900 text-sm">Enable Docs</label>
-                <div class="mt-2">
-                  <button
-                    type="button"
-                    class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ enableDocs ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
-                    role="switch"
-                    aria-checked="{{ enableDocs ? 'true' : 'false' }}"
-                    data-action="toggle-enable-docs"
-                  >
-                    <span class="sr-only">Enable Docs</span>
-                    <span
-                      aria-hidden="true"
-                      class="pointer-events-none inline-block h-5 w-5 {{ enableDocs ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                    ></span>
-                  </button>
-                </div>
-              </div>
-              <div class="sm:col-span-2">
-                <label for="enable-fs" class="block font-medium leading-6 text-gray-900 text-sm">Enable File System</label>
-                <div class="mt-2">
-                  <button
-                    type="button"
-                    class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ enableFileSystem ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
-                    role="switch"
-                    aria-checked="{{ enableFileSystem ? 'true' : 'false' }}"
-                    data-action="toggle-enable-fs"
-                  >
-                    <span class="sr-only">Enable File System</span>
-                    <span
-                      aria-hidden="true"
-                      class="pointer-events-none inline-block h-5 w-5 {{ enableFileSystem ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                    ></span>
-                  </button>
-                </div>
-              </div>
-
-              <div class="sm:col-span-full">
-                <label for="env" class="block font-medium leading-6 text-gray-900 text-sm">Environments</label>
-                <div class="mt-2">
-                  <input id="env" type="text" name="env" placeholder="https://test.test" value="{{ environments }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
-          <div>
-            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">Api</h2>
-            <p class="mt-1 leading-6 text-gray-600 text-sm">Update your api settings.</p>
-          </div>
-
-          <div class="md:col-span-2">
-            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6">
-              <div class="col-span-2">
-                <label for="api-deploy" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Deploy</label>
-                <div class="mt-2">
-                  <button
-                    type="button"
-                    class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ apiDeploy ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
-                    role="switch"
-                    aria-checked="{{ apiDeploy ? 'true' : 'false' }}"
-                    data-action="toggle-api-deploy"
-                  >
-                    <span class="sr-only">Api Deploy</span>
-                    <span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 {{ apiDeploy ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                  </button>
-                </div>
-              </div>
-              <div class="col-span-full">
-                <label for="api-description" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Description</label>
-                <div class="mt-2">
-                  <input id="api-description" type="text" value="{{ apiDescription }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-
-              <div class="col-span-2">
-                <label for="api-prefix" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Prefix</label>
-                <div class="mt-2">
-                  <input id="api-prefix" name="prefix" type="text" value="{{ apiPrefix }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="col-span-2">
-                <label for="api-memory-size" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Memory Size(MB)</label>
-                <div class="mt-2">
-                  <input id="api-memory-size" name="memory-size" type="text" value="{{ apiMemorySize }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="col-span-2">
-                <label for="api-prewarm" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Prewarn</label>
-                <div class="mt-2">
-                  <input id="api-prewarm" name="prewarm" type="text" value="{{ apiPrewarm }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="col-span-2">
-                <label for="api-timeout" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Timeout</label>
-                <div class="mt-2">
-                  <input id="api-timeout" name="timeout" type="text" value="{{ apiTimeout }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="col-span-full">
-                <fieldset>
-                  <legend class="leading-6 text-gray-900 text-sm">Available Routes</legend>
-                  <div class="grid gap-y-6 grid-cols-1 sm:gap-x-4 sm:grid-cols-3 mt-2">
-                    @foreach(routes as route)
-                      <label class="relative flex cursor-pointer border {{ route.available ? 'border-indigo-600 ring-2 ring-indigo-600' : 'border-gray-300' }} rounded-lg bg-white p-4 shadow-sm focus:outline-none">
-                        <input type="radio" name="project-type" value="{{ route.name }}" class="sr-only">
-                        <span class="flex flex-1">
-                          <span class="flex flex-col">
-                            <span class="block font-medium text-gray-900 text-sm">{{ route.name }}</span>
-                            <span class="flex items-center mt-1 text-gray-500 text-sm">{{ route.description }}</span>
-                            <span class="mt-6 text-sm {{ route.available ? 'text-gray-900' : 'text-gray-500' }} font-medium">{{ route.available ? 'Available' : 'Not Available' }}</span>
-                          </span>
-                        </span>
-                        @if(route.available)
-                          <svg class="h-5 w-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
-                          </svg>
-                        @endif
-                        <span class="absolute border-2 rounded-lg pointer-events-none -inset-px" aria-hidden="true"></span>
-                      </label>
-                    @endforeach
-                  </div>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
-          <div>
-            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">Firewall</h2>
-            <p class="mt-1 leading-6 text-gray-600 text-sm">Update your firewall settings.</p>
-          </div>
-
-          <div class="md:col-span-2">
-            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6">
-              <div class="col-span-2">
-                <label for="firewall-enabled" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Enabled</label>
-                <div class="mt-2">
-                  <button type="button" class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ firewallEnabled ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600" role="switch" aria-checked="{{ firewallEnabled ? 'true' : 'false' }}" data-action="toggle-firewall">
-                    <span class="sr-only">Firewall Enabled</span>
-                    <span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 {{ firewallEnabled ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                  </button>
-                </div>
-              </div>
-              <div class="col-span-2">
-                <label for="firewall-ip-rep" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Use Ip Reputation Lists</label>
-                <div class="mt-2">
-                  <button type="button" class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ firewallIpReputation ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600" role="switch" data-action="toggle-firewall-ip-rep">
-                    <span class="sr-only">Use Ip Reputation Lists</span>
-                    <span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 {{ firewallIpReputation ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                  </button>
-                </div>
-              </div>
-              <div class="col-span-2">
-                <label for="firewall-bad-inputs" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Use Known Bad Inputs Rule Set</label>
-                <div class="mt-2">
-                  <button type="button" class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ firewallBadInputs ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600" role="switch" data-action="toggle-firewall-bad-inputs">
-                    <span class="sr-only">Use Known Bad Inputs</span>
-                    <span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 {{ firewallBadInputs ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                  </button>
-                </div>
-              </div>
-              <div class="col-span-2">
-                <label for="firewall-rate-limit" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Rate Limit per minute</label>
-                <div class="mt-2">
-                  <input id="firewall-rate-limit" name="limit-per-minute" type="text" value="{{ firewallRateLimit }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="col-span-2">
-                <label for="firewall-country-codes" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Country Codes</label>
-                <div class="mt-2">
-                  <input id="firewall-country-codes" name="country-codes" type="text" value="{{ firewallCountryCodes }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="sm:col-span-full">
-                <label for="firewall-ip-addresses" class="block font-medium leading-6 text-gray-900 text-sm">IP Addresses</label>
-                <div class="mt-2">
-                  <input id="firewall-ip-addresses" type="text" name="ip-addresses" value="{{ firewallIpAddresses }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
-                </div>
-              </div>
-              <div class="sm:col-span-3">
-                <label for="firewall-query-string" class="block font-medium leading-6 text-gray-900 text-sm">Query String</label>
-                <div class="mt-2">
-                  <input id="firewall-query-string" type="text" name="query-string" value="{{ firewallQueryString }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
-                </div>
-              </div>
-              <div class="sm:col-span-3">
-                <label for="firewall-http-headers" class="block font-medium leading-6 text-gray-900 text-sm">HTTP Headers</label>
-                <div class="mt-2">
-                  <input id="firewall-http-headers" type="text" name="http-headers" value="{{ firewallHttpHeaders }}" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 py-16 max-w-7xl">
-          <div>
-            <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">CDN (Content Delivery Network)</h2>
-            <p class="mt-1 leading-6 text-gray-600 text-sm">Update your CDN settings.</p>
-          </div>
-
-          <div class="md:col-span-2">
-            <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6">
-              <div class="sm:col-span-3">
-                <label for="cdn-compress" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Compress</label>
-                <div class="mt-2">
-                  <button type="button" class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ cdnCompress ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600" role="switch" data-action="toggle-cdn-compress">
-                    <span class="sr-only">Compress</span>
-                    <span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 {{ cdnCompress ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                  </button>
-                </div>
-              </div>
-              <div class="sm:col-span-3">
-                <label for="cdn-allowed-methods" class="block font-medium leading-6 text-gray-900 text-sm">Allowed Methods</label>
-                <div class="mt-2">
-                  <select id="cdn-allowed-methods" name="allowed-methods" class="block py-1.5 w-full sm:max-w-xs text-gray-900 sm:leading-6 sm:text-sm border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
-                    <option {{ cdnAllowedMethods == 'ALL' ? 'selected' : '' }}>ALL</option>
-                    <option {{ cdnAllowedMethods == 'GET_HEAD' ? 'selected' : '' }}>GET_HEAD</option>
-                    <option {{ cdnAllowedMethods == 'GET_HEAD_OPTIONS' ? 'selected' : '' }}>GET_HEAD_OPTIONS</option>
-                  </select>
-                </div>
-              </div>
-              <div class="sm:col-span-3">
-                <label for="cdn-cached-methods" class="block font-medium leading-6 text-gray-900 text-sm">Cached Methods</label>
-                <div class="mt-2">
-                  <select id="cdn-cached-methods" name="cached-methods" class="block py-1.5 w-full sm:max-w-xs text-gray-900 sm:leading-6 sm:text-sm border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
-                    <option {{ cdnCachedMethods == 'GET_HEAD' ? 'selected' : '' }}>GET_HEAD</option>
-                    <option {{ cdnCachedMethods == 'GET_HEAD_OPTIONS' ? 'selected' : '' }}>GET_HEAD_OPTIONS</option>
-                  </select>
-                </div>
-              </div>
-              <div class="sm:col-span-3">
-                <label for="cdn-origin-shield" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Origin Shield Region</label>
-                <div class="mt-2">
-                  <input id="cdn-origin-shield" name="origin-shield" type="text" value="{{ cdnOriginShieldRegion }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="sm:col-span-3">
-                <label for="cdn-default-ttl" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Default TTL</label>
-                <div class="mt-2">
-                  <input id="cdn-default-ttl" name="default-ttl" type="text" value="{{ cdnDefaultTTL }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="sm:col-span-3">
-                <label for="cdn-min-ttl" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Min TTL</label>
-                <div class="mt-2">
-                  <input id="cdn-min-ttl" name="min-ttl" type="text" value="{{ cdnMinTTL }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="sm:col-span-3">
-                <label for="cdn-max-ttl" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Max TTL</label>
-                <div class="mt-2">
-                  <input id="cdn-max-ttl" name="max-ttl" type="text" value="{{ cdnMaxTTL }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="sm:col-span-3">
-                <label for="cdn-cookie-behavior" class="block font-medium leading-6 text-gray-900 text-sm">Cookie Behavior</label>
-                <div class="mt-2">
-                  <select id="cdn-cookie-behavior" name="cookie-behavior" class="block py-1.5 w-full sm:max-w-xs text-gray-900 sm:leading-6 sm:text-sm border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-indigo-600 focus:ring-inset shadow-sm">
-                    <option {{ cdnCookieBehavior == 'none' ? 'selected' : '' }}>none</option>
-                    <option {{ cdnCookieBehavior == 'allowList' ? 'selected' : '' }}>allowList</option>
-                    <option {{ cdnCookieBehavior == 'all' ? 'selected' : '' }}>all</option>
-                  </select>
-                </div>
-              </div>
-
-              <div class="sm:col-span-full">
-                <label for="cdn-cookies-label" class="block text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Cookies</label>
-              </div>
-              <div class="sm:col-span-2">
-                <label for="cdn-cookies" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Cookies</label>
-                <div class="mt-2">
-                  <input id="cdn-cookies" name="cookies" type="text" value="{{ cdnCookies }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="sm:col-span-2">
-                <label for="cdn-headers" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Headers</label>
-                <div class="mt-2">
-                  <input id="cdn-headers" name="headers" type="text" value="{{ cdnHeaders }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-              <div class="sm:col-span-2">
-                <label for="cdn-query-strings" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Query Strings</label>
-                <div class="mt-2">
-                  <input id="cdn-query-strings" name="query-strings" type="text" value="{{ cdnQueryStrings }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-
-              <div class="sm:col-span-full">
-                <label for="cdn-realtime-logs" class="block font-semibold text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Real Time Logs</label>
-              </div>
-              <div class="sm:col-span-2">
-                <label for="cdn-realtime-enabled" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Enabled</label>
-                <div class="mt-2">
-                  <button type="button" class="relative h-6 w-11 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full {{ cdnRealTimeLogsEnabled ? 'bg-indigo-600' : 'bg-gray-200' }} transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600" role="switch" data-action="toggle-cdn-realtime">
-                    <span class="sr-only">Enabled</span>
-                    <span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 {{ cdnRealTimeLogsEnabled ? 'translate-x-5' : 'translate-x-0' }} transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                  </button>
-                </div>
-              </div>
-              <div class="sm:col-span-2">
-                <label for="cdn-sampling-rate" class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100 cursor-pointer">Sampling Rate</label>
-                <div class="mt-2">
-                  <input id="cdn-sampling-rate" name="sampling-rate" type="text" value="{{ cdnSamplingRate }}" class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 required:border-red-500 shadow-sm">
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-    <div class="flex gap-x-6 items-center justify-end mt-6">
-      <button type="button" class="font-semibold leading-6 text-gray-900 text-sm">Cancel</button>
-      <button type="submit" class="px-3 py-2 font-semibold text-sm text-white bg-indigo-600 hover:bg-indigo-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 shadow-sm">Save</button>
-    </div>
-  </form>