{# _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 -%}
{%- if signup_url -%}
  {%- set register_href = signup_url -%}
{%- elif client_id -%}
  {%- set register_href = "/register?client_id=" ~ client_id -%}
{%- else -%}
  {%- set register_href = "/register" -%}
{%- 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>{% if registration_disabled %}Registration disabled{% elif token %}Accept invitation{% else %}Create account{% endif %}</h1>
    <p class="wf-auth-sub">
      {% if registration_disabled %}
        Ask an admin for an invitation link.
      {% elif token %}
        Finish creating your account.
      {% else %}
        Let's get you set up.
      {% endif %}
    </p>

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

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

    {% if not registration_disabled %}
    <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 }}">
      {% if token %}<input type="hidden" name="token" value="{{ token }}">{% endif %}

      <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"
               {% if email_readonly %}readonly{% endif %}>
      </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 id="password-strength" class="wf-pw-strength" aria-live="polite">
          <div class="wf-pw-meter"><div class="wf-pw-fill" id="pw-fill"></div></div>
          <span class="wf-pw-label" id="pw-label"></span>
        </div>
      </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() }}
    {% else %}
    <div class="wf-mt-5">
      <a class="wf-btn primary lg wf-w-full" href="/login">Back to sign in →</a>
    </div>
    {% endif %}
  </div>
</main>
<style>
.wf-pw-strength{margin-top:.5rem;display:none}
.wf-pw-meter{height:4px;background:var(--c-border,#333);overflow:hidden}
.wf-pw-fill{height:100%;width:0;transition:width .2s,background .2s}
.wf-pw-label{display:block;margin-top:.25rem;font-size:.75rem;line-height:1}
.wf-pw-fill[data-s="weak"]{width:33%;background:var(--c-danger,#e55)}
.wf-pw-fill[data-s="medium"]{width:66%;background:var(--c-warn,#ea0)}
.wf-pw-fill[data-s="strong"]{width:100%;background:var(--c-ok,#2a5)}
</style>
<script>
(function(){
  var pw=document.getElementById("password");
  var box=document.getElementById("password-strength");
  var fill=document.getElementById("pw-fill");
  var label=document.getElementById("pw-label");
  if(!pw||!box||!fill||!label)return;
  pw.addEventListener("input",function(){
    var v=pw.value;
    if(!v.length){box.style.display="none";return}
    box.style.display="block";
    var score=0;
    if(v.length>=8)score++;
    if(v.length>=12)score++;
    if(/[a-z]/.test(v)&&/[A-Z]/.test(v))score++;
    if(/[0-9]/.test(v))score++;
    if(/[^a-zA-Z0-9]/.test(v))score++;
    var s,t;
    if(score<2){s="weak";t="Weak"}
    else if(score<4){s="medium";t="Medium"}
    else{s="strong";t="Strong"}
    fill.setAttribute("data-s",s);
    label.textContent=t+(v.length<8?" — min 8 characters":"");
    label.style.color=s==="weak"?"var(--c-danger,#e55)":s==="medium"?"var(--c-warn,#ea0)":"var(--c-ok,#2a5)";
  });
})();
</script>