<!-- HTTP Endpoint Editor Modal — sectioned rack-panel layout
     matching the settings-modal-redesign vocabulary. Channels: signal
     (identity), cyan (request: URL/method/auth/timeout), amber
     (headers), notes (description). Test button lives in the request
     section and renders results inline. -->
<div id="http-endpoint-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="http-endpoint-modal-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="http-endpoint-modal-title" data-i18n="http_endpoint.add">Add HTTP Endpoint</h2>
            <button class="modal-close-btn" onclick="closeHTTPEndpointModal()" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <form id="http-endpoint-form" onsubmit="return false;">
                <input type="hidden" id="http-endpoint-id">

                <div id="http-endpoint-error" class="error-message" style="display: none;"></div>

                <!-- ── 01 · IDENTITY ───────────────────────────────── -->
                <section class="ds-section" data-ds-key="identity" data-ch="signal">
                    <div class="ds-section-header">
                        <span class="ds-section-dot" aria-hidden="true"></span>
                        <span class="ds-section-title" data-i18n="settings.section.identity">Identity</span>
                        <span class="ds-section-index" aria-hidden="true">01</span>
                    </div>
                    <div class="ds-section-body">
                        <div class="form-group ds-name-group">
                            <div class="label-row">
                                <label for="http-endpoint-name" data-i18n="http_endpoint.name">Name:</label>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="http_endpoint.name.hint">A descriptive name for this endpoint</small>
                            <input type="text" id="http-endpoint-name" data-i18n-placeholder="http_endpoint.name.placeholder" placeholder="Plex now-playing" required>
                            <div id="http-endpoint-tags-container"></div>
                        </div>
                    </div>
                </section>

                <!-- ── 02 · REQUEST ────────────────────────────────── -->
                <section class="ds-section" data-ds-key="request" data-ch="cyan">
                    <div class="ds-section-header">
                        <span class="ds-section-dot" aria-hidden="true"></span>
                        <span class="ds-section-title" data-i18n="http_endpoint.section.request">Request</span>
                        <span class="ds-section-index" aria-hidden="true">02</span>
                    </div>
                    <div class="ds-section-body">
                        <div class="form-group">
                            <div class="label-row">
                                <label for="http-endpoint-url" data-i18n="http_endpoint.url">URL:</label>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="http_endpoint.url.hint">Full http(s) URL to poll. Local addresses are allowed.</small>
                            <input type="text" id="http-endpoint-url" placeholder="https://192.168.1.100/api/status" required>
                        </div>

                        <div class="form-group">
                            <div class="label-row">
                                <label for="http-endpoint-method" data-i18n="http_endpoint.method">Method:</label>
                            </div>
                            <select id="http-endpoint-method">
                                <option value="GET">GET</option>
                                <option value="HEAD">HEAD</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <div class="label-row">
                                <label for="http-endpoint-auth-token" data-i18n="http_endpoint.auth_token">Auth Token (optional):</label>
                                <button type="button" class="btn btn-icon btn-secondary" id="http-endpoint-token-reveal" onclick="toggleHTTPEndpointTokenVisibility()" data-i18n-title="http_endpoint.auth_token.reveal" title="Show/hide"></button>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="http_endpoint.auth_token.hint">Sent as 'Authorization: Bearer &lt;token&gt;'. Add a custom Authorization header to override.</small>
                            <small id="http-endpoint-token-hint" class="input-hint" style="display:none" data-i18n="http_endpoint.auth_token.edit_hint">Leave blank to keep the current token</small>
                            <input type="password" id="http-endpoint-auth-token" placeholder="Bearer token" autocomplete="new-password">
                        </div>

                        <div class="form-group">
                            <div class="label-row">
                                <label for="http-endpoint-timeout" data-i18n="http_endpoint.timeout">Timeout (s):</label>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="http_endpoint.timeout.hint">Maximum seconds to wait for a single request.</small>
                            <input type="number" id="http-endpoint-timeout" min="0.5" step="0.5" value="10">
                        </div>

                        <div class="form-group http-endpoint-test-group">
                            <button type="button" class="btn btn-secondary http-endpoint-test-btn" id="http-endpoint-test-btn" onclick="testHTTPEndpoint()">
                                <span class="http-endpoint-test-btn-icon" aria-hidden="true"></span>
                                <span data-i18n="http_endpoint.test">Test request</span>
                            </button>
                            <div id="http-endpoint-test-output" class="http-test-output" style="display:none"></div>
                        </div>
                    </div>
                </section>

                <!-- ── 03 · HEADERS ────────────────────────────────── -->
                <section class="ds-section" data-ds-key="headers" data-ch="amber">
                    <div class="ds-section-header">
                        <span class="ds-section-dot" aria-hidden="true"></span>
                        <span class="ds-section-title" data-i18n="http_endpoint.section.headers">Headers</span>
                        <span class="ds-section-index" aria-hidden="true">03</span>
                    </div>
                    <div class="ds-section-body">
                        <div class="form-group">
                            <div class="label-row">
                                <label data-i18n="http_endpoint.headers">Custom Headers:</label>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="http_endpoint.headers.hint">Optional request headers (e.g. X-API-Key, Accept).</small>
                            <div id="http-endpoint-headers-list" class="http-headers-list"></div>
                            <button type="button" class="btn btn-secondary btn-add-header" onclick="addHTTPEndpointHeader()">
                                <span class="btn-add-header-icon" aria-hidden="true">+</span>
                                <span data-i18n="http_endpoint.headers.add">Add header</span>
                            </button>
                        </div>
                    </div>
                </section>

                <!-- ── 04 · NOTES ──────────────────────────────────── -->
                <section class="ds-section" data-ds-key="notes" data-ch="amber">
                    <div class="ds-section-header">
                        <span class="ds-section-dot" aria-hidden="true"></span>
                        <span class="ds-section-title" data-i18n="settings.section.notes">Notes</span>
                        <span class="ds-section-index" aria-hidden="true">04</span>
                    </div>
                    <div class="ds-section-body">
                        <div class="form-group">
                            <div class="label-row">
                                <label for="http-endpoint-description" data-i18n="http_endpoint.description">Description (optional):</label>
                            </div>
                            <input type="text" id="http-endpoint-description" placeholder="">
                        </div>
                    </div>
                </section>

            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-icon btn-secondary" onclick="closeHTTPEndpointModal()" title="Cancel" data-i18n-title="settings.button.cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
            <button class="btn btn-icon btn-primary" onclick="saveHTTPEndpoint()" title="Save" data-i18n-title="settings.button.save" data-i18n-aria-label="aria.save">&#x2713;</button>
        </div>
    </div>
</div>
