{% load i18n %}
<div class="groups-box">
  <div class="groups-header">
    <span class="groups-title">{% trans "Groups" %}</span>
    <a class="btn btn-xs pull-right colorbox-form" href="{% url "crm_add_contact_to_group" contact.id %}">
      <span class="glyphicon glyphicon-plus"></span> {% trans "Add to a group" %}
    </a>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="data-groups">
        {% for g in contact.entity.group_set.all %}
          <span class="group-tag btn btn-xs btn-gray" title="{{g.description}}">
            {% spaceless %}
            <a href="{% url 'search_group' g.id %}" class="group-name">{{g.name}}</a>&nbsp;
            <span class="glyphicon glyphicon-remove disabled"></span>
            {% endspaceless %}
          </span>
        {% endfor %}
        {% for g in contact.group_set.all %}
          <span
              class="group-tag btn btn-xs{% if not g.background_color %} btn-primary{% endif %}"
              style="{% if g.fore_color %}color: {{ g.fore_color }}; {% endif %}{% if g.background_color %}background: {{ g.background_color }}; {% endif %}"
              title="{{g.description}}"
            >
            {% spaceless %}
            <a href="{% url 'search_group' g.id %}" class="group-name">{{g.name}}</a>&nbsp;
              <a class="colorbox-form btn-close" href="{% url 'crm_remove_contact_from_group' g.id contact.id %}" title="{% trans 'Remove from group' %}">
                <span class="glyphicon glyphicon-remove"></span>
              </a>
            {% endspaceless %}
          </span>
        {% endfor %}

        {% for s in contact.subscription_set.all %}
          {% if s.accept_subscription %}
          <span class="group-tag btn btn-xs btn-danger">
            {% spaceless %}
            <span class="glyphicon glyphicon-send"></span> {{s.subscription_type.name}}
            {% endspaceless %}
          </span>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>