{{define "title"}} 
Protection | Shield 
{{end}}

{{define "body"}}

<table class="table" id="Domains">
    <thead>
      <tr>
        <th scope="col">Domain</th>
        <th scope="col">Server</th>
        <th scope="col">Port</th>
        <th scope="col">Stop Lists</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">{{ .Domain.DomainName}}</th>
        <td>{{ .Domain.RealServer}}</td>
        <td>{{ .Domain.RealPort}}</td>
        <td style="width: 500px;">
          <select class="form-select" aria-label="Default select example">
            <option selected>Known Attackers</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>

<div class="row align-items-start">
    <div class="col" id="test">
        <div class="input-group mb-3">
            TEST 1 
        </div>
        <div class="input-group mb-3">
            TEST 2 
        </div>
        <div class="form-floating">
            TEST - 3 
        </div>

    </div>

</div>
  
<script type="text/javascript">
/*
function AddDomain() {
    $.ajax({
    url: "http://localhost:8080/api/domains",
    type: "POST",
    data: JSON.stringify({
        "DomainName": $("#Domain").val(),
        "RealServer": $("#Server").val(),
        "RealPort": $("#Port").val(),
    }),
    success: function(result) {
        console.log("DONE!")
        console.log(result)
    }
 })

}

$.ajax({
    url: "http://localhost:8080/api/domains",
    type: "GET",
    data: JSON.stringify({
    }),
    success: function(result) {
        if (result == null) {
            console.log("domain list is empty")
            return
        }
        var content = ''
        for (var i = 0; i<result.length; i++) {
            content += '<th scope="row">' + i + "</th>"
            content += '<tr>'

            content += '<td>'
            content += result[i].DomainName
            content += '</td>'

            content += '<td>'
            content += result[i].RealServer
            content += '</td>'

            content += '<td>'
            content += result[i].RealPort
            content += '</td>'

            content += '<td>'
            content += '<a href="/api/domain/' + result[i].DomainName +'" type="button" class="btn btn-warning">Edit</a>'
            content += '</td>'

            content += '</tr>'

        }

        $('#Domains tbody').html(content)

        console.log("DONE!")
    }
 })
*/
</script>

{{ .Data }}

{{end}}