="/profile/update"
        hx-post="/profile/update" hx-target="#profile-flash" hx-swap="innerHTML">
    <div class="card">
      <h2>details</h2>
      <div class="form-group" style="margin-bottom: 12px;">
        <label for="display_name">display name</label>
        <input class="input" type="text" id="display_name" name="display_name" value="{{ display_name }}" placeholder="how you want to be known">
      </div>
      <div class="form-group" style="margin-bottom: 14px;">
        <label for="email">email</label>
        <input class="input" type="email" id="email" name="email" value="{{ email }}">
      </div>
      <button type="submit" class="btn-fill">
        <span class="htmx-hide-on-request">save</span>
        <span class="htmx-indicator">saving...</span>
      </button>
    </div>
  </form>
  <div id="profile-flash"></div>

  <div class="card">
    <h2>password</h2>
    <p>passwords are managed by our identity provider.</p>
    <a href="{{ password_url }}" class="btn-fill" target="_blank" rel="noopener">change password</a>
  </div>

  {% if plan == "pro" %}
  <form method="post" action="/profile/update"
        hx-post="/profile/update" hx-target="#content-flash" hx-swap="innerHTML">
    <input type="hidden" name="display_name" value="{{ display_name }}">
    <input type="hidden" name="email" value="{{ email }}">
    <div class="card">
      <h2>content settings</h2>
      <div class="form-group" style="margin-bottom: 14px;">
        <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
          <input type="checkbox" name="content_expires" value="on"{% if content_expires %} checked{% endif %}>
          auto-expire content after 90 days
        </label>
        <p style="margin-top: 6px; font-size: 0.85em; color: var(--fg2);">uncheck to keep your txt and pics content indefinitely</p>
      </div>
      <button type="submit" class="btn-fill">
        <span class="htmx-hide-on-request">save</span>
        <span class="htmx-indicator">saving...</span>
      </button>
    </div>
  </form>
  <div id="content-flash"></div>
  {% endif %}

  <div class="card">
    <h2>account</h2>
    <div class="profile-field">
      <span class="profile-label">plan</span>
      <span>{{ plan }}</span>
    </div>
    <div class="profile-field">
      <span class="profile-label">id</span>
      <span>{{ sub }}</span>
    </div>
    <div class="profile-field">
      <span class="profile-label">member since</span>
      <span>{{ created_at }}</span>
    </div>
  </div>
</div>
{% endblock %}