{% extends "base.html" %}
{% from "_macros.html" import error_list %}
{% block title %}Profile picture{% endblock %}
{% block content %}
<section class="card form auth-box">
  <p class="eyebrow">{% if role == 'parent' %}PARENT ACCOUNT{% else %}NANNY ACCOUNT{% endif %}</p>
  <h1>Profile picture</h1>
  <p class="muted">
    {% if role == 'nanny' %}
    Your picture is included on your profile when it is approved and visible to families.
    {% else %}
    Your picture is private and visible only to you.
    {% endif %}
  </p>
  {% if user.profile_image %}
  <img class="profile-picture-preview" src="{{ url_for('account_profile_photo') }}" alt="Your current profile picture">
  {% else %}
  <p class="muted">No profile picture uploaded yet.</p>
  {% endif %}
  {{ error_list(errors) }}
  <form method="post" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="field">
      <label for="profile_image">{% if user.profile_image %}Choose a replacement picture{% else %}Upload a clear profile picture{% endif %}</label>
      <input id="profile_image" name="profile_image" type="file" accept="image/jpeg,image/png,image/webp" capture="user" required>
      <small class="muted">JPG, PNG or WebP; at least 256 × 256 pixels and no larger than 5 MB.</small>
    </div>
    <button class="btn" type="submit">Save picture</button>
  </form>
</section>
{% endblock %}