Connections pipeline generator
================================

Fill in the fields below to generate a ``connections.yaml`` for the
:doc:`Airflow Connections Pipeline <connections>`. Drop the result into
the ``examples/connections.yaml`` spot of the
:download:`downloaded package </_static/downloads/airflow-connections-pipeline.zip>`
(replacing that file, or alongside it under a new name) and point your
Azure DevOps pipeline at it. Nothing here is sent anywhere: the file is
built entirely in your browser.

.. container:: gen-i18n
   :name: gen-i18n

   .. container::
      :name: gen-i18n-svc-conn-label

      Service connection name

   .. container::
      :name: gen-i18n-svc-conn-placeholder

      customer-connections

   .. container::
      :name: gen-i18n-customer-label

      Customer (short name)

   .. container::
      :name: gen-i18n-customer-placeholder

      acme

   .. container::
      :name: gen-i18n-environment-label

      Environment

   .. container::
      :name: gen-i18n-airflow-url-label

      Airflow base URL

   .. container::
      :name: gen-i18n-airflow-app-label

      Airflow app name (override)

   .. container::
      :name: gen-i18n-airflow-app-placeholder

      auto: airflow-<customer>-<environment>

   .. container::
      :name: gen-i18n-subscription-label

      Subscription ID

   .. container::
      :name: gen-i18n-subscription-placeholder

      needed for Synapse / Data Factory entries

   .. container::
      :name: gen-i18n-schedule-heading

      Rotation schedule

   .. container::
      :name: gen-i18n-schedule-frequency-label

      Frequency

   .. container::
      :name: gen-i18n-schedule-freq-monthly

      Monthly (recommended)

   .. container::
      :name: gen-i18n-schedule-freq-weekly

      Weekly

   .. container::
      :name: gen-i18n-schedule-freq-daily

      Daily

   .. container::
      :name: gen-i18n-schedule-dom-label

      Day of month

   .. container::
      :name: gen-i18n-schedule-dow-label

      Day of week

   .. container::
      :name: gen-i18n-schedule-time-label

      Time (UTC)

   .. container::
      :name: gen-i18n-schedule-cron-label

      Cron expression:

   .. container::
      :name: gen-i18n-connections-heading

      Connections

   .. container::
      :name: gen-i18n-add-connection

      Add connection

   .. container::
      :name: gen-i18n-remove-connection

      Remove

   .. container::
      :name: gen-i18n-connection-id-label

      Connection ID

   .. container::
      :name: gen-i18n-connection-type-label

      Connection type

   .. container::
      :name: gen-i18n-target-mode-name

      New app, created by the pipeline (targetAppName)

   .. container::
      :name: gen-i18n-target-mode-id

      Existing app (targetAppId)

   .. container::
      :name: gen-i18n-validity-label

      Secret validity (days)

   .. container::
      :name: gen-i18n-type-http

      HTTP (generic OAuth-protected API)

   .. container::
      :name: gen-i18n-type-databricks

      Databricks

   .. container::
      :name: gen-i18n-type-fabric

      Fabric (FabricOperator)

   .. container::
      :name: gen-i18n-type-fabric-capacity

      Fabric Capacity (FabricCapacityOperator)

   .. container::
      :name: gen-i18n-type-powerbi

      Power BI

   .. container::
      :name: gen-i18n-type-synapse

      Synapse (AzureSynapseHook)

   .. container::
      :name: gen-i18n-type-adf

      Data Factory (AzureDataFactoryHook)

   .. container::
      :name: gen-i18n-type-git

      Git (private DAGs repo)

   .. container::
      :name: gen-i18n-field-hostname-label

      Host name

   .. container::
      :name: gen-i18n-field-tenantid-label

      Tenant ID

   .. container::
      :name: gen-i18n-field-scope-label

      Scope

   .. container::
      :name: gen-i18n-field-tokenurl-label

      Token URL

   .. container::
      :name: gen-i18n-field-resourcegroup-label

      Resource group

   .. container::
      :name: gen-i18n-field-factoryname-label

      Factory name

   .. container::
      :name: gen-i18n-field-delegatedscopes-label

      Delegated scopes

   .. container::
      :name: gen-i18n-field-repourl-label

      Repo URL

   .. container::
      :name: gen-i18n-field-trackingref-label

      Tracking ref (branch)

   .. container::
      :name: gen-i18n-output-heading

      Generated connections.yaml

   .. container::
      :name: gen-i18n-output-copy

      Copy

   .. container::
      :name: gen-i18n-output-copied

      Copied

   .. container::
      :name: gen-i18n-output-download

      Download connections.yaml

