{% extends "_base.html" %}

{% block title %}Sign up{% endblock %}

{% block styles %}
<link rel="stylesheet" href="/static/css/auth.css?v={{ version }}">
{% endblock %}

{% block header %}{% endblock %}

{% block content %}
<div class="auth-branding">
  <img src="/static/physicar-ai-logo.png" alt="Physicar AI" class="auth-logo">
  <p class="auth-branding-desc">Create your Physicar AI account</p>
</div>
<div class="auth-page">

  <form id="register-form" onsubmit="handleRegister(event)">
    <div class="auth-form-group" data-field="email">
      <label for="register-email">Email</label>
      <input type="email" name="email" id="register-email" required maxlength="254" autocomplete="email" />
    </div>
    <div class="auth-form-group" data-field="password">
      <label for="register-password">Password</label>
      <input type="password" name="password" id="register-password" required minlength="8" maxlength="128" autocomplete="new-password" />
      <span class="auth-hint">At least 8 characters</span>
    </div>
    <div class="auth-form-group" data-field="password_confirm">
      <label for="register-password-confirm">Confirm Password</label>
      <input type="password" name="password_confirm" id="register-password-confirm" required maxlength="128" autocomplete="new-password" />
    </div>
    <div class="auth-form-group" data-field="name">
      <label for="register-name">Full Name</label>
      <input type="text" name="name" id="register-name" required maxlength="100" autocomplete="name" />
    </div>
    <div class="auth-form-group" data-field="birth_date">
      <label for="register-birthdate">Date of Birth</label>
      <input type="date" name="birth_date" id="register-birthdate" required />
    </div>
    <div class="auth-consent-section" data-field="consent">
      <label class="auth-consent-all">
        <input type="checkbox" id="register-consent-all" />
        <span>I agree to all of the following.</span>
      </label>
      <div class="auth-consent-items">
        <label class="auth-consent-item">
          <input type="checkbox" name="consent_collection" class="consent-item-check" />
          <span><a href="https://physicar.ai/legal/consent/collection/" target="_blank">Collection and Use of Personal Information (Required)</a></span>
        </label>
        <label class="auth-consent-item">
          <input type="checkbox" name="consent_third_party" class="consent-item-check" />
          <span><a href="https://physicar.ai/legal/consent/third-party/" target="_blank">Third-Party Sharing of Personal Information (Required)</a></span>
        </label>
        <label class="auth-consent-item">
          <input type="checkbox" name="consent_cross_border" class="consent-item-check" />
          <span><a href="https://physicar.ai/legal/consent/cross-border/" target="_blank">Cross-Border Transfer of Personal Information (Required)</a></span>
        </label>
      </div>
    </div>
    <div id="turnstile-container" class="auth-turnstile"></div>
    <button type="submit" class="auth-submit-btn" data-original-text="Sign up">Sign up</button>
    <p class="auth-legal-notice">
      By clicking "Sign up", you agree to our
      <a href="https://physicar.ai/legal/terms/" target="_blank">Terms of Use</a>
      and acknowledge that you have read our
      <a href="https://physicar.ai/legal/privacy/" target="_blank">Privacy Policy</a>.
    </p>
  </form>
  <div class="auth-links">
    <a href="/pages/auth/login">Already have an account? Sign in</a>
  </div>

</div>


{% endblock content %}

{% block scripts %}
<script>window.PHYSICAR_TURNSTILE_SITE_KEY = '0x4AAAAAACyt2ghifxe9dVMG';</script>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
{% endblock %}