{% 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;
        }
        .htmx-indicator {
            display: none;
        }
        .htmx-request .htmx-indicator {
            display: inline-block;
        }
        .htmx-request.btn_np_test_api .test-api-icon {
            display: none;
        }
        .test-api-result {
            margin-left: 8px;
            display: inline-flex;
            align-items: center;
        }
        .test-api-result:empty {
            display: none;
        }
    </style>
    
    <div id="form_fields" hx-disinherit="hx-select hx-swap">
    <div id="netpicker-messages-container">
        {% include 'inc/messages.html' %}
    </div>

    <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">
            <button 
              type="button" 
              class="btn btn-outline-secondary btn_np_test_api" 
              id="np-test-api"
              hx-post="{% url 'plugins:netpicker:test_api_connection' %}"
              hx-include="#id_server_url, #id_api_key"
              hx-indicator="#test-api-indicator"
              hx-target="#test-api-result"
              hx-swap="innerHTML">
              <span id="test-api-text">{% trans "Test API" %}</span>
              <span id="test-api-indicator" class="htmx-indicator ms-2">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
              </span>
              <span id="test-api-result" class="test-api-result"></span>
            </button>
          </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()
    });
    </script>
    </div>
{% endblock %}