{{define "title"}}
  Go Application | {{index . "name"}}
{{end}}

{{define "body"}}
   <header>

        <link rel="stylesheet" type="text/css" href="/static/css/main.css">
        <img src="/static/image/goimg.png" alt ="Gopher">
        <b style='color:red ; max-width: 500px;margin: center; !important;'>Cavisson System </b>
        </header>
        <nav>
        <ul>
                        <li style='color:red;'><a href="/"; style='color:lightyellow;'> Home </a></li>
            <li style='color:red;'><a href="/page"; style='color:lightyellow;'>Content </a></li>
            <li style='color:red;' ><a href="/about"; style='color:lightyellow;'>About</a></li>
        </ul>
        </nav>
        <hr> 
  <h1 style='color:red;'>{{index . "msg"}}</h1>

  <!-- HTML form -->
  <form id="post-full-name-form">
    <input type="text" id="User-Name" placeholder="username">
    <input type="password" id="Pass-word" placeholder="password">
    <button type="button" id="submit-btn">Submit</button>
  </form>

  <!-- Print the response after the jQuery ajax request -->
  <pre id="form-result"></pre>

  <script type="text/javascript"; style='color:lightyellow;'>
    // Send a ajax request when the submit button is clicked
    $("#submit-btn").on("click", function(){
      var UserName = $("#User-Name").val();
      var Password = $("#Pass-word").val();
    
      $.ajax({
        type: "POST",
        url: "/api/post-full-name",
        data: JSON.stringify({
          first_name: UserName,
          last_name: Password
        }),
        processData: false,
        contentType: "application/json",
        dataType: "json"
      }).done(
        function(data){
          $("#form-result").text(JSON.stringify(data, null, 2));
        }
      ).fail(
        function(data){
          $("#form-result").text("POST request failed!");
        }
      )
    });
  </script>
{{end}}
