{% extends "base.html" %}

{% block title %}{{ target_user.username }}{% endblock title %}

{% block js %}
<script src="{{ url_for('static', path='/js/3p/jquery-3.7.0.min.js') }}"></script>
{% endblock js %}

{% block content %}
<div class="columns">
    <div class="column col-12">
        <h1>Manage User</h1>
    </div>
</div>
<div class="columns">
    <div class="column col-3"></div>
    <div class="column col-6">
        <div id="auth-error"></div>
        <div class="panel">
            <div class="panel-header text-center">
                <figure class="avatar avatar-lg"><img src="{{ url_for('static', path='/img/default-avatar.png') }}"
                        alt="Avatar"></figure>
                <div class="panel-title h5 mt-10">{{ target_user.username }}</div>
                <div class="panel-subtitle">
                    {% if target_user.is_superuser %}
                    <kbd>Administrator</kbd>
                    {% else %}
                    Normal User
                    {% endif %}
                    {% if not target_user.is_active %}
                    <s>Deactivated</s>
                    {% endif %}
                </div>
            </div>
            <nav class="panel-nav">
                <ul class="tab tab-block">
                    <li class="tab-item active">Profile</li>
                </ul>
            </nav>
            <div class="panel-body">
                <div class="tile tile-centered">
                    <div class="tile-content">
                        <div class="tile-title text-bold" id="username_label">Username</div>
                        <div class="tile-subtitle" id="username">{{ target_user.username }}</div>
                        <input type="hidden" id="user_guid" value="{{ target_user.id }}" />
                    </div>
                    <div class="tile-action">
                        <a class="btn btn-link btn-action btn-lg tooltip tooltip-left" data-tooltip="Change Username"
                            id="button_edit_username"><i class="icon icon-edit"></i></a>
                    </div>
                </div>
                <div class="tile tile-centered">
                    <div class="tile-content">
                        <div class="tile-title text-bold" id="email_label">E-mail</div>
                        <div class="tile-subtitle" id="email">{{ target_user.email }}</div>
                    </div>
                    <div class="tile-action">
                        <button class="btn btn-link btn-action btn-lg tooltip tooltip-left" data-tooltip="Change E-mail"
                            id="button_edit_email"><i class="icon icon-edit"></i></button>
                    </div>
                </div>
                <div class="tile tile-centered">
                    <div class="tile-content">
                        <div class="tile-title text-bold" id="password_label">Password</div>
                        <div class="tile-subtitle" id="password">***</div>
                    </div>
                    <div class="tile-action">
                        <button class="btn btn-link btn-action btn-lg tooltip tooltip-left"
                            data-tooltip="Change Password" id="button_edit_password"><i
                                class="icon icon-edit"></i></button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-checkbox form-inline">
                        <input type="checkbox" id="edit_active" {% if target_user.is_active %}checked{% endif %}><i
                            class="form-icon"></i> Active
                    </label>
                    <label class="form-checkbox form-inline">
                        <input type="checkbox" id="edit_superuser" {% if target_user.is_verified %}checked{% endif %}><i
                            class="form-icon"></i> Verified
                    </label>
                    <label class="form-checkbox form-inline">
                        <input type="checkbox" id="edit_superuser" {% if target_user.is_superuser %}checked{% endif
                            %}><i class="form-icon"></i> Administrator
                    </label>
                </div>
            </div>
            <div class="panel-footer">
                <button class="btn btn-primary btn-block" id="save_changes">Save</button>
            </div>
        </div>
    </div>
    <div class="column col-3"></div>
</div>
{% endblock content %}
{% block bottom_modals %}
{% include "modals/edit_field.html" %}
{% endblock bottom_modals %}
{% block bottomjs %}
<script src="{{ url_for('static', path='/js/edit.js') }}"></script>
<script src="{{ url_for('static', path='/js/user.js') }}"></script>
{% endblock bottomjs %}
