{% set is_authed = request.user and request.user.authenticated %}

{% macro render_comment(comment, shop, request, max_depth=5) %}
    {% if comment.depth <= max_depth and (comment.approved or (is_authed and (shop.is_owner(request.user) or shop.is_editor(request.user)))) %}
    <div id="comment-{{ comment.id }}" class="comment{% if comment.parent_id %} reply comment-reply{% endif %}" style="margin-left: {{ comment.depth * 20 }}px; margin-bottom: 20px;">
        <div class="comment-header">
            <strong>{{ comment.user.name if comment.user else "Anonymous" }}</strong>
            <span class="comment-date">{{ comment.ago_string }}</span>
            {% if comment.title %}
                <span class="comment-title">{{ comment.title }}</span>
            {% endif %}
            {% if not comment.approved %}
                <span class="comment-status comment-pending">[Pending Approval]</span>
            {% endif %}
        </div>

        <div class="comment-content">
            {{ comment.data_html | safe }}
        </div>

        {% if is_authed %}
        <div class="comment-actions">
            {% if request.user.id == comment.user_id or comment.can_user_moderate(request.user, shop) %}
                <input type="submit" value="Delete" class="delete-link" onclick="return confirm('Are you sure you want to delete this comment?')" form="delete-{{ comment.id }}" />
                <form id="delete-{{ comment.id }}" method="post" action="/comments/{{ comment.id }}/delete" class="hidden-form"></form>
            {% endif %}

            {% if comment.can_user_moderate(request.user, shop) %}
                {% if comment.approved %}
                    <input type="submit" value="Unapprove" class="moderate-link" form="unapprove-{{ comment.id }}" />
                    <form id="unapprove-{{ comment.id }}" method="post" action="/comments/{{ comment.id }}/unapprove" class="hidden-form"></form>
                {% else %}
                    <input type="submit" value="Approve" class="moderate-link" form="approve-{{ comment.id }}" />
                    <form id="approve-{{ comment.id }}" method="post" action="/comments/{{ comment.id }}/approve" class="hidden-form"></form>
                {% endif %}
            {% endif %}

            {% if request.user.id == comment.user_id or comment.can_user_moderate(request.user, shop) %}
                <a href="/comments/{{ comment.id }}/edit" class="edit-link">Edit</a>
            {% endif %}

            {% if not comment.is_locked %}
                {% set can_comment, error_msg = comment.can_user_comment(request.user, shop) %}
                {% if can_comment %}
                    <a href="/comments/{{ comment.id }}/reply" class="reply-link">Reply</a>
                {% endif %}
            {% endif %}
        </div>
        {% endif %}

        {% if comment.enabled_children %}
            {% for child in comment.enabled_children %}
                {{ render_comment(child, shop, request, max_depth) }}
            {% endfor %}
        {% endif %}
    </div>
    {% endif %}
{% endmacro %}

{% if shop.comments_enabled %}
<div id="comments" class="comments-section">
    {% if comments %}
        <h3>Comments & Reviews ({{ product.public_comment_count }})</h3>
    {% endif %}

    <div id="comments-list">
    {% if comments %}
        {% for comment in comments %}
            {{ render_comment(comment, shop, request) }}
        {% endfor %}
    {% endif %}
    </div>

    <!-- Comment Form -->
    {% if is_authed %}
        {% set can_comment, error_msg = (True, None) %}
        {% if product %}
            {% set can_comment, error_msg = product.can_user_comment(request.user, shop) %}
        {% endif %}

        {% if can_comment %}
            <div class="comment-form">
                <h4>Leave a Comment</h4>
                <form method="post" action="/comments/new">
                    <input type="hidden" name="product_id" value="{{ product.id if product else '' }}" />
                    <input type="hidden" name="parent_id" value="" />

                    <div>
                        <label for="comment-data">Comment:</label>
                        <textarea name="data" id="comment-data" rows="4" style="width: 100%;" required></textarea>
                    </div>

                    <br/>

                    <div>
                        <input type="submit" value="Send Comment" class="mps-comment-form-button" />
                    </div>
                </form>
            </div>
        {% else %}
            <p class="comment-error">{{ error_msg }}</p>
        {% endif %}
    {% else %}
        <div class="comment-form">
            <h4>Leave a Comment</h4>
            <form method="post" action="/comments/new">
                <input type="hidden" name="product_id" value="{{ product.id if product else '' }}" />
                <input type="hidden" name="parent_id" value="" />

                <div>
                    <label for="comment-data">Comment:</label>
                    <textarea name="data" id="comment-data" rows="4" style="width: 100%;" required></textarea>
                </div>

                <div>
                    <label for="comment-email">Email:</label>
                    <input type="email" name="email" id="comment-email" style="width: 100%;" required />
                </div>

                <input
                    name="email2"
                    type="email"
                    id="email2_input"
                    value=""
                    tabindex="-1"
                    autocomplete="off"
                />

                <br/>

                <div>
                    <input type="submit" value="Send Comment" class="mps-comment-form-button" />
                </div>
            </form>
        </div>
    {% endif %}
</div>
<script src="/static/js/comments.js"></script>
{% endif %}
