{% extends "base.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/profile.css' %}">
<div class="container-info">
  <div class="title-profile">
    <p>Welcome to your profile
      <span>{{ user.username }} !</span></p>
  </div>
  <div class="container-profile-first">
    <div class="img-profile">
      <div class="container-img-profile">
      </div>
    </div>
    <div class="info-profile">
      <p>{{ user.username }}</p>
      <p>{{ user.email }}</p>
      <p>{{ user.first_name }}</p>
      <p>{{ user.last_name }}</p>
      <button class="btn btn-change-form">Change information</button>
    </div>
  </div>

</div>
<div class="change-form">
  <div class="container-checkbox">
    <form method="post" class="registration-form">
      {% csrf_token %}
      {{ form.as_p }}
      <div class="checkbox-form">
        <div><a href="{% url 'authentication:subscribe' %}">Need to change your password ?</a></div>
      </div>
      <div class="container-submit">
        <button type="submit" class="btn btn-submit-change">Validate</button>
      </div>
    </form>
  </div>
</div>



<style>
  .container-info {
    background: url("{% static 'img/bg-profile.png' %}") no-repeat center;
    -webkit-background-size: cover;
  }

  .container-img-profile {
    background: url("{% static 'img/bg-profile.png' %}") no-repeat center;
    -webkit-background-size: cover;
  }
</style>



<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<script>
  //$('.btn-change-form').click(function(){
  //    $('.change-form').toggle(1000);
  //});

  $(".btn-change-form:last").click(function () {
    if ($('.change-form').is(":visible")) {
      $('.change-form').data("height", $('.change-form').height()).animate({
        height: 0
      }, function () { $(this).hide(); });
    } else {
      $('.change-form').show().animate({
        height: $('.change-form').data("height")
      });
    }
  });
</script>


{% endblock %}