{% extends 'base.html' %}
{% load get_image_by_size %}
{% block extrahead %}
<style>
#detail-map-canvas { height: 100%;}
</style>
{% endblock %}
{% block bodyid %}class="birds"{%endblock%}
{% block primary %}
<main>
<article>
<h1>{{object.common_name}}</h1>
<h2 class="sci">{{object.scientific_name}}</h2>
<h3 class="sci">Family {{object.bird_class.scientific_name}} ({{object.bird_class}})</h3>
{% for image in sighting.images.all %}
<img class="picfull" sizes="(max-width: 680px) 100vw, (min-width: 681) 680px"
     srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{size}}w{% if forloop.last%},"{%else%}, {%endif%}{%if forloop.last%}
     src="{% get_image_by_size image size %}"{%endif%}{%endfor%} alt="{{image.alt}} ({{sighting.bird.scientific_name}}) photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}Scott Gilbertson{%endif%}">
{%endfor%}

<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>

<p id="endnode">Seen at {{sighting.location}}, {{sighting.location.comma_name}}  in {{sighting.date|date:"M Y"}} by {% for person in sighting.seen_by.all %}<a href="/birds/{{person}}/">{{person}}</a>{%if forloop.last %}{%else%}{% if forloop.revcounter == 2 %}, and {%else%}, {%endif%}{%endif%}{%endfor%}</p>
{% if recording.audio %}
{%endif%}
</article>
</main>
{% endblock %}

{% block js %}
<script src="/media/js/leaflet-master/leaflet-mod.js"></script>
<script src="/media/js/detail.min.js"></script>
<script type="text/javascript">
window.onload = function() {
    createBirdMap({{sighting.latitude}},{{sighting.longitude}}, 12, { type:'point', lat:'{{sighting.latitude}}', lon:'{{sighting.longitude}}'}); return false;
}
</script>
{% endblock %}