@stacksjs/defaults 0.70.54

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

@@ -0,0 +1,441 @@
+<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>