{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block custom_head_css_js %}
    <link href="{% static "css/plugins/sweetalert/sweetalert.css" %}" rel="stylesheet">
    <script src="{% static "js/plugins/sweetalert/sweetalert.min.js" %}"></script>
{% endblock %}
{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="panel-options">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="" class="text-center"><i class="fa fa-laptop"></i> {% trans 'Profile' %} </a>
                            </li>
                            <li class="pull-right">
                                <a class="btn btn-outline btn-default" href="{% url 'users:user-profile-update' %}"><i class="fa fa-edit"></i>{% trans 'Setting' %}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="col-sm-7" style="padding-left: 0;">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <span class="label label-primary"><b>{{ user.name }}</b></span>
                                    <div class="ibox-tools">
                                        <a class="collapse-link">
                                            <i class="fa fa-chevron-up"></i>
                                        </a>
                                        <a class="close-link">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <div class="text-left">
                                        <table class="table">
                                            <tr class="no-borders-tr">
                                                <td colspan="2">
                                                    <img src="{{ user.avatar_url }}" class="img-circle" width="64" height="64">
                                                </td>
                                            </tr>
                                            <tr class="no-borders-tr">
                                                <td class="text-navy">{% trans 'Username' %}</td>
                                                <td>{{ user.username }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'Name' %}</td>
                                                <td>{{ user.name }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'Role' %}</td>
                                                <td>{{ user.get_role_display }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'Email' %}</td>
                                                <td>{{ user.email }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'Active' %}</td>
                                                <td>{{ user.is_active|yesno:"Yes,No,Unkown" }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'OTP' %}</td>
                                                <td>{{ user.enable_otp|yesno:"Yes,No,Unkown" }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'Public key' %}</td>
                                                <td>
                                                    <table>
                                                        <tr>
                                                            <td>
                                                                {{ user.public_key_obj.comment }}
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                {{ user.public_key_obj.hash_md5 }}
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'Date joined' %}</td>
                                                <td>{{ user.date_joined|date:"Y-m-d H:i:s" }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'Last login' %}</td>
                                                <td>{{ user.last_login|date:"Y-m-d H:i:s" }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'Date expired' %}</td>
                                                <td>{{ user.date_expired|date:"Y-m-d H:i:s" }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'User groups' %}</td>
                                                <td>
                                                    <table>
                                                        {% for group in user.groups.all %}
                                                        <tr>
                                                        <td>
                                                            {{ group.name }}
                                                        </td>
                                                        </tr>
                                                        {% endfor %}
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'Perm assets' %}</td>
                                                <td>{{ assets | length }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-navy">{% trans 'Comment' %}:</td>
                                                <td><b>{{ user.comment }}</b></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-5" style="padding-left: 0;padding-right: 0">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <i class="fa fa-info-circle"></i> {% trans 'Quick modify' %}
                            </div>
                            <div class="panel-body">
                                <table class="table">
                                    <tbody>
                                    <tr class="no-borders-tr">
                                        <td>{% trans 'Reset password' %}:</td>
                                        <td>
                                            <span class="pull-right">
                                                <a type="button" class="btn btn-primary btn-xs" style="width: 54px" href="{% url 'users:user-password-update' %}">{% trans 'Reset' %}</a>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{% trans 'Reset SSH public key' %}:</td>
                                        <td>
                                            <span class="pull-right">
                                                <a type="button" class="btn btn-primary btn-xs" style="width: 54px" href="{% url 'users:user-pubkey-update' %}">{% trans 'Reset' %}</a>
                                            </span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block custom_foot_js %}
<script>
$(document).on('click', '#btn_update_pk', function() {
    var $this = $(this);
    var pk = $('#txt_pk').val();
    var the_url = '{% url "api-users:user-public-key-update" pk=user.id %}';
    var body = {'_public_key': pk};
    var success = function() {
        $('#txt_pk').val('');
        var msg = "{% trans 'Successfully updated the SSH public key.' %}";
        swal("{% trans 'User SSH public key update' %}", msg, "success");
    };
    var fail = function() {
        var msg = "{% trans 'Failed to update SSH public key.' %}";
        swal({
            title: "{% trans 'User SSH public key update' %}",
            text: msg,
            type: "error",
            showCancelButton: false,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "{% trans 'Confirm' %}",
            closeOnConfirm: true
            }, function () {
              $('#txt_pk').focus();
            }
        );
    }
    APIUpdateAttr({ url: the_url, body: JSON.stringify(body), success: success, error: fail});
})
</script>
{% endblock %}
