{# _auth_main_register.html — registration form column.
   Renders <main class="wf-auth-form"> standalone for HTMX fragment responses.

   Expected context:
     csrf_token, email, username, error, client_id, app_name,
     custom_fields, custom_values, is_production
#}
{% import "_partials/_auth_macros.html" as auth %}
{%- if client_id -%}
  {%- set login_href = "/login?client_id=" ~ client_id -%}
{%- else -%}
  {%- set login_href = "/login" -%}
{%- endif -%}
<main class="wf-auth-form">
  <div class="wf-auth-top">
    {{ auth.kicker(app_name, "Create account",
                   swap_href=login_href,
                   swap_label="Sign in",
                   swap_prefix="") }}
  </div>

  <div class="wf-auth-wrap">
    <h1>Create account</h1>
    <p class="wf-auth-sub">Let's get you set up.</p>

    <div class="wf-mt-5">
      {{ auth.tabs(active="signup") }}
    </div>

    {% if error %}
      {% set flash = { "kind": "err", "message": error } %}
      <div class="wf-mt-4">
        {% include "_partials/_flash.html" %}
      </div>
    {% endif %}

    <form method="post" action="/register" class="wf-f wf-col wf-gap-5 wf-mt-5">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

      <div class="wf-field">
        <label class="wf-label" for="email">Email</label>
        <input class="wf-input" id="email" name="email" type="email"
               value="{{ email }}" required autocomplete="email">
      </div>

      <div class="wf-field">
        <label class="wf-label" for="username">Username</label>
        <input class="wf-input" id="username" name="username" type="text"
               value="{{ username }}" autocomplete="username"
               placeholder="Optional">
      </div>

      {% if custom_fields %}
        {% for field in custom_fields %}
          {% if field.field_type == "checkbox" %}
            <label class="wf-check-row">
              <input type="checkbox" class="wf-check"
                     id="custom_data_{{ field.name }}"
                     name="custom_data[{{ field.name }}]"
                     value="true"
                     {% if custom_values[field.name] == "true" %}checked{% endif %}>
              {{ field.help_text | default(field.label) }}
            </label>
          {% elif field.field_type == "textarea" %}
            <div class="wf-field">
              <label class="wf-label" for="custom_data_{{ field.name }}">
                {{ field.label }}
              </label>
              <textarea class="wf-textarea"
                        id="custom_data_{{ field.name }}"
                        name="custom_data[{{ field.name }}]"
                        {% if field.required %}required{% endif %}
                        {% if field.min_length %}minlength="{{ field.min_length }}"{% endif %}
                        {% if field.max_length %}maxlength="{{ field.max_length }}"{% endif %}
                        {% if not field.required %}placeholder="Optional"{% endif %}
                        >{{ custom_values[field.name] | default("", true) }}</textarea>
              {% if field.help_text %}
                <div class="wf-field-hint">{{ field.help_text }}</div>
              {% endif %}
            </div>
          {% elif field.field_type == "select" %}
            <div class="wf-field">
              <label class="wf-label" for="custom_data_{{ field.name }}">
                {{ field.label }}
              </label>
              <select class="wf-select"
                      id="custom_data_{{ field.name }}"
                      name="custom_data[{{ field.name }}]"
                      {% if field.required %}required{% endif %}>
                <option value="">Select…</option>
                {% for opt in field.enum_values %}
                  <option value="{{ opt }}" {% if custom_values[field.name] == opt ~ "" %}selected{% endif %}>{{ opt }}</option>
                {% endfor %}
              </select>
              {% if field.help_text %}
                <div class="wf-field-hint">{{ field.help_text }}</div>
              {% endif %}
            </div>
          {% elif field.field_type == "number" %}
            <div class="wf-field">
              <label class="wf-label" for="custom_data_{{ field.name }}">
                {{ field.label }}
              </label>
              <input class="wf-input" type="number"
                     id="custom_data_{{ field.name }}"
                     name="custom_data[{{ field.name }}]"
                     value="{{ custom_values[field.name] | default(field.default_value | default('', true), true) }}"
                     {% if field.required %}required{% endif %}
                     {% if not field.required %}placeholder="Optional"{% endif %}
                     {% if field.minimum is defined and field.minimum is not none %}min="{{ field.minimum }}"{% endif %}
                     {% if field.maximum is defined and field.maximum is not none %}max="{{ field.maximum }}"{% endif %}>
              {% if field.help_text %}
                <div class="wf-field-hint">{{ field.help_text }}</div>
              {% endif %}
            </div>
          {% else %}
            <div class="wf-field">
              <label class="wf-label" for="custom_data_{{ field.name }}">
                {{ field.label }}
              </label>
              <input class="wf-input" type="{{ field.field_type }}"
                     id="custom_data_{{ field.name }}"
                     name="custom_data[{{ field.name }}]"
                     value="{{ custom_values[field.name] | default(field.default_value | default('', true), true) }}"
                     {% if field.required %}required{% endif %}
                     {% if not field.required %}placeholder="Optional"{% endif %}
                     {% if field.min_length %}minlength="{{ field.min_length }}"{% endif %}
                     {% if field.max_length %}maxlength="{{ field.max_length }}"{% endif %}>
              {% if field.help_text %}
                <div class="wf-field-hint">{{ field.help_text }}</div>
              {% endif %}
            </div>
          {% endif %}
        {% endfor %}
      {% endif %}

      <div class="wf-field">
        <label class="wf-label" for="password">Password</label>
        <input class="wf-input" id="password" name="password" type="password"
               required minlength="8" autocomplete="new-password">
      </div>

      <div class="wf-field">
        <label class="wf-label" for="password_confirm">Confirm password</label>
        <input class="wf-input" id="password_confirm" name="password_confirm"
               type="password" required minlength="8" autocomplete="new-password">
      </div>

      <button type="submit" class="wf-btn primary lg wf-w-full">Create account →</button>
    </form>

    {{ auth.oauth_grid(oauth_providers) }}

    {{ auth.terms_footer() }}
  </div>
</main>