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