{{!< default}}

{{#post}}
<article class="post-content {{post_class}} {{#unless feature_image}}no-image{{/unless}}">

    <header class="post-content-header">
        <h1 class="post-content-title">{{title}}</h1>
    </header>

    {{#if custom_excerpt}}
        <p class="post-content-excerpt">{{custom_excerpt}}</p>
    {{/if}}

    {{#if feature_image}}
    <div class="post-content-image">
        <img class="kg-image" src="{{feature_image}}" alt="{{title}}" />
    </div>
    {{/if}}

    <div class="post-content-body">
        {{content}}
    </div>

    {{!-- Email subscribe form at the bottom of the page --}}
    {{#if @labs.subscribers}}
    <section class="subscribe-form">
        <h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
        <p>Get the latest posts delivered right to your inbox</p>
        {{subscribe_form placeholder="youremail@example.com"}}
    </section>
    {{/if}}

    <footer class="post-content-footer">

        {{!-- There are two options for how we display the byline/author-info.
        If the post has more than one author, we load a specific template
        from includes/byline-multiple.hbs, otherwise, we just use the
        default byline. --}}

    </footer>

    {{!--
    <section class="post-content-comments">
        If you want to embed comments, this is a good place to do it!
    </section>
    --}}

</article>
{{/post}}

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
// Layout Script for Ghost Gallery Cards
var images = document.querySelectorAll('.kg-gallery-image img');
images.forEach(function (image) {
    var container = image.closest('.kg-gallery-image');
    var width = image.attributes.width.value;
    var height = image.attributes.height.value;
    var ratio = width / height;
    container.style.flex = ratio + ' 1 0%';
})
</script>
{{/contentFor}}