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

{% block custom_head_css_js %}
    <link href="{% static "css/plugins/cropper/cropper.min.css" %}" rel="stylesheet">
    <link href="{% static "css/plugins/sweetalert/sweetalert.css" %}" rel="stylesheet">
    <script src="{% static "js/plugins/sweetalert/sweetalert.min.js" %}"></script>

    <style>
        .crop {
            width: 200px;
            height: 150px;
            overflow: hidden;
        }

        .img-preview-sm img {
            width: 64px;
            height: 64px;
            margin: -75px 0 0 -100px;
        }

        img {
            max-width: 100%; /* This rule is very important, please do not ignore this! */
        }
    </style>
{% 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>
                                <a href="{% url 'users:user-profile-update' %}" class="text-center">{% trans 'Profile' %} </a>
                            </li>
                            <li>
                                <a href="{% url 'users:user-password-update' %}" class="text-center">{% trans 'Password' %} </a>
                            </li>
                            <li class="active">
                                <a href="{% url 'users:user-pubkey-update' %}" class="text-center">{% trans 'Public key' %} </a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content" style="background-color: #ffffff">
                        <div class="wrapper wrapper-content animated fadeInRight">
                                <form method="post" class="form-horizontal" action="" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <h3>{% trans 'Old public key' %}</h3>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2 col-lg-2" style="padding-top: 0" >{% trans 'Name' %}</label>
                                        <div class=" col-sm-9 col-lg-9">
                                            <label>{{ user.public_key_obj.comment }}</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2 col-lg-2" style="padding-top: 0">{% trans 'Fingerprint' %}</label>
                                        <div class=" col-sm-9 col-lg-9 ">
                                            <label>{{ user.public_key_obj.hash_md5 }}</label>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <h3>{% trans 'Update public key' %}</h3>
                                    {% bootstrap_field form.public_key layout="horizontal" %}
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <div class="col-sm-4 col-sm-offset-2">
                                            <button class="btn btn-white" type="reset">{% trans 'Reset' %}</button>
                                            <button id="submit_button" class="btn btn-primary" type="submit">{% trans 'Submit' %}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}

{% block custom_foot_js %}
    <script src="{% static 'js/plugins/cropper/cropper.min.js' %}"></script>
    <script>
    </script>
{% endblock %}
