dashcaddy/status/js/core/service-modals.js

// ========== SERVICE MODAL TEMPLATES ==========
// Injects the HTML for service edit, delete, and add modals into the DOM.
// Must load before service-crud.js and service-create.js.
(function () {

  injectModal('service-edit-modal', `
  <div id="service-edit-modal" class="weather-modal">
    <div class="weather-modal-content" style="min-width: 500px; max-width: 600px;">
      <h3 id="service-edit-title">Edit Service</h3>

      <div style="display: grid; gap: 16px; margin-top: 16px;">
        <!-- Service Info -->
        <div style="display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--card-bg); border-radius: 8px;">
          <img id="edit-service-logo-preview" src="" alt="" style="width: 48px; height: 48px; border-radius: 8px; object-fit: contain; background: var(--bg);" />
          <div>
            <div id="edit-service-name-display" style="font-weight: 600; font-size: 1.1rem;"></div>
            <div id="edit-service-url-display" class="text-muted-sm"></div>
          </div>
        </div>

        <!-- Subdomain -->
        <div>
          <label for="edit-subdomain" class="form-label-accent-sm">
            Subdomain
          </label>
          <div class="flex-row-gap-center">
            <input type="text" id="edit-subdomain" class="input-flex" />
            <span id="edit-tld-suffix" style="color: var(--muted);">.home</span>
          </div>
        </div>

        <!-- Port -->
        <div>
          <label for="edit-port" class="form-label-accent-sm">
            Port
          </label>
          <input type="number" id="edit-port" class="form-input-md" />
          <div class="form-hint-sm">
            The port Caddy will proxy to (container's exposed port)
          </div>
        </div>

        <!-- IP Address -->
        <div>
          <label for="edit-ip" class="form-label-accent-sm">
            IP Address
          </label>
          <input type="text" id="edit-ip" class="form-input-md" />
        </div>

        <!-- Tailscale Protection -->
        <div>
          <label style="display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer;">
            <input type="checkbox" id="edit-tailscale-only" style="width: 18px; height: 18px;" />
            <div>
              <div class="fw-500">Tailscale-Only Access</div>
              <div class="text-hint">Restrict this service to Tailscale users only</div>
            </div>
          </label>
        </div>

        <!-- Logo -->
        <div>
          <label class="form-label-accent-sm">
            Service Logo
          </label>
          <div class="flex-row-gap-center">
            <input type="text" id="edit-logo-url" placeholder="/assets/service.png or https://..." class="input-flex" />
            <label style="padding: 10px 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; white-space: nowrap;">
              <input type="file" id="edit-logo-file" accept="image/*" style="display: none;" />
              Upload
            </label>
          </div>
          <div class="form-hint-sm">
            Enter a URL or upload an image file (PNG, JPG, SVG)
          </div>
        </div>
      </div>

      <div class="weather-modal-buttons" style="margin-top: 24px;">
        <button id="service-edit-cancel">Cancel</button>
        <button id="service-edit-save" class="btn-accent">
          Save Changes
        </button>
      </div>
    </div>
  </div>`);

  injectModal('delete-service-modal', `
  <div id="delete-service-modal" class="weather-modal">
    <div class="weather-modal-content" style="min-width: 400px; max-width: 500px;">
      <h3 id="delete-modal-title" class="mb-16">Delete Service</h3>

      <div id="delete-modal-message" style="margin-bottom: 20px; line-height: 1.5;">
        <!-- Dynamic content -->
      </div>

      <div id="delete-modal-container-info" style="display: none; margin-bottom: 20px; padding: 12px; background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border);">
        <div style="font-weight: 500; margin-bottom: 8px;">Docker Container</div>
        <div id="delete-modal-container-name" style="font-size: 0.9rem; color: var(--muted);"></div>
      </div>

      <div class="weather-modal-buttons" style="display: flex; gap: 8px; justify-content: flex-end;">
        <button id="delete-modal-cancel" style="padding: 10px 20px;">Cancel</button>
        <button id="delete-modal-remove" style="padding: 10px 20px; background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); color: var(--accent);">
          Remove
        </button>
        <button id="delete-modal-delete" style="display: none; padding: 10px 20px; background: color-mix(in srgb, #e74c3c 20%, transparent); border-color: #e74c3c; color: #e74c3c;">
          Delete
        </button>
      </div>

      <div id="delete-modal-help" style="display: none; margin-top: 16px; padding: 12px; background: color-mix(in srgb, var(--muted) 10%, transparent); border-radius: 8px; font-size: 0.85rem; color: var(--muted);">
        <div><strong>Remove:</strong> Remove from dashboard only (container keeps running)</div>
        <div style="margin-top: 6px;"><strong>Delete:</strong> Full removal - stops container, removes DNS & Caddy config</div>
      </div>
    </div>
  </div>`);

  injectModal('add-service-modal', `
  <div id="add-service-modal" class="weather-modal">
    <div class="weather-modal-content" style="min-width: 420px; max-width: 520px;">
      <h3>Add Service</h3>

      <!-- Service Type Tabs -->
      <div style="display: flex; gap: 2px; margin-bottom: 16px; background: var(--card-bg); border-radius: 8px; padding: 3px; border: 1px solid var(--border);">
        <label id="tab-local" style="flex: 1; text-align: center; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 500; background: var(--accent); color: var(--bg); transition: all 0.15s;">
          <input type="radio" name="service-type" value="local" id="service-type-local" checked style="display: none;" />
          Local
        </label>
        <label id="tab-external" style="flex: 1; text-align: center; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 500; color: var(--muted); transition: all 0.15s;">
          <input type="radio" name="service-type" value="external" id="service-type-external" style="display: none;" />
          External
        </label>
      </div>
      <span id="service-type-description" style="display: none;"></span>

      <!-- LOCAL SERVICE -->
      <div id="local-service-config" style="display: grid; gap: 12px;">
        <div>
          <label for="service-name-input" style="font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; display: block;">Name</label>
          <input type="text" id="service-name-input" placeholder="e.g., Jellyfin" style="font-size: 1rem;" />
          <div id="subdomain-preview" style="font-size: 0.75rem; color: var(--accent); margin-top: 4px; min-height: 1em;"></div>
        </div>

        <div class="grid-2col">
          <div>
            <label for="service-port-input" style="font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; display: block;">Port</label>
            <input type="number" id="service-port-input" placeholder="e.g., 8096" style="font-size: 1rem;" />
          </div>
          <div>
            <label for="service-ip-input" style="font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; display: block;">IP Address</label>
            <input type="text" id="service-ip-input" placeholder="Auto-detected" style="font-size: 1rem;" />
            <div class="quick-ip-buttons" style="display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap;">
              <button type="button" class="quick-ip-btn" data-ip="127.0.0.1" title="Localhost" style="font-size: 0.7rem; padding: 2px 6px;">localhost</button>
              <button type="button" class="quick-ip-btn" data-ip="" id="quick-ip-lan" title="LAN IP" style="font-size: 0.7rem; padding: 2px 6px;">LAN</button>
              <button type="button" class="quick-ip-btn" data-ip="" id="quick-ip-tailscale" title="Tailscale IP" style="font-size: 0.7rem; padding: 2px 6px;">Tailscale</button>
            </div>
          </div>
        </div>

        <!-- Options (collapsed by default) -->
        <details id="local-advanced-options">
          <summary style="cursor: pointer; color: var(--accent); font-size: 0.8rem; user-select: none;">Options</summary>
          <div style="margin-top: 10px; display: grid; gap: 10px; font-size: 0.8rem;">

            <div class="grid-2col">
              <div>
                <label for="service-subdomain-input">Subdomain:</label>
                <input type="text" id="service-subdomain-input" placeholder="auto-derived from name" />
              </div>
              <div>
                <label for="service-logo-input">Logo URL:</label>
                <input type="text" id="service-logo-input" placeholder="/assets/name.png" />
              </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start;">
              <label style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
                <input type="checkbox" id="create-dns-record" checked />
                Create DNS Record
              </label>
              <div>
                <label for="ssl-type-select">SSL:</label>
                <select id="ssl-type-select" style="width: 100%;">
                  <option value="caddy-managed">Caddy Managed (Internal)</option>
                  <option value="letsencrypt">Let's Encrypt</option>
                  <option value="existing-ca">Existing CA</option>
                  <option value="custom-ca">Custom CA</option>
                </select>
              </div>
            </div>

            <div id="dns-config">
              <div class="grid-2col">
                <div>
                  <label for="dns-ttl-input">DNS TTL:</label>
                  <input type="number" id="dns-ttl-input" value="300" />
                </div>
                <div>
                  <label for="caddyfile-path-input">Caddyfile Path:</label>
                  <input type="text" id="caddyfile-path-input" value="C:\\caddy\\Caddyfile" />
                </div>
              </div>
            </div>

            <div id="existing-ca-config" style="display: none;">
              <label for="existing-ca-select">Existing CA:</label>
              <div class="flex-row-gap">
                <select id="existing-ca-select" style="flex: 1;">
                  <option value="">Loading CAs...</option>
                </select>
                <button type="button" id="refresh-cas" style="padding: 4px 8px; font-size: 0.75rem;">\u{1F504}</button>
              </div>
            </div>

            <div id="custom-ca-config" style="display: none;">
              <label for="ca-name-input">CA Name:</label>
              <input type="text" id="ca-name-input" placeholder="e.g., sami-ca" />
            </div>

            <div id="manual-tailscale-status" style="padding: 6px 10px; background: var(--card-bg); border-radius: 6px; font-size: 0.75rem;">
              <span style="color: var(--muted);">Checking Tailscale...</span>
            </div>
            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
              <input type="checkbox" id="manual-tailscale-only" />
              Tailscale-Only Access
            </label>

            <label style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
              <input type="checkbox" id="reload-caddy" checked />
              Reload Caddy after adding
            </label>

            <hr style="border: none; border-top: 1px solid var(--border); margin: 4px 0;" />

            <div class="grid-2col">
              <div>
                <label class="field-label-sm">
                  <input type="checkbox" id="enable-auth" />
                  Authentication
                </label>
                <label class="field-label-sm">
                  <input type="checkbox" id="enable-cors" />
                  CORS Headers
                </label>
                <label for="upstream-path-input">Upstream Path:</label>
                <input type="text" id="upstream-path-input" value="/" />
              </div>
              <div>
                <label for="health-check-input">Health Check:</label>
                <input type="text" id="health-check-input" placeholder="/health" />
                <label for="timeout-input">Timeout (s):</label>
                <input type="number" id="timeout-input" value="30" />
                <label for="custom-headers-input">Headers (JSON):</label>
                <textarea id="custom-headers-input" placeholder='{"X-Custom": "value"}' rows="2" style="font-size: 0.7rem;"></textarea>
              </div>
            </div>

          </div>
        </details>
      </div>

      <!-- EXTERNAL SERVICE -->
      <div id="external-service-config" style="display: none;">
        <div style="display: grid; gap: 12px;">
          <div>
            <label for="external-service-name" style="font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; display: block;">Name</label>
            <input type="text" id="external-service-name" placeholder="e.g., Radarr (Seedhost)" style="font-size: 1rem;" />
            <div id="external-subdomain-preview" style="font-size: 0.75rem; color: var(--accent); margin-top: 4px; min-height: 1em;"></div>
          </div>

          <div>
            <label for="external-service-url" style="font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; display: block;">External URL</label>
            <input type="url" id="external-service-url" placeholder="https://username.seedhost.eu/radarr" style="font-size: 1rem;" />
          </div>

          <!-- Options (collapsed by default) -->
          <details id="external-advanced-options">
            <summary style="cursor: pointer; color: var(--accent); font-size: 0.8rem; user-select: none;">Options</summary>
            <div style="margin-top: 10px; display: grid; gap: 10px; font-size: 0.8rem;">

              <div class="grid-2col">
                <div>
                  <label for="external-service-subdomain">Subdomain:</label>
                  <input type="text" id="external-service-subdomain" placeholder="auto-derived from name" />
                  <span id="external-domain-preview" style="font-size: 0.7rem; color: var(--accent);"></span>
                </div>
                <div>
                  <label for="external-service-logo">Logo URL:</label>
                  <input type="text" id="external-service-logo" placeholder="/assets/name.png" />
                </div>
              </div>

              <div>
                <label for="external-service-icon">Icon Emoji:</label>
                <input type="text" id="external-service-icon" placeholder="\u{1F3AC}" maxlength="2" style="width: 60px;" />
              </div>

              <label style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
                <input type="checkbox" id="external-create-dns" checked />
                Create DNS Record
              </label>
              <label style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
                <input type="checkbox" id="external-create-caddy" checked />
                Create Caddy Reverse Proxy
              </label>

              <div>
                <label for="external-proxy-ip">Proxy Server IP:</label>
                <input type="text" id="external-proxy-ip" placeholder="Auto-detected" />
              </div>
              <label style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
                <input type="checkbox" id="external-preserve-host" checked />
                Preserve Host Header
              </label>
              <label style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
                <input type="checkbox" id="external-follow-redirects" checked />
                Follow Redirects
              </label>

            </div>
          </details>
        </div>
      </div>

      <div class="weather-modal-buttons" style="margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end;">
        <button id="add-service-cancel">Cancel</button>
        <button id="add-service-create" class="btn-accent">Create Service</button>
      </div>
    </div>
  </div>`);

})();