{% extends "base.html" %}
{% load i18n %}

{% block title %}Complete sign up{% endblock %}

{% block content %}
<section class="page-hero" aria-labelledby="social-signup-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
  </div>
  <div class="container">
    <div class="page-hero-content">
      <div class="section-badge">Client Portal</div>
      <h1 class="page-hero-title" id="social-signup-heading">Complete your account</h1>
      <p class="page-hero-subtitle">
        {% blocktrans with provider_name=account.get_provider.name %}Finish setup after signing in with {{ provider_name }}.{% endblocktrans %}
      </p>
    </div>
  </div>
</section>

<section class="section">
  <div class="container container--narrow">
    <div class="glass-card portal-card fade-in">
      <form method="post" action="{% url 'socialaccount_signup' %}" novalidate>
        {% csrf_token %}
        {{ redirect_field }}

        {% if form.non_field_errors %}
        <div class="form-errors">{{ form.non_field_errors }}</div>
        {% endif %}

        {% for field in form %}
        <div class="form-group{% if field.errors %} has-error{% endif %}">
          <label for="{{ field.id_for_label }}">{{ field.label }}{% if field.field.required %} <span class="required-star">*</span>{% endif %}</label>
          {{ field }}
          {{ field.errors }}
        </div>
        {% endfor %}

        <button type="submit" class="btn-primary btn-submit">Create account</button>
      </form>

      <p class="portal-footer-text"><a href="{% url 'accounts:login' %}">Back to login</a></p>
    </div>
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
document.querySelectorAll(".portal-card input, .portal-card select, .portal-card textarea").forEach(function (el) {
  el.classList.add("form-control");
});
</script>
{% endblock %}