{% load molly_utils %}{% load compressed %}{% load i18n %}{% get_current_language as LANGUAGE_CODE %}<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{ LANGUAGE_CODE }}" lang="{{ LANGUAGE_CODE }}">
{% comment %}
    Welcome to Molly's base.html. Virtually all pages in Molly inherit from this page.
    This page is divided into various blocks so that customisations are easy to override. 
    Because of this, it's rare that you will ever need to touch this file, but you may  
    want to refer to it to identify blocks to override.
    
    block list - indentation defines hierarchy
    ==========================================
    - whole_title (the entire title)
      - site_title (name of the site)
      - title (title of a single page which follows site_title)
    
    - extrahead
    
    - body
      - header
        - site_small_logo 
        - breadcrumb_0 
      - content 
      - bottom_links
{% endcomment %}

<head>
    {% comment %}
        The 'site_title' is typically over written by local customisations but otherwise defaults to 'molly |' 
        It then is followed by the 'title' which includes the last breadcrumb in a trail.   
    {% endcomment %}
    <title>{% block whole_title %}{% block site_title %}molly | {% endblock site_title %}{% block title %}{{ breadcrumbs.4 }}{% endblock title %}{% endblock whole_title %}</title>

    {% comment %}
        meta name='viewport' defines the viewport for devices which support it. Here we define that the viewport 
        is the width of the device and that the scale is fixed. Fixed (non user-scalable) scaling is important to 
        ensure that horizontal scrolling does not occur, which burdens the UX. 
        However - not all phones that support these tags support them in the same way. E.g. Opera Mobile.
    {% endcomment %}
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"/>

    {# The following stops certain browsers from turning strings of numbers into clickable phone numbers #}
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

    {# This is wrapped in an if to stop unit tests (which don't have style_group defined) failing #}
    {% if style_group %}
        {# Provide the minified CSS file appropriate to class of device #}
        {% compressed_css style_group %}
    {% endif %}
    
    {# If the device supports SVGs, add the following CSS file that gives SVG icons rather than .png #}
    {% if device|device_has_parent:"apple_iphone_ver4" or browser.svgt_1_1 %}
        {% compressed_css 'svg' %}
    {% endif %}

    {% comment %}
        meta name="apple-mobile-web-app-capable" enables 'web app mode' for Molly when saved as a home screen icon
        on either an Apple *or* Android. This depends on all requests from the home page onwards being made 
        using AJAX calls. Typically this removes a URL bar in the user's window. 
    
        apple-touch-icons are different sized icons for home screens on devices e.g. iPad, iPhone 4, iPhone 
        - some of these are also supported by other devices. We have set the size to 144px to match the iPad (3) 
        this means that all devices which use a lower resolution should just resize it down.
    
        apple-touch-startup-image is used as a splash screen for when a user clicks on the application's home
        screen icon. Under Apple's HCI guidelines, this should really be a greyed out screenshot of the first
        page of the User interface. 
    {% endcomment %}
        
    <link rel="apple-touch-icon" href="{{ STATIC_URL }}site/images/apple-touch-icon-144px.png"/>
    <link rel="apple-touch-startup-image" href="{{ STATIC_URL  }}site/images/apple-touch-startup-image.jpg">

    {# Favicon link #}
    <link rel="icon" type="image/png" href="{{ STATIC_URL }}site/images/favicon.png"/>
    
    {% if use_slippy_maps %}
    {# These devices get slippy maps #}
        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}leaflet/leaflet.css"/>
        <script type="text/javascript" src="{{ STATIC_URL }}leaflet/leaflet.js"></script>
    {% endif %} 
    
    {# Include ALL javascript (ignore filename) #}
    {% include "geolocation/js.html" %}

    {% comment %}
        extrahead is used when a particular child page needs extra tags in the head e.g. meta-refresh
        javascript should *not* be placed here. 
    {% endcomment %}
    {% block extrahead %}{% endblock extrahead %}
</head>


<body>
{% block body %}

    {# header consists of the breadcrumb trail #}
    {% block header %}
    
    {# Breadcrumbs for devices that are not featurephones #}
    {% ifnotequal style_group "dumb" %}
        <div id="bc-header">
          <ol id="bc">
          {# Breadcrumb home logo - override this in your own templates #}
          {% block site_small_logo %}
            <li><a href="{% url home:index %}" title="{% trans 'Home' %}">
              <img src="{{ STATIC_URL }}site/images/logo.png" width="42" height="30" alt="{% trans 'Home' %}"/>
            </a></li>
          {% endblock %}
          {% if breadcrumbs.parent %}
            <li><a href="{{ breadcrumbs.index.url }}" title="{{ breadcrumbs.index.title }}">
              <img src="{{ STATIC_URL }}site/images/index-icons/{{ breadcrumbs.application }}-bc.png" alt="{{ breadcrumb.index.title }}"/>
            </a></li>
            {% if not breadcrumbs.parent_is_index %}
              <li><a href="{{ breadcrumbs.parent.url }}" title="{{ breadcrumbs.parent.title }}">
                &hellip;
              </a></li>
            {% endif %}
          {% endif %}
          </ol> 
          <div id="bc-title">
            {# Title of the page #}
            <h1 class="{% if not breadcrumbs.parent %}{{ breadcrumbs.application }}-header with-icon{% endif %}">{{ breadcrumbs.page_title }}</h1>
            {# Include favourites if appropriate (defined in favourite.html) - a star is placed at the top right if so #}
            {% include "favourite.html" %}
          </div>
        </div>
    
    {# Breadcrumbs for featurephones #}
    {% else %}
        <div id="bc-header">
               <a href="{% url home:index %}">{% block breadcrumb_0 %}{% trans "Home" %}{% endblock %}</a>
           {% if breadcrumbs.parent %}
               / <a href="{{ breadcrumbs.index.url }}" title="{{ breadcrumbs.index.title }}">{{ breadcrumbs.index.title }}</a>
           {% if not breadcrumbs.parent_is_index %}
                / <a href="{{ breadcrumbs.parent.url }}" title="{{ breadcrumbs.parent.title }}">&hellip;</a>
           {% endif %}{% endif %}
             <div id="bc-title">
               <h1>{{ breadcrumbs.page_title }}</h1>
             </div>
             {% include "favourite.html" %}
         </div>
    {% endifnotequal %}
    {% endblock header %}

    <div class="content">

    {# content block for a child page's content #}
    {% block content %}
    {% endblock content %}
    
    {% comment %}
        The bottom_links block - 
        displayed on pages which have not opted out:
        provides links to 2D barcodes, short URLs, facebook sharing, feedback etc   
    {% endcomment %}
    {% if not hide_feedback_link %}
        <div id="bottom-links">
        {% block bottom_links %}
            {# Give all non-feature phones a stylised bunch of links #}
            {% ifnotequal style_group "dumb" %}
                
                {# As older Blackberry (RIM) devices have poor browsers we reduce button width and float each side #}
                  <div class="{% if device.brand_name == "RIM" %}rim-left{% else %}half-width{% endif %}">
                    
                    {# This stops links to feedback on the feedback page - causes an infinite loop! #}
                    <a href="{% url feedback:index %}?referer={% if feedback_referrer %}{{ feedback_referrer|urlencode }}{% else %}{{ full_path|urlencode }}{% endif %}">{% trans "Feedback" %}</a>
                  </div>
                  <div class="{% if device.brand_name == "RIM" %}rim-right{% else %}half-width{% endif %}">
                    <a href="{% url url_shortener:index %}?path={% if share_path %}{{ share_path|urlencode }}{% else %}{{ full_path|urlencode }}{% endif %}">{% trans "Share" %}</a>
                  </div>
                
                {% if "feature_vote"|app_is_loaded or "feature-suggestions"|app_is_loaded %}
                  <div class="{% if LANGUAGES|length != 2 %}full-width{% else %}half-width{% endif %}">
                    <a href="{% url feature_vote:index %}">{% trans "Suggest a feature" %}</a></div>
                {% endif %}
                
                {# If there are only two languages to switch between, show the switch here #}
                {% if LANGUAGES|length == 2 %}
                    <div class="half-width">
                    {% for language_code, language_name in LANGUAGES %}
                        {% if language_code != LANGUAGE_CODE %}
                            <form action="{% url set-language %}" method="post" class="has-ajax-handler">
                                <input type="hidden" name="next" value="{{ full_path|urlencode }}" />
                                {% csrf_token %}<a>
                                <button type="submit" name="language" value="{{ language_code }}">
                                {{ language_name }}
                                </button></a>
                            </form>
                        {% endif %}
                    {% endfor %}
                    </div>
                {% endif %}
                <div class="clear"> </div>
            
            {# Give a simple list for feature phones #}
            {% else %}
                <ul>
                    <li>
                        <a href="{% url feedback:index %}?referer={% if feedback_referrer %}{{ feedback_referrer|urlencode }}{% else %}{{ full_path|urlencode }}{% endif %}">{% trans "Feedback" %}</a>
                    </li>
                    <li>
                        <a href="{% url url_shortener:index %}?path={% if share_path %}{{ share_path|urlencode }}{% else %}{{ full_path|urlencode }}{% endif %}">{% trans "Share" %}</a>
                    </li>
                    {% if "feature_vote"|app_is_loaded or "feature-suggestions"|app_is_loaded %}
                        <li><a href="{% url feature_vote:index %}">{% trans "Suggest a feature" %}</a></li>
                    {% endif %}
                </ul>
            {% endifnotequal %}
        
            {% if LANGUAGES|length > 2 %}
		{% include "i18n/language_selector.html" %}
            {% endif %}
        {% endblock bottom_links %}
        </div>
    {% endif %}
    
</div>
{% endblock body %}

{% comment %}
Send Google Analytics javascript to all devices, if a key is set. GA is
more likely to run anywhere than our code, and there's no consequences if it
fails, so we include it everywhere
{% endcomment %}
{% if google_analytics %}
 <script type="text/javascript">
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', '{{ google_analytics|safe }}']);
 {% if use_javascript %}
    {# This code ties into Molly's AJAX framework #}
    $(document).bind('molly-page-change', function(e, url){_gaq.push(['_trackPageview', url]);});
 {% else %}
    _gaq.push(['_trackPageview']);
 {% endif %}
 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
</script>
{% endif %}

</body>
</html>
