{% extends "layout.html" %}

{% block content %}
  <div>
    <a href="{% url 'register-group' %}"><button class="button button-first">Add a Group</button></a>
  </div>
  <div class="listing l-three header">
      <span>Description</span>
      <span>Category</span>
      <span>Registration Link</span>
  </div>
  <hr/>
  {% for group in groups %}
    <div class="listing l-three">
      <span>
        <p><a href="{{group.url}}">{{group.name}}</a></p>
        <p><span>{{group.description}}</span></p>
      </span>
      <span><span class="badge badge_{{group.category}}"><a href="/groups/{{group.category}}">{{group.category_name}}</a></span></span>
      <span><a href="{{group.registration_url}}">Join the {{group.reg_type}}</a></span>
    </div>
    <hr/>
  {% empty %}
  <p>Oh no! There are no groups currently registered. Try checking out <a href="{% url 'newsletters' %}">some newsletters</a>.</p>
  {% endfor %}
{% endblock %}