{% extends "base.html" %}
{% load ephios_crispy %}
{% load user_extras %}
{% load crispy_forms_filters %}
{% load crispy_forms_tags %}
{% load i18n %}
{% load static %}
{% load formset_tags %}

{% block title %}
    {% if userprofile %}
        {% trans "Edit user" %}
    {% else %}
        {% trans "Add new user" %}
    {% endif %}
{% endblock %}

{% block content %}
    <div class="page-header">
        {% if userprofile %}
            <h1>{% trans "Edit user" %}</h1>
        {% else %}
            <h1>{% trans "Add new user" %}</h1>
        {% endif %}
    </div>
    <form method="post" class="form">
        {% csrf_token %}
        {{ userprofile_form|crispy }}

        <div class="formset" data-formset data-formset-prefix="{{ qualification_formset.prefix }}">
            {{ qualification_formset.management_form }}
            <div class="card mb-2">
                <div class="card-body">
                    <h4 class="card-title">{% translate "Qualifications" %}</h4>
                    <ul class="list-group list-group-flush" data-formset-body>
                        {% for form in qualification_formset %}
                            <div class="list-group-item" data-formset-form>
                                {{ form.id }}
                                <div class="row align-items-center">
                                    <div class="col-md-5">
                                        <div class="row">
                                            <label for="{{ form.qualification.id_for_label }}"
                                                   class="col-md-4 col-form-label">{{ form.qualification.label }}</label>
                                            <div class="col-md-8">
                                                {{ form.qualification }}
                                                {% if form.fields.qualification.disabled %}
                                                    <span class="form-control-plaintext">{{ form.fields.qualification.title }}</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-1"></div>
                                    <div class="col-md-4">
                                        {% crispy_field form.expires label_class="col-md-4" field_class="col-md-8" wrapper_class="row" %}
                                    </div>
                                    <div class="col-md-1"></div>
                                    <div class="col-md-1">
                                        <button class="btn btn-link" type="button"
                                                data-formset-delete-button><span
                                                class="fas fa-trash-alt"></span> {% trans "Delete" %}</button>
                                    </div>
                                </div>
                                <div class="d-none">{{ form.DELETE }}</div>
                            </div>
                        {% endfor %}
                    </ul>

                    <input class="btn btn-secondary mt-2" type="button"
                           value="{% translate "Add qualification" %}"
                           data-formset-add>
                </div>
            </div>

            <script type="form-template" data-formset-empty-form>
                {% escapescript %}
                    <div class="list-group-item" data-formset-form>
                        <div class="row align-items-center">
                            <div class="col-md-5">
                                {% crispy_field qualification_formset.empty_form.qualification label_class="col-md-4" field_class="col-md-8" wrapper_class="row" %}
                            </div>
                            <div class="col-md-1"></div>
                            <div class="col-md-4">
                                {% crispy_field qualification_formset.empty_form.expires label_class="col-md-4" field_class="col-md-8" wrapper_class="row" %}
                            </div>
                            <div class="col-md-1"></div>
                            <div class="col-md-1">
                                <button class="btn btn-link" type="button"
                                        data-formset-delete-button><span
                                        class="fas fa-trash-alt"></span> {% trans "Delete" %}</button>
                            </div>
                        </div>
                        <div class="d-none">{{ qualification_formset.empty_form.DELETE }}</div>
                    </div>
                {% endescapescript %}
            </script>

            {% if userprofile %}
                <div class="card mb-2">
                    <div class="card-body">
                        <h4 class="card-title">{% translate "Password" %}</h4>
                        <a class="btn btn-secondary text-nowrap mt-1"
                           href="{% url "core:userprofile_password_reset" userprofile.pk %}">
                            {% trans "Reset password" %}</a>

                    </div>
                </div>
            {% endif %}
        </div>
        <input type="submit" value="{% trans "Save" %}" class="btn btn-primary float-end mt-1">
        <a role="button" class="btn btn-secondary mt-1"
           href="{% url "core:userprofile_list" %}">{% trans "Cancel" %}</a>
    </form>
{% endblock %}
