{%- 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">
        <p>You're signed in as <span id="currentUserName"></span> | <a href="#" onclick="signOut()">Sign out</a></p>
        <div class="form-group" id="commentBox">
            <label for="commentText">Comment</label>
            <textarea class="form-control" id="commentText" rows="3"></textarea>
        </div>
        <button type="button" class="btn btn-outline-info" id="submitButton" onclick="submitComment()">Add your comment</button>
        <div class="spinner-border" role="status" id="submittingComment">
            <span class="sr-only">Submitting comment...</span>
        </div>
        <div class="alert alert-success" role="alert" id="commentSuccess">
            Your comment has been submitted - it will appear here after it has been approved.
          </div>
          <div class="alert alert-danger" role="alert" id="commentError">
            There was an error submitting your comment, sorry!
          </div>
    </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 -%}

{%- if comments_size == 0 -%}
<hr />
<p>There are no comments on this post yet. Be the first to leave one!</p>
{%- endif -%}

<p>&nbsp;</p>