+{% 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 %}

+<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">Plants and Animals</span></a></li>

+ </ul>

+

+<main>

+<article>

+<h1>{{object.common_name}}</h1>

+<h2 class="sci">{{object.scientific_name}}</h2>

+<h3 class="sci">Family {{object.apclass.scientific_name}} ({{object.apclass}})</h3>

+{% load get_image_by_size %}

+{% load get_image_width %}

+<div class="post--image">

+<figure>

+<img class="picfull" sizes="(max-width: 680px) 100vw, (min-width: 681) 680px" srcset="{% for size in sighting.image.sizes.all%}{% get_image_by_size sighting.image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}

+ {% for size in sighting.image.sizes.all%}{%if forloop.first %} src="{% get_image_by_size sighting.image size.name %}"{%endif%}{%endfor%} alt="{{sighting.image.alt}} photographed by {% if sighting.image.photo_credit_source %}{{sighting.image.photo_credit_source}}{%else%}luxagraf{%endif%}" >

+{% if sighting.image.photo_credit_source %}<figcaption>photo by <a href="{{sighting.image.photo_credit_url}}">{{sighting.image.photo_credit_source}}</a></figcaption>{%endif%}

+</figure>

+</div>

+{%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%}

+<p id="endnode">Seen at {%for sight in sighting %}{{sight.location}}, {{sight.location.comma_name}} in {{sight.date|date:"M Y"}} by {% for person in sight.seen_by.all %}<a href="{% url 'sightings:list_by_person' person %}">{% if person.username == "luxagraf"%}Scott{%else%}{{person.username|capfirst}}{%endif%}</a>{%if forloop.last %}. {%else%}{% if forloop.revcounter == 2 %}, and {%else%}, {%endif%}{%endif%}{%endfor%}{%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.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 %}