{% extends "base.html" %}
{% block title %}Add Client(s){% endblock %}
{% block content %}
<div class="container">
  <h1 class="my-4">Add Client(s)</h1>
  <form method="post">
    <div id="clientFields">
      <div class="form-group">
        <input type="text" name="name" class="form-control" placeholder="Enter client name">
      </div>
    </div>
    <button type="button" class="btn btn-secondary" onclick="addField()">Add Another</button>
    <br><br>
    <button type="submit" class="btn btn-success">Add Clients</button>
  </form>
  <br>
  <a href="{{ url_for('clients.clients') }}" class="btn btn-link">Back to Clients</a>
</div>
<script>
function addField() {
  var container = document.getElementById("clientFields");
  var div = document.createElement("div");
  div.className = "form-group";
  var input = document.createElement("input");
  input.type = "text";
  input.name = "name";
  input.className = "form-control";
  input.placeholder = "Enter client name";
  div.appendChild(input);
  container.appendChild(div);
}
</script>
{% endblock %}