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

{% block title %}Account{% endblock %}

{% block content %}

<hr>


        <a href="/" class="btn btn-lg btn-primary mt-2">   <i class="fas fa-home"></i> Home</a>
        {% include 'message.html' %}

<hr>


<div class="container">
 
     <div class="row">
         <div class="col-md-8">
            <div class="p-3" style=" background-color:white;border-radius:10px;box-shadow: 0px 0px 10px 0px #000;">
              <div class="row">
                  <div class="col-md-3 ">
                    <img id="profile-pic" src="{{user.profile.profile_img.url}}">
                  </div>
                  <div class="col-md-4 mt-4">
                    <h1><strong>{{user.username}}</strong></h1>
                      <p><strong>{{user.email}}</strong></p>
                  </div>
              </div>
                <hr>
                <h4 class="text-center">Profile Informaion</h4><hr>
             <form method="POST" enctype="multipart/form-data" >
                 {% csrf_token %}
         
                 {{defaultForm|crispy}}

               
                 {{customForm|crispy}}
               
                 <button type="submit" name="profile_edit" class="btn btn-info">Update Information</button>
             
             </form>
            </div>
         </div>


         <div class="col-md-4">

     <div  class="p-3" style=" background-color:white;border-radius:10px;box-shadow: 0px 0px 10px 0px #000;">
        <h4 class="text-center">Change Password</h4><hr>
        <form method="POST">
            {% csrf_token %}
    
            {{PassForm|crispy}}
        
            <button type="submit" name="change_pass_button" class="btn btn-block btn-info">Change Password</button>
        
        </form>

     </div>
         </div>
     </div>

    

</div >
<div>


    <style>

        body{
            background-color:#F8F8F8!important;
        }
        
        #profile-wrapper{
            text-align: center;
        }
        
        #profile-pic{
            width:150px;
            height: 150px;
            border-radius: 50%;
            margin-left: auto;
              margin-right: auto;
        }
    </style>
    
</div>




{% endblock %}