{% extends 'base.html' %}
{% block title %}Edit {{ profile.callsign }} Profile{% endblock %}
{% block content %}
<section class="narrow terminal-card">
  <p class="eyebrow">USER PROFILE / EDIT</p>
  <h1>Edit {{ profile.callsign }}</h1>
  <form method="post" enctype="multipart/form-data" class="form-grid">
    <input type="hidden" name="csrf_token" value="{{ session.csrf_token }}">
    <label>Profile photo
      <input type="file" name="profile_photo" accept="image/png,image/jpeg,image/gif,image/webp">
      <small>PNG, JPEG, GIF, or WebP. Images are resized to fit within 128 × 128 pixels. A new upload replaces the current photo.</small>
    </label>
    {% if profile.profile_photo_filename %}<img class="profile-photo profile-photo-preview" src="{{ url_for('users.profile_photo',user_id=profile.id) }}" alt="Current profile photo" width="128" height="128">{% endif %}
    <label>Tagline<input name="tagline" maxlength="120" value="{{ profile.tagline }}"></label>
    <label>About me<textarea name="about" maxlength="2000" rows="8">{{ profile.about }}</textarea></label>
    <label>Birthday<input type="date" name="birthday" value="{{ profile.birthday or '' }}"></label>
    <label>Gender<input name="gender" maxlength="40" value="{{ profile.gender }}"></label>
    <div class="button-row"><button>UPDATE MY PROFILE</button><a class="button secondary" href="{{ url_for('users.profile',user_id=profile.id) }}">RETURN TO PROFILE</a></div>
  </form>
</section>

<section class="narrow terminal-card settings-section" id="change-password">
  <p class="eyebrow">USER PROFILE / SECURITY</p>
  <h2>Change password</h2>
  <p class="muted">Confirm your existing password before choosing a new one.</p>
  <form method="post" action="{{ url_for('users.change_password',user_id=profile.id) }}" class="form-grid">
    <input type="hidden" name="csrf_token" value="{{ session.csrf_token }}">
    <label>Existing password<input type="password" name="current_password" required autocomplete="current-password"></label>
    <label>New password<input type="password" name="new_password" minlength="10" maxlength="128" required autocomplete="new-password"></label>
    <label>Confirm new password<input type="password" name="confirm_password" minlength="10" maxlength="128" required autocomplete="new-password"></label>
    <div class="button-row"><button>CHANGE PASSWORD</button></div>
  </form>
</section>
{% endblock %}