{% import "bootstrap5/form.html" as wtf %}
{% extends "templates/base.html" %}

{% block scripts %}
{{super()}}
<script src="{{ url_for('static', filename='js/jquery.multi-select.js') }}"></script>
<script type="text/javascript">
  $(function() {
    // initialize multi-select
    $('#groups').multiSelectWithSearch({
      selectableHeader: '<div class="ms-header">{{ i18n('interface.common.groups') }}</div>',
      selectionHeader: '<div class="ms-header">{{ i18n('interface.common.assigned_groups') }}</div>'
    });
    $('#roles').multiSelectWithSearch({
      selectableHeader: '<div class="ms-header">{{ i18n('interface.common.roles') }}</div>',
      selectionHeader: '<div class="ms-header">{{ i18n('interface.common.assigned_roles') }}</div>'
    });
  });
</script>
{% endblock %}

{%- block styles %}
  {{ super() }}
  <link href="{{ url_for('static', filename='css/multi-select.css') }}" rel="stylesheet">
{%- endblock styles %}

{% block title %}{{ title }}{% endblock %}
{% block container %}
  <h1>{{ title }}</h1>

  <form class="form form-horizontal" action="{{ action }}" method="post">
    {% if method != 'POST' %}
      <input type="hidden" name="_method" value="{{method}}" />
    {% endif %}
    {{ form.csrf_token }}

    {{ wtf.render_field(form.name, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}
    {{ wtf.render_field(form.description, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}
    {{ wtf.render_field(form.email, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}

    {% if form.user_info.data | length > 1 %}
      <legend>{{ i18n('interface.users.user_info') }}</legend>
      {%- for subfield in form.user_info %}
        {% if not bootstrap_is_hidden_field(subfield) -%}
          {{ wtf.render_field(subfield, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}
        {%- endif %}
      {%- endfor %}
    {% endif %}

    <legend>{{ i18n('interface.users.authentication') }}</legend>
    {{ wtf.render_field(form.password, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}
    {{ wtf.render_field(form.password2, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}
    {% if form.totp_enabled %}
      {{ wtf.render_field(form.totp_secret, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}
    {% endif %}
    {{ wtf.render_field(form.last_sign_in_at, form_type="horizontal", horizontal_columns=('sm', 2, 5), disabled=True) }}
    {{ wtf.render_field(form.failed_sign_in_count, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}

    <legend>{{ i18n('interface.users.groups_roles') }}</legend>
    {{ wtf.render_field(form.groups, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}
    {{ wtf.render_field(form.roles, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}

    {{ wtf.render_field(form.submit, class="col-sm-offset-2 btn btn-primary") }}
    <button class="col-sm-offset-2 btn btn-danger" onclick="history.back()">Cancel</button>
  </form>
{% endblock %}
