{% extends "manage/base.html" %}

{% block title %}Profile — Porchlight{% endblock %}

{% block manage_content %}
<h1>Profile</h1>

<section>
    <h2>Account</h2>
    <p><strong>Username:</strong> {{ username }}</p>
</section>

<section>
    <h2>Personal information</h2>
    <div id="profile-section">
        <form hx-post="/manage/profile" hx-target="#profile-status" hx-swap="innerHTML">
            <input type="hidden" name="csrf_token" value="{{ csrf_token_processor(request) }}">
            <div>
                <label for="given_name">Given name</label>
                <input type="text" id="given_name" name="given_name" value="{{ user.given_name or '' }}" maxlength="255" autocomplete="given-name">
            </div>
            <div>
                <label for="family_name">Family name</label>
                <input type="text" id="family_name" name="family_name" value="{{ user.family_name or '' }}" maxlength="255" autocomplete="family-name">
            </div>
            <div>
                <label for="preferred_username">Display name</label>
                <input type="text" id="preferred_username" name="preferred_username" value="{{ user.preferred_username or '' }}" maxlength="255" autocomplete="username">
            </div>
            <div>
                <label for="email">Email</label>
                <input type="email" id="email" name="email" value="{{ user.email or '' }}" maxlength="255" autocomplete="email">
            </div>
            <div>
                <label for="phone_number">Phone number</label>
                <input type="tel" id="phone_number" name="phone_number" value="{{ user.phone_number or '' }}" maxlength="50" autocomplete="tel">
            </div>
            <div>
                <label for="picture">Picture URL</label>
                <input type="url" id="picture" name="picture" value="{{ user.picture or '' }}" maxlength="2048" autocomplete="photo">
            </div>
            <div>
                <label for="locale">Locale</label>
                <input type="text" id="locale" name="locale" value="{{ user.locale or '' }}" maxlength="20" placeholder="e.g. en, sv-SE">
            </div>
            <div id="profile-status"></div>
            <button type="submit">Save profile</button>
        </form>
    </div>
</section>
{% endblock %}