{% extends "base_bootstrap.html" %}
{% block title %}Change profile image{% endblock %}
{% block content %}


<div class="container-fluid h-100">
  <div class="row justify-content-center align-items-center h-100">
    <div class="col-lg-4 col-md-6 col-sm-12">

      {% if form.errors %}
        <p class="error">Sorry, that's not a valid profile image.</p>
      {% endif %}
      <h1>Change your profile image</h1>
      {% if request.user.profile.image %}
        <img src="{{ request.user.profile.image.url }}" alt="Current profile image" class="img-fluid mb-3">
      {% endif %}
      <div class="form-group">
        <form action="{% url "change_profile_image" %}" method="post" enctype="multipart/form-data" id="changeprofileimageform">
          {% csrf_token %}
          {{ form.as_p }}
          <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Submit</button>

        </form>

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

{% endblock %}