{% extends 'src_base.html' %}
{% load typogrify_tags %}
{%block bodyid%}id="book-page"{%endblock%}								
{%block metadescription%}Buy the Book: {{object.title}}{%endblock%}			
{%block extrahead%}
    <meta property="og:site_name" content="luxagraf:src"/>
    <meta property="og:locale" content="en_US"/>
    <meta property="og:type" content="book"/>
    <meta property="og:title" content="{{object.title}}"/>
    <meta property="og:url" content="https://luxagraf.net{{object.get_absolute_url}}"/>
    <meta property="og:description" content="It's time to stop fighting the web's flexible nature. Discover how simple tools like CSS media queries, fluid layouts and flexible media can transform your website from fixed-width failure to responsive success."/>
    <meta property="book:release_date" content="{{object.pub_date}}"/>
    <meta property="book:tag" content="Responsive Web Design">
    <meta property="book:tag" content="Web Development">
    <meta property="og:image" content="{{object.get_image_url}}"/>
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:description" content="It's time to stop fighting the web's flexible nature. Discover how simple tools like CSS media queries, fluid layouts and flexible media can transform your website from fixed-width failure to responsive success."/>
    <meta name="twitter:title" content="{{object.title}}"/>
    <meta name="twitter:site" content="@luxagraf"/>
    <meta name="twitter:domain" content="luxagraf"/>
    <meta name="twitter:image:src" content="{{object.get_image_url}}"/>
    <meta name="twitter:creator" content="@luxagraf"/>
{%endblock%}			
{%block pagetitle%}{{object.title}} | Books | luxagraf:src{%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="/src/" title="luxagraf:src" itemprop="url"><span itemprop="title"><code>src</code></span></a> &rarr; </li>
        <li><a href="/src/books/" title="luxagraf:src books" itemprop="url"><span itemprop="title">Books</span></a> </li>
    </ul>
    <main role="main" itemprop="mainEntity" itemscope itemtype="http://schema.org/Book">
    <h1 class="book-title" itemprop="name">{{object.title|smartypants|widont|safe}}</h1>
    <div class="book-cover-wrapper"><img src="{{object.get_image_url}}" alt="{{object.title}} cover"  /></div>
    <div class="meta-cover">
        <dl class="book-metadata">
            <dt>Published</dt>
            <dd>{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></dd>
            <dt>Last Updated</dt>
            <dd>{{object.last_updated|date:"F"}} <span>{{object.last_updated|date:"j, Y"}}</span></dd>
            <dt>Pages</dt>
            <dd>{{object.pages}}</dd>
            <dt>Buy it</dt>
            <dd>{%if object.price_sale < object.price%}<span class="strike">${{object.price|floatformat:"0"}}</span> <span class="alert">${{object.price_sale|floatformat:"0"}}</span>{%else%}${{object.price|floatformat:"0" }}{%endif%}</dd>
        </dl>
    </div>
    <div class="paypal-form-wrapper">
<script src="https://gumroad.com/js/gumroad.js"></script>
<a target="_blank" class="gumroad-button btn-top" href="https://gum.co/rwd-b">Buy it Now</a>
{%comment%}{{paypal_form.render}}{%endcomment%}
    </div>
    <div class="highlights">
    <h4>Learn Responsive Design:</h4>
    <article class="h-entry hentry post--article book" itemscope itemType="http://schema.org/Article">
    {{object.body_html|safe|amp|smartypants}}

<script src="https://gumroad.com/js/gumroad.js"></script>
<a target="_blank" class="gumroad-button btn-bottom" href="https://gum.co/rwd-b">Buy it Now</a>
{%comment%}{{paypal_form.render}}{%endcomment%}
    </article>
    </div>
</main>
{% endblock %}