{% extends "InvenTree/settings/settings.html" %}

{% block tabs %}
{% include "InvenTree/settings/tabs.html" with tab='user' %}
{% endblock %}

{% block settings %}

<div class='row'>
    <div class='col-sm-6'>
        <h4>User Information</h4>
    </div>
    <div class='col-sm-6'>
        <div class='btn-group' style='float: right;'>
            <div class='btn btn-primary' type='button' id='edit-user' title='Edit User Information'>Edit</div>
            <div class='btn btn-primary' type='button' id='edit-password' title='Change Password'>Set Password</div>
        </div>
    </div>
</div>    

<table class='table table-striped table-condensed'>
    <tr>
        <td>Username</td>
        <td>{{ user.username }}</td>
    </tr>
    <tr>
        <td>First Name</td>
        <td>{{ user.first_name }}</td>
    </tr>
    <tr>
        <td>Last Name</td>
        <td>{{ user.last_name }}</td>
    </tr>
    <tr>
        <td>Email Address</td>
        <td>{{ user.email }}</td>
    </tr>
</table>

{% endblock %}

{% block js_ready %}
{{ block.super }}

    $("#edit-user").on('click', function() {
        launchModalForm(
            "{% url 'edit-user' %}",
            {
                reload: true,
            }
        );
    });

    $("#edit-password").on('click', function() {
        launchModalForm(
            "{% url 'set-password' %}",
            {
                reload: true,
            }
        );
    });

{% endblock %}