{% extends "base.html" %}
{% load static thumbnail %}
{% block extra_css %}
{{block.super}}
<style>
.tabs-container {
 padding: 0 1.5rem;
}
.tabs-container {
 position: relative;
}
.tabs-container::before {
 content: "";
 display: block;
 bottom: 0;
 left: 0;
 height: 1px;
 width: 100%;
 background: #dbdbdb;
 position: absolute;
}
.tabs a {
 padding: 0.5rem 0;
 margin-right: 1.5rem;
 color: white;
 margin-bottom: 0;
 border-color: #0073ea !important;
 border-width: 2px;
}
.tabs a:hover {
 color: white;
 border-bottom-color: white !important;
}
.tabs .is-active a {
 color: white !important;
 border-bottom-color: white !important;
}
.avatar {
 border: 3px solid rgba(255,255,255,0.6);
}
.avatar label {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.65);
 display: none;
 padding: 1rem;
 align-items: center;
 text-align: center;

}
.avatar:hover label {
 display: inline-flex;
}

</style>
{% endblock %}
{% block content %}
<section class="section p-0 has-background-link has-text-white" style="background:#0073ea !important;">
  <div class="container has-text-centered pt-6 pb-3">
    <figure class="avatar image is-128x128 mt-5 mb-2" style="border-radius:99px;overflow:hidden;margin:0 auto;">
     {% if user.avatar %}
     {% thumbnail user.avatar "128x128" crop="center" as im %}
     <img src="{{im.url}}" />
     {% endthumbnail %}
     {% else %}
     <svg width="128" height="128" class="has-background-white" data-jdenticon-value="{{user.email}}"></svg>
     {% endif %}
     <form method="post" enctype="multipart/form-data" action="/accounts/update_avatar/?redirect={{request.get_full_path}}">
       {% csrf_token %}
       <label for="id_avatar" style='justify-content:center;'><span>修改头像</span></label>
       <input name="avatar" id="id_avatar" type="file" class="is-hidden" accept="image/*" />
     </form>
   </figure>
   <div class="content">
     <p class="is-size-3 has-text-light" >{{user.username|upper}}</p>
   </div>
 </div>
 <div class="tabs is-centered">
  <ul>
   <li {% if request.path == "/accounts/profile/" %}class="is-active"{% endif %}><a href="/accounts/profile/">基础信息</a></li>
   <li {% if request.path == "/accounts/email/" %}class="is-active"{% endif %}><a href="/accounts/email/">邮箱设置</a></li>
   <li {% if request.path == "/accounts/password/set/" %}class="is-active"{% endif %}><a href="/accounts/password/change/">修改密码</a></li>
 </ul>
</div>
</section>
<section class="section pt-5" >
  <div class="container" style="max-width:600px;">
    {#<h1 class="subtitle">{% block subtitle %}{{title}}{% endblock %}</h1>#}
    {% include "messages.html" %}
    {% block inner %}
    <form method="post" style="max-width:600px;">
     {% csrf_token %}
      {{form}}
     <div class="field is-grouped mt-6" >
       <p class="control" >
         <button type="submit" class="button is-primary" >保存</button>
       </p>
       <p class="control" >
         <button data-goback class="button" >取消</button>
       </p>
     </div>
   </form>
   {% endblock %}
 </div>
</section>
{% endblock %}
{% block extra_js %}
{{block.super}}
<script>
document.getElementById("id_avatar").addEventListener("change", (e) => {
 e.target.closest("form").submit()
})
</script>
{% endblock %}
