{% extends 'base.html' %}

{% load i18n %}
{% load widget_tweaks %}

{% block title %}{% trans "Profile Avatar - Step 6" %}{% endblock %}

{% block content %}

    <article class="mt-12">

        <h1 class="text-3xl">
          One last thing...
        </h1>

        <p class="mt-2">
          We’d love if you upload a recent image of yourself!
        </p>

    </article>

    <form class="mt-8" method="post" enctype='multipart/form-data'>
        {% csrf_token %}

        <div class="mt-5 relative h-52 overflow-hidden">
          <label
              for="id_avatar"
              class="absolute top-0 left-0 bottom-0 right-0 border border-body/10 focus:border-body/60 bg-bgColor rounded-lg cursor-pointer"
          ></label>
          {{ form.avatar|add_class:"w-auto absolute top-2/4 left-2/4 transform -translate-x-2/4 -translate-y-2/4 cursor-pointer"|attr:"placeholder:Upload an image" }}
        </div>

        <button
            type="submit"
            class="btn mt-10 w-full bg-body text-white p-3 rounded-md cursor-pointer"
        >
            Show me my profile!
        </button>

    </form>

{% endblock %}