{% extends 'base.html' %}
{% block title %}{{ article.title }} | {{ SITENAME }}{% endblock %}
{% block metadesc %}{{ article.description|e }}{% endblock %}

{% block header %}
<!-- Extra Header for IPython Notebooks
================================================== -->
  {% if EXTRA_HEADER %}
    {{ EXTRA_HEADER }}
  {% endif %}
{% endblock %}

{% block twittercards %}
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@{{ TWITTER_NAME }}">
  <meta name="twitter:creator" content="@{{ TWITTER_NAME }}">
  <meta name="twitter:domain" content="{{ DOMAIN }}">
  <meta name="twitter:image" content="{{ SITEURL }}{{ AVATAR }}">
  <meta name="twitter:title" content="{{ article.title }}">
  <meta name="twitter:description" content="{{ article.description|e }}">
{% endblock %}

{% block content %}

  <h3 class="article-title"><a href="/{{ article.url }}" title="Permalink to {{ article.title }}">{{article.title}}</a></h3>
  <h6 class="article-date">{{ article.locale_date }}</h6>
  <div class="article-content">
    {{ article.content }}
  </div>
    {{ ARTICLE_FOOTER }}

    <a href="https://twitter.com/{{ TWITTER_NAME }}" class="twitter-follow-button" data-show-count="false">Follow @{{ TWITTER_NAME }}</a>
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="{{ TWITTER_NAME }}">Tweet</a>
    <div class="back-to-home"><a href="/">← Back to Home</a></div>
    <hr class="large">
    
    <!-- DISQUS -->
    {% if DISQUS_SITENAME %}
      <div id="disqus_thread"></div>
      <script type="text/javascript">
          /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
					var disqus_shortname = '{{ DISQUS_SITENAME }}'; // required: replace example with your forum shortname

          /* * * DON'T EDIT BELOW THIS LINE * * */
          (function() {
              var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
              dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
              (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
          })();
      </script>
      <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
      <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    {% endif %}

    <!-- ISSO -->
    {% if ISSO_URL %}
      <script data-isso="{{ ISSO_URL }}"
        data-isso-css="true"
        data-isso-lang="en"
        data-isso-reply-to-self="false"
        src="{{ ISSO_URL }}/js/embed.min.js">
      </script>
      <section id="isso-thread"></section>
    {% endif %}

		<!-- twitter.js -->
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

		<!-- fitvid.js -->
		<script src="/theme/js/jquery.fitvids.js"></script>
		<script>
			$(document).ready(function(){
				// Target your .container, .wrapper, .post, etc.
				$(".videobox").fitVids();
			});
		</script>

		<!-- image captions -->
		<script>
			$(document).ready(function() {
				$("#content img").each(function() {
			    if($(this).attr("alt"))
						$(this).wrap('<figure class="image"></figure>')
							.after('<figcaption>'+$(this).attr("alt")+'</figcaption>');
				});
			});
		</script>

{% endblock %}