{% extends 'base.html' %}
{% load static from staticfiles %}

{% block title %}
Info | {{ block.super }}
{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/leaflet.css' %}" />
{% endblock %}

{% block content %}
  <style>
    .anchor{
      display: block;
      height: 80px; /*same height as header*/
      margin-top: -80px; /*same height as header*/
      visibility: hidden;
    }

    .sub-anchor{
      display: block;
      height: 94px; /*same height as header*/
      margin-top: -94px; /*same height as header*/
      visibility: hidden;
    }
  </style>

  {% if categories %}
    <div class="row">
      <div class="col-md-12">
        <h3>Table of Contents</h3>
        <p class="list-group">
          {% for category in categories %}
            <a href="#{{ category.anchor }}" class="list-group-item">{{ category.headline }}</a>
          {% endfor %}
        </p>
      </div>
    </div>

    {% for category in categories %}
      <span class="anchor" id="{{ category.anchor }}"></span>
      <div class="row">
        <div class="col-md-12">
        <h2>{{ category.title }}</h2>
          <div class="panel-group">
            {% for item in category.infoitems.all %}
              <div class="panel panel-default">
                <div class="panel-heading">
                  <span class="sub-anchor" id="{{ item.anchor }}"></span>
		  <h4 class="panel-title">{{ item.headline }}
                    <a href="#{{ item.anchor }}">
                      <i class="glyphicon glyphicon-link"></i>
                    </a>
                  </h4>
                </div>
                <div class="panel-body">
                  <p>{{ item.body }}</p>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    {% endfor %}
  {% else %}
    <h3>No info found for {{ camp.title }}</h3>
  {% endif %}
{% endblock %}