{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% import 'macro_functions.html.twig' as mf %}

{% block meta_title %}{{ 'Registrar'|trans }} {{ registrar.title }}{% endblock %}

{% set active_menu = 'system' %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|url }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'servicedomain'|url }}">{{ 'Domain Management'|trans }}</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'servicedomain'|url }}#tab-registrars">{{ 'Registrars'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ registrar.title }}</li>
    </ol>
{% endblock %}

{% block content %}
<div class="p-3">
    <form method="post" action="{{ 'servicedomain/registrar_update'|api_url }}" {{ fb_api_form({message: 'Registrar Updated'|trans}) }}>
        {% embed 'partial_admin_form_card.html.twig' with {
            title: registrar.title,
            subtitle: 'Configure test mode, display title, and adapter-specific settings for this registrar.'|trans,
            card_class: 'mb-0'
        } %}
            {% import 'macro_functions.html.twig' as mf %}
            {% block form_content %}
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">{{ 'Registrar Title'|trans }}</label>
                        <input class="form-control" type="text" name="title" value="{{ registrar.title }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label d-block">{{ 'Enable Test Mode'|trans }}</label>
                        <div class="d-flex flex-wrap gap-3">
                            <label class="form-check">
                                <input class="form-check-input" id="radioTestModeYes" type="radio" name="test_mode" value="1"{% if registrar.test_mode %} checked{% endif %}>
                                <span class="form-check-label">{{ 'Yes'|trans }}</span>
                            </label>
                            <label class="form-check">
                                <input class="form-check-input" id="radioTestModeNo" type="radio" name="test_mode" value="0"{% if not registrar.test_mode %} checked{% endif %}>
                                <span class="form-check-label">{{ 'No'|trans }}</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <div class="d-flex flex-column gap-1 mb-4">
                        <h6 class="card-title mb-0">{{ 'Adapter Settings'|trans }}</h6>
                        <p class="text-secondary mb-0">{{ 'Provide the credentials and connection details required by this registrar adapter.'|trans }}</p>
                    </div>
                    {{ mf.build_form(registrar.form, registrar.config, {'test_mode': registrar.test_mode}) }}
                </div>

                <input type="hidden" name="id" value="{{ registrar.id }}">
            {% endblock %}

            {% block form_actions %}
                <button class="btn btn-primary" type="submit">{{ 'Update'|trans }}</button>
            {% endblock %}
        {% endembed %}
    </form>
</div>
{% endblock %}

{% block js %}
<script>
    (function () {
        const testModeYes = document.getElementById('radioTestModeYes');
        const testModeNo = document.getElementById('radioTestModeNo');

        if (!testModeYes || !testModeNo) {
            return;
        }

        const managedInputs = document.querySelectorAll('[data-required-when-test-mode]');

        if (managedInputs.length === 0) {
            return;
        }

        function updateRequiredStates() {
            const testMode = testModeYes.checked;

            managedInputs.forEach(function (input) {
                const requiredTestMode = input.getAttribute('data-required-when-test-mode');
                if (String(testMode) === requiredTestMode) {
                    input.setAttribute('required', '');
                } else {
                    input.removeAttribute('required');
                }
            });
        }

        testModeYes.addEventListener('change', updateRequiredStates);
        testModeNo.addEventListener('change', updateRequiredStates);
    })();
</script>
{% endblock %}
