nomilo/templates/pages/new_record/configs/services.html

<h1>{{ tr(msg="record-rtype-services-heading", name=new_record_name) }}</h1>

<form data-new-card="service">
    {% include "partials/advanced_mode.html" %}

    <fieldset class="group">
        <legend>{{ tr(msg="record-input-services-add-service-fieldset", attr="legend") }}</legend>
        <div class="form-input">
            {{
                <form.input
                    id="service_type"
                    name="services[0][data][service_type][service_type]"
                    type="select"
                    options={ {
                        "other": tr(msg="record-input-services-type-options", attr="other"),
                    } }
                    label={tr(msg="record-input-services-type", attr="input-label")}
                    attributes={ {
                        "data-error-message-id": "record-input-services-type",
                        "data-error-keys": "/services/0/data/service_type/service_type",
                    } }
                    lang={lang}
                />
            }}

            {{
                <form.input
                    id="service_protocol"
                    name="services[0][data][service_type][protocol]"
                    type="select"
                    options={ {
                        "tcp": tr(msg="record-input-services-protocol-options", attr="tcp"),
                        "udp": tr(msg="record-input-services-protocol-options", attr="udp"),
                    } }
                    label={tr(msg="record-input-services-protocol", attr="input-label")}
                    attributes={ {
                        "data-error-message-id": "record-input-services-protocol",
                        "data-error-keys": "/services/0/data/service_type/protocol",
                    } }
                    lang={lang}
                />
            }}

            {{
                <form.input
                    id="service_name"
                    name="services[0][data][service_type][name]"
                    type="text"
                    label={tr(msg="record-input-services-name", attr="input-label")}
                    attributes={ {
                        "data-error-message-id": "record-input-services-name",
                        "data-error-keys": "/services/0/data/service_type/name",
                    } }
                    lang={lang}
                />
            }}
        </div>

        <button class="primary form-action" type="submit">{{ tr(msg="button-add-service") }}</button>
    </fieldset>
</form>

