{% load staticfiles %}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>{% block head_title %}{{ HURUMAP.name }}{% endblock %}</title>
  <meta name="description" content="{% block head_meta_description %}{% endblock %}">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {% block head_css %}
  <link rel="stylesheet" href="{{ STATIC_URL }}css/vendor/normalize.min.css">
  <link rel="stylesheet" href="{% static 'css/app.css' %}">
  <link rel="stylesheet" href="{% static 'css/hurumap.css' %}">
  <link href="https://fonts.googleapis.com/css?family=Lato|Poppins" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  {% block head_css_extra %}{% endblock %}{% endblock head_css %}
  {% block head_javascript %}
  <script src="//cdn.jsdelivr.net/g/modernizr@2.7,respond@1.4"></script>
  {% block head_javascript_extra %}{% endblock %}{% endblock %}
  <!-- Begin Google Analytics -->
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    {% if HURUMAP.ga_tracking_id %}
    ga('create', '{{ HURUMAP.ga_tracking_id }}', 'auto');
    ga('send', 'pageview');
    {% endif %}

    {% if HURUMAP.ga_tracking_ids %}
    {% for id in HURUMAP.ga_tracking_ids %}
    ga('create', '{{ id }}', 'auto');
    ga('send', 'pageview');
    {% endfor%}
    {% endif %}

  </script>
  <!-- End Google Analytics -->
  <link rel="shortcut icon" href="{{ STATIC_URL }}img/icons/favicon.ico" />
  <link rel="apple-touch-icon-precomposed" href="{{ STATIC_URL }}img/icons/touch-icon-144x144.png" sizes="144x144" />
  {% block head_facebook_tags %}{% endblock %}
  {% block head_twitter_tags %}{% endblock %}
  <!-- Page generated: {% now "Y-m-d H:i:s.u" %} -->
