{% extends 'accounts/_layout.html' %}
{% load static %}
{% block title %}Account settings | The Reverse Times{% endblock %}
{% block extra_js %}{{ block.super }}<script src="{% static 'js/bd-address.js' %}" defer></script>{% endblock %}
{% block acct_width %}620px{% endblock %}
{% block content %}
<div class="acct">
  <div class="acct-grid">
    <p><a class="inline" href="{% url 'account' %}" style="color:var(--gold-ink)">&larr; My account</a></p>
    <section class="acct-card" aria-labelledby="pH">
      <h1 id="pH" style="font-size:1.8rem">Your details</h1>
      <p class="acct-sub">Used to fill in checkout and link your magazine purchases.</p>
      <form method="post" novalidate>
        {% csrf_token %}<input type="hidden" name="form" value="profile">
        {% include 'accounts/_field.html' with field=profile_form.name %}
        {% include 'accounts/_field.html' with field=profile_form.phone %}
        {% include 'accounts/_field.html' with field=profile_form.alt_phone %}
        <fieldset class="acct-address" data-bd-address data-src="{% static 'data/bd-locations.json' %}">
          <legend>Delivery address / ডেলিভারি ঠিকানা</legend>
          <div class="acct-field"><label for="id_division">{{ profile_form.division.label }}</label>
            <select id="id_division" name="division" data-level="division" data-value="{{ profile_form.division.value|default:'' }}"><option value="">লোড হচ্ছে…</option></select></div>
          <div class="acct-field"><label for="id_district">{{ profile_form.district.label }}</label>
            <select id="id_district" name="district" data-level="district" data-value="{{ profile_form.district.value|default:'' }}" disabled><option value="">—</option></select></div>
          <div class="acct-field"><label for="id_area">{{ profile_form.area.label }}</label>
            <select id="id_area" name="area" data-level="area" data-value="{{ profile_form.area.value|default:'' }}" disabled><option value="">—</option></select>
            {% for e in profile_form.area.errors %}<p class="acct-err" role="alert">{{ e }}</p>{% endfor %}</div>
          {% include 'accounts/_field.html' with field=profile_form.address %}
        </fieldset>
        {% include 'accounts/_field.html' with field=profile_form.wants_newsletter %}
        <button type="submit" class="ds-btn ds-btn-primary">Save details</button>
      </form>
    </section>
    <section class="acct-card" aria-labelledby="pwH">
      <h2 id="pwH">{% if has_password %}Change password{% else %}Set a password{% endif %}</h2>
      {% if google_linked %}<p class="acct-sub" style="margin-bottom:1rem">Your account is connected to Google.{% if not has_password %} Add a password if you also want to sign in with your email or phone.{% endif %}</p>{% endif %}
      <form method="post" novalidate>
        {% csrf_token %}<input type="hidden" name="form" value="password">
        {% for e in password_form.non_field_errors %}<div class="acct-alert" role="alert">{{ e }}</div>{% endfor %}
        {% if has_password %}{% include 'accounts/_field.html' with field=password_form.old_password %}{% endif %}
        {% include 'accounts/_field.html' with field=password_form.new_password1 %}
        {% include 'accounts/_field.html' with field=password_form.new_password2 %}
        <button type="submit" class="ds-btn ds-btn-outline">{% if has_password %}Change password{% else %}Set password{% endif %}</button>
      </form>
    </section>
  </div>
</div>
{% endblock %}