{% macro rrset(rtype, ttl, data, zone) %}
    <li class="rrset">
        <div class="rtype">
            {{ rtype }}
            <div class="action">
                <button class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
                    </svg>
                </button>
                <a class="button icon" href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
                    </svg>
                </a>
            </div>
        </div>

        <ul>
            {% for data in data %}
                <li>
                    <div class="rdata">
                        {% if rtype == "address" %}
                        <div class="rdata-main">
                            <span class="pill">
                                {{ data.address }}
                            </span>
                        </div>
                        {% elif rtype == "mailserver" %}
                        <div class="rdata-main">
                            <span class="pill">
                                {{ data.mail_exchanger }}
                            </span>
                        </div>
                        <div class="rdata-complementary">
                            <span class="pill">
                                Preference: {{ data.preference }}
                            </span>
                        </div>
                        {% elif rtype == "nameserver" %}
                        <div class="rdata-main">
                            <span class="pill">
                                {{ data.target }}
                            </span>
                        </div>
                        {% elif rtype == "service" %}
                        <div class="rdata-main">
                            <span class="pill">
                                {% if data.service_type == "other" %}
                                    {{ data.service_name }}/{{ data.service_protocol }}
                                {% else %}
                                    {{ data.service_type }}
                                {% endif %}
                            </span>
                            <span class="pill">
                                Address: {{ data.server }}:{{ data.port }}
                            </span>
                        </div>
                        <div class="rdata-complementary">
                            <span class="pill">
                                Priority: {{ data.priority }}
                            </span>
                            <span class="pill">
                                Weight: {{ data.weight }}
                            </span>
                        </div>
                        {% endif %}
                    </div>
                </li>
            {% endfor %}
        </ul>
    </li>
{% endmacro rrset %}