{% extends "base.html" %}
{% block stylesheet %}
{{ block.super }}
<style>
  .invalid-feedback {
    display: block;
  }
</style>
{% endblock stylesheet %}
{% block tailscript %}
{{ block.super }}
    <script>
      $('.custom-file-input').on('change',function(){
          var fileName = $(this).get(0).files.item(0).name;
          $(this).next('.custom-file-label').html(fileName);
      })
  </script>
{% endblock tailscript %}
{% block title %}{% trans "Upload Profile Picture" %} - {{ block.super }}{% endblock title %}
{% block breadcrumb %}
<nav aria-label="breadcrumb" class="container">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url "homepage" %}">{% trans "Homepage" %}</a></li>
    <li class="breadcrumb-item"><a href="{% url "profile_settings" %}">{% trans "Profile Settings" %}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{% trans "Upload Profile Picture" %}</li>
  </ol>
</nav>
{% endblock breadcrumb %}
{% block content %}
<form action="" enctype="multipart/form-data" method="post" class="form" novalidate>
  {% csrf_token %}
  <fieldset>
    <legend>{% trans "Upload Profile Picture" %}</legend>
    {{ form|bootstrap_form }}
  </fieldset>
  <div class="form-group">
    <input type="submit" value="{% trans "Upload picture" %}" class="btn btn-primary" />
  </div>
</form>
{% endblock content %}
