<div class="container">
  <div class="modal fade and carousel slide wrap"
       id="creditsLightbox" data-ride="carousel"
       data-interval="{{ django_credits_delay }}" data-pause="none">
    <div class="modal-dialog">
      <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="gridModalLabel">Credits</h4>
        </div>
        <div class="modal-body">
          <div class="carousel-inner">
            {% for credit in credits %}
              <div class="item {% if forloop.first %} active {% endif %}">
                <div class="row">
                  <div class="col-sm-4 col-sm-offset-1 text-right">
                    <div id="creditHeadline">
                      {{ credit.headline }}
                    </div>
                  </div>
                  <div class="col-sm-6 col-sm-offset-4 text-left">
                    <div id="contributors">
                      <ul>
                        {% for contributor in credit.contributors.all %}
                          <li>
                            {{ contributor }}
                          </li>
                        {% endfor %}
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div><!-- /.carousel-inner -->
        </div><!-- /.modal-body -->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div><!-- /.container -->
