{% extends 'base.html' %}
{% load typogrify_tags %}
{% block extrahead %}
<style>
#detail-map-canvas { height: 100%;}
</style>
{% endblock %}
{% block bodyid %}class="detail"{%endblock%}
{% block primary %}
<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
        <li><a href="{% url 'sightings:list' %}" title="See all" itemprop="url"><span itemprop="title">Dialogues</span></a>&rarr; </li>
        <li><span itemprop="title">{{object.common_name}}</span></li>
    </ul>

    <main>
    <article>
        <header class="tight">
            <h1 class="hed">{{object.common_name}}</h1>
            <h2 class="post-subtitle">{{object.scientific_name}}</h2>
            <h3 class="post-subtitle-segundo">Family {{object.apclass.scientific_name}} ({{object.apclass}})</h3>
        </header>
    {% if object.body_html %}{{object.body_html|safe|smartypants|widont}}{%endif%}
{%if recording %}
<div class="audio-figure">
<audio autoplay="autoplay" controls="controls">  
    <source src="/media/{{recording.audio}}" />  
</audio> 
<small>Audio recorded by {{recording.recorder}} on {{recording.pub_date|date:"F j, Y"}} in {{recording.location}}. <a href="{{recording.link}}">&copy; {{recording.copyright}}</a></small>
</div>
{%endif%}
 {% if field_notes %}
            <h4>Field Notes</h4>{% for note in field_notes %}
                {{note.body_html|safe|smartypants}}
                <p class="post-subtitle-segundo">&ndash; <a href="{{note.sighting.location.get_absolute_url}}">{{note.sighting.location}}</a>, {{note.sighting.location.comma_name}}, {{note.sighting.pub_date|date:"M Y"}}</p>
                <hr />
        {%endfor%}
{%endif%}
        <h5>Seen at</h5>
        <ul>{%for sight in sighting %}
            <li><a href="{{sight.location.get_absolute_url}}">{{sight.location}}</a>, {{sight.location.comma_name}}, {{sight.pub_date|date:"M Y"}}</li>
        {%endfor%}
</article>
</main>
{% endblock %}

{% block js %}
<script src="/media/js/leaflet-master/leaflet-mod.js"></script>
<script src="/media/js/detail.js"></script>
<script type="text/javascript">
sightings = [];
{% for s in sighting %}
sightings.push(['{{s.latitude}}', '{{s.longitude}}']);
{% endfor %}
window.onload = function() {
    createBirdMap({% for s in sighting %}{% if forloop.first %}{{s.latitude}},{{s.longitude}}{%endif%}{%endfor%}, 5, { type:'point', lat:'{{sighting.latitude}}', lon:'{{sighting.longitude}}'}, sightings); return false;
}
</script>
{% endblock %}