<form class="gopro-service-desk-form" method="post" action="">
  <h2>Skráning í GoPro þjónustuborð</h2>

  <!-- Tengiliður / aðalumsækjandi -->
  <div class="form-row">
    <label for="contact-name">Nafn</label>
    <input type="text" id="contact-name" name="contact_name" required>
  </div>

  <div class="form-row">
    <label for="company">Fyrirtæki</label>
    <input type="text" id="company" name="company" required>
  </div>

  <div class="form-row">
    <label for="title">Starfsheiti</label>
    <input type="text" id="title" name="job_title">
  </div>

  <!-- Aðilar sem eiga að hafa aðgang að þjónustuborði -->
  <fieldset class="form-row">
    <legend>Netföng aðila sem eiga að hafa aðgang að þjónustuborði</legend>

    <div id="email-wrapper">
      <div class="email-row">
        <label>Netfang 1</label>
        <input type="email" name="service_desk_emails[]" required>
      </div>
    </div>

    <button type="button" id="add-email-btn">Bæta við netfangi</button>
  </fieldset>

  <!-- Heimild til að stofna til kostnaðar -->
  <div class="form-row checkbox-row">
    <label>
      <input type="checkbox" name="cost_authorization" value="yes" required>
      Ég staðfesti að ofangreindir aðilar hafi heimild til að senda inn beiðnir sem geta
      leitt til kostnaðar ef verkefni skapast út frá þjónustuborðsbeiðnum.
    </label>
  </div>

  <button type="submit">Senda skráningu</button>
</form>

<script>
  (function () {
    const addBtn = document.getElementById('add-email-btn');
    const wrapper = document.getElementById('email-wrapper');
    let emailCount = 1;

    addBtn.addEventListener('click', function () {
      emailCount++;

      const row = document.createElement('div');
      row.className = 'email-row';

      const label = document.createElement('label');
      label.textContent = 'Netfang ' + emailCount;

      const input = document.createElement('input');
      input.type = 'email';
      input.name = 'service_desk_emails[]';
      input.required = true;

      row.appendChild(label);
      row.appendChild(input);
      wrapper.appendChild(row);
    });
  })();
</script>

<style>
  .gopro-service-desk-form {
    max-width: 600px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .gopro-service-desk-form h2 {
    margin-bottom: 1rem;
  }

  .gopro-service-desk-form .form-row {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .gopro-service-desk-form label {
    font-weight: 500;
  }

  .gopro-service-desk-form input[type="text"],
  .gopro-service-desk-form input[type="email"] {
    padding: 0.45rem 0.6rem;
    border-radius: 4px;
    border: 1px solid #ccc;
  }

  fieldset {
    border: 1px solid #e0e0e0;
    padding: 0.75rem;
    border-radius: 4px;
  }

  fieldset legend {
    font-weight: 600;
    padding: 0 0.25rem;
  }

  .email-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
  }

  .checkbox-row label {
    font-weight: 400;
  }

  #add-email-btn,
  .gopro-service-desk-form button[type="submit"] {
    margin-top: 0.25rem;
    padding: 0.5rem 0.9rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
  }

  #add-email-btn {
    background: #e4f4f6;
  }

  .gopro-service-desk-form button[type="submit"] {
    background: #0073aa;
    color: #fff;
    font-weight: 600;
  }

  .gopro-service-desk-form button[type="submit"]:hover {
    background: #005f8a;
  }
</style>