{% extends "default.html" %}
{% block title %}
    User settings
{% endblock %}
{% block breadcrumbs %}
    <li><a href="/settings">Settings</a></li>
{% endblock %}
{% block content %}
    <x-frame style="--width: 768px;">
        <h1>User settings</h1>
        <article class="card">
            <section class="card-main">
                <h2>Basic information</h2>
                <p>Usermame: {{ user.username }}</p>
                <p>Email address: {{ user.email }}</p>
                <x-buttonbox>
                    <a class="button" href="password">Change password</a>
                    <a class="button" href="email">Change email</a>
                </x-buttonbox>
            </section>
        </article>
        <article class="card">
            <section class="card-main">
                <form method="post">
                    <h2>Profile</h2>
                    <x-vbox>
                        <x-vbox class="nopad">
                            <label for="displayname">Friendly name</label>
                            <input id="displayname" name="displayname" value="{% if user.displayName %}{{ user.displayName }}{% endif %}" placeholder="{{ user.username }}">
                        </x-vbox>
                        <x-vbox class="nopad">
                            <label for="url">Link to your website</label>
                            <input id="url" name="url" value="{% if user.URL %}{{ user.URL }}{% endif %}" type="url">
                        </x-vbox>
                        <x-vbox class="nopad">
                            <x-hbox style="width: 100%; align-items: space-between;">
                                <x-vbox style="flex-grow: 1;" class="nopad">
                                    <label for="company">Company or school</label>
                                    <input id="company" name="company" value="{% if user.company %}{{ user.company }}{% endif %}">
                                </x-vbox>
                                <x-vbox style="flex-grow: 1;" class="nopad">
                                    <label for="companyurl">Link to the company's website</label>
                                    <input id="companyurl" name="companyurl" value="{% if user.companyURL %}{{ user.companyURL }}{% endif %}" type="url">
                                </x-vbox>
                            </x-hbox>
                        </x-vbox>
                        <x-vbox class="nopad">
                            <label><input name="showmail" value="showmail" {% if user.showMail %}checked{% endif %} type="checkbox">Show email on my profile</label>
                        </x-vbox>
                        <x-vbox class="nopad">
                            <label for="location">Location</label>
                            <input id="location" name="location" value="{% if user.location %}{{ user.location }}{% endif %}" type="text">
                        </x-vbox>
                        <x-vbox class="nopad">
                            <label for="bio">Bio</label>
                            <textarea id="bio" name="bio" rows="4">{% if user.bio %}{{ user.bio }}{% endif %}</textarea>
                        </x-vbox>
                        <button type="submit">Update profile</button>
                    </x-vbox>
                </form>
            </section>
        </article>
    </x-frame>
{% endblock %}