{% extends "base.html" %}

{%- block styles %}
  {{ super() }}
  <style type="text/css">
    {# use default button style if inactive #}
    .btn-group-toggle .btn-success, .btn-group-toggle .btn-danger {
      color: #333;
      background-color: #fff;
      border-color: #ccc;
    }
    .btn-group-toggle .btn-success.active {
      color: #fff;
      background-color: #449d44;
      border-color: #398439;
    }
    .btn-group-toggle .btn-danger.active {
      color: #fff;
      background-color: #c9302c;
      border-color: #ac2925;
    }
    .table-groups td:last-child {
      white-space: nowrap;
      width: 1%;
    }
  </style>
{%- endblock styles %}

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

  <form class="form" action="{{ url_for('register') }}" method="post">
    {{ form.csrf_token }}

    <table class="table table-hover table-groups">
      <thead>
        <tr>
          <td colSpan="3">
            {% set highlight_username = '<span class="text-info">' | safe + username + '</span>' | safe %}
            <h4>{{ "registration.subtitle" | i18n | format(username=highlight_username) | safe }}</h4>
          </td>
        </tr>
      </thead>
      <tbody>
        {% for rg in form.registrable_groups %}
          {% if rg['pending'] %}
            <tr class="{{ 'danger' if rg['member'] else 'active' }}">
              <td>
                <b class="text-muted">{{ rg['title'] }}</b>
              </td>
              <td>{{ rg['description'] | safe }}</td>
              <td><button type="button" class="btn btn-primary" disabled>{{ utils.render_icon('hourglass') }} {{ "registration.pending" | i18n }}</button>
            </tr>
          {% elif rg['member'] %}
            <tr class="success">
              <td>
                <b class="text-muted">{{ rg['title'] }}</b>
              </td>
              <td>{{ rg['description'] | safe }}</td>
              <td>
                <input type="checkbox" class="btn-check" id={{ rg['id'] }} autocomplete="off" name="unsubscribe_groups" value="{{ rg['id'] }}">
                <label class="btn btn-primary" for={{ rg['id'] }}>{{ utils.render_icon('dash-lg') }}{{ "registration.unsubscribe" | i18n }}</label>
              </td>
            </tr>
          {% else %}
            <tr>
              <td>
                <b class="text-muted">{{ rg['title'] }}</b>
              </td>
              <td>{{ rg['description'] | safe }}</td>
              <td>
                <input type="checkbox" class="btn-check" id={{ rg['id'] }} autocomplete="off" name="groups" value="{{ rg['id'] }}">
                <label class="btn btn-primary" for={{ rg['id'] }}>{{ utils.render_icon('plus-lg') }} {{ "registration.subscribe" | i18n }}</label>
              </td>
            </tr>
          {% endif %}
        {% endfor %}
      </tbody>
    </table>

    <input type="submit" value="{{ "registration.submit" | i18n }}" class="btn btn-primary">
  </form>
{% endblock %}
