{% extends "accounts/account_base.html" %}
{% load static %}
{% block title %}Profile · {{ SITE_NAME }}{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/address-autocomplete.css' %}">
{% endblock %}
{% block account_content %}
          <h3>Profile &amp; shipping</h3>
          <p>Name, phone, and a default shipping address. Payment cards stay on Stripe — we only keep a Stripe customer id, never card numbers.</p>
          {% if profile.stripe_customer_id %}
          <p class="text-gray-600">Stripe customer on file. Saved cards are offered at checkout by Stripe.</p>
          {% endif %}
          <form class="rd-form" method="post">
            {% csrf_token %}
            {{ form.non_field_errors }}
            <div class="row row-20 gutter-20" data-address-autocomplete data-suggest-url="{% url 'address_suggest' %}">
              <div class="col-sm-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.first_name.id_for_label }}">First name</label>
                  {{ form.first_name }}
                  {{ form.first_name.errors }}
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.last_name.id_for_label }}">Last name</label>
                  {{ form.last_name }}
                  {{ form.last_name.errors }}
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.phone.id_for_label }}">Phone</label>
                  {{ form.phone }}
                  {{ form.phone.errors }}
                </div>
              </div>
              <div class="col-12">
                <p class="form-label-outside">Shipping address</p>
              </div>
              <div class="col-12">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.address_line1.id_for_label }}">Street address</label>
                  {{ form.address_line1 }}
                  {{ form.address_line1.errors }}
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.address_line2.id_for_label }}">Apt / suite</label>
                  {{ form.address_line2 }}
                  {{ form.address_line2.errors }}
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.address_city.id_for_label }}">City</label>
                  {{ form.address_city }}
                  {{ form.address_city.errors }}
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.address_state.id_for_label }}">State</label>
                  {{ form.address_state }}
                  {{ form.address_state.errors }}
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.address_zip.id_for_label }}">ZIP</label>
                  {{ form.address_zip }}
                  {{ form.address_zip.errors }}
                </div>
              </div>
              <div class="col-12">
                <button class="button button-lg button-primary" type="submit">Save profile</button>
              </div>
            </div>
          </form>
{% endblock %}
{% block extra_js %}
<script src="{% static 'js/address-autocomplete.js' %}"></script>
{% endblock %}