{% extends 'layout.html' %}
{% block content %}
<div class="block columns">
    <div class="column is-half">
        <form name="edit-profile" action="/edit_profile/" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <h2 class="title">Profile</h2>
            <p class="block">
                <label class="label" for="id_avatar">Avatar:</label>
                {{ form.avatar }}
            </p>
            <p class="block">
                <label class="label" for="id_name">Display name:</label>
                {{ form.name }}
            </p>
            <p class="block">
                <label class="label" for="id_summary">Summary:</label>
                {{ form.summary }}
            </p>
            <p class="block">
                <label class="label" for="id_email">Email address:</label>
                {{ form.email }}
            </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 %}