{% 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;">
        <x-vbox>
            <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>
                    <x-buttonbox>
                        <a class="button" href="password">{% trans %}Change password{% endtrans %}</a>
                    </x-buttonbox>
                </section>
            </article>
            <article class="card">
                <section class="card-main">
                    <h2>{% trans %}Avatar{% endtrans %}</h2>
                    <x-vbox>
                        <label for="change-avatar" id="change-avatar-label" data-change-label="{% trans %}Change{% endtrans %}">
                            <img src="/info/{{ user.username }}/avatar" alt="{{ user.username }}" class="avatar" style="width: 100%;" id="avatarPreview">
                        </label>
                        <form method="post" enctype="multipart/form-data" action="/info/{{ user.username }}/avatar">
                            <input type="file" name="avatar" accept="image/*" style="display: none;" id="change-avatar" onchange="preview();">
                            <button type="submit">{% trans %}Update{% endtrans %}</button>
                        </form>
                    </x-vbox>
                </section>
                <script>
                    avatarPreview=document.getElementById("avatarPreview");

                    function preview() {
                        avatarPreview.src=URL.createObjectURL(event.target.files[0]);
                    }
                </script>
            </article>
            <article class="card">
                <section class="card-main">
                    <form method="post" action="profile">
                        <h2>{% trans %}Profile{% endtrans %}</h2>
                        <x-vbox>
                            <x-vbox class="nopad">
                                <label for="email">{% trans %}Email address{% endtrans %}</label>
                                <input id="email" name="email" type="email" value="{% if user.email %}{{ user.email }}{% endif %}">
                            </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="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 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>
            <article class="card">
                <section class="card-main">
                    <form method="post" action="preferences">
                        <h2>{% trans %}Preferences{% endtrans %}</h2>
                        {% trans username=user.username %}You can change themes by going to <a href="/{{ username }}/.config">your configuration repository</a> and pushing a CSS file called <code>theme.css</code>.{% endtrans %}
                        <x-vbox>
                            <x-vbox class="nopad">
                                <label for="page_length">{% trans %}Default number of items to show in paginated lists{% endtrans %}</label>
                                <input id="page_length" name="page_length" type="number" value="{{ user.default_page_length }}" min="1" max="256">
                            </x-vbox>
                            <x-vbox class="nopad">
                                <label for="max_post_nesting">{% trans %}Maximum nesting level for forum replies{% endtrans %}</label>
                                <input id="max_post_nesting" name="max_post_nesting" type="number" value="{{ user.max_post_nesting }}" min="1" max="256">
                            </x-vbox>
                            <button type="submit">{% trans %}Update preferences{% endtrans %}</button>
                        </x-vbox>
                    </form>
                </section>
            </article>
    </x-frame>
{% endblock %}