{%- comment -%}
  Activate an invited account (choose a password or decline). Marketing-site
  account system (bs-account.css).
{%- endcomment -%}
{{ 'bs-account.css' | asset_url | stylesheet_tag }}

<div class="acct acct-activate">
  <section class="acct-head">
    <div class="acct-container">
      <p class="acct-kicker">{{ 'customer.account.store_title' | t }}</p>
      <h1 class="acct-title">{{ 'customer.activate_account.title' | t }}</h1>
      <p class="acct-sub">{{ 'customer.activate_account.subtext' | t }}</p>
    </div>
  </section>
  <section class="acct-wrap">
    <div class="acct-container">
      {%- form 'activate_customer_password', class: 'acct-form' -%}
        {%- if form.errors -%}
          {%- for field in form.errors -%}
            <p class="acct-error" role="alert"{% if forloop.first %} tabindex="-1" autofocus{% endif %}>
              <span class="visually-hidden">{{ 'accessibility.error' | t }} </span>
              {%- if field == 'form' -%}
                {{ form.errors.messages[field] }}
              {%- else -%}
                <a href="#{{ field }}">{{ form.errors.translated_fields[field] | capitalize }} {{ form.errors.messages[field] }}</a>
              {%- endif -%}
            </p>
          {%- endfor -%}
        {%- endif -%}

        <div class="acct-field">
          <label class="acct-label" for="password">{{ 'customer.activate_account.password' | t }}</label>
          <input
            class="acct-input"
            type="password"
            name="customer[password]"
            id="password"
            autocomplete="new-password"
            {% if form.errors contains 'password' %}
              aria-invalid="true"
            {% endif %}
          >
        </div>
        <div class="acct-field">
          <label class="acct-label" for="password_confirmation">{{ 'customer.activate_account.password_confirm' | t }}</label>
          <input
            class="acct-input"
            type="password"
            name="customer[password_confirmation]"
            id="password_confirmation"
            autocomplete="new-password"
            {% if form.errors contains 'password_confirmation' %}
              aria-invalid="true"
            {% endif %}
          >
        </div>

        <div class="acct-actions">
          <button class="acct-submit" type="submit">{{ 'customer.activate_account.submit' | t }}</button>
          <button class="acct-btn" type="submit" name="decline">{{ 'customer.activate_account.cancel' | t }}</button>
        </div>
      {%- endform -%}
    </div>
  </section>
</div>