{% extends "core/base.jinja" %}

{% block additional_js %}
  <script type="module" src="{{ static("bundled/club/role-list-index.ts") }}" xmlns="http://www.w3.org/1999/html"></script>
{% endblock %}

{% block additional_css %}
  <link rel="stylesheet" href="{{ static("club/roles.scss") }}">
{% endblock %}

{% macro display_subform(subform) %}
  <div
    class="row"
    x-data="{
            isPresidency: {{ subform.is_presidency.value()|lower }},
            isBoard: {{ subform.is_board.value()|lower }},
            roleId: {{ subform.id.value() }},
            }"
    x-sort:item="$data"
  >
    {# hidden fields #}
    {{ subform.ORDER }}
    {{ subform.id }}
    {{ subform.club }}
    {{ subform.is_presidency|add_attr("x-model=isPresidency") }}
    {{ subform.is_board|add_attr("x-model=isBoard") }}
    <i class="fa fa-grip-vertical" x-sort:handle></i>
    <details class="accordion grow" {% if subform.errors %}open{% endif %}>
      <summary>
        {{ subform.name.value() }}
        {% if not subform.instance.is_active -%}
          ({% trans %}inactive{% endtrans %})
        {%- endif %}
      </summary>
      <div class="accordion-content">
        {{ subform.non_field_errors() }}
        <div class="form-group">
          {{ subform.name.as_field_group() }}
        </div>
        <div class="form-group">
          {{ subform.description.as_field_group() }}
        </div>
        <div class="form-group">
          <div>
            {{ subform.is_active }}
            {{ subform.is_active.label_tag() }}
          </div>
          <span class="helptext">
            {{ subform.is_active.help_text }}
          </span>
        </div>
        {% set groups = subform.instance.linked_groups.all()|list %}
        {% if groups %}
          <div>
            <p>
              <strong>{% trans %}Linked groups : {% endtrans %}</strong>
              {{ groups|map(attribute="name")|join(", ") }}
            </p>
            <p class="helptext">
              {% trans trimmed %}
                Users receiving this role will also be assigned to those groups
              {% endtrans %}
            </p>
          </div>
        {% endif %}
      </div>
    </details>
  </div>
{% endmacro %}

{% block content %}
  <p>
    {% trans trimmed %}
      Roles give rights on the club.
      Higher roles grant more rights, and the members having them are displayed higher
      in the club members list.
    {% endtrans %}
  </p>
  <p>
    {% trans trimmed %}
      On this page, you can edit their name and description, as well as their order.
      You can also drag roles from a category to another
      (e.g. a board role can be made into a presidency role).
    {% endtrans %}
  </p>
  <form
    method="post"
    x-data="clubRoleList({ userRoleId: {{ user_role or "null" }} })"
    @submit="confirmSubmission"
  >
    {% csrf_token %}
    {{ form.management_form }}
    {{ form.non_form_errors() }}
    <h3>{% trans %}Presidency{% endtrans %}</h3>
    <a class="btn btn-grey margin-bottom" href="{{ url("club:new_role_president", club_id=club.id) }}">
      <i class="fa fa-plus"></i> {% trans %}add role{% endtrans %}
    </a>
    <details class="clickable margin-bottom">
      <summary>{% trans %}Help{% endtrans %}</summary>
      {# The style we use for markdown rendering is quite nice for what we want to display,
         so we are just gonna reuse it. #}
      <div class="markdown">
        <p>{% trans %}Users with a presidency role can :{% endtrans %}</p>
        <ul>
          <li>{% trans %}create new club roles and edit existing ones{% endtrans %}</li>
          <li>{% trans %}manage the club counters{% endtrans %}</li>
          <li>{% trans %}add new members with any active role and end any membership{% endtrans %}</li>
        </ul>
        <p>{% trans %}They also have all the rights of the club board.{% endtrans %}</p>
      </div>
    </details>
    <div
      x-sort="reorder($item, { isBoard: true, isPresidency: true })"
      x-sort:group="roles"
    >
      {% for subform in form %}
        {% if subform.is_presidency.value() %}
          {{ display_subform(subform) }}
        {% endif %}
      {% endfor %}
    </div>
    <br>
    <h3>{% trans %}Board{% endtrans %}</h3>
    <a class="btn btn-grey margin-bottom" href="{{ url("club:new_role_board", club_id=club.id) }}">
      <i class="fa fa-plus"></i> {% trans %}add role{% endtrans %}
    </a>
    <details class="clickable margin-bottom">
      <summary>{% trans %}Help{% endtrans %}</summary>
      <div class="markdown">
        <p>
          {% trans trimmed %}
            Board members can do most administrative actions in the club, including :
          {% endtrans %}
        </p>
        <ul>
          <li>{% trans %}manage the club posters{% endtrans %}</li>
          <li>{% trans %}create news for the club{% endtrans %}</li>
          <li>{% trans %}click users on the club's counters{% endtrans %}</li>
          <li>
            {% trans trimmed %}
              add new members and end active memberships
              for roles that are lower than their own.
            {% endtrans %}
          </li>
        </ul>
      </div>
    </details>
    <div
      x-sort="reorder($item, { isBoard: true, isPresidency: false })"
      x-sort:group="roles"
    >
      {% for subform in form %}
        {% if subform.is_board.value() and not subform.is_presidency.value() %}
          {{ display_subform(subform) }}
        {% endif %}
      {% endfor %}
    </div>
    <br>
    <h3>{% trans %}Members{% endtrans %}</h3>
    <a class="btn btn-grey margin-bottom" href="{{ url("club:new_role_member", club_id=club.id) }}">
      <i class="fa fa-plus"></i> {% trans %}add role{% endtrans %}
    </a>
    <details class="clickable margin-bottom">
      <summary>{% trans %}Help{% endtrans %}</summary>
      <div class="markdown">
        <p>{% trans %}Simple members cannot perform administrative actions.{% endtrans %}</p>
      </div>
    </details>
    <div
      x-sort="reorder($item, { isBoard: false, isPresidency: false })"
      x-sort:group="roles"
    >
      {% for subform in form %}
        {% if not subform.is_board.value() %}
          {{ display_subform(subform) }}
        {% endif %}
      {% endfor %}
    </div>
    <br>
    <p>
      <button type="submit" class="btn btn-blue">
        <i class="fa fa-check"></i>{% trans %}Save{% endtrans %}
      </button>
    </p>
  </form>
{% endblock content %}