.. raw:: html

   <form class="conn-gen" id="conn-gen">
     <fieldset class="conn-gen__section">
       <div class="conn-gen__grid">
         <label class="conn-gen__field">
           <span id="gen-svc-conn-label"></span>
           <input type="text" id="gen-svc-conn" autocomplete="off" spellcheck="false">
         </label>
         <label class="conn-gen__field">
           <span id="gen-customer-label"></span>
           <input type="text" id="gen-customer" autocomplete="off" spellcheck="false">
         </label>
         <label class="conn-gen__field">
           <span id="gen-environment-label"></span>
           <select id="gen-environment">
             <option value="dev">dev</option>
             <option value="tst">tst</option>
             <option value="prd" selected>prd</option>
           </select>
         </label>
         <label class="conn-gen__field">
           <span id="gen-airflow-url-label"></span>
           <input type="text" id="gen-airflow-url" autocomplete="off" spellcheck="false">
         </label>
         <label class="conn-gen__field">
           <span id="gen-airflow-app-label"></span>
           <input type="text" id="gen-airflow-app" autocomplete="off" spellcheck="false">
         </label>
         <label class="conn-gen__field">
           <span id="gen-subscription-label"></span>
           <input type="text" id="gen-subscription" autocomplete="off" spellcheck="false">
         </label>
       </div>
     </fieldset>

     <h3 id="gen-schedule-heading" class="conn-gen__heading"></h3>
     <fieldset class="conn-gen__section">
       <div class="conn-gen__grid">
         <label class="conn-gen__field">
           <span id="gen-schedule-frequency-label"></span>
           <select id="gen-schedule-frequency">
             <option value="monthly" id="gen-schedule-freq-monthly"></option>
             <option value="weekly" id="gen-schedule-freq-weekly"></option>
             <option value="daily" id="gen-schedule-freq-daily"></option>
           </select>
         </label>
         <label class="conn-gen__field" id="gen-schedule-dom-field">
           <span id="gen-schedule-dom-label"></span>
           <input type="number" id="gen-schedule-dom" min="1" max="28" value="1">
         </label>
         <label class="conn-gen__field" id="gen-schedule-dow-field" style="display: none;">
           <span id="gen-schedule-dow-label"></span>
           <select id="gen-schedule-dow"></select>
         </label>
         <label class="conn-gen__field">
           <span id="gen-schedule-time-label"></span>
           <input type="time" id="gen-schedule-time" value="03:00">
         </label>
       </div>
       <p class="conn-gen__hint">
         <span id="gen-schedule-cron-label"></span>
         <code id="gen-schedule-cron-preview"></code>
       </p>
     </fieldset>

     <h3 id="gen-connections-heading" class="conn-gen__heading"></h3>
     <div id="gen-connections-list"></div>
     <button type="button" id="gen-add-connection" class="conn-gen__add"></button>

     <h3 id="gen-output-heading" class="conn-gen__heading"></h3>
     <p class="conn-gen__output-actions">
       <button type="button" id="gen-copy" class="conn-gen__btn"></button>
       <button type="button" id="gen-download" class="conn-gen__btn conn-gen__btn--primary"></button>
     </p>
     <pre class="conn-gen__output"><code id="gen-output"></code></pre>
   </form>

   <template id="gen-connection-template">
     <div class="conn-gen__entry">
       <div class="conn-gen__entry-header">
         <span class="conn-gen__entry-title"></span>
         <button type="button" class="conn-gen__remove" data-action="remove"></button>
       </div>
       <div class="conn-gen__grid">
         <label class="conn-gen__field">
           <span class="conn-gen__label" data-label="connection-id"></span>
           <input type="text" data-field="connectionId" autocomplete="off" spellcheck="false">
         </label>
         <label class="conn-gen__field">
           <span class="conn-gen__label" data-label="connection-type"></span>
           <select data-field="connType">
             <option value="http" data-label-opt="type-http"></option>
             <option value="databricks" data-label-opt="type-databricks"></option>
             <option value="fabric" data-label-opt="type-fabric"></option>
             <option value="fabric_capacity" data-label-opt="type-fabric-capacity"></option>
             <option value="power_bi" data-label-opt="type-powerbi"></option>
             <option value="azure_synapse" data-label-opt="type-synapse"></option>
             <option value="azure_data_factory" data-label-opt="type-adf"></option>
             <option value="git" data-label-opt="type-git"></option>
           </select>
         </label>
         <label class="conn-gen__field">
           <span class="conn-gen__label" data-label="validity"></span>
           <input type="number" data-field="validityDays" value="365" min="1">
         </label>
       </div>
       <div class="conn-gen__target" role="group">
         <label class="conn-gen__radio">
           <input type="radio" name="target-mode" value="name" data-field="targetMode" checked>
           <span class="conn-gen__label" data-label="target-mode-name"></span>
         </label>
         <label class="conn-gen__radio">
           <input type="radio" name="target-mode" value="id" data-field="targetMode">
           <span class="conn-gen__label" data-label="target-mode-id"></span>
         </label>
         <input type="text" data-field="targetValue" autocomplete="off" spellcheck="false" class="conn-gen__target-value">
       </div>
       <div class="conn-gen__grid conn-gen__type-fields"></div>
     </div>
   </template>

   <style>
     .gen-i18n {
       display: none;
     }
     .conn-gen {
       margin: 1.5rem 0;
     }
     .conn-gen__section {
       border: 1px solid var(--color-background-border);
       border-radius: var(--sd-radius, 8px);
       background: var(--color-background-secondary);
       padding: 1rem 1.25rem;
       margin: 0 0 1.5rem;
     }
     .conn-gen__grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
       gap: 0.85rem;
     }
     .conn-gen__field {
       display: flex;
       flex-direction: column;
       gap: 0.3rem;
       font-size: 0.85rem;
       color: var(--color-foreground-primary);
     }
     .conn-gen__field input,
     .conn-gen__field select {
       padding: 0.4rem 0.6rem;
       border-radius: 6px;
       border: 1px solid var(--color-background-border);
       background: var(--color-background-primary);
       color: var(--color-foreground-primary);
       font-family: var(--font-stack);
       font-size: 0.9rem;
     }
     .conn-gen__field input:focus,
     .conn-gen__field select:focus {
       outline: 2px solid var(--color-brand-content);
       outline-offset: 1px;
     }
     .conn-gen__heading {
       font-size: 1.05rem;
       margin: 1.5rem 0 0.75rem;
     }
     .conn-gen__entry {
       border: 1px solid var(--color-background-border);
       border-radius: var(--sd-radius, 8px);
       padding: 1rem 1.25rem;
       margin-bottom: 1rem;
       background: var(--color-background-secondary);
     }
     .conn-gen__entry-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 0.75rem;
     }
     .conn-gen__entry-title {
       font-family: var(--font-stack--monospace);
       font-weight: 600;
     }
     .conn-gen__target {
       display: flex;
       align-items: center;
       gap: 1rem;
       flex-wrap: wrap;
       margin-top: 0.85rem;
     }
     .conn-gen__radio {
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
       font-size: 0.85rem;
     }
     .conn-gen__target-value {
       flex: 1 1 14rem;
       min-width: 10rem;
       padding: 0.4rem 0.6rem;
       border-radius: 6px;
       border: 1px solid var(--color-background-border);
       background: var(--color-background-primary);
       color: var(--color-foreground-primary);
       font-family: var(--font-stack);
       font-size: 0.9rem;
     }
     .conn-gen__type-fields {
       margin-top: 0.85rem;
     }
     .conn-gen__remove,
     .conn-gen__add,
     .conn-gen__btn {
       border: 1px solid var(--color-background-border);
       background: var(--color-background-primary);
       color: var(--color-foreground-primary);
       border-radius: 6px;
       padding: 0.35rem 0.8rem;
       font-size: 0.82rem;
       cursor: pointer;
       font-family: var(--font-stack);
     }
     .conn-gen__remove:hover,
     .conn-gen__add:hover,
     .conn-gen__btn:hover {
       border-color: var(--color-brand-content);
       color: var(--color-brand-content);
     }
     .conn-gen__btn--primary {
       background: var(--color-brand-content);
       color: var(--color-background-primary);
       border-color: var(--color-brand-content);
     }
     .conn-gen__btn--primary:hover {
       color: var(--color-background-primary);
       opacity: 0.9;
     }
     .conn-gen__hint {
       margin: 0.85rem 0 0;
       font-size: 0.82rem;
       color: var(--color-foreground-secondary);
     }
     .conn-gen__hint code {
       font-family: var(--font-stack--monospace);
       color: var(--color-foreground-primary);
     }
     .conn-gen__output-actions {
       display: flex;
       gap: 0.6rem;
       margin: 0 0 0.75rem;
     }
     .conn-gen__output {
       max-height: 26rem;
       overflow: auto;
       padding: 1rem;
       border-radius: 8px;
       border: 1px solid var(--color-background-border);
       background: var(--color-background-primary);
       font-size: 0.82rem;
     }
   </style>

   <script>
     (function () {
       function i18n(id) {
         var el = document.getElementById(id);
         return el ? el.textContent.trim() : "";
       }

       // Real, gettext-translatable RST content (the "gen-i18n" container
       // block above) instead of hardcoded strings in this script --
       // translators edit the .po catalog like any other string on this
       // page, instead of a second, JS-only copy of the same text. See
       // onboarding-entra-id.rst for the same pattern.
       var S = {
         svcConnLabel: i18n("gen-i18n-svc-conn-label"),
         svcConnPlaceholder: i18n("gen-i18n-svc-conn-placeholder"),
         customerLabel: i18n("gen-i18n-customer-label"),
         customerPlaceholder: i18n("gen-i18n-customer-placeholder"),
         environmentLabel: i18n("gen-i18n-environment-label"),
         airflowUrlLabel: i18n("gen-i18n-airflow-url-label"),
         airflowAppLabel: i18n("gen-i18n-airflow-app-label"),
         airflowAppPlaceholder: i18n("gen-i18n-airflow-app-placeholder"),
         subscriptionLabel: i18n("gen-i18n-subscription-label"),
         subscriptionPlaceholder: i18n("gen-i18n-subscription-placeholder"),
         scheduleHeading: i18n("gen-i18n-schedule-heading"),
         scheduleFrequencyLabel: i18n("gen-i18n-schedule-frequency-label"),
         scheduleFreqMonthly: i18n("gen-i18n-schedule-freq-monthly"),
         scheduleFreqWeekly: i18n("gen-i18n-schedule-freq-weekly"),
         scheduleFreqDaily: i18n("gen-i18n-schedule-freq-daily"),
         scheduleDomLabel: i18n("gen-i18n-schedule-dom-label"),
         scheduleDowLabel: i18n("gen-i18n-schedule-dow-label"),
         scheduleTimeLabel: i18n("gen-i18n-schedule-time-label"),
         scheduleCronLabel: i18n("gen-i18n-schedule-cron-label"),
         connectionsHeading: i18n("gen-i18n-connections-heading"),
         addConnection: i18n("gen-i18n-add-connection"),
         removeConnection: i18n("gen-i18n-remove-connection"),
         connectionIdLabel: i18n("gen-i18n-connection-id-label"),
         connectionTypeLabel: i18n("gen-i18n-connection-type-label"),
         targetModeName: i18n("gen-i18n-target-mode-name"),
         targetModeId: i18n("gen-i18n-target-mode-id"),
         validityLabel: i18n("gen-i18n-validity-label"),
         typeHttp: i18n("gen-i18n-type-http"),
         typeDatabricks: i18n("gen-i18n-type-databricks"),
         typeFabric: i18n("gen-i18n-type-fabric"),
         typeFabricCapacity: i18n("gen-i18n-type-fabric-capacity"),
         typePowerbi: i18n("gen-i18n-type-powerbi"),
         typeSynapse: i18n("gen-i18n-type-synapse"),
         typeAdf: i18n("gen-i18n-type-adf"),
         typeGit: i18n("gen-i18n-type-git"),
         fieldHostname: i18n("gen-i18n-field-hostname-label"),
         fieldTenantId: i18n("gen-i18n-field-tenantid-label"),
         fieldScope: i18n("gen-i18n-field-scope-label"),
         fieldTokenUrl: i18n("gen-i18n-field-tokenurl-label"),
         fieldResourceGroup: i18n("gen-i18n-field-resourcegroup-label"),
         fieldFactoryName: i18n("gen-i18n-field-factoryname-label"),
         fieldDelegatedScopes: i18n("gen-i18n-field-delegatedscopes-label"),
         fieldRepoUrl: i18n("gen-i18n-field-repourl-label"),
         fieldTrackingRef: i18n("gen-i18n-field-trackingref-label"),
         outputCopy: i18n("gen-i18n-output-copy"),
         outputCopied: i18n("gen-i18n-output-copied"),
         outputDownload: i18n("gen-i18n-output-download")
       };

       // Extra per-type fields: key -> [{field, label, defaultValue}].
       // "field" matches the connections.yaml key emitted for that
       // connType (see the downloaded package's
       // templates/rotate-connection-template.yaml parameter comments).
       var TYPE_FIELDS = {
         http: [
           { field: "hostName", label: S.fieldHostname, value: "api.example.com" },
           { field: "tenantId", label: S.fieldTenantId, value: "00000000-0000-0000-0000-000000000000" },
           { field: "scope", label: S.fieldScope, value: "api://00000000-0000-0000-0000-000000000000/.default" },
           { field: "tokenUrl", label: S.fieldTokenUrl, value: "https://login.microsoftonline.com/00000000-0000-0000-0000-000000000000/oauth2/v2.0/token" }
         ],
         databricks: [
           { field: "hostName", label: S.fieldHostname, value: "adb-1234567890123456.7.azuredatabricks.net" }
         ],
         fabric: [
           { field: "delegatedScopes", label: S.fieldDelegatedScopes, value: "User.Read Workspace.ReadWrite.All Item.ReadWrite.All Item.Execute.All" }
         ],
         fabric_capacity: [],
         power_bi: [],
         azure_synapse: [
           { field: "hostName", label: S.fieldHostname, value: "https://myworkspace.dev.azuresynapse.net" }
         ],
         azure_data_factory: [
           { field: "resourceGroup", label: S.fieldResourceGroup, value: "rg-example" },
           { field: "factoryName", label: S.fieldFactoryName, value: "adf-example" }
         ],
         git: [
           { field: "repoUrl", label: S.fieldRepoUrl, value: "https://dev.azure.com/your-org/YourProject/_git/airflow-dags" },
           { field: "trackingRef", label: S.fieldTrackingRef, value: "main" }
         ]
       };

       var DEFAULT_CONNECTION_ID = {
         http: "example_api_default",
         databricks: "databricks_default",
         fabric: "fabric_default",
         fabric_capacity: "fabric_capacity_default",
         power_bi: "powerbi_default",
         azure_synapse: "azure_synapse_default",
         azure_data_factory: "azure_data_factory_default",
         git: "git_default"
       };

       var DEFAULT_TARGET_NAME = {
         http: "sp-airflow-api-",
         databricks: "sp-airflow-databricks-",
         fabric: "sp-airflow-fabric-",
         fabric_capacity: "sp-airflow-fabric-capacity-",
         power_bi: "sp-airflow-powerbi-",
         azure_synapse: "sp-airflow-synapse-",
         azure_data_factory: "sp-airflow-adf-",
         git: "sp-airflow-git-"
       };

       function slugify(value) {
         return value
           .toLowerCase()
           .normalize("NFKD")
           .replace(/[\u0300-\u036f]/g, "")
           .replace(/[^a-z0-9]+/g, "-")
           .replace(/^-+|-+$/g, "");
       }

       function yamlString(value) {
         // Conservative single-quoted YAML scalar: doubles any embedded
         // single quote, which is the only character that needs escaping
         // inside single-quoted YAML.
         return "'" + String(value).replace(/'/g, "''") + "'";
       }

       function init() {
         var svcConn = document.getElementById("gen-svc-conn");
         var customer = document.getElementById("gen-customer");
         var environment = document.getElementById("gen-environment");
         var airflowUrl = document.getElementById("gen-airflow-url");
         var airflowApp = document.getElementById("gen-airflow-app");
         var subscription = document.getElementById("gen-subscription");
         var freq = document.getElementById("gen-schedule-frequency");
         var domField = document.getElementById("gen-schedule-dom-field");
         var dom = document.getElementById("gen-schedule-dom");
         var dowField = document.getElementById("gen-schedule-dow-field");
         var dow = document.getElementById("gen-schedule-dow");
         var time = document.getElementById("gen-schedule-time");
         var cronPreview = document.getElementById("gen-schedule-cron-preview");
         var list = document.getElementById("gen-connections-list");
         var addBtn = document.getElementById("gen-add-connection");
         var output = document.getElementById("gen-output");
         var copyBtn = document.getElementById("gen-copy");
         var downloadBtn = document.getElementById("gen-download");
         var tpl = document.getElementById("gen-connection-template");
         if (!svcConn || !customer || !environment || !airflowUrl || !airflowApp ||
             !subscription || !freq || !domField || !dom || !dowField || !dow ||
             !time || !cronPreview || !list || !addBtn || !output || !copyBtn ||
             !downloadBtn || !tpl) {
           return;
         }

         document.getElementById("gen-svc-conn-label").textContent = S.svcConnLabel;
         document.getElementById("gen-customer-label").textContent = S.customerLabel;
         document.getElementById("gen-environment-label").textContent = S.environmentLabel;
         document.getElementById("gen-airflow-url-label").textContent = S.airflowUrlLabel;
         document.getElementById("gen-airflow-app-label").textContent = S.airflowAppLabel;
         document.getElementById("gen-subscription-label").textContent = S.subscriptionLabel;
         document.getElementById("gen-schedule-heading").textContent = S.scheduleHeading;
         document.getElementById("gen-schedule-frequency-label").textContent = S.scheduleFrequencyLabel;
         document.getElementById("gen-schedule-freq-monthly").textContent = S.scheduleFreqMonthly;
         document.getElementById("gen-schedule-freq-weekly").textContent = S.scheduleFreqWeekly;
         document.getElementById("gen-schedule-freq-daily").textContent = S.scheduleFreqDaily;
         document.getElementById("gen-schedule-dom-label").textContent = S.scheduleDomLabel;
         document.getElementById("gen-schedule-dow-label").textContent = S.scheduleDowLabel;
         document.getElementById("gen-schedule-time-label").textContent = S.scheduleTimeLabel;
         document.getElementById("gen-schedule-cron-label").textContent = S.scheduleCronLabel;
         document.getElementById("gen-connections-heading").textContent = S.connectionsHeading;
         document.getElementById("gen-output-heading").textContent = i18n("gen-i18n-output-heading");
         addBtn.textContent = S.addConnection;
         copyBtn.textContent = S.outputCopy;
         downloadBtn.textContent = S.outputDownload;

         svcConn.placeholder = S.svcConnPlaceholder;
         customer.placeholder = S.customerPlaceholder;
         airflowApp.placeholder = S.airflowAppPlaceholder;
         subscription.placeholder = S.subscriptionPlaceholder;

         svcConn.value = S.svcConnPlaceholder;

         // Weekday names come from Intl, in whatever language this page
         // itself is in (Sphinx sets <html lang="en"|"nl">), rather than a
         // second hand-translated string per weekday.
         var weekdayFormatter = new Intl.DateTimeFormat(document.documentElement.lang || "en", { weekday: "long", timeZone: "UTC" });
         for (var d = 0; d < 7; d++) {
           // 2023-01-01 was a Sunday (UTC) -- cron's day-of-week field uses
           // 0 = Sunday .. 6 = Saturday.
           var label = weekdayFormatter.format(new Date(Date.UTC(2023, 0, 1 + d)));
           var opt = document.createElement("option");
           opt.value = String(d);
           opt.textContent = label;
           dow.appendChild(opt);
         }
         dow.value = "1"; // Monday

         function updateScheduleFieldVisibility() {
           domField.style.display = freq.value === "monthly" ? "" : "none";
           dowField.style.display = freq.value === "weekly" ? "" : "none";
         }

         function computeCron() {
           var parts = (time.value || "03:00").split(":");
           var hour = parseInt(parts[0], 10);
           var minute = parseInt(parts[1], 10);
           if (isNaN(hour)) hour = 3;
           if (isNaN(minute)) minute = 0;
           if (freq.value === "daily") {
             return minute + " " + hour + " * * *";
           }
           if (freq.value === "weekly") {
             return minute + " " + hour + " * * " + dow.value;
           }
           var day = parseInt(dom.value, 10);
           if (isNaN(day) || day < 1) day = 1;
           if (day > 28) day = 28;
           return minute + " " + hour + " " + day + " * *";
         }

         updateScheduleFieldVisibility();

         var typeLabels = {
           http: S.typeHttp,
           databricks: S.typeDatabricks,
           fabric: S.typeFabric,
           fabric_capacity: S.typeFabricCapacity,
           power_bi: S.typePowerbi,
           azure_synapse: S.typeSynapse,
           azure_data_factory: S.typeAdf,
           git: S.typeGit
         };

         var counter = 0;

         function addEntry(connType) {
           counter += 1;
           var node = tpl.content.firstElementChild.cloneNode(true);
           node.dataset.index = String(counter);

           node.querySelectorAll("[data-label]").forEach(function (el) {
             var key = el.getAttribute("data-label");
             if (key === "connection-id") el.textContent = S.connectionIdLabel;
             if (key === "connection-type") el.textContent = S.connectionTypeLabel;
             if (key === "validity") el.textContent = S.validityLabel;
             if (key === "target-mode-name") el.textContent = S.targetModeName;
             if (key === "target-mode-id") el.textContent = S.targetModeId;
           });
           node.querySelectorAll("[data-label-opt]").forEach(function (el) {
             var key = el.getAttribute("data-label-opt");
             var map = {
               "type-http": S.typeHttp, "type-databricks": S.typeDatabricks,
               "type-fabric": S.typeFabric, "type-fabric-capacity": S.typeFabricCapacity,
               "type-powerbi": S.typePowerbi, "type-synapse": S.typeSynapse,
               "type-adf": S.typeAdf, "type-git": S.typeGit
             };
             el.textContent = map[key];
             el.value = el.value || "";
           });

           var connTypeSelect = node.querySelector('[data-field="connType"]');
           connTypeSelect.value = connType;

           var idInput = node.querySelector('[data-field="connectionId"]');
           idInput.value = DEFAULT_CONNECTION_ID[connType] + (counter > 1 ? "_" + counter : "");

           var targetInput = node.querySelector('[data-field="targetValue"]');
           targetInput.value = DEFAULT_TARGET_NAME[connType] + (customer.value ? slugify(customer.value) : S.customerPlaceholder);

           var removeBtn = node.querySelector('[data-action="remove"]');
           removeBtn.textContent = S.removeConnection;
           removeBtn.addEventListener("click", function () {
             node.remove();
             render();
           });

           var titleEl = node.querySelector(".conn-gen__entry-title");
           function updateTitle() {
             titleEl.textContent = idInput.value || DEFAULT_CONNECTION_ID[connTypeSelect.value];
           }
           updateTitle();
           idInput.addEventListener("input", function () {
             updateTitle();
             render();
           });

           function renderTypeFields() {
             var container = node.querySelector(".conn-gen__type-fields");
             container.innerHTML = "";
             var fields = TYPE_FIELDS[connTypeSelect.value] || [];
             fields.forEach(function (f) {
               var label = document.createElement("label");
               label.className = "conn-gen__field";
               var span = document.createElement("span");
               span.textContent = f.label;
               var input = document.createElement("input");
               input.type = "text";
               input.setAttribute("data-field", f.field);
               input.value = f.value;
               input.addEventListener("input", render);
               label.appendChild(span);
               label.appendChild(input);
               container.appendChild(label);
             });
           }

           connTypeSelect.addEventListener("change", function () {
             idInput.value = DEFAULT_CONNECTION_ID[connTypeSelect.value];
             targetInput.value = DEFAULT_TARGET_NAME[connTypeSelect.value] + (customer.value ? slugify(customer.value) : S.customerPlaceholder);
             updateTitle();
             renderTypeFields();
             render();
           });

           node.querySelectorAll('input[name="target-mode"]').forEach(function (radio) {
             radio.name = "target-mode-" + counter;
             radio.addEventListener("change", render);
           });
           targetInput.addEventListener("input", render);
           node.querySelector('[data-field="validityDays"]').addEventListener("input", render);

           renderTypeFields();
           list.appendChild(node);
           render();
         }

         addBtn.addEventListener("click", function () {
           addEntry("http");
         });

         function entryToYaml(node) {
           var connType = node.querySelector('[data-field="connType"]').value;
           var connectionId = node.querySelector('[data-field="connectionId"]').value || DEFAULT_CONNECTION_ID[connType];
           var validityDays = node.querySelector('[data-field="validityDays"]').value || "365";
           var targetMode = node.querySelector('input[name^="target-mode"]:checked').value;
           var targetValue = node.querySelector('[data-field="targetValue"]').value || (DEFAULT_TARGET_NAME[connType] + "customer");

           var lines = [];
           lines.push("      - serviceConnectionName: ${{ variables.serviceConnectionName }}");
           if (targetMode === "id") {
             lines.push("        targetAppId: " + yamlString(targetValue));
           } else {
             lines.push("        targetAppName: " + targetValue);
           }
           lines.push("        airflowAppName: ${{ variables.airflowAppName }}");
           lines.push("        airflowBaseUrl: ${{ variables.airflowBaseUrl }}");
           lines.push("        connectionId: " + connectionId);
           lines.push("        connType: " + connType);

           if (connType === "http") {
             var extra = node.querySelectorAll(".conn-gen__type-fields input");
             var hostName = extra[0] ? extra[0].value : "";
             var tenantId = extra[1] ? extra[1].value : "";
             var scope = extra[2] ? extra[2].value : "";
             var tokenUrl = extra[3] ? extra[3].value : "";
             lines.push("        hostName: " + hostName);
             var extraJson = '{"tenant_id": "' + tenantId + '", "scope": "' + scope + '", "token_url": "' + tokenUrl + '"}';
             lines.push("        extraJson: " + yamlString(extraJson));
           } else if (connType === "databricks" || connType === "azure_synapse") {
             var hostField = node.querySelector('.conn-gen__type-fields input');
             lines.push("        hostName: " + (hostField ? hostField.value : ""));
             if (connType === "azure_synapse") {
               lines.push("        subscriptionId: ${{ variables.subscriptionId }}");
             }
           } else if (connType === "azure_data_factory") {
             var rg = node.querySelectorAll(".conn-gen__type-fields input")[0];
             var factory = node.querySelectorAll(".conn-gen__type-fields input")[1];
             lines.push("        subscriptionId: ${{ variables.subscriptionId }}");
             lines.push("        resourceGroup: " + (rg ? rg.value : ""));
             lines.push("        factoryName: " + (factory ? factory.value : ""));
           } else if (connType === "fabric") {
             var scopes = node.querySelector(".conn-gen__type-fields input");
             lines.push("        delegatedScopes: " + (scopes ? scopes.value : ""));
           } else if (connType === "git") {
             var repo = node.querySelectorAll(".conn-gen__type-fields input")[0];
             var ref = node.querySelectorAll(".conn-gen__type-fields input")[1];
             lines.push("        repoUrl: " + (repo ? repo.value : ""));
             lines.push("        trackingRef: " + (ref ? ref.value : "main"));
           }

           lines.push("        validityDays: " + validityDays);
           return lines.join("\n");
         }

         function render() {
           var needsSubscription = false;
           list.querySelectorAll(".conn-gen__entry").forEach(function (node) {
             var t = node.querySelector('[data-field="connType"]').value;
             if (t === "azure_synapse" || t === "azure_data_factory") needsSubscription = true;
           });

           updateScheduleFieldVisibility();
           var cronValue = computeCron();
           cronPreview.textContent = cronValue;

           var custValue = customer.value || S.customerPlaceholder;
           var envValue = environment.value;
           var derivedAirflowApp = "airflow-" + slugify(custValue) + "-" + slugify(envValue);
           var derivedAirflowUrl = "https://" + slugify(custValue) + ".airflow.datafoundation.eu";
           airflowUrl.placeholder = derivedAirflowUrl;
           if (!airflowUrl.dataset.touched) {
             airflowUrl.value = derivedAirflowUrl;
           }

           var lines = [];
           lines.push("name: rotate-" + slugify(custValue) + "-connections");
           lines.push("");
           lines.push("trigger: none");
           lines.push("");
           lines.push("pr: none");
           lines.push("");
           lines.push("schedules:");
           lines.push("  - cron: " + yamlString(cronValue));
           lines.push("    displayName: Rotate connection secrets");
           lines.push("    branches:");
           lines.push("      include:");
           lines.push("        - main");
           lines.push("    always: true");
           lines.push("");
           lines.push("pool:");
           lines.push("  name: 'Azure Pipelines'");
           lines.push("");
           lines.push("variables:");
           lines.push("  serviceConnectionName: " + yamlString(svcConn.value || S.svcConnPlaceholder));
           lines.push("  customer: " + yamlString(custValue));
           if (needsSubscription) {
             lines.push("  subscriptionId: " + yamlString(subscription.value || "00000000-0000-0000-0000-000000000000"));
           }
           lines.push("  environment: " + yamlString(envValue));
           lines.push("  airflowAppName: " + yamlString(airflowApp.value || derivedAirflowApp));
           lines.push("  airflowBaseUrl: " + yamlString(airflowUrl.value || derivedAirflowUrl));
           lines.push("");
           lines.push("extends:");
           lines.push("  template: ../templates/rotate-connection-template.yaml");
           lines.push("  parameters:");
           lines.push("    connections:");

           var entries = list.querySelectorAll(".conn-gen__entry");
           if (entries.length === 0) {
             lines.push("      []");
           } else {
             entries.forEach(function (node) {
               lines.push(entryToYaml(node));
               lines.push("");
             });
           }

           output.textContent = lines.join("\n").replace(/\n+$/, "\n");
         }

         customer.addEventListener("input", render);
         environment.addEventListener("change", render);
         svcConn.addEventListener("input", render);
         subscription.addEventListener("input", render);
         freq.addEventListener("change", render);
         dom.addEventListener("input", render);
         dow.addEventListener("change", render);
         time.addEventListener("input", render);
         airflowApp.addEventListener("input", render);
         airflowUrl.addEventListener("input", function () {
           airflowUrl.dataset.touched = "1";
           render();
         });

         copyBtn.addEventListener("click", function () {
           if (!navigator.clipboard) return;
           navigator.clipboard.writeText(output.textContent).then(function () {
             var original = copyBtn.textContent;
             copyBtn.textContent = S.outputCopied;
             setTimeout(function () { copyBtn.textContent = original; }, 1500);
           });
         });

         downloadBtn.addEventListener("click", function () {
           var blob = new Blob([output.textContent], { type: "text/yaml" });
           var url = URL.createObjectURL(blob);
           var a = document.createElement("a");
           a.href = url;
           a.download = "connections.yaml";
           document.body.appendChild(a);
           a.click();
           a.remove();
           URL.revokeObjectURL(url);
         });

         addEntry("http");
       }

       if (document.readyState === "loading") {
         document.addEventListener("DOMContentLoaded", init);
       } else {
         init();
       }
     })();
   </script>