{% extends "custom_field.tpl.html" %}
<!-- $Id: custom_field_url.tpl.html,v 1.1.2.2 2026/03/16 13:14:16 rtigero Exp $ -->

{% block field %}
<div id="div_{{ custom_field.NAME }}">
    {% for value in custom_field.VALUES %}
        <input id="{{ custom_field.NAME }}_link{{ loop.counter0 }}" type="text" class="saisie-30em pmb-input" name="{{ custom_field.NAME }}[link][{{ loop.counter0 }}]" data-form-name="{{ custom_field.NAME }}_link" value="{{ value.link }}" aria-describedby="pmb-input-{{ custom_field.NAME }}-desc-error">
        <label for="{{ custom_field.NAME }}_linkname{{ loop.counter0 }}">{{ msg.custom_field_url_linkname }}</label>
        <input id="{{ custom_field.NAME }}_linkname{{ loop.counter0 }}" type="text" class="saisie-15em pmb-input" size="0" name="{{ custom_field.NAME }}[linkname][{{ loop.counter0 }}]" data-form-name="{{ custom_field.NAME }}_linkname" value="{{ value.linkname }}" aria-describedby="pmb-input-{{ custom_field.NAME }}-desc-error">
        <label for="{{ custom_field.NAME }}_linktarget{{ loop.counter0 }}">{{ msg.custom_field_url_linktarget }}</label>
        <input id="{{ custom_field.NAME }}_linktarget{{ loop.counter0 }}" type="checkbox" name="{{ custom_field.NAME }}[linktarget][{{ loop.counter0 }}]" data-form-name="{{ custom_field.NAME }}_linktarget" {% if value.linktarget == 1 %}checked{% endif %} class="pmb-input" aria-describedby="pmb-input-{{ custom_field.NAME }}-desc-error">
    {% endfor %}
    {% if custom_field.REPEATABLE %}
        <input type="hidden" value="{{ custom_field.VALUES | length }}" name="customfield_url_{{ custom_field.ID }}" id="customfield_url_{{ custom_field.ID }}" class="pmb-input" aria-describedby="pmb-input-{{ custom_field.NAME }}-desc-error">
        <button type="button" id="button_add_custom_url_{{ custom_field.NAME }}" name="" class="bouton" onclick="add_custom_url_()" aria-label="{{ msg.custom_fields_add_aria_label | printf custom_field.TITRE }}">{{ msg.custom_fields_add_button }}</button>
    {% endif %}
</div>
<script>
    function add_custom_url_() {
        let field_name = "{{ custom_field.NAME }}";
        cpt = document.getElementById('customfield_url_{{ custom_field.ID }}').value;
        var check = document.createElement('div');
        check.setAttribute('id','{{ custom_field.NAME }}_check_'+cpt);
        check.setAttribute('style','display:inline');
        document.getElementById('customfield_url_{{ custom_field.ID }}').value = cpt*1 +1;
        var link = document.createElement('input');
        link.setAttribute('name','{{ custom_field.NAME }}[link][]');
        link.setAttribute('id','{{ custom_field.NAME }}_link'+cpt);
        link.setAttribute('type','text');
        link.setAttribute('class','saisie-30em');
        link.setAttribute('size','{{ custom_field.SIZE }}');
        link.setAttribute('value','');
        var lib_label = document.createElement('label');
        lib_label.setAttribute('for',field_name+'_linkname'+cpt);
        lib_label.innerHTML = '{{ msg.custom_field_url_linkname }}';
        var lib = document.createElement('input');
        lib.setAttribute('name',field_name+'[linkname][]');
        lib.setAttribute('id',field_name+'_linkname'+cpt);
        lib.setAttribute('type','text');
        lib.setAttribute('class','saisie-15em');
        lib.setAttribute('size', '{{ custom_field.SIZE }}');
        lib.setAttribute('value','');
        var target = document.createElement('input');
        target.setAttribute('name',field_name+'[linktarget][]');
        target.setAttribute('id',field_name+'_linktarget'+cpt);
        target.setAttribute('type','checkbox');
        target.setAttribute('value','1');
        target.setAttribute('checked','checked');
        var targetlabel = document.createElement('label');
        targetlabel.setAttribute('for',field_name+'_linktarget'+cpt);
        targetlabel.innerHTML = '{{ msg.custom_field_url_linktarget }}';
        space=document.createElement('br');

        let buttonAdd = document.getElementById('button_add_custom_url_{{ custom_field.NAME }}');


        document.getElementById('div_{{ custom_field.NAME }}').appendChild(link);
        document.getElementById('div_{{ custom_field.NAME }}').appendChild(document.createTextNode(' '));
        document.getElementById('div_{{ custom_field.NAME }}').appendChild(document.createTextNode(' '));
        document.getElementById('div_{{ custom_field.NAME }}').appendChild(lib_label);
        document.getElementById('div_{{ custom_field.NAME }}').appendChild(lib);
        document.getElementById('div_{{ custom_field.NAME }}').appendChild(document.createTextNode(' '));
        document.getElementById('div_{{ custom_field.NAME }}').appendChild(targetlabel);
        document.getElementById('div_{{ custom_field.NAME }}').appendChild(target);
        if(buttonAdd) {
            document.getElementById('div_{{ custom_field.NAME }}').appendChild(buttonAdd);
        }
        document.getElementById('div_{{ custom_field.NAME }}').appendChild(space);
    }
</script>
{% endblock %}