<table class="ui celled sortable unstackable compact table">
    <thead>
        <tr>
            <th>Matching Domain</th>
            <th>Proxy To</th>
            <th class="no-sort">Remove</th>
        </tr>
    </thead>
    <tbody id="subdList">
       
    </tbody>
</table>
<button class="ui icon green basic button" onclick="listSubd();"><i class="refresh icon"></i> Refresh</button>
<script>
    listSubd();
    function listSubd(){
        $("#subdList").html(``);
        $.get("/api/proxy/list?type=subd", function(data){
            if (data.error !== undefined){
                    $("#subdList").append(`<tr>
                    <td data-label="" colspan="3"><i class="remove icon"></i> ${data.error}</td>
                </tr>`);
            }else if (data.length == 0){
                $("#subdList").append(`<tr>
                    <td data-label="" colspan="3"><i class="checkmark icon"></i> No Subdomain Proxy Record</td>
                </tr>`);
            }else{
                data.forEach(subd => {
                    let tlsIcon = "";
                    if (subd.RequireTLS){
                        tlsIcon = `<i class="lock icon"></i>`;
                    }
                    $("#subdList").append(`<tr>
                        <td data-label="">${subd.MatchingDomain}</td>
                        <td data-label="">${subd.Domain} ${tlsIcon}</td>
                        <td data-label=""><button class="ui circular mini red basic button" onclick='deleteEndpoint("subd","${subd.MatchingDomain}")'><i class="remove icon"></i> Delete</button></td>
                    </tr>`);
                });
            }
        });
    }
</script>