<section id="admin-myaccount">
    <h2>My Account</h2>

    <form id="admin-myaccount-form" method="post" action="/admin?change=account">
        <label for="admin-myaccount-username">Username: </label>
        <input id="admin-myaccount-username" type="text" name="username" value="{{ user.name }}" /><br/>

        <label for="admin-myaccount-email">E-Mail: </label>
        <input id="admin-myaccount-email" type="text" name="email" value="{% if user.email is not none %}{{ user.email }}{% endif %}" /><br/>

        <label for="admin-myaccount-ismember">Member: </label>
        <input id="admin-myaccount-ismember" type="checkbox" disabled="disabled" {% if user.is_member %} checked="checked" {% endif %}/><br/>

        <label for="admin-myaccount-isadmin">Admin: </label>
        <input id="admin-myaccount-isadmin" type="checkbox" disabled="disabled" {% if user.is_admin %} checked="checked" {% endif %}/><br/>

        <input type="submit" value="Save changes" />
    </form>
</section>

<section id="admin-avatar">
    <h2>Avatar</h2>

    <form id="admin-avatar-form" method="post" action="/admin?change=avatar" enctype="multipart/form-data">
        <img src="/img/thumbnails/users/{{ user.id }}.png" alt="Avatar of {{ user.name }}" /><br/>

        <label for="admin-avatar-avatar">Upload new file: </label>
        <input id="admin-avatar-avatar" type="file" name="avatar" accept="image/png" /><br/>

        <input type="submit" value="Save changes" />
    </form>
</section>

<section id="admin-password">
    <h2>Password</h2>

    <form id="admin-password-form" method="post" action="/admin?change=password">
        <label for="admin-password-oldpass">Current password: </label>
        <input id="admin-password-oldpass" type="password" name="oldpass" /><br/>

        <label for="admin-password-newpass">New password: </label>
        <input id="admin-password-newpass" type="password" name="newpass" /><br/>

        <label for="admin-password-newpass2">Repeat password: </label>
        <input id="admin-password-newpass2" type="password" name="newpass2" /><br/>

        <input type="submit" value="Save changes" />
    </form>
</section>

<section id="admin-touchkey">
    <h2>Touchkey</h2>

    <form id="admin-touchkey-form" method="post" action="/admin?change=touchkey">
        <label for="admin-touchkey-oldpass">Current password: </label>
        <input id="admin-touchkey-oldpass" type="password" name="oldpass" /><br/>

        Draw a new touchkey (leave empty to disable):
        <br/>
        {% include "touchkey.svg" %}
        <br/>
        <input id="admin-touchkey-touchkey" type="hidden" name="touchkey" value="" />

        <input type="submit" value="Save changes" />
    </form>

    <script src="/js/touchkey.js" ></script>
    <script>
        initTouchkey(true, 'touchkey-svg', null, 'admin-touchkey-touchkey');
    </script>
</section>