{% extends "base.html" %}

{% block title %}{{ _('Basic Group') }} #{{ group.id }}: {{ group.name | get_translated_text }} — {{ service_name }}{% endblock %}

{% block stylesheets %}
  {{ super() }}
    <link rel="stylesheet" href="{{ fingerprinted_static('bootstrap-select/css/bootstrap-select.min.css') }}" />
{% endblock %}

{% block content %}
  {% set allowed_language_ids = [] %}
  {% for language in languages %}
    {{ allowed_language_ids.append(language.id) or '' }}
  {% endfor %}
  <h1>{{ _('Basic Group') }} #{{ group.id }}: {{ group.name | get_translated_text }}</h1>
  {% if basic_group_categories %}
    <p>
      <strong>{{ _('Categories') }}:</strong>
      {% for category in basic_group_categories %}
        {%- if not loop.first %}, {% endif -%}
        {%- for category_name in category_names[category.id] -%}
          {%- if not loop.first %} / {% endif -%}
          {{ category_name | get_translated_text(default=_('Unnamed Category')) }}
        {%- endfor -%}
      {% endfor %}
    </p>
  {% endif %}
  <p>{{ group.description | get_translated_text }}</p>
  <h2>{{ _('Members') }}</h2>
  <ul>
    {% for user_id in group_member_ids %}
      <li>
        {{ user_reference(user_id) }}
        {% if not current_user.is_readonly %}
        {% if remove_group_member_form and user_id != current_user.id %}
        <form method="post" style="display: inline;margin-left:0.5em" action="{{ url_for('.group', group_id=group.id) }}" id="removeGroupMember{{ user_id }}Form">
          {{ remove_group_member_form.csrf_token() }}
          <button type="submit" class="btn btn-danger btn-xs" name="remove_member" value="{{ user_id }}">{{ _('Remove') }}</button>
        </form>
        {% endif %}
        {% endif %}
      </li>
    {% endfor %}
  </ul>
  <div class="button-row">
  {% if show_objects_link %}
    <div class="btn-group">
      <a href="{{ url_for('.objects', group=group.id) }}" class="btn btn-default">{{ _('View Objects') }}</a>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">{{ _('Toggle Dropdown') }}</span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="{{ url_for('.objects', group=group.id, group_permissions='READ') }}">{{ _('… with <b>READ</b> permissions') }}</a></li>
        <li><a href="{{ url_for('.objects', group=group.id, group_permissions='WRITE') }}">{{ _('… with <b>WRITE</b> permissions') }}</a></li>
        <li><a href="{{ url_for('.objects', group=group.id, group_permissions='GRANT') }}">{{ _('… with <b>GRANT</b> permissions') }}</a></li>
      </ul>
    </div>
  {% endif %}
  {% if show_invitation_log %}
    {% with all_invitations = group_invitations %}
      {% include "invitation_log.html" %}
    {% endwith %}
  {% elif group_invitations %}
    {% with pending_invitations = group_invitations %}
      {% include "pending_invitations.html" %}
    {% endwith %}
  {% endif %}
  {% if not current_user.is_readonly %}
  {% if edit_group_form %}
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editGroupModal">{{ _('Edit Basic Group') }}</button>
  {% endif %}
  {% if invite_user_form %}
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#inviteUserModal">{{ _('Invite User') }}</button>
  {% endif %}
  {% endif %}
  {% if leave_group_form %}
  <form method="post" style="display: inline" action="{{ url_for('.group', group_id=group.id) }}" id="leaveGroupForm">
    {{ leave_group_form.csrf_token() }}
    <button type="submit" class="btn btn-danger" name="leave" value="leave">{{ _('Leave Basic Group') }}</button>
  </form>
  {% endif %}
  {% if not current_user.is_readonly %}
  {% if delete_group_form %}
  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteGroupModal">{{ _('Delete Basic Group') }}</button>
  {% endif %}
  </div>

  {% if edit_group_form %}
  <div class="modal fade" id="editGroupModal" tabindex="-1" role="dialog" aria-labelledby="editGroupModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="editGroupModalLabel">{{ _('Edit Basic Group') }}</h4>
        </div>

        <div class="hidden" id="name-template">
          <div class="input-group" data-language-id="">
            <input type="text" class="form-control" id="input-name-" placeholder="{{ _('Name') }}" data-name="input-name" value="" data-translation-attribute="name" data-empty-text="{{ _('Please enter a group name.') }}" data-max-length="100" data-max-length-text="{{ _('Please enter a shorter group name (at most 100 characters).') }}">
            <span class="input-group-addon language-addon" data-name="language" style="margin-right: 5px"></span>
          </div>
          <span class="help-block"></span>
        </div>

        <div class="hidden" id="description-template">
          <div class="input-group" data-language-id="" style="padding-bottom: 10px">
            <textarea class="form-control" style="resize: vertical; min-height:2.5em;" id="" data-name="input-description" placeholder="{{ _('Description') }}" data-translation-attribute="description"></textarea>
            <span class="input-group-addon language-addon" data-name="language" style="margin-right: 5px"></span>
          </div>
          <span class="help-block"></span>
        </div>
        <form method="post" action="{{ url_for('.group', group_id=group.id) }}">
          {{ edit_group_form.csrf_token() }}
          <div class="modal-body">
              <div class="form-group" data-name="input-names">
                  <div class="form-group row" style="padding-right: 10px; margin-bottom: 0;">
                      <label for="select-language-name" class="control-label col-sm-8" style="margin-top: 5px">{{ _("Name") }}</label>
                      <select class="selectpicker btn-xs select-language col-sm-4 {% if allowed_language_ids | length <= 1 %}hidden{% endif %}" multiple="multiple" data-style="btn-default btn-xs" id="select-language-name">
                          {% for language in languages %}
                              <option value="{{ language.id }}" {% if language.id == ENGLISH.id %} disabled="disabled" selected="selected"{% endif %} {% if language.id in name_language_ids %} selected="selected" {% endif %} data-name="{{ language.names | get_translated_text }}">{{ language.names | get_translated_text }}</option>
                          {% endfor %}
                      </select>
                  </div>
                  {% for translation in translations %}
                  {% if translation.language_id in allowed_language_ids %}
                      {% if translation['name'] != '' %}
                          <div class="{% if allowed_language_ids | length > 1 %}input-group{% endif %} {% if edit_group_form.translations.errors and translation.language_id == ENGLISH.id %}has-error{% endif %}" data-language-id="{{ translation.language_id }}">
                            <input type="text" class="form-control" id="input-name-{{ translation.language_id}}" placeholder="{{ _('Name') }}" data-name="input-name" value="{{ translation.name }}" data-translation-attribute="name" data-empty-text="{{ _('Please enter a group name.') }}" data-max-length="100" data-max-length-text="{{ _('Please enter a shorter group name (at most 100 characters).') }}">
                            {% if allowed_language_ids | length > 1 %}
                              <span class="input-group-addon language-addon" data-name="language">{{ translation.lang_name }}</span>
                            {% endif %}
                          </div>
                          <span class="help-block"></span>
                      {% endif %}
                    {% endif %}
                  {% endfor %}
                  {% for error_message in edit_group_form.translations.errors %}<span class="help-block" style="color: red">{{ error_message }}</span>{% endfor %}
              </div>

            <div class="form-group" data-name="input-descriptions" style="padding-top: 10px">
                  <div class="form-group row" style="padding-right: 10px; margin-bottom: 0">
                    <label for="select-language-description" class="control-label col-sm-8" style="margin-top: 5px">{{ _("Description") }}</label>
                    <select class="selectpicker btn-xs select-language col-sm-4 {% if allowed_language_ids | length <= 1 %}hidden{% endif %}" multiple="multiple" data-style="btn-default btn-xs" id="select-language-description">
                      {% for language in languages %}
                        <option value="{{ language.id }}" {% if language.id == ENGLISH.id %} disabled="disabled" selected="selected"{% endif %} {% if language.id in description_language_ids %} selected="selected" {% endif %} data-name="{{ language.names | get_translated_text }}">{{ language.names | get_translated_text }}</option>
                      {% endfor %}
                    </select>
                  </div>
                {% for translation in translations %}
                  {% if translation.language_id in allowed_language_ids %}
                  {% if translation['description'] != '' or translation.language_id == ENGLISH.id  %}
                    <div {% if allowed_language_ids | length > 1 %}class="input-group"{% endif %} data-language-id="{{ translation.language_id }}" style="margin-bottom: 10px">
                      <textarea class="form-control" style="resize: vertical; min-height:2.5em;" id="input-description-{{ translation.language_id }}" data-name="input-description" placeholder="{{ _('Description') }}" data-translation-attribute="description">{{ translation.description }}</textarea>
                      {% if allowed_language_ids | length > 1 %}
                        <span class="input-group-addon language-addon" data-name="language">{{ translation.lang_name }}</span>
                      {% endif %}
                    </div>
                    <span class="help-block"></span>
                  {% endif %}
                  {% endif %}
               {% endfor %}
              </div>
            {% if group_categories %}
              <div class="form-group">
                <label for="select-categories" class="control-label">{{ _("Categories") }}</label>
                <select class="selectpicker form-control" multiple="multiple" id="select-categories" name="{{ edit_group_form.categories.name }}" data-none-selected-text="{{ _('No category selected') }}">
                  {% for category in group_categories %}
                    <option value="{{ category.id }}" {% if category in basic_group_categories %}selected="selected"{% endif %}>
                      {%- for category_name in group_category_names[category.id] -%}
                        {%- if not loop.first %} / {% endif -%}
                        {{ category_name | get_translated_text(default=_('Unnamed Category')) }}
                      {%- endfor -%}
                    </option>
                  {% endfor %}
                </select>
              </div>
            {% endif %}
          </div>
          <input type="hidden" id="input-translations" name="{{ edit_group_form.translations.name }}" value="">


          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{{ _('Cancel') }}</button>
            <button type="submit" class="btn btn-primary" name="edit" value="edit">{{ _('Save') }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  {% endif %}

  {% if invite_user_form %}
  <div class="modal fade" id="inviteUserModal" tabindex="-1" role="dialog" aria-labelledby="inviteUserModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="inviteUserModalLabel">{{ _('Invite User') }}</h4>
        </div>
        <form method="post" action="{{ url_for('.group', group_id=group.id) }}" class="form-horizontal">
          {{ invite_user_form.csrf_token() }}
          <div class="modal-body">
            <div class="form-group">
              <label for="inviteUserId" class="col-sm-2 control-label">{{ _('User') }}</label>
              <div class="col-sm-10">
                <select class="selectpicker" name="{{ invite_user_form.user_id.name }}" id="inviteUserId" data-width="100%" data-live-search="true">
                {% for user in get_users(exclude_hidden=True, exclude_fed=True, exclude_eln_import=True) | sort(attribute='name') %}
                  {% if user.id not in group_member_ids %}
                    <option value="{{ user.id }}" {% if invite_user_form.user_id.data == user_id %}selected="selected"{% endif %}>{{ user.get_name() }}</option>
                  {% endif %}
                {% endfor %}
                </select>
              </div>
            </div>
            {% if current_user.is_admin %}
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" name="{{ invite_user_form.add_directly.name }}"> {{ _('Add user directly, without sending an invitation') }}
                    </label>
                  </div>
                </div>
              </div>
            {% endif %}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{{ _('Cancel') }}</button>
            <button type="submit" class="btn btn-primary" name="add_user" value="add_user">{{ _('Invite User') }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  {% endif %}

  {% if delete_group_form %}
  <div class="modal fade" id="deleteGroupModal" tabindex="-1" role="dialog" aria-labelledby="deleteGroupModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="deleteGroupModalLabel">{{ _('Delete Basic Group') }}</h4>
        </div>
        <form method="post" action="{{ url_for('.group', group_id=group.id) }}" id="deleteGroupForm" class="form-horizontal">
          {{ delete_group_form.csrf_token() }}
          <div class="modal-body">
            {{ _('Are you certain you want to delete this basic group?') }}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{{ _('Cancel') }}</button>
            <button type="submit" class="btn btn-danger" name="delete" value="delete">{{ _('Delete Basic Group') }}</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  {% endif %}
  {% endif %}
{% endblock %}

{% block template_values %}
  {% set language_info_languages = [] %}
  {% for lang in languages %}
    {% do language_info_languages.append({"id": lang.id | string, "name": lang.names | get_translated_text, "lang_code": lang.lang_code}) %}
  {% endfor %}
  {% do set_template_value("language_info.languages", language_info_languages) %}
  {% do set_template_value("language_info.english_id", ENGLISH.id) %}

  {% do set_template_value("translations", translations) %}
  {% do set_template_value("translations.invite_user", _('Invite User')) %}
  {% do set_template_value("translations.add_user", _('Add User')) %}
  {% do set_template_value("name_language_ids", name_language_ids) %}
  {% do set_template_value("description_language_ids", description_language_ids) %}
  {% do set_template_value("show_edit_form", show_edit_form) %}

  {{ super() }}
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="{{ fingerprinted_static('bootstrap-select/js/bootstrap-select.min.js') }}"></script>
  <script src="{{ fingerprinted_static('sampledb/js/page/group.js') }}" type="module"></script>
{% endblock %}