{% extends "base.html" %}
{% load static %}
{% load cms_tags sekizai_tags i18n %}

{% block title %}{{ campaign.name }}{% endblock %}

{% block base_head_extra %}

{% comment %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.3/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.ie.css" /><![endif]-->
{% endcomment %}

<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.3/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.ie.css" /><![endif]-->

<link href='{{ STATIC_URL }}css/leaflet.label.css' rel='stylesheet' />

<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />

<!-- <link href="{{ STATIC_URL }}css/sitedetail.css" media="screen" rel="stylesheet" type="text/css" /> -->

<link href="{{ STATIC_URL }}css/map.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><link href="{{ STATIC_URL }}css/map_ie.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->

<style>
    /*#leafletmap { position:absolute; top:0; bottom:0; width:100%; left:0; right:0; z-index:0;}*/

    #member-list {
        /*position:absolute;*/
        /*top:0; right:0; width:200px;*/
        /*bottom:0;*/
        /*overflow-x:auto;*/
        /*background:#fff;*/
        margin:0;
        padding:5px;
    }
    #member-list li {
        padding:2px;
        margin:0;
        list-style-type:none;
    }
    #member-list li:hover {
        background: #cee7ff;
    }

    .tag {
        padding:2px 4px;
        background-color: #ccc;
        border-radius: 4px;
    }
</style>

<script type="text/javascript">

    System.import('{% static "js" %}/categorydetail').then(function(CategoryDetail) {
        $(function() {
            window['categorydetail'] = new CategoryDetail.CategoryDetail($('#leafletmap'));
        });
    });

</script>
{% endblock %}

{% block base_body_content %}
<div id="leafletmap" style="position:absolute; top:0; bottom:0; left:0; right:0; z-index:0;"></div>

<div style="z-index:2; padding-left:60px; padding-top:1px; position:relative; background-color:#fff; background-color:rgba(255,255,255,0.7);">
    <h6 style="color:#666; text-transform:uppercase; margin-right:20px; padding-bottom:0; margin-bottom:0;">Category</h6>
    <p class="heading" style="margin:0px; padding:0; font-size:32px; line-height:38px;color:#de744a;">
        {{ category.name }}
    </p>

    <h5 style="color:#666;">{% if category.details.summary %}
        {{ category.details.summary|safe }}
    {% endif %}</h5>
</div>

<div id="leftcol" style="position:absolute; top:0; bottom:0; width:34%; min-width:350px; margin-top:120px;">
    <div class="sidebar_item_title">Description</div>
    <div class="sidebar_item_content" style="background-color:rgba(255,255,255,0.7); height:90%; width:100%; overflow-y:auto; padding-left:34px;">
        {% if category.details.description %}
            <p>
                {{ category.details.description|safe }}
            </p>
            <div style="clear:both;"></div>
        {% endif %}
    </div>
</div>
<div id="rightcol" style="position:absolute; top:0; bottom:0; right:0; width:25%; min-width:200px; margin-top:120px;">
    <div class="sidebar_item_title">Protected Areas & Campaigns</div>
    <div class="sidebar_item_content" style="width:100%; background-color:rgba(255,255,255,0.7); height:90%; overflow:auto;">
        <!-- List of MPAs here with boundaries -->
        <ul id="member-list">
        {% comment %}
        {% for campaign in member_campaigns %}
            <li><a href="{{ campaign.get_absolute_url }}">{{ campaign.name }} <span class="tag">campaign</span></a></li>
        {% endfor %}
        {% for mpa in member_mpas %}
            <li><a href="{{ mpa.get_absolute_url }}">{{ mpa.name }} {{ mpa.designation }} - {{ mpa.country }}</a></li>
        {% endfor %}
        {% endcomment %}
        </ul>
        
    </div>
</div>
<div class="clear"></div>
{% endblock %}