{% from "settings/components/connection_modals.html" import connection_modals %}

{% macro connections_tab(portainer_settings, nginx_settings, site_settings, git_settings, cloudflare_settings, stripe_settings) %}
<!-- Meta tags for JavaScript -->
<meta name="management-api-key" content="{{ site_settings.management_api_key }}">
<meta name="git-settings" content="{{ git_settings|tojson|safe }}">

<div class="container-fluid">
    <div class="row">
        <!-- Portainer Connection Card -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-server me-2"></i>Portainer Connection
                    </h5>
                    <button class="btn btn-sm btn-outline-primary" onclick="testPortainerConnection()">
                        <i class="fas fa-plug me-1"></i>Test Connection
                    </button>
                </div>
                <div class="card-body">
                    <form id="portainerForm" onsubmit="savePortainerConnection(event)">
                        <div class="mb-3">
                            <label for="portainerUrl" class="form-label">Portainer Server URL</label>
                            <input type="url" class="form-control" id="portainerUrl" name="portainerUrl" 
                                   placeholder="https://portainer.example.com" required
                                   value="{{ portainer_settings.url if portainer_settings and portainer_settings.url else '' }}">
                            <div class="form-text">The URL of your Portainer server</div>
                        </div>
                        <div class="mb-3">
                            <label for="portainerApiKey" class="form-label">API Key</label>
                            <input type="password" class="form-control" id="portainerApiKey" name="portainerApiKey" 
                                   placeholder="Enter your Portainer API key" required
                                   value="{{ portainer_settings.api_key if portainer_settings and portainer_settings.api_key else '' }}">
                            <div class="form-text">You can generate this in your Portainer user settings</div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Save Portainer Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- NGINX Connection Card -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-globe me-2"></i>NGINX Connection
                    </h5>
                    <button class="btn btn-sm btn-outline-primary" onclick="testNginxConnection()">
                        <i class="fas fa-plug me-1"></i>Test Connection
                    </button>
                </div>
                <div class="card-body">
                    <form id="nginxForm" onsubmit="saveNginxConnection(event)">
                        <div class="mb-3">
                            <label for="nginxUrl" class="form-label">NGINX Proxy Manager URL</label>
                            <input type="url" class="form-control" id="nginxUrl" name="nginxUrl" 
                                   placeholder="https://nginx.example.com" required
                                   value="{{ nginx_settings.url if nginx_settings and nginx_settings.url else '' }}">
                            <div class="form-text">The URL of your NGINX Proxy Manager instance</div>
                        </div>
                        <div class="mb-3">
                            <label for="nginxUsername" class="form-label">Username</label>
                            <input type="text" class="form-control" id="nginxUsername" name="nginxUsername" 
                                   placeholder="Enter your NGINX Proxy Manager username" required
                                   value="{{ nginx_settings.username if nginx_settings and nginx_settings.username else '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="nginxPassword" class="form-label">Password</label>
                            <input type="password" class="form-control" id="nginxPassword" name="nginxPassword" 
                                   placeholder="Enter your NGINX Proxy Manager password" required
                                   value="{{ nginx_settings.password if nginx_settings and nginx_settings.password else '' }}">
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Save NGINX Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Gitea Connection Card -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-code-branch me-2"></i>Gitea Connection
                    </h5>
                    <button class="btn btn-sm btn-outline-primary" onclick="testGitConnection('gitea')">
                        <i class="fas fa-plug me-1"></i>Test Connection
                    </button>
                </div>
                <div class="card-body">
                    <form id="giteaForm" onsubmit="saveGitConnection(event, 'gitea')">
                        <div class="mb-3">
                            <label for="giteaUrl" class="form-label">Gitea Server URL</label>
                            <input type="url" class="form-control" id="giteaUrl" name="giteaUrl" 
                                   placeholder="https://gitea.example.com" required
                                   value="{{ git_settings.url if git_settings and git_settings.provider == 'gitea' and git_settings.url else '' }}">
                            <div class="form-text">The URL of your Gitea server</div>
                        </div>
                        <div class="mb-3">
                            <label for="giteaUsername" class="form-label">Username</label>
                            <input type="text" class="form-control" id="giteaUsername" name="giteaUsername" 
                                   placeholder="Enter your Gitea username" required
                                   value="{{ git_settings.username if git_settings and git_settings.provider == 'gitea' and git_settings.username else '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="giteaPassword" class="form-label">Password</label>
                            <input type="password" class="form-control" id="giteaPassword" name="giteaPassword" 
                                   placeholder="Enter your Gitea password"
                                   value="{{ git_settings.password if git_settings and git_settings.provider == 'gitea' and git_settings.password else '' }}">
                            <div class="form-text">Required for token generation if you don't have an existing token</div>
                        </div>
                        <div class="mb-3">
                            <label for="giteaOtp" class="form-label">Two-Factor Code (if enabled)</label>
                            <input type="text" class="form-control" id="giteaOtp" name="giteaOtp" 
                                   placeholder="Enter 2FA code if enabled">
                            <div class="form-text">Required if you have two-factor authentication enabled</div>
                        </div>
                        <div class="mb-3">
                            <label for="giteaToken" class="form-label">Access Token</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="giteaToken" name="giteaToken" 
                                       placeholder="Enter your Gitea access token" required
                                       value="{{ git_settings.token if git_settings and git_settings.provider == 'gitea' and git_settings.token else '' }}">
                                <button class="btn btn-outline-secondary" type="button" onclick="generateGiteaToken()">
                                    <i class="fas fa-key me-1"></i>Generate Token
                                </button>
                            </div>
                            <div class="form-text">You can generate a new token or use an existing one</div>
                        </div>
                        <div class="mb-3">
                            <label for="giteaRepo" class="form-label">Repository</label>
                            <div class="input-group">
                                <select class="form-select" id="giteaRepo" name="giteaRepo" required>
                                    <option value="">Select a repository</option>
                                    {% if git_settings and git_settings.provider == 'gitea' and git_settings.repo %}
                                    <option value="{{ git_settings.repo }}" selected>{{ git_settings.repo }}</option>
                                    {% endif %}
                                </select>
                                <button class="btn btn-outline-secondary" type="button" onclick="loadGiteaRepos()">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                            </div>
                            <div class="form-text">Select the repository to connect to</div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Save Gitea Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Cloudflare Connection Card -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-cloud me-2"></i>Cloudflare Connection
                    </h5>
                    <button class="btn btn-sm btn-outline-primary" onclick="testCloudflareConnection()">
                        <i class="fas fa-plug me-1"></i>Test Connection
                    </button>
                </div>
                <div class="card-body">
                    <form id="cloudflareForm" onsubmit="saveCloudflareConnection(event)">
                        <div class="mb-3">
                            <label for="cloudflareEmail" class="form-label">Email Address</label>
                            <input type="email" class="form-control" id="cloudflareEmail" name="cloudflareEmail" 
                                   placeholder="Enter your Cloudflare email" required
                                   value="{{ cloudflare_settings.email if cloudflare_settings and cloudflare_settings.email else '' }}">
                            <div class="form-text">The email address associated with your Cloudflare account</div>
                        </div>
                        <div class="mb-3">
                            <label for="cloudflareApiKey" class="form-label">API Key</label>
                            <input type="password" class="form-control" id="cloudflareApiKey" name="cloudflareApiKey" 
                                   placeholder="Enter your Cloudflare API key" required
                                   value="{{ cloudflare_settings.api_key if cloudflare_settings and cloudflare_settings.api_key else '' }}">
                            <div class="form-text">You can generate this in your Cloudflare account settings</div>
                        </div>
                        <div class="mb-3">
                            <label for="cloudflareZone" class="form-label">Zone ID</label>
                            <input type="text" class="form-control" id="cloudflareZone" name="cloudflareZone" 
                                   placeholder="Enter your Cloudflare zone ID" required
                                   value="{{ cloudflare_settings.zone_id if cloudflare_settings and cloudflare_settings.zone_id else '' }}">
                            <div class="form-text">The zone ID for your domain in Cloudflare</div>
                        </div>
                        <div class="mb-3">
                            <label for="cloudflareServerIp" class="form-label">Server IP Address</label>
                            <input type="text" class="form-control" id="cloudflareServerIp" name="cloudflareServerIp" 
                                   placeholder="Enter your server IP address (e.g., 192.168.1.100)" required
                                   value="{{ cloudflare_settings.server_ip if cloudflare_settings and cloudflare_settings.server_ip else '' }}">
                            <div class="form-text">The IP address of this server for DNS management</div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Save Cloudflare Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Stripe Connection Card -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fab fa-stripe me-2"></i>Stripe Connection
                    </h5>
                    <button class="btn btn-sm btn-outline-primary" onclick="testStripeConnection()">
                        <i class="fas fa-plug me-1"></i>Test Connection
                    </button>
                </div>
                <div class="card-body">
                    <form id="stripeForm" onsubmit="saveStripeConnection(event)">
                        <div class="mb-3">
                            <label for="stripePublishableKey" class="form-label">Publishable Key</label>
                            <input type="text" class="form-control" id="stripePublishableKey" name="stripePublishableKey" 
                                   placeholder="pk_test_..." required
                                   value="{{ stripe_settings.publishable_key if stripe_settings and stripe_settings.publishable_key else '' }}">
                            <div class="form-text">Your Stripe publishable key (starts with pk_test_ or pk_live_)</div>
                        </div>
                        <div class="mb-3">
                            <label for="stripeSecretKey" class="form-label">Secret Key</label>
                            <input type="password" class="form-control" id="stripeSecretKey" name="stripeSecretKey" 
                                   placeholder="sk_test_..." required
                                   value="{{ stripe_settings.secret_key if stripe_settings and stripe_settings.secret_key else '' }}">
                            <div class="form-text">Your Stripe secret key (starts with sk_test_ or sk_live_)</div>
                        </div>
                        <div class="mb-3">
                            <label for="stripeWebhookSecret" class="form-label">Webhook Secret (Optional)</label>
                            <input type="password" class="form-control" id="stripeWebhookSecret" name="stripeWebhookSecret" 
                                   placeholder="whsec_..."
                                   value="{{ stripe_settings.webhook_secret if stripe_settings and stripe_settings.webhook_secret else '' }}">
                            <div class="form-text">Webhook endpoint secret for secure event handling</div>
                        </div>
                        <div class="mb-3">
                            <label for="stripeCustomerPortalUrl" class="form-label">Customer Portal URL</label>
                            <input type="url" class="form-control" id="stripeCustomerPortalUrl" name="stripeCustomerPortalUrl" 
                                   placeholder="https://billing.stripe.com/p/login/..."
                                   value="{{ stripe_settings.customer_portal_url if stripe_settings and stripe_settings.customer_portal_url else '' }}">
                            <div class="form-text">URL for customers to manage their subscriptions and billing</div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="stripeTestMode" name="stripeTestMode" 
                                       {% if stripe_settings and stripe_settings.test_mode %}checked{% endif %}>
                                <label class="form-check-label" for="stripeTestMode">
                                    Test Mode (Use test keys)
                                </label>
                            </div>
                            <div class="form-text">Enable this to use Stripe test mode for development</div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>Save Stripe Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Save Connection Modal -->
    <div class="modal fade" id="saveConnectionModal" tabindex="-1" aria-labelledby="saveConnectionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="saveConnectionModalLabel">Save Connection</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="saveConnectionMessage"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

{{ connection_modals() }}

<!-- Load JavaScript -->
<script src="{{ url_for('static', filename='js/settings/connections.js') }}?v={{ 'js/settings/connections.js'|asset_version }}"></script>
{% endmacro %}