{%- assign comments = site.data.comments | where: "url", page.url -%}
{%- assign comments_size = comments | size -%}

<p>&nbsp;</p>

<h3>Comments</h3>

<div class="showSignedOut row">
    <div class="col">
        <a href="#" onclick="startLogin();">Sign in to leave a comment</a>
    </div>
</div>

<div class="showSignedIn row">
    <div class="col">
        You're signed in as <span id="currentUserName"></span>, and the new comment form is coming soon, I promise! <br />
        <a href="#" onclick="signOut()">Sign out</a>
    </div>
</div>

{%- if comments_size > 0 -%}
{%- for comment in comments -%}
<hr />
<div class="row">
    <div class="col-md-1">
        <img src="https://www.gravatar.com/avatar/{{comment.emailHash}}" alt="Profile image for {{comment.name}}" />
    </div>

    <div class="col-md-11">
        <strong>{{comment.name}}</strong> <small>{{comment.datetime}}</small><br />
        {{comment.comment}}
    </div>    
</div>
{%- endfor -%}
{%- endif -%}

<p>&nbsp;</p>