{% extends 'base.html' %}

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

{% block title %}{{ page_title }}{% endblock %}

{% block content %}

    <section class="intro">
        {% if edit %}
                    <article>
            <h1>Update your Peopleoo profile</h1>
            <p>Update your name, employment and profile image below.</p>
        </article>
    {% else %}
        <article>
            <h1>Create your Peopleoo profile</h1>
            <p>Let’s start with some personal details.</p>
        </article>
    {% endif %}


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

            <div class="form-group">
                <p>
                    <label for="id_first_name" class="cursor-pointer">First name</label>
                </p>
                {{ form.first_name }}
            </div>

            <div class="form-group">
                <p>
                    <label for="id_middle_names" class="cursor-pointer">Middle name(s)</label>
                </p>
                {{ form.middle_names }}
            </div>

            <div class="form-group">
                <p>
                    <label for="id_last_name" class="cursor-pointer">Last name</label>
                </p>
                {{ form.last_name }}
            </div>
        
            <div class="form-group">
                <p>
                    <label for="id_preferred_name" class="cursor-pointer">Preferred name</label>
                </p>
                {{ form.preferred_name }}
            </div>

                    <div class="form-group">
                <label id="enabled_privacy_mode_label" for="id_enabled_privacy_mode" class="cursor-pointer">Privacy Mode: Tick the box below to hide your profile image and shorten your last name to its initial, making you less identifiable on Peopleoo.</label>
<input
    type="checkbox"
    class="visible opacity-100 indent-8 static"
    id="id_enabled_privacy_mode"
    name="enabled_privacy_mode"
    {% if form.enabled_privacy_mode.value %}checked{% endif %}
/>
            {% include 'components/form_field_errors.html' with field=form.enabled_privacy_mode %}
        </div>
        
        {% if not request.GET.signup %}

            <div class="form-group">
                <p>
                    <label for="id_employer_name" class="cursor-pointer">Employer name (If applicable)</label>
                </p>
                {{ form.employer_name }}
            </div>

            <div class="form-group">
                <p>
                    <label for="id_employer_email" class="cursor-pointer">Enter your employers email below if you would like them to automatically receive a copy of your Special Mentions.</label>
                </p>
                {{ form.employer_email }}
            </div>
            {% else %}
                                <!-- Hidden input field to pass along the signup parameter -->
            <input type="hidden" name="signup" value="{{ request.GET.signup }}">

        
        {% endif %}
        


            <div class="form-group">
                                {% if profile.avatar %}

                <figure class="block w-24 h-24">
                    <img
                            class="w-24 h-24 rounded-full"
                            src="{{ profile.avatar_thumbnail.url }}"
                            alt="Picture of {{ profile.user.first_name }} {{ profile.user.last_name }}"
                    />
                </figure>

            {% endif %}
                <p>
                    <label for="id_employer_email" class="cursor-pointer">Add{% if edit %} or change{% endif %} your profile picture</label>
                </p>
                {{ form.avatar }}
            </div>

            {% if form.errors %}
                <div class="form-group">
                <span class="error-msg">
                    {{ form.errors }}
                </span>
                    
                </div>
            {% endif %}

            <button class="btn btn-primary" type="submit">
                <span class="btn-text">{% trans 'Save profile' %}</span>
                <span class="white"></span>
            </button>

        </form>
    </section>
{% endblock %}