{% load switch %}

{% if contacts %}    
    <h3>Contact Details</h3>
    
    <ul class="vcard">
        {% for c in contacts %}
            <li class="{{ c.kind.slug }}">

                {% switch c.kind.slug %}
    
                    {% case 'phone' %}
                        <span class="label">Tel:</span>
                        <p><a href="tel:{{ c.value }}">{{ c.value }}</a></p>
                        
                    {% case 'facebook' %}
                        <span class="label">Link:</span>
                        <p><a href="{{ c.value }}">{{ c.kind.name }}</a></p>
                        
                    {% case 'twitter' %}
                        <span class="label">Link:</span>
                        <p><a href="http://twitter.com/{{ c.value }}">@{{ c.value }}</a> on Twitter</p>
                        
                    {% case 'address' %}
                        <span class="label">Post:</span>
                        <p>{{ c.value|urlizetrunc:50 }}</p>

                    {% case 'parliament_url' %}
                    {# Suppress these as requested in issue #444 #}

                    {% else %}
                        <span class="label">{{ c.kind.name }}:</span>
                        <p>{{ c.value|urlizetrunc:50 }}</p>
        
                {% endswitch %}
    
                {% if c.notes %}<small>({{ c.notes }})</small>{% endif %}
    
            </li>
        {% endfor %}
    </ul>
{% endif %}
{% load switch %}

{% if contacts %}
  <section>
    <h1>Contact Details</h1>
    
    <ul class="vcard">
        {% for c in contacts %}
            <li class="{{ c.kind.slug }}">

                {% switch c.kind.slug %}
    
                    {% case 'phone' %}
                        <span class="label">Tel:</span>
                        <p><a href="tel:{{ c.value }}">{{ c.value }}</a></p>
                        
                    {% case 'facebook' %}
                        <span class="label">Link:</span>
                        <p><a href="{{ c.value }}">{{ c.kind.name }}</a></p>
                        
                    {% case 'twitter' %}
                        <span class="label">Link:</span>
                        <p><a href="http://twitter.com/{{ c.value }}">@{{ c.value }}</a> on Twitter</p>
                        
                    {% case 'address' %}
                        <span class="label">Post:</span>
                        <p>{{ c.value|urlizetrunc:50 }}</p>

                    {% case 'parliament_url' %}
                    {# Suppress these as requested in issue #444 #}

                    {% else %}
                        <span class="label">{{ c.kind.name }}:</span>
                        <p>{{ c.value|urlizetrunc:50 }}</p>
        
                {% endswitch %}
    
                {% if c.notes %}<small>({{ c.notes }})</small>{% endif %}
    
            </li>
        {% endfor %}
    </ul>
  </section>
{% endif %}

Put contact details in a <section>.
Put contact details in a <section>.

Given we want to be able to include this in various places and always
have the right rank of heading, it makes sense to use a section with
<h1>.

I realise in the short term this is going to require some CSS tidying.
