{% extends 'base.html.twig' %}

{% block title %}{{ page_title }}{% endblock %}

{% block body %}
  <section class="proscreen-onboarding">
    <div class="container">
      <div class="proscreen-onboarding__centre">
        <div>
          <img src="{{ asset('images/proscore-logo.svg') }}" alt="ProScore Logo">
        </div>
        <div class="d-flex flex-column gap-64px">
          <article>
            <header class="d-flex flex-column gap-8px">
              <h1>Request to be forgotten</h1>
              <p class="body-text proscreen-black-4-text mb-0">Complete this form to have your account removed from the
                ProScreen app</p>
            </header>
          </article>
          {% if submitted %}
            <p class="body-text proscreen-black-4-text mb-0">Your request to be forgotten has been sent</p>
          {% else %}
            <form
              id="forgetForm"
              action="{{ path('app_forget_action') }}"
              method="POST"
              class="d-flex flex-column gap-32px"
            >
              <input
                type="hidden"
                name="_csrf_token"
                data-controller="csrf-protection"
                value="{{ csrf_token('authenticate') }}"
              >
              <input type="hidden" name="recaptcha" value="">
              <div class="row">
                <div class="col-12 col-lg-6">
                  <label for="first_name" class="body-text">
                    <span class="fw-bold">First Name</span>
                    <span class="proscreen-black-3-text">(required)</span>
                  </label>
                  <input
                    name="first_name"
                    type="text"
                    class="form-control"
                    placeholder="Enter your first name"
                    id="first_name"
                    value=""
                    required
                  />
                </div>
                <div class="col-12 col-lg-6 pt-4 pt-lg-0">
                  <label for="last_name" class="body-text">
                    <span class="fw-bold">Last Name</span>
                    <span class="proscreen-black-3-text">(required)</span>
                  </label>
                  <input
                    name="last_name"
                    type="text"
                    class="form-control"
                    placeholder="Enter your last name"
                    id="last_name"
                    value=""
                    required
                  />
                </div>
              </div>
              <div class="row">
                <div class="col-12 col-lg-6 pt-4 pt-lg-0">
                  <label for="email" class="body-text">
                    <span class="fw-bold">Email address</span>
                    <span class="proscreen-black-3-text">(required)</span>
                  </label>
                  <input
                    name="email"
                    type="email"
                    class="form-control"
                    placeholder="Enter your email"
                    id="email"
                    value=""
                    required
                  />
                </div>
                <div class="col-12 col-lg-6 pt-4 pt-lg-0">
                  <label for="phone" class="body-text">
                    <span class="fw-bold">Phone number</span>
                    <span class="proscreen-black-3-text">(required)</span>
                  </label>
                  <input
                    name="phone"
                    type="text"
                    class="form-control"
                    placeholder="Enter your phone number"
                    id="phone"
                    value=""
                    required
                  />
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <label for="message" class="body-text">
                    <span class="fw-bold">Message</span>
                    <span class="proscreen-black-3-text">(required)</span>
                  </label>
                  <textarea name="message" id="message" class="form-control" rows="5" style="min-width: 100%"
                            required></textarea>
                </div>
              </div>

              <div class="d-flex gap-32px align-items-center">
                <button
                  type="submit"
                  class="ps-button primary button-text align-self-start g-recaptcha"
                >
                  <span>Send Request</span>
                  <span>
                  <img src="{{ asset('images/button-arrow.svg') }}" alt="Button arrow">
                </span>
                </button>
                {% if error %}
                  <p class="body-text-small fw-bold mb-0 proscreen-red-1-text" id="invalidError">
                    {{ error }}
                  </p>
                {% endif %}
              </div>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
  </section>
  <!-- Bootstrap JS Bundle with Popper (required for tooltips) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

{% endblock %}