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

{{define "body"}}

<table class="table" id="Domains">
    <thead>
      <tr>
        <th scope="col">Domain</th>
        <th scope="col">Backend</th>
        <th scope="col">Port</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>@domainname</td>
        <td>@server</td>
        <td>@port</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 class="col">
        <div class="form-floating">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#DomainAddModal">
            Add Domain
            </button>
        </div>
    </div>
</div>
  
  <!-- Modal -->
  <div class="modal fade" id="DomainAddModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">New Domain</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <label for="inputEmail" class="sr-only">Domain Name</label>
            <input type="text" id="Domain" name="Domain" class="form-control" placeholder="contoso.co" required autofocus>
            <label for="inputEmail" class="sr-only">Backend</label>
            <input type="text" id="Server" name="Server" class="form-control" placeholder="FQDN or IP address" required>
            <label for="inputEmail" class="sr-only">Port</label>
            <input type="text" id="Port" name="Port" class="form-control" placeholder="443 or any other" required>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" onclick="AddDomain()">Save</button>
        </div>
      </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) {
        window.location.replace("/domains");
    }
 })

}
 
$.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 += '<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="/domain/' + result[i].DomainName +'" type="button" class="btn btn-warning">Edit</a>'
            content += '</td>'

            content += '</tr>'

        }
        console.log(content)

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

        console.log("DONE!")
    }
 })

</script>

{{ .Data }}

{{end}}