<form id="main-form" method="post" action="" >
    <div data-new-card-container="service">
        {% for service in [...(input_data?.services or []), none] %}

        {% if service is none %}
            {% set is_template_service = true %}
        {% else %}
            {% set is_template_service = false %}
        {% endif %}

        {% if is_template_service %}
            {% set service_name = "{service_fullname}" %}
            {% set service_index = "{service_index}" %}
        {% else %}
            {% set service_name = service.data.service_type.name ~ "/" ~ service.data.service_type.protocol %}
            {% set service_index = loop.index0 %}
        {% endif %}


        {% if is_template_service %}<template data-new-card-template="service">{% endif %}
        <div class="card" data-card>
            <fieldset>
                <legend>
                    <h3>{{ tr(msg="record-input-services-service-fieldset", attr="legend", service_name=service_name) }}</h3>
                    <button type="button" class="primary icon" data-delete-card>
                        {{ <icon.trash /> }}
                        <span class="visually-hidden">
                            {{ tr(msg="record-input-services-service-fieldset", attr="delete-button", service_name=service_name) }}
                        </span>
                    </button>
                </legend>

                <input
                    type="hidden"
                    name="services[{{ service_index }}][data][service_type][service_type]"
                    value="{{ service?.data?.service_type?.service_type or "{service_type}" }}"
                >
                <input
                    type="hidden"
                    name="services[{{ service_index }}][data][service_type][name]"
                    value="{{ service?.data?.service_type?.name or "{service_name}" }}"
                >
                <input
                    type="hidden"
                    name="services[{{ service_index }}][data][service_type][protocol]"
                    value="{{ service?.data?.service_type?.protocol or "{service_protocol}" }}"
                >

                {% if advanced %}
                <div class="form-input">
                    {{
                        <form.input
                            id={"ttl-" ~ service_index}
                            name={"services[" ~ service_index ~ "][ttl]"}
                            value={service?.ttl}
                            type="number"
                            errors={errors}
                            errors_keys={[ "/services/" ~ service_index ~ "/ttl" ]}
                            error_msg_id="record-input-ttl"
                            description={tr(msg="record-input-ttl", attr="help")}
                            label={tr(msg="record-input-ttl", attr="input-label")}
                            lang={lang}
                        />
                    }}
                </div>
                {% elif not is_template_service %}
                    <input
                        type="hidden"
                        name="services[{{ service_index }}][ttl]"
                        value="{{ service?.ttl | default(value="") }}"
                    >
                {% endif %}

                {% for service_target in service?.data?.service_targets or [ none ] %}
                <fieldset class="group" data-new-item-template="service-target-{{ service_index }}">
                    <legend>
                        <span data-new-item-template-content="{{ tr(msg="record-input-services-service-targets-fieldset", attr="legend", service_name=service_name, index="{i}") }}">
                            {{- tr(msg="record-input-services-service-targets-fieldset", attr="legend", service_name=service_name, index=loop.index) -}}
                        </span>
                        <button type="button" class="primary icon" data-delete-item>
                            {{ <icon.trash /> }}
                            <span class="visually-hidden" data-new-item-template-content="{{ tr(msg="record-input-services-service-targets-fieldset", attr="delete-button", service_name=service_name, index=loop.index) }}">
                                {{- tr(msg="record-input-services-service-targets-fieldset", attr="delete-button", service_name=service_name, index=loop.index) -}}
                            </span>
                        </button>
                    </legend>

                    {% set service_targets_error = errors | get(key="/services/" ~ service_index ~ "/data/service_targets", default="") %}
                    {% if service_targets_error %}
                        <p class="error" id="service-{{ service_index }}-service-targets-fieldset-error">
                            {{ tr(
                                msg="record-input-services-service-targets-fieldset",
                                attr="error-" ~ service_targets_error.code | replace(from=":", to="-"),
                                service_name=service_name) }}
                        </p>
                        {% set extra_errors = "service-" ~ service_index ~ "-service-targets-fieldset-error" %}
                    {%else%}
                        {% set extra_errors = "" %}
                    {% endif %}

                    <div class="form-input">
                        {{
                            <form.input
                                id={"server-" ~ service_index ~ "-" ~ loop.index0}
                                name={"services[" ~ service_index ~ "][data][service_targets][" ~ loop.index0 ~ "][server]"}
                                value={service_target?.server}
                                type="text"
                                errors={errors}
                                errors_keys={[ "/services/" ~ service_index ~ "/data/service_targets/" ~ loop.index0 ~ "/server" ]}
                                error_msg_id="record-input-services-server"
                                extra_errors={extra_errors}
                                label={tr(msg="record-input-services-server", attr="input-label")}
                                label_attributes={ {
                                    "data-new-item-template-attr": "for",
                                    "data-template-for": "server-" ~ service_index ~ "-{i}",
                                } }
                                attributes={ {
                                    "data-new-item-template-attr": "name id",
                                    "data-template-name": "services[" ~ service_index ~ "][data][service_targets][{i}][server]",
                                    "data-template-id": "server-" ~ service_index ~ "-{i}",
                                } }
                                lang={lang}
                            />
                        }}

                        {{
                            <form.input
                                id={"port-" ~ service_index ~ "-" ~ loop.index0}
                                name={"services[" ~ service_index ~ "][data][service_targets][" ~ loop.index0 ~ "][port]"}
                                value={service_target?.port}
                                type="number"
                                errors={errors}
                                errors_keys={[ "/services/" ~ service_index ~ "/data/service_targets/" ~ loop.index0 ~ "/port" ]}
                                error_msg_id="record-input-services-port"
                                extra_errors={extra_errors}
                                label={tr(msg="record-input-services-port", attr="input-label")}
                                label_attributes={ {
                                    "data-new-item-template-attr": "for",
                                    "data-template-for": "port-" ~ service_index ~ "-{i}",
                                } }
                                attributes={ {
                                    "data-new-item-template-attr": "name id",
                                    "data-template-name": "services[" ~ service_index ~ "][data][service_targets][{i}][port]",
                                    "data-template-id": "port-" ~ service_index ~ "-{i}",
                                } }
                                lang={lang}
                            />
                        }}

                        {% if advanced %}
                        {{
                            <form.input
                                id={"priority-" ~ service_index ~ "-" ~ loop.index0}
                                name={"services[" ~ service_index ~ "][data][service_targets][" ~ loop.index0 ~ "][priority]"}
                                value={service_target?.priority}
                                type="number"
                                errors={errors}
                                errors_keys={[ "/services/" ~ service_index ~ "/data/service_targets/" ~ loop.index0 ~ "/priority" ]}
                                error_msg_id="record-input-services-priority"
                                extra_errors={extra_errors}
                                label={tr(msg="record-input-services-priority", attr="input-label")}
                                label_attributes={ {
                                    "data-new-item-template-attr": "for",
                                    "data-template-for": "priority-" ~ service_index ~ "-{i}",
                                } }
                                attributes={ {
                                    "data-new-item-template-attr": "name id",
                                    "data-template-name": "services[" ~ service_index ~ "][data][service_targets][{i}][priority]",
                                    "data-template-id": "priority-" ~ service_index ~ "-{i}",
                                } }
                                lang={lang}
                            />
                        }}


                        {{
                            <form.input
                                id={"weight-" ~ service_index ~ "-" ~ loop.index0}
                                name={"services[" ~ service_index ~ "][data][service_targets][" ~ loop.index0 ~ "][weight]"}
                                value={service_target?.weight}
                                type="number"
                                errors={errors}
                                errors_keys={[ "/services/" ~ service_index ~ "/data/service_targets/" ~ loop.index0 ~ "/weight" ]}
                                error_msg_id="record-input-services-weight"
                                extra_errors={extra_errors}
                                label={tr(msg="record-input-services-weight", attr="input-label")}
                                label_attributes={ {
                                    "data-new-item-template-attr": "for",
                                    "data-template-for": "weight-" ~ service_index ~ "-{i}",
                                } }
                                attributes={ {
                                    "data-new-item-template-attr": "name id",
                                    "data-template-name": "services[" ~ service_index ~ "][data][service_targets][{i}][weight]",
                                    "data-template-id": "weight-" ~ service_index ~ "-{i}",
                                } }
                                lang={lang}
                            />
                        }}
                        {% elif not is_template_service %}
                            <input
                                type="hidden"
                                name="services[{{ service_index }}][data][service_targets][{{ loop.index0 }}][priority]"
                                value="{{ service_target?.priority | default(value="") }}"
                            >
                            <input
                                type="hidden"
                                name="services[{{ service_index }}][data][service_targets][{{ loop.index0 }}][weight]"
                                value="{{ service_target?.weight | default(value="") }}"
                            >
                        {% endif %}
                    </div>
                </fieldset>
                {% endfor %}
                <button class="link" type="button" data-new-item="service-target-{{ service_index }}">
                    {{ <icon.plus_circle /> }}
                    {{ tr(msg="button-add-service-target", service_name=service_name) }}
                </button>
            </fieldset>
        </div>
        {% if is_template_service %}</template>{% endif %}
        {% endfor %}
    </div>

    {% include "partials/form_submit.html" %}
</form>