{% extends theme('base.html') %}
{% import 'macro/form.html' as fui %}

{%- block title -%}
    {%- trans %}User creation{% endtrans -%}
{%- endblock -%}

{% block script %}
    <script src="/static/js/confirm.js"></script>
    <script src="/static/js/profile.js"></script>
{% endblock %}

{% block submenu %}
    <nav class="ui bottom attached {% if has_smtp %}three{% else %}two{% endif %} item borderless menu">
        <a class="item" href="{{ url_for('account.users') }}">
            <i class="th list icon"></i>
            {% trans %}View{% endtrans %}
        </a>
        <a class="active item" href="{{ url_for('account.profile_creation') }}">
            <i class="plus icon"></i>
            {% trans %}Add{% endtrans %}
        </a>
        {% if has_smtp %}
            <a class="item" href="{{ url_for('account.user_invitation') }}">
                <i class="paper plane icon"></i>
                {% trans %}Invite{% endtrans %}
            </a>
        {% endif %}
    </nav>
{% endblock %}

{% macro render_field(field, noindicator=false) %}
    {{ fui.render_field(field, **kwargs) }}
{% endmacro %}

{% block content %}
    <div class="ui clearing segment">
        <h2 class="ui center aligned header">
            <div class="content">
                {% trans %}User creation{% endtrans %}

            </div>
            <div class="sub header">
                {% trans %}Create a new user account{% endtrans %}
            </div>
        </h2>

        {% call fui.render_form(form, class_="profile-form info") %}
            <h4 class="ui dividing header">{% trans %}Personal information{% endtrans %}</h4>

            {% if "jpegPhoto" in form %}
                <div class="ui grid">
                    <div class="three wide column">
                        {% block photo_field scoped %}
                            {{ render_field(form.jpegPhoto, display=false, class="photo-field") }}
                            {{ render_field(form.jpegPhoto_delete, display=false, class="photo-delete-button") }}
                            <label
                                class="ui small bordered image photo-content"
                                for="{{ form.jpegPhoto.id }}"
                                title="{{ _("Click to upload a photo") }}"
                                style="display: none;">

                                <a class="ui right corner label photo-delete-icon" title="{{ _("Delete the photo") }}">
                                    <i class="times icon"></i>
                                </a>
                                <img src="" alt="User photo">
                            </label>
                            <label
                                class="ui centered photo-placeholder"
                                for="{{ form.jpegPhoto.id }}"
                                title="{{ _("Click to upload a photo") }}"
                                {% if photo %}style="display: none;"{% endif %}>
                                <i class="massive centered portrait icon"></i>
                            </label>
                        {% endblock %}
                    </div>

                    <div class="thirteen wide column">
            {% endif %}

            {% if "givenName" in form or "sn" in form %}
                <div class="equal width fields">
                    {% if "givenName" in form %}
                        {% block given_name_field scoped %}{{ render_field(form.givenName) }}{% endblock %}
                    {% endif %}

                    {% if "sn" in form %}
                        {% block sn_field scoped %}{{ render_field(form.sn) }}{% endblock %}
                    {% endif %}
                </div>
            {% endif %}

            {% if "displayName" in form %}
                {% block display_name_field scoped %}{{ render_field(form.displayName) }}{% endblock %}
            {% endif %}

            {% if "jpegPhoto" in form %}</div></div>{% endif %}

            {% if "mail" in form %}
                {% block mail_field scoped %}{{ render_field(form.mail) }}{% endblock %}
            {% endif %}

            {% if "telephoneNumber" in form %}
                {% block telephone_number_field scoped %}{{ render_field(form.telephoneNumber) }}{% endblock %}
            {% endif %}

            {% if "postalAddress" in form %}
                {% block postal_address_field scoped %}{{ render_field(form.postalAddress) }}{% endblock %}
            {% endif %}

            {% if "street" in form %}
                {% block street_field scoped %}{{ render_field(form.street) }}{% endblock %}
            {% endif %}

            <div class="equal width fields">
                {% if "postalCode" in form %}
                    {% block postal_code_field scoped %}{{ render_field(form.postalCode) }}{% endblock %}
                {% endif %}

                {% if "l" in form %}
                    {% block locality_field scoped %}{{ render_field(form.l) }}{% endblock %}
                {% endif %}

                {% if "st" in form %}
                    {% block region_field scoped %}{{ render_field(form.st) }}{% endblock %}
                {% endif %}
            </div>

            <div class="equal width fields">

                {% if "departmentNumber" in form %}
                    {% block department_number_field scoped %}{{ render_field(form.departmentNumber) }}{% endblock %}
                {% endif %}

                {% if "employeeNumber" in form %}
                    {% block employee_number_field scoped %}{{ render_field(form.employeeNumber) }}{% endblock %}
                {% endif %}

            </div>

            <div class="equal width fields">

                {% if "title" in form %}
                    {% block title_field scoped %}{{ render_field(form.title) }}{% endblock %}
                {% endif %}

                {% if "o" in form %}
                    {% block organization_field scoped %}{{ render_field(form.o) }}{% endblock %}
                {% endif %}

            </div>

            {% if "labeledURI" in form %}
                {% block labeled_uri_field scoped %}{{ render_field(form.labeledURI) }}{% endblock %}
            {% endif %}

            {% if "preferredLanguage" in form %}
                {% block preferred_language_field scoped %}{{ render_field(form.preferredLanguage) }}{% endblock %}
            {% endif %}

            <h4 class="ui dividing header">{% trans %}Account information{% endtrans %}</h4>

            {% if "uid" in form %}
                {% block uid_field scoped %}{{ render_field(form.uid) }}{% endblock %}
            {% endif %}

            {% if "groups" in form %}
                {% block groups_field scoped %}{{ render_field(form.groups) }}{% endblock %}
            {% endif %}

            {% if "password1" in form %}
                {% block password_field scoped %}
                    <div class="two fields">
                        {{ render_field(form.password1, noindicator=true) }}
                        {{ render_field(form.password2, noindicator=true) }}
                    </div>
                {% endblock %}
            {% endif %}

            {% if user.can_manage_users %}


                <div class="ui message info">
                    <div class="header">
                        {% trans %}User password is not mandatory{% endtrans %}
                    </div>
                    {% if has_password %}
                        <p>{% trans %}The user password can be set:{% endtrans %}</p>
                        <ul class="ui list">
                            <li>{% trans %}by filling this form;{% endtrans %}</li>
                            <li>{% trans %}by sending the user a password initialization mail, after the account creation;{% endtrans %}</li>
                            <li>{% trans %}or simply waiting for the user to sign-in a first time, and then receive a password initialization mail.{% endtrans %}</li>
                        </ul>
                    {% else %}
                        <p>
                            {% if has_smtp %}
                                {% trans %}The user will not be able to authenticate unless the password is set, but they will be able to ask for a password initialization mail.{% endtrans %}
                            {% else %}
                                {% trans %}The user will not be able to authenticate unless the password is set.{% endtrans %}
                            {% endif %}
                        </p>
                    {% endif %}
                </div>

            {% endif %}

            <div class="ui right aligned container">
                <div class="ui stackable buttons">
                    <button type="submit" class="ui right floated primary button" name="action" value="edit" id="edit">
                        {{ _("Submit") }}
                    </button>
                </div>
            </div>
        {% endcall %}
    </div>
{% endblock %}