</head>
<body id="{% block body_id %}{% endblock %}" class="{% block body_class %}{% endblock %}">
  {% block body %}
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
            <![endif]-->

            {% block header %}
            <header id="page-header">
              <div id="page-header-title" class="wrapper clearfix">
                {% if not hide_nav_tools %}
                <i id="menu-toggle" class="fa fa-bars"></i>
                {% endif %}
                <a class="title" href="{% url 'homepage' %}">
                  {%block  logo%}

                  {% endblock %}
                </a>
                {% if not hide_nav_tools %}
                {% block nav_tools %}
                <div id="menu" class="tool-set clearfix">
                  <div class="tool-group">
                    <a href="/about" {%if about %} class="active"{%endif%}>About HURUmap {{about}}</a>
                  </div>
                  <div class="tool-group">
                    <a href="/howitworks" {%if howitworks%} class="active"{%endif%}>How HURUmap Works</a>
                  </div>
                  <div class="tool-group">
                    <a href="/topics" {%if topics%} class="active"{%endif%}>Topics</a>
                  </div>
                  <div class="tool-group">
                    <a href="/#page-footer">Contact</a>
                  </div>
                  <div class="tool-group search-section">
                    <input name="geography_select" id="geography-select" type="text" value="Search for a place in {{ HURUMAP.name }}" autocomplete="off" style=" height: 35px;border-radius: 0px;color: #084A49;font-size:16px;">
                  </div>
                  {% if not hide_nav_compare %}
                  {% comment %}
                  <span class="separator">or</span>
                  <div class="tool-group">
                    <a class="button" href="{% url 'table_search' %}">
                      <i class="fa fa-chevron-circle-right"></i>
                      Search for data
                    </a>
                  </div>
                  {% endcomment %}
                  {% endif %}
                </div>
                {% endblock %}
                {% endif %}
                <div class="header-buttons">
                  {% if HURUMAP.twitter %}
                  <a class="wide-only" href="https://twitter.com/{{ HURUMAP.twitter }}" title="{{ HURUMAP.twitter }} on Twitter" target="_blank"><i class="fa fa-2x fa-twitter"></i></a>
                  {% endif %}
                  {% block header_branding %}
                  <!--<a href="http://www.mediamonitoringafrica.org/" target="_blank">-->
                  <!--<img class="mma-logo" src="{% static 'img/mma.png' %}">-->
                  <!--</a>-->
                  {% endblock %}
                </div>
              </div>
            </header>
            {% block header_content %}{% endblock header_content %}
            {% endblock %}

            {% block content_container %}
            <div class="content-container wrapper clearfix">
              {% block content %}{% endblock %}
            </div>
            {% endblock %}


            <div class="content-container clearfix partners">
              <article class="clearfix wrapper">
                <section>
                  <div class="callout column-quarter">
                    <h3>Partners</h3>
                    <p>HURUmap has been made possible through support from the following partners:</p>
                  </div>
                  <div class="callout with-icon column-quarter">
                    <a href="https://codeforafrica.org/" target="_blank" rel="noopener noreferrer">
                      <img src="{% static 'img/cfafrica-logo.png' %}" style="max-height:80px; max-width:100%;">
                    </a>
                  </div>
                  <div class="callout with-icon column-quarter">
                    <a href="http://icfj.org" target="_blank" rel="noopener noreferrer">
                      <img src="{% static 'img/icfj-logo.png' %}" style="max-height:80px; max-width:100%;">
                    </a>
                  </div>
                  <div class="callout with-icon column-quarter">
                    {% block partner_logo %}
                    {% endblock %}
                  </div>
                </section>
              </article>
            </div>

            <footer id="page-footer">
              <section class="wrapper footer-container clearfix">
                {% block footer_content %}
                <div class="column-quarter">
                  <ul class="ul-icon-list">
                    <li>
                      <i class="fa fa-info"></i> <a href="/about">About HURUmap</a>
                    </li>
                    <li>
                      <i class="fa fa-twitter"></i> <a href="http://twitter.com/Code4Africa" target="_blank">@Code4Africa</a>
                    </li>
                    <li>
                      <i class="fa fa-pencil"></i> <a href="https://github.com/CodeForAfrica/" target="_blank">More Newstools</a>
                    </li>
                  </ul>

                  <ul class="ul-icon-list">
                    <li>
                      <i class="fa fa-check-square"></i> <a href="http://www.elections.org.za/" target="_blank">Elections data from the IEC</a>
                    </li>
                    <li>
                      <i class="fa fa-bar-chart-o"></i> <a href="http://www.statssa.gov.za/" target="_blank">Census 2011 data from Stats SA</a>
                    </li>
                  </ul>
                </div>
                <div class="column-quarter">
                  <ul class="ul-icon-list">
                    <li>
                      <i class="fa fa-th-list"></i> <a href="http://www.mediamonitoringafrica.org/" target="_blank">Media Monitoring Africa</a>
                    </li>
                    <li>
                      <i class="fa fa-envelope"></i> <a href="mailto:info@mma.org.za">Email us</a>
                    </li>
                  </ul>
                </div>
                <div class="column-quarter">
                  <ul class="ul-icon-list">
                    <li>
                      <i class="fa fa-github"></i> <a href="https://github.com/CodeForAfrica/HURUmap" target="_blank">HURUmap on Github</a>
                    </li>
                    <li>
                      <i class="fa fa-github"></i> Built on <a href="http://censusreporter.org" target="_blank">CensusReporter.org</a>
                    </li>
                  </ul>
                </div>
                <div class="column-quarter">
                  <ul class="ul-icon-list">
                    {% block footer_branding %}
                    <li>
                      <a href="http://www.mediamonitoringafrica.org/"><img class="mma-logo" src="{% static 'img/mma.png' %}"></a>
                    </li>
                    <li>
                      <a href="http://www.code4sa.org/"><img src="{% static 'img/code4sa-logo-small.png' %}"></a>
                    </li>
                    {% endblock %}
                  </ul>
                </div>
                {% endblock footer_content %}
              </section>
            </footer>
            {% endblock body %}

            {% include 'settings_js.html' %}

            {% block body_javascript %}
            <!--[if gte IE 9]><!-->
            <script src="//cdn.jsdelivr.net/g/jquery@2.1,d3js@3.4,typeahead.js@0.10.2(typeahead.bundle.min.js),underscorejs@1.6,spinjs@1.3,handlebarsjs@1.3(handlebars.min.js)"></script>
            <!--<![endif]-->

            <!-- local patched version of r2d3 handles percentage widths, HTML overlays -->
        <!--[if lte IE 8]>
        <script src="{{ STATIC_URL }}js/vendor/r2d3.js" charset="utf-8"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/aight/1.2.2/aight.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/aight/1.2.2/aight.d3.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <script src="//cdn.jsdelivr.net/g/typeahead.js@0.10.2(typeahead.bundle.min.js),underscorejs@1.6,spinjs@1.3,handlebarsjs@1.3(handlebars.min.js)"></script>
        <![endif]-->

        <!--[if lte IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.1/jquery.xdomainrequest.min.js"></script>
        <![endif]-->

        <script src="{% static 'js/app.js' %}"></script>
        <script src="{% static 'js/glossary.js' %}"></script>
        <script src="{% static 'js/widget.geo.select.js' %}"></script>
        {% block body_javascript_extra %}{% endblock %}{% endblock body_javascript %}
      </body>
      </html>
