{% extends 'generic/object_edit.html' %}
{% load form_helpers %}
{% load i18n %}
{% load static %}


{% block form %}
    {% render_errors form %}
    <style>
        form.object-edit {
            margin: unset !important;
        }
        .netpicker_settings_form_fields .col-sm-3{
            flex: unset;
            width: 150px;
        }
        .btn_np_test_api{
            position: absolute;
        }
        .settings-logo{
            display: flex;
            justify-content: center;
        }
    </style>
    
    <div id="form_fields" hx-disinherit="hx-select hx-swap">

    <div class="field-group mt-5">
      <div class="settings-logo mb-1">
        <h2><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjI2IiBoZWlnaHQ9IjY4MSIgdmlld0JveD0iMCAwIDYyNiA2ODEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zMTMgNjI1Ljg5QzQ4NS43MTYgNjI1Ljg5IDYyNS43MyA0ODUuODc2IDYyNS43MyAzMTMuMTZDNjI1LjczIDE0MC40NDQgNDg1LjcxNiAwLjQyOTk5MyAzMTMgMC40Mjk5OTNDMTQwLjI4NCAwLjQyOTk5MyAwLjI3MDAyIDE0MC40NDQgMC4yNzAwMiAzMTMuMTZDMC4yNzAwMiA0ODUuODc2IDE0MC4yODQgNjI1Ljg5IDMxMyA2MjUuODlaIiBmaWxsPSIjRkFEODdBIi8+CjxwYXRoIGQ9Ik01NTUuNjIgMjU3LjhDNjA1LjEyIDMwNy4zIDYwNS4xMiAzODguMTggNTU1LjYyIDQzNy42OEwzMTMgNjgwLjNMNzAuMzggNDM3LjY4QzIwLjg4IDM4OC4xOCAyMC44OCAzMDcuMyA3MC4zOCAyNTcuOEwzMTMgMTUuMThMNTU1LjYyIDI1Ny44WiIgZmlsbD0iIzY5M0IyRiIvPgo8cGF0aCBkPSJNNDY0LjA5IDQ3NC44QzQzMi4wMyA0NzQuNCA0MDAuMDggNDYyLjAzIDM3NS43NCA0MzcuNjhMMzEzIDM3NC45NEwyNTAuMjcgNDM3LjY4QzIyNS45MiA0NjIuMDMgMTkzLjk3IDQ3NC40IDE2MS45MiA0NzQuOEwzMTMuMDEgNjI1Ljg5TDQ2NC4xIDQ3NC44SDQ2NC4wOVoiIGZpbGw9IiNGQUQ4N0EiLz4KPHBhdGggZD0iTTQ2NC4wOSA0NzQuOEM0MzIuMDMgNDc0LjQgNDAwLjA4IDQ2Mi4wMyAzNzUuNzQgNDM3LjY4TDMxMyAzNzQuOTRWNjI1Ljg4TDQ2NC4wOSA0NzQuNzlWNDc0LjhaIiBmaWxsPSIjRjhDMTczIi8+CjxwYXRoIGQ9Ik0zNzUuODEgMjU3LjczQzQwMC4xNiAyMzMuNDUgNDMyIDIyMS4wOCA0NjQuMDkgMjIwLjY4TDMxMyA2OS41OUwxNjEuOTEgMjIwLjY4QzE5NC4xOCAyMjEuMDggMjI1Ljc0IDIzMy40NSAyNTAuMjYgMjU3LjhMMzEyLjk5IDMyMC41NEwzNzUuOCAyNTcuNzRMMzc1LjgxIDI1Ny43M1oiIGZpbGw9IiNEMTNDMzEiLz4KPHBhdGggZD0iTTQwMi45OCAyODQuOTdDMzY4LjI5IDMxOS42NiAzNjguMjkgMzc1LjgzIDQwMi45NCA0MTAuNDhDNDM3LjQxIDQ0NC45NSA0OTMuOTQgNDQ0Ljk1IDUyOC40MSA0MTAuNDhDNTYyLjg4IDM3Ni4wMSA1NjIuODggMzE5LjQ4IDUyOC40MSAyODUuMDFDNDkzLjk1IDI1MC41NSA0MzcuNDYgMjUwLjU0IDQwMi45OCAyODQuOTdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNOTcuNTkgNDEwLjQ4QzEzMi4wNiA0NDQuOTUgMTg4LjU5IDQ0NC45NSAyMjMuMDYgNDEwLjQ4QzI1Ny43MiAzNzUuODIgMjU3LjcxIDMxOS42NCAyMjMuMDIgMjg0Ljk3QzE4OC41NyAyNTAuNTQgMTMyLjA1IDI1MC41NCA5Ny41OSAyODUuMDFDNjMuMTMgMzE5LjQ4IDYzLjEyIDM3Ni4wMSA5Ny41OSA0MTAuNDhaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTYwLjMzIDQxMy40M0MxOTYuNjEgNDEzLjQzIDIyNi4wMiAzODQuMDIgMjI2LjAyIDM0Ny43NEMyMjYuMDIgMzExLjQ2IDE5Ni42MSAyODIuMDUgMTYwLjMzIDI4Mi4wNUMxMjQuMDUgMjgyLjA1IDk0LjY0IDMxMS40NiA5NC42NCAzNDcuNzRDOTQuNjQgMzg0LjAyIDEyNC4wNSA0MTMuNDMgMTYwLjMzIDQxMy40M1oiIGZpbGw9IiM2OTNCMkYiLz4KPHBhdGggZD0iTTQ2NS42OCA0MTMuNDNDNTAxLjk2IDQxMy40MyA1MzEuMzcgMzg0LjAyIDUzMS4zNyAzNDcuNzRDNTMxLjM3IDMxMS40NiA1MDEuOTYgMjgyLjA1IDQ2NS42OCAyODIuMDVDNDI5LjQgMjgyLjA1IDM5OS45OSAzMTEuNDYgMzk5Ljk5IDM0Ny43NEMzOTkuOTkgMzg0LjAyIDQyOS40IDQxMy40MyA0NjUuNjggNDEzLjQzWiIgZmlsbD0iIzY5M0IyRiIvPgo8cGF0aCBkPSJNMTIzIDMxNS4xNEMxMzAuNTcyIDMxNS4xNCAxMzYuNzEgMzA5LjAwMiAxMzYuNzEgMzAxLjQzQzEzNi43MSAyOTMuODU4IDEzMC41NzIgMjg3LjcyIDEyMyAyODcuNzJDMTE1LjQyOCAyODcuNzIgMTA5LjI5IDI5My44NTggMTA5LjI5IDMwMS40M0MxMDkuMjkgMzA5LjAwMiAxMTUuNDI4IDMxNS4xNCAxMjMgMzE1LjE0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQyOC4zNSAzMTUuMTRDNDM1LjkyMiAzMTUuMTQgNDQyLjA2IDMwOS4wMDIgNDQyLjA2IDMwMS40M0M0NDIuMDYgMjkzLjg1OCA0MzUuOTIyIDI4Ny43MiA0MjguMzUgMjg3LjcyQzQyMC43NzggMjg3LjcyIDQxNC42NCAyOTMuODU4IDQxNC42NCAzMDEuNDNDNDE0LjY0IDMwOS4wMDIgNDIwLjc3OCAzMTUuMTQgNDI4LjM1IDMxNS4xNFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMTMgNjkuNTlMMTYxLjkxIDIyMC42OEMxOTQuMTggMjIxLjA4IDIyNS43NCAyMzMuNDUgMjUwLjI2IDI1Ny44TDMxMi45OSAzMjAuNTRWNjkuNkwzMTMgNjkuNTlaIiBmaWxsPSIjRUY1NDQwIi8+CjxwYXRoIGQ9Ik0xNjEuOTIgNDc0LjhMMzEzIDYyNS44OUw0NjQuMDkgNDc0LjhMMzEzIDU5NC4zNkwxNjEuOTIgNDc0LjhaIiBmaWxsPSIjRkZFOUFEIi8+CjxwYXRoIGQ9Ik00NjQuMDkgMjIwLjY4TDMxMyA2OS41OUwxNjEuOTIgMjIwLjY4TDMxMyA5My4xMUw0NjQuMDkgMjIwLjY4WiIgZmlsbD0iI0ZBODk3QiIvPgo8cGF0aCBkPSJNMjk0LjU3IDQzNC42OEMzMDEuODkgNDM2LjY0IDMwNS4yMyA0NDcuODggMzAyLjA0IDQ1OS43OEMyOTguODUgNDcxLjY4IDI5MC4zNCA0NzkuNzQgMjgzLjAyIDQ3Ny43OEMyNzUuNyA0NzUuODIgMjcyLjM2IDQ2NC41OCAyNzUuNTUgNDUyLjY4QzI3OC43NCA0NDAuNzggMjg3LjI1IDQzMi43MiAyOTQuNTcgNDM0LjY4WiIgZmlsbD0iIzY5M0IyRiIvPgo8cGF0aCBkPSJNMzMxLjQzIDQzNC42OEMzMjQuMTEgNDM2LjY0IDMyMC43NyA0NDcuODggMzIzLjk2IDQ1OS43OEMzMjcuMTUgNDcxLjY4IDMzNS42NiA0NzkuNzQgMzQyLjk4IDQ3Ny43OEMzNTAuMyA0NzUuODIgMzUzLjY0IDQ2NC41OCAzNTAuNDUgNDUyLjY4QzM0Ny4yNiA0NDAuNzggMzM4Ljc1IDQzMi43MiAzMzEuNDMgNDM0LjY4WiIgZmlsbD0iIzY5M0IyRiIvPgo8L3N2Zz4K" style="width:48px;" />
            {% trans "Netpicker settings" %}</h2>
      </div>
      <div  class="netpicker_settings_form_fields">
        {% render_field form.server_url %}
        {% render_field form.tenant %}
        {% render_field form.api_key %}
        <div class="row">
          <div class="col-sm-3"></div>
          <div class="col">
            <div class="btn btn-outline-secondary btn_np_test_api" id="np-test-api">{% trans "Test API" %}</div>
          </div>
        </div>
      </div>
    </div>

    <script>
    window.addEventListener('load', function() {
        const server_url = document.getElementById('id_server_url')
        const tenant = document.getElementById('id_tenant')
        const anchor = document.getElementById('np-admin')
        const api_key = document.getElementById('id_api_key')
        function set_admin_url(ev) {
            const base_url = server_url.value;
            const tenant_name = tenant.value;
            const href = base_url && tenant_name ? base_url + '/tenant/' + tenant_name + '/admin?nav=api-token' : "";
            anchor.setAttribute("href", href);
        }
        server_url.addEventListener('change', set_admin_url)
        tenant.addEventListener('change', set_admin_url)
        set_admin_url()

        const test_api_button = document.getElementById('np-test-api')
        test_api_button.addEventListener('click', async function() {
            console.log('Test API')
            const base_url = server_url.value;
            const api_key_value = api_key.value;
            
            if (!base_url || !api_key_value) {
                alert('Please enter both Server URL and API Key before testing.');
                return;
            }
            
            const href = base_url + '/api/v1/auth/info';
            try{
                const response = await fetch(href, {
                    headers: {
                        'Authorization': 'Bearer ' + api_key_value
                    }
                });
                
                if (!response.ok) {
                    const errorData = await response.json().catch(() => ({ detail: { reason: 'Unknown error' } }));
                    throw new Error(`HTTP ${response.status}: ${errorData.detail?.reason || response.statusText}`);
                }
                
                const data = await response.json();
                console.log('API Test Successful:', data);
                alert('API connection successful! Check console for details.');
            } catch (error) {
                console.error('API Test Failed:', error);
                alert('API Test Failed: ' + error.message + '\n\nPlease check your Netpicker API settings and try again.');
            }
        })
    });
    </script>
    </div>
{% endblock %}