{% extends 'layout.html' %}
{% block content %}
<div class="block columns">
    <div class="column is-half">
        <h2 class="title">Profile</h2>
        {% if form.non_field_errors %}
        <p class="notification is-danger">{{ form.non_field_errors }}</p>
        {% endif %}
        <form name="edit-profile" action="/edit_profile/" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <p class="block">
                <label class="label" for="id_avatar">Avatar:</label>
                {{ form.avatar }}
                {% for error in form.avatar.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}
            </p>
            <p class="block">
                <label class="label" for="id_name">Display name:</label>
                {{ form.name }}
                {% for error in form.name.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}
            </p>
            <p class="block">
                <label class="label" for="id_summary">Summary:</label>
                {{ form.summary }}
                {% for error in form.summary.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}
            </p>
            <p class="block">
                <label class="label" for="id_email">Email address:</label>
                {{ form.email }}
                {% for error in form.email.errors %}
                <p class="help is-danger">{{ error | escape }}</p>
                {% endfor %}
            </p>
            <p class="block">
                <label class="checkbox label" for="id_manually_approve_followers">
                    Manually approve followers:
                    {{ form.manually_approves_followers }}
                </label>
            </p>
            <button class="button is-primary" type="submit">Save</button>
        </form>
    </div>
    <div class="column is-half">
        <div class="block">
            <h2 class="title">Change password</h2>
            <form name="edit-profile" action="/change-password/" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <p class="block">
                    <label class="label" for="id_password">New password:</label>
                    <input type="password" name="password" maxlength="128" class="input" required="" id="id_password">
                </p>
                <p class="block">
                    <label class="label" for="id_confirm_password">Confirm password:</label>
                    <input type="password" name="confirm-password" maxlength="128" class="input" required="" id="id_confirm_password">
                </p>
                <button class="button is-primary" type="submit">Change password</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}