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