{% load static %}
<ul id="optionsfield_id_{{ name }}">
    <li style="display: none;">
        <input type="text" name="{{ name }}_key_X" id="id_{{ name }}_key_X">
        <input type="text" name="{{ name }}_val_X" id="id_{{ name }}_val_X">
            <a class="remove-option" href="javascript://" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" title="Remove option">
            <img src="{% static "admin/img/icon_deletelink.gif" %}" width="10" height="10" alt="Remove">
        </a>
    </li>
    {% for key, value in options.items %}
    <li>
        <input type="text" value="{{ key }}" name="{{ name }}_key_{{ forloop.counter }}" id="id_{{ name }}_key_{{ forloop.counter }}">
        <input type="text" value="{{ value }}" name="{{ name }}_val_{{ forloop.counter }}" id="id_{{ name }}_val_{{ forloop.counter }}">
            <a class="remove-option" href="javascript://" onclick="this.parentNode.parentNode.removeChild(this.parentNode);;" title="Remove option">
            <img src="{% static "admin/img/icon_deletelink.gif" %}" width="10" height="10" alt="Remove">
        </a>
    </li>
    {% endfor %}
</ul>
    <a onclick="optionsfield_add_option('{{ name }}');" class="add-option" href="javascript://" title="Add option">
    <img src="{% static "admin/img/icon_addlink.gif" %}" width="10" height="10" alt="Add"> Add option
</a>
<script>
    if (typeof(optionsfield_add_options) == 'undefined'){
        var optionsfield_add_option = function(name){
            var itm = document.getElementById("optionsfield_id_"+name).firstChild;
            var count = document.getElementById("optionsfield_id_"+name).childElementCount;
            var cln = itm.cloneNode(true);
            cln.setAttribute("style", "display: block;");
            cln.firstChild.setAttribute("id", "id_"+name+"_key_"+count);
            cln.firstChild.setAttribute("name", name+"_key_"+count);
            cln.firstChild.nextSibling.setAttribute("id", "id_"+name+"_val_"+count);
            cln.firstChild.nextSibling.setAttribute("name", name+"_val_"+count);
            document.getElementById("optionsfield_id_"+name).appendChild(cln);
        };
    }
</script>
