<div class="np-resource-title">
  {% t .header %}
</div>
<div class="user-details">
  <div class='detail'>Country: {{country}}</div>
  <div class='detail'>Company: {{company}}</div>
</div>
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
  <label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</label>
  <input
    {% if form.options.invite? %} disabled {% endif %}
    autofocus="autofocus"
    class="np-input"
    id="{{version}}_learner_email"
    name="learner[email]"
    type="email"
    value="{{ form.email }}"
  />
</div>
<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
  <label class="np-input-label" for="{{version}}_learner_first_name">
    {% t shared.first_name %} *
  </label>
  <input
    class="np-input"
    id="{{version}}_learner_first_name"
    name="learner[first_name]"
    value="{{ form.first_name }}"
  />
</div>
<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
  <label class="np-input-label" for="{{version}}_learner_last_name">
    {% t shared.last_name %} *
  </label>
  <input
    class="np-input"
    id="{{version}}_learner_last_name"
    name="learner[last_name]"
    value="{{ form.last_name }}"
  />
</div>
<div class="np-form-field {% if form.errors contains 'display_name' %}np-account-form-field-error{% endif %}">
  <label class="np-input-label" for="{{version}}_learner_display_name">
    {% t .display_name %}
  </label>
  <input
    class="np-input"
    id="{{version}}_learner_display_name"
    name="learner[display_name]"
    value="{{ form.display_name }}"
  />
</div>

{% unless form.options.invite?  %}
  <div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
    <label class="np-input-label" for="{{version}}_learner_current_password">
      {% t .current_password %} *
    </label>
    <input
      class="np-input"
      id="{{version}}_learner_current_password"
      name="learner[current_password]"
      type="password"
    />
  </div>

  <div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
    <label class="np-input-label" for="{{version}}_learner_password">
      {% t .new_password %} *
    </label>
    <input
      class="np-input"
      id="{{version}}_learner_password"
      name="learner[password]"
      type="password"
    />
  </div>

  <div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
    <label class="np-input-label" for="{{version}}_learner_password_confirmation">
      {% t .confirm_new_password %} *
    </label>
    <input
      class="np-input"
      id="{{version}}_learner_password_confirmation"
      name="learner[password_confirmation]"
      type="password"
    />
  </div>
{% endunless %}

{% if form.options.invite?  %}
  <div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
    <label class="np-input-label" for="{{version}}_learner_password">
      {% t shared.password %} *
    </label>
    <input
      class="np-input"
      id="{{version}}_learner_password"
      name="learner[password]"
      type="password"
    />
  </div>

  {% if form.terms_of_service_required? %}
    <div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
      <input
        id="{{version}}_learner_terms_of_service"
        name="learner[terms_of_service_accepted]"
        type="checkbox"
      />
      <div class="label">
        {% t .terms_of_service %}
      </div>
    </div>
  {% else %}
    <div class="np-margin-top">
      <span class="np-form-terms ">
        {% t .terms %}
        <a
          class="np-form-link np-button-color"
          target="_blank"
          href={{ form.terms_of_service_url }}
        >
          {% t .terms_link %}
        </a>
      </span>
    </div>
  {% endif %}

  <input
    id="{{version}}_invite_token"
    name="learner[token]"
    value="{{ form.invite_token }}"
    type="hidden"
  />
{% endif %}


<style>
  .user-details {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    gap: 10px;
    font-weight: 400;
}
</style>