{% extends 'layouts/layout_tcg.html' %}

{% block page_body %}
    <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/user_account.bundle.css') }}">
    
    {% set user = model.users[0] %}

    <form id="{{ model.ID_FORM_FILTERS }}" class="{{ model.FLAG_FILTER }} {{ model.FLAG_ROW }} {{ model.FLAG_CARD }}">
        {{ model.form_filters.hidden_tag() }}
        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
            <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
                <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_COLUMN }} {{ model.FLAG_FILTER }} {{ model.FLAG_SEARCH }}">
                    {{ model.form_filters.search.label }}
                    {{ model.form_filters.search() }}
                    {% for error in model.form_filters.search.errors %}
                        <p class="error">{{ error }}</p>
                    {% endfor %}
                </div>
                <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_COLUMN }} {{ model.FLAG_FILTER }} {{ model.FLAG_ACTIVE_ONLY }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.form_filters.active_only.data }}">
                    {{ model.form_filters.active_only.label }}
                    {{ model.form_filters.active_only() }}
                    {% for error in model.form_filters.active_only.errors %}
                        <p class="error">{{ error }}</p>
                    {% endfor %}
                    {% set class_name = model.FLAG_FILTER + ' ' + model.FLAG_ACTIVE_ONLY + ' ' + model.FLAG_CHECKBOX %}
                    {% include 'components/common/buttons/_icon_checkbox.html' %}
                </div>
            </div>
        </div>
    </form>

    <div class="{{ model.FLAG_SAVE }} {{ model.FLAG_CANCEL }} {{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
        <div class="{{ model.FLAG_ROW }}">
            <div class="{{ model.FLAG_COLUMN }}">
                <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                    {% set block_id = 'button_save' %}
                    {% include 'components/common/buttons/_buttons_save_cancel.html' %}
                </div>
            </div>
            <div class="{{ model.FLAG_COLUMN }}">
                <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                    {% set block_id = 'button_cancel' %}
                    {% include 'components/common/buttons/_buttons_save_cancel.html' %}
                </div>
            </div>
        </div>
    </div>

    <div class="{{ model.FLAG_USER }} {{ model.FLAG_CARD }} {{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}" {{ model.ATTR_USER_ID }}="{{ user.user_id }}">
        <div class="{{ model.FLAG_CONTAINER }}">
            <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
                <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_COLUMN }}">
                    <label for="{{ model.FLAG_FIRSTNAME }}">Firstname</label>
                    <input type="text" id="{{ model.FLAG_FIRSTNAME }}" name="{{ model.FLAG_FIRSTNAME }}" value="{{ user.firstname|escape }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ user.firstname|escape }}" />
                </div>
            </div>
            <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
                <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_COLUMN }}">
                    <label for="{{ model.FLAG_SURNAME }}">Surname</label>
                    <input type="text" id="{{ model.FLAG_SURNAME }}" name="{{ model.FLAG_SURNAME }}" value="{{ user.surname|escape }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ user.surname|escape }}" />
                </div>
            </div>
            <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_ROW }}">
                <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_COLUMN }}">
                    <label for="{{ model.FLAG_EMAIL }}">Email</label>
                    {# <input type="email" id="{{ model.FLAG_EMAIL }}" name="{{ model.FLAG_EMAIL }}" value="{{ user.email|escape }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ user.email|escape }}" /> #}
                    <div class="{{ model.FLAG_EMAIL }}">
                        {{ user.email|escape   }}
                    </div>
                </div>
            </div>
        </div>        
    </div>
    
    {% include 'components/common/temporary/_overlay_confirm.html' %}
    {% include 'components/common/temporary/_overlay_error.html' %}
    
    <div id="{{ model.ID_CONTAINER_TEMPLATE_ELEMENTS }}">
        <!-- Active column -->
        <!-- Delete -->
        {% set class_name = '' %}
        {% include 'components/common/buttons/_icon_trash.html' %}
        <!-- Undelete -->
        {% set class_name = model.FLAG_ACTIVE %}
        {% set attribute_text = '' %}
        {% include 'components/common/buttons/_icon_add.html' %}
    </div>

    <script>
        var flagCanAdminUser = "{{ model.FLAG_CAN_ADMIN_USER }}";
        var flagIsEmailVerified = "{{ model.FLAG_IS_EMAIL_VERIFIED }}";
        var flagIsSuperUser = "{{ model.FLAG_IS_SUPER_USER }}";
    </script>
{% endblock %}