{% extends 'get_started/layout.html' %}
{% load i18n %}

{% block panel %}
<div class="block">
    <h2 class="title is-4">{% trans "Create your profile" %}</h2>
    {% if form.non_field_errors %}
    <p class="notification is-danger">{{ form.non_field_errors }}</p>
    {% endif %}
    <form name="edit-profile" action="{% url 'get-started-profile' %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="columns">
            <div class="column is-two-thirds">
                <div class="block">
                    <label class="label" for="id_name">{% trans "Display name:" %}</label>
                    <input
                        type="text"
                        name="name"
                        maxlength="100"
                        class="input"
                        id="id_name"
                        placeholder="{{ user.localname }}"
                        value="{% if request.user.name %}{{ request.user.name }}{% endif %}"
                    >

                    {% include 'snippets/form_errors.html' with errors_list=form.name.errors id="desc_name" %}
                </div>
                <div class="block">
                    <label class="label" for="id_summary">{% trans "Summary:" %}</label>
                    <textarea
                        name="summary"
                        class="textarea"
                        id="id_summary"
                        placeholder="{% trans 'A little bit about you' %}"
                    >{% if request.user.summary %}{{ request.user.summary }}{% endif %}</textarea>

                    {% include 'snippets/form_errors.html' with errors_list=form.summary.errors id="desc_summary" %}
                </div>
            </div>

            <div class="column is-one-third">
                <div class="block">
                    <label class="label" for="id_avatar">{% trans "Avatar:" %}</label>
                    {{ form.avatar }}

                    {% include 'snippets/form_errors.html' with errors_list=form.avatar.errors id="desc_avatar" %}
                </div>
            </div>
        </div>
        <div class="block">
            <label class="checkbox label" for="id_manually_approves_followers">
                {% trans "Manually approve followers:" %}
                {{ form.manually_approves_followers }}
            </label>
        </div>
        <div class="block">
            <label class="checkbox label" for="id_discoverable">
                {% trans "Show this account in suggested users:" %}
                <input type="checkbox" name="discoverable" class="checkbox" id="id_discoverable" value="{{ request.user.discoverable }}">
            </label>
            {% url 'directory' as path %}
            <p class="help">{% trans "Your account will show up in the directory, and may be recommended to other BookWyrm users." %}</p>
        </div>
        <div class="block"><button class="button is-primary" type="submit">{% trans "Save &amp; continue" %}</button></div>
    </form>
</div>
{% endblock